Merge pull request #2221 from rabuzarus/2812_vier_mobile_icons

vier: make TopNavBar mobile friendly

diff --combined view/theme/vier/style.css
index 4719a273a5967fe0a5477ff2222c3ddd51ce1124,c854b26ddb1dfd406033aa064455f189fbdeaf34..84b3ff236169d14b32802fdbc16bdda344c058a7
--- 1/view/theme/vier/style.css
--- 2/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@@ -372,6 -372,13 +372,13 @@@ code 
    z-index: 100000;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
  }
+ 
+ /* some settings for different form-factors */
+ @media (min-width: 601px) {
+   a.mobile-view { display: none };
+   a.desktop-view { display: initial };
+ }
+ 
  /* tool */
  .tool {
    height: auto;
@@@ -928,33 -935,10 +935,33 @@@ ul.menu-popup .empty 
    background-color: #bdcdd4;
  }*/
  
 +#nav-notifications-menu > li {
 +  display: block;
 +  color: #737373;
 +  cursor: pointer;
 +}
 +
 +#nav-notifications-menu > li:hover {
 +  background-color: #e5e5e5;
 +  color: #000;
 +}
 +#nav-notifications-mark-all a {
 +  color: #737373;
 +}
 +
  #nav-notifications-menu img {
 -  float: left;
 -  margin-right: 5px;
 +  width: 32px;
 +  height: 32px;
 +  border-radius: 5px;
 +  margin: 0;
 +  padding: 0;
  }
 +
 +#nav-notifications-menu .notif-desc-wrapper a {
 +  display: inline;
 +  padding: 0px;
 +}
 +
  #nav-notifications-menu .contactname {
    font-weight: bold;
  }
@@@ -970,25 -954,6 +977,25 @@@
          padding: 7px 7px 0px 0px;
  }
  
 +.notif-entry-wrapper {
 +  padding: 5px 10px;
 +  min-height: 32px;
 +  /*border-bottom: 1px solid #DDDDDD;*/
 +}
 +
 +.notif-photo-wrapper {
 +  float: left;
 +  margin-right: 10px;
 +}
 +
 +.notif-photo-wrapper a {
 +  padding: 0 !important;
 +}
 +
 +.notif-desc-wrapper {
 +  overflow: hidden;
 +}
 +
  right_aside {
    display: none;
    vertical-align: top;

diff --combined view/theme/vier/templates/nav.tpl
index 320343bef87f260e46f52e199b972585a537b241,f1602597c8af0ee76db60f90e7d8193cdec36caa..d2b2838b3e2ee1b75b347d5c422486d2bc3fe945
--- 1/view/theme/vier/templates/nav.tpl
--- 2/view/theme/vier/templates/nav.tpl
+++ b/view/theme/vier/templates/nav.tpl
@@@ -14,24 -14,28 +14,28 @@@
                </li>
                {{if $nav.home}}
                        <li role="menuitem" id="nav-home-link" class="nav-menu {{$sel.home}}">
-                               <a accesskey="p" class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" >{{$nav.home.1}}</a>
+                               <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>
                        </li>
                {{/if}}
                {{if $nav.network}}
                        <li role="menuitem" id="nav-network-link" class="nav-menu {{$sel.network}}">
-                               <a accesskey="n" class="{{$nav.network.2}}" href="{{$nav.network.0}}" title="{{$nav.network.3}}" >{{$nav.network.1}}</a>
+                               <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>
                        </li>
                {{/if}}
                {{if $nav.events}}
                        <li role="menuitem" id="nav-events-link" class="nav-menu {{$sel.events}}">
-                               <a accesskey="e" class="{{$nav.events.2}}" href="{{$nav.events.0}}" title="{{$nav.events.3}}" >{{$nav.events.1}}</a>
+                               <a accesskey="e" class="{{$nav.events.2}} desktop-view" href="{{$nav.events.0}}" title="{{$nav.events.3}}" >{{$nav.events.1}}</a>
+                               <a class="{{$nav.events.2}} mobile-view" href="{{$nav.events.0}}" title="{{$nav.events.3}}" ><i class="icon s22 icon-calendar"></i></a>
                        </li>
                {{/if}}
                {{if $nav.community}}
                        <li role="menuitem" id="nav-community-link" class="nav-menu {{$sel.community}}">
-                               <a accesskey="c" class="{{$nav.community.2}}" href="{{$nav.community.0}}" title="{{$nav.community.3}}" >{{$nav.community.1}}</a>
+                               <a accesskey="c" class="{{$nav.community.2}} desktop-view" href="{{$nav.community.0}}" title="{{$nav.community.3}}" >{{$nav.community.1}}</a>
+                               <a class="{{$nav.community.2}} mobile-view" href="{{$nav.community.0}}" title="{{$nav.community.3}}" ><i class="icon s22 icon-bullseye"></i></a>
                        </li>
                {{/if}}
  
@@@ -109,15 -113,7 +113,15 @@@
  
  </nav>
  <ul id="nav-notifications-template" style="display:none;" rel="template">
 -      <li class="{4}"><a href="{0}" title="{5}"><img data-src="{1}">{2} <span class="notif-when">{3}</span></a></li>
 +      <li class="{4}" onclick="location.href='{0}';">
 +              <div class="notif-entry-wrapper">
 +                      <div class="notif-photo-wrapper"><a href="{6}"><img data-src="{1}"></a></div>
 +                      <div class="notif-desc-wrapper">
 +                              {8}{7}
 +                              <div><time class="notif-when" title="{5}">{3}</time></div>
 +                      </div>
 +              </div>
 +      </li>
  </ul>
  <!--
  <div class="icon-flag" style="position: fixed; bottom: 10px; left: 20px; z-index:9;">{{$langselector}}</div>