[vier] Add message icon link in header nav

diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css
index b528ca4bd0749a1abe0950add8253ecaef518476..bf7922287600bede9cb989348520eb09e50674d5 100644 (file)
--- a/view/theme/vier/mobile.css
+++ b/view/theme/vier/mobile.css
@@ -60,8 +60,8 @@ nav ul {
   .wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image {
     max-width: 350px;
   }
-  a.desktop-view { display: none; }
-  a.mobile-view { display: initial; }
+  .desktop-view { display: none; }
+  .mobile-view { display: initial; }
   #nav-apps-link { display: none; }
 
   .wall-item-container .wall-item-info { width: auto; }

diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index 6c4f2b20f3da2ea0c550ce48a8dfe8985bdc9d5d..eedbe09a45f149a412f83537341a4315a7b60f46 100644 (file)
--- a/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@ -365,10 +365,12 @@ pre code {
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 }
 
+.desktop-view { display: none; }
+
 /* some settings for different form-factors */
 @media (min-width: 601px) {
-       a.mobile-view { display: none };
-       a.desktop-view { display: initial };
+       .mobile-view { display: none!important; }
+       .desktop-view { display: initial; }
 }
 
 /* tool */
@@ -685,8 +687,11 @@ nav .nav-menu img {
        margin-right: 4px;
 }
 
-nav .nav-menu-icon .nav-notify {
+nav .nav-menu > a > .nav-notify,
+nav .nav-menu-icon > a > .nav-notify {
+       position: absolute;
        top: 3px;
+       right: -5px;
 }
 nav .nav-menu-label {
        margin: 3px 5px 0px;
@@ -738,33 +743,27 @@ nav .nav-menu:hover {
 
 nav .nav-notify {
        display: none;
-       position: absolute;
- /*  background-color: #36c; */
-        background-color: #F80;
-       /* background-color: #19aeff; */
+       background-color: #F80;
        -moz-border-radius: 5px 5px 5px 5px;
        -webkit-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
        font-size: 10px;
        padding: 1px 3px;
-       top: 0px;
-       /* right: -10px; */
-       right: -5px;
        min-width: 15px;
-       /* text-align: right; */
        text-align: center;
        color: white;
 }
-
 nav .nav-notify.show {
-       display: block;
+       display: inline-block;
 }
+
 nav #nav-help-link,
 nav #nav-search-link,
 nav #nav-directory-link,
 nav #nav-apps-link,
 nav #nav-apps-link,
 nav #nav-login-link,
+nav #nav-messages-linkmenu,
 nav #nav-notifications-linkmenu,
 nav #nav-site-linkmenu,
 nav #nav-contacts-linkmenu,
@@ -845,10 +844,6 @@ nav #nav-user-linkmenu {
        padding: 5px 10px; */
 }
 
-#mail-update {
-       top: 56px;
-}
-
 .notify-unseen {background-color: #FFF; }
 
 .notify-seen {

diff --git a/view/theme/vier/templates/nav.tpl b/view/theme/vier/templates/nav.tpl
index 777df44cd2e0bca81ae17f3946926945b2d94784..5f62773dbb5fbe6eb41c1d7abd8fbae0b8748735 100644 (file)
--- a/view/theme/vier/templates/nav.tpl
+++ b/view/theme/vier/templates/nav.tpl
@@ -14,16 +14,20 @@
                </li>
                {{if $nav.home}}
                        <li role="menuitem" id="nav-home-link" class="nav-menu {{$sel.home}}">
-                               <a accesskey="p" class="{{$nav.home.2}} desktop-view" href="{{$nav.home.0}}" title="{{$nav.home.3}}" >{{$nav.home.1}}</a>
-                               <a class="{{$nav.home.2}} mobile-view" href="{{$nav.home.0}}" title="{{$nav.home.3}}" ><i class="icon s22 icon-home"></i></a>
-                               <span id="home-update" class="nav-notify"></span>
+                               <a accesskey="p" class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" >
+                                       <span class="desktop-view">{{$nav.home.1}}</span>
+                                       <i class="icon s22 icon-home mobile-view"><span class="sr-only">{{$nav.home.1}}</span></i>
+                                       <span id="home-update" class="nav-notify"></span>
+                               </a>
                        </li>
                {{/if}}
                {{if $nav.network}}
                        <li role="menuitem" id="nav-network-link" class="nav-menu {{$sel.network}}">
-                               <a accesskey="n" class="{{$nav.network.2}} desktop-view" href="{{$nav.network.0}}" title="{{$nav.network.3}}" >{{$nav.network.1}}</a>
-                               <a class="{{$nav.network.2}} mobile-view" href="{{$nav.network.0}}" title="{{$nav.network.3}}" ><i class="icon s22 icon-th"></i></a>
-                               <span id="net-update" class="nav-notify"></span>
+                               <a accesskey="n" class="{{$nav.network.2}}" href="{{$nav.network.0}}" title="{{$nav.network.3}}" >
+                                       <span class="desktop-view">{{$nav.network.1}}</span>
+                                       <i class="icon s22 icon-th mobile-view"><span class="sr-only">{{$nav.network.1}}</span></i>
+                                       <span id="net-update" class="nav-notify"></span>
+                               </a>
                        </li>
                {{/if}}
                {{if $nav.events}}
@@ -48,9 +52,22 @@
                        </ul>
                </li>
 
+               {{if $nav.messages}}
+                       <li role="menu" aria-haspopup="true" id="nav-messages-linkmenu" class="nav-menu-icon">
+                               <a href="{{$nav.messages.0}}" title="{{$nav.messages.1}}">
+                                       <span class="icon s22 icon-envelope"><span class="sr-only">{{$nav.messages.1}}</span></span>
+                                       <span id="mail-update" class="nav-notify"></span>
+                               </a>
+                       </li>
+               {{/if}}
+
+
                {{if $nav.notifications}}
-                       <li role="menu" aria-haspopup="true" id="nav-notifications-linkmenu" class="nav-menu-icon"><a title="{{$nav.notifications.1}}"><span class="icon s22 icon-bell tilted-icon"><span class="sr-only">{{$nav.notifications.1}}</span></span></a>
-                               <span id="notify-update" class="nav-notify"></span>
+                       <li role="menu" aria-haspopup="true" id="nav-notifications-linkmenu" class="nav-menu-icon">
+                               <a title="{{$nav.notifications.1}}">
+                                       <span class="icon s22 icon-bell tilted-icon"><span class="sr-only">{{$nav.notifications.1}}</span></span>
+                                       <span id="notify-update" class="nav-notify"></span>
+                               </a>
                                <ul id="nav-notifications-menu" class="menu-popup">
                                        <li role="menuitem" id="nav-notifications-mark-all"><a onclick="notifyMarkAll(); return false;">{{$nav.notifications.mark.1}}</a></li>
                                        <li role="menuitem" id="nav-notifications-see-all"><a href="{{$nav.notifications.all.0}}">{{$nav.notifications.all.1}}</a></li>
@@ -65,7 +82,7 @@
                                <ul id="nav-user-menu" class="menu-popup">
                                        {{if $nav.introductions}}<li role="menuitem"><a class="{{$nav.introductions.2}}" href="{{$nav.introductions.0}}" title="{{$nav.introductions.3}}" >{{$nav.introductions.1}}</a><span id="intro-update-li" class="nav-notify"></span></li>{{/if}}
                                        {{if $nav.contacts}}<li role="menuitem"><a class="{{$nav.contacts.2}}" href="{{$nav.contacts.0}}" title="{{$nav.contacts.3}}" >{{$nav.contacts.1}}</a></li>{{/if}}
-                                       {{if $nav.messages}}<li role="menuitem"><a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" >{{$nav.messages.1}}</a><span id="mail-update" class="nav-notify"></span></a></li>{{/if}}
+                                       {{if $nav.messages}}<li role="menuitem"><a class="{{$nav.messages.2}}" href="{{$nav.messages.0}}" title="{{$nav.messages.3}}" >{{$nav.messages.1}} <span id="mail-update-li" class="nav-notify"></span></a></li>{{/if}}
                                        {{if $nav.manage}}<li role="menuitem"><a class="{{$nav.manage.2}}" href="{{$nav.manage.0}}" title="{{$nav.manage.3}}">{{$nav.manage.1}}</a></li>{{/if}}
                                        {{if $nav.usermenu.1}}<li role="menuitem"><a class="{{$nav.usermenu.1.2}}" href="{{$nav.usermenu.1.0}}" title="{{$nav.usermenu.1.3}}">{{$nav.usermenu.1.1}}</a></li>{{/if}}
                                        {{if $nav.settings}}<li role="menuitem"><a class="{{$nav.settings.2}}" href="{{$nav.settings.0}}" title="{{$nav.settings.3}}">{{$nav.settings.1}}</a></li>{{/if}}