frio mobile: fix: right offcanvas

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index daa2afd75fc8a3255dbccd79545c778c1b60bcad..b9ffdc2f5ef0be4829d591752aa7ac9b8042b478 100644 (file)
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -1,6 +1,6 @@
 /*
     Created on : 17.02.2016, 23:55:45
-    Author     : rabuzarus
+    Author     : rabuzarus and contributors
 */
 
 body {
@@ -383,6 +383,86 @@ header #banner #logo-img,
        color: $nav_icon_color;
 }
 
+/* offcanvas section */
+
+/* Right offcanvas uses: #offcanvasUsermenu, .offcanvas-right-active
+   .offcanvas-right and .offcanvas-right-overlay */
+.off-canvas {
+       width: 300px;
+       position: fixed;
+       left: 0;
+       top: 0;
+       height: 100%;
+       overflow-x: hidden;
+       overflow-y: auto;
+       background-color: #333;
+       transform: translateX(-100%);
+       transition: 0.4s ease-in-out;
+       z-index: 1060;
+}
+#offcanvasUsermenu {
+       width: 300px;
+       position: fixed;
+       right: 0px;
+       top: 50px;
+       height: 100%;
+       overflow-x: hidden;
+       overflow-y: auto;
+       background-color: #333;
+       transform: translateX(100%);
+       transition: 0.4s ease-in-out;
+       z-index: 1060;
+}
+.offcanvas-active .off-canvas {
+       transform: translateX(0);
+}
+.offcanvas-right-active #offcanvasUsermenu {
+       transform: translateX(0);
+}
+.navbar-fixed-top {
+       transition: 0.4s ease-in-out;
+       width: 100%;
+}
+.page-wrapper {
+       padding-top: 50px;
+       transition: 0.4s ease-in-out;
+}
+.offcanvas-active .page-wrapper,
+.offcanvas-active .navbar-fixed-top {
+       transform: translateX(300px);
+}
+
+.offcanvas-overlay {
+       position: fixed;
+       left: 0;
+       top: 0;
+       width: 100%;
+       height: 100%;
+       background-color: rgba(0, 0, 0, 0.5);
+       z-index: 1050;
+       visibility: hidden;
+       opacity: 0;
+       transition: 0.4s ease-in-out;
+}
+.offcanvas-right-overlay {
+       position: fixed;
+       right: 0;
+       top: 50px;
+       width: 100%;
+       height: 100%;
+       background-color: rgba(0, 0, 0, 0.5);
+       z-index: 1050;
+       visibility: hidden;
+       opacity: 0;
+       transition: 0.4s ease-in-out;
+}
+.offcanvas-active .offcanvas-overlay,
+.offcanvas-right-active .offcanvas-right-overlay {
+       opacity: 1;
+       visibility: visible;
+}
+/* offcanvas section ends */
+
 /* NavBar */
 .topbar {
        position: fixed;
@@ -470,7 +550,8 @@ nav.navbar .nav > li > button {
 #topbar-first .nav > li > button:not(#main-menu):hover,
 #topbar-first .nav > li > button:not(#main-menu):focus,
 nav.navbar .nav > li > a:hover,
-nav.navbar .nav > li > a:focus nav.navbar .nav > li > button:hover,
+nav.navbar .nav > li > a:focus,
+nav.navbar .nav > li > button:hover,
 nav.navbar .nav > li > button:focus {
        background-color: $nav_icon_hover_color;
 }
@@ -663,34 +744,43 @@ nav.navbar .nav > li > button:focus {
        right: -2px;
        background-color: #ff8989;
 }
-#myNavmenu {
+#offcanvasUsermenu {
        top: 50px;
        background-color: $background_color;
        border-top: 0;
        border-right: 0;
        border-bottom: 0;
        border-left-color: $nav_icon_color;
-       box-shadow: 0 0 3px black;
+       box-shadow: -3px 0 3px -3px black;
+}
+#offcanvasUsermenu .nav-container {
+       /* required to compensate for moving the container below the topnav bar */
+       margin-bottom: 50px;
 }
-#myNavmenu ul,
-#myNavmenu ul li:first-child,
-#myNavmenu ul,
-#myNavmenu ul li:last-child {
+#offcanvasUsermenu li.list-group-separator {
+       background-color: transparent;
+       height: 3px;
+}
+
+#offcanvasUsermenu ul,
+#offcanvasUsermenu ul li:first-child,
+#offcanvasUsermenu ul,
+#offcanvasUsermenu ul li:last-child {
        border-radius: 0;
 }
-#myNavmenu li,
-#myNavmenu a {
+#offcanvasUsermenu li,
+#offcanvasUsermenu a {
        background-color: $nav_bg;
        color: $nav_icon_color;
 }
 
-#myNavmenu li.list-group-item {
+#offcanvasUsermenu li.list-group-item {
        border-color: $background_color;
 }
-#myNavmenu a {
+#offcanvasUsermenu a {
        display: block;
 }
-#myNavmenu li.nav-sitename {
+#offcanvasUsermenu li.nav-sitename {
        font-weight: bold;
 }
 #topbar-first .dropdown.account li#nav-sitename {

diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js
index c335df181cea6dd7c860896b0cae653c20d8920c..b21869fee8253b96645882db508997a1d9d925d9 100644 (file)
--- a/view/theme/frio/js/theme.js
+++ b/view/theme/frio/js/theme.js
@@ -373,6 +373,19 @@ $(document).ready(function () {
                        $body.removeClass("aside-out");
                });
 
+       $(".offcanvas-right-toggle").on("click", function (event) {
+               event.preventDefault();
+               // FIXME: Doesn't toggle, menu stays open even when pressing the button again
+               $("body").toggleClass("offcanvas-right-active");
+       });
+
+       $(document).on("mouseup touchend", function (event) {
+               var offCanvas = $(".offcanvas-right");
+               if (!offCanvas.is(event.target) && offCanvas.has(event.target).length === 0) {
+                       $("body").removeClass("offcanvas-right-active");
+               }
+       });
+
        // Event listener for 'Show & hide event map' button in the network stream.
        $body.on("click", ".event-map-btn", function () {
                showHideEventMap(this);

diff --git a/view/theme/frio/templates/nav.tpl b/view/theme/frio/templates/nav.tpl
index e448313ea8e1e33bb1a826dc29bf16c9c18e2116..a00582923c9252be8299b3dbbcc29b78a7701167 100644 (file)
--- a/view/theme/frio/templates/nav.tpl
+++ b/view/theme/frio/templates/nav.tpl
@@ -7,7 +7,7 @@
                <div id="banner" class="hidden-sm hidden-xs">
                        {{* show on remote/visitor connections an other logo which symols that fact*}}
                        {{if $nav.remote}}
-                               <a hruf="{{$baseurl}}">
+                               <a href="{{$baseurl}}">
                                        <div id="remote-logo-img" aria-label="{{$home}}"></div>
                                </a>
                        {{else}}
@@ -28,8 +28,8 @@
                                <div class="topbar-nav" role="navigation">
 
                                        {{* Buttons for the mobile view *}}
-                                       <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="offcanvas"
-                                               data-target="#myNavmenu" aria-controls="myNavmenu" aria-haspopup="true">
+                                       <button type="button" class="navbar-toggle offcanvas-right-toggle pull-right" aria-controls="myNavmenu"
+                                               aria-haspopup="true">
                                                <span class="sr-only">Toggle navigation</span>
                                                <i class="fa fa-ellipsis-v fa-fw fa-lg" aria-hidden="true"></i>
                                        </button>
@@ -178,58 +178,81 @@
                                                                                {{/if}}
                                                                        {{/if}}
                                                                        {{foreach $nav.usermenu as $usermenu}}
-                                                                               <li role="presentation"><a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}"
-                                                                                               title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
+                                                                               <li role="presentation">
+                                                                                       <a role="menuitem" class="{{$usermenu.2}}" href="{{$usermenu.0}}"
+                                                                                               title="{{$usermenu.3}}">
+                                                                                               {{$usermenu.1}}
+                                                                                       </a>
+                                                                               </li>
                                                                        {{/foreach}}
                                                                        <li role="presentation" class="divider"></li>
                                                                        {{if $nav.notifications}}
-                                                                               <li role="presentation"><a role="menuitem" href="{{$nav.notifications.all.0}}"
-                                                                                               title="{{$nav.notifications.1}}"><i class="fa fa-bell fa-fw" aria-hidden="true"></i>
-                                                                                               {{$nav.notifications.1}}</a></li>
+                                                                               <li role="presentation">
+                                                                                       <a role="menuitem" href="{{$nav.notifications.all.0}}" title="{{$nav.notifications.1}}">
+                                                                                               <i class="fa fa-bell fa-fw" aria-hidden="true"></i>
+                                                                                               {{$nav.notifications.1}}
+                                                                                       </a>
+                                                                               </li>
                                                                        {{/if}}
                                                                        {{if $nav.messages}}
                                                                                <li role="presentation"><a role="menuitem"
                                                                                                class="nav-commlink {{$nav.messages.2}} {{$sel.messages}}"
-                                                                                               href="{{$nav.messages.0}}" title="{{$nav.messages.3}}"><i
-                                                                                                       class="fa fa-envelope fa-fw" aria-hidden="true"></i> {{$nav.messages.1}} <span
-                                                                                                       id="mail-update-li" class="nav-mail-badge badge nav-notification"></span></a>
+                                                                                               href="{{$nav.messages.0}}" title="{{$nav.messages.3}}">
+                                                                                               <i class="fa fa-envelope fa-fw" aria-hidden="true"></i>
+                                                                                               {{$nav.messages.1}} <span id="mail-update-li"
+                                                                                                       class="nav-mail-badge badge nav-notification"></span>
+                                                                                       </a>
                                                                                </li>
                                                                        {{/if}}
                                                                        <li role="presentation" class="divider"></li>
                                                                        {{if $nav.contacts}}
                                                                                <li role="presentation"><a role="menuitem" id="nav-menu-contacts-link"
                                                                                                class="nav-link {{$nav.contacts.2}}" href="{{$nav.contacts.0}}"
-                                                                                               title="{{$nav.contacts.3}}"><i class="fa fa-users fa-fw" aria-hidden="true"></i>
-                                                                                               {{$nav.contacts.1}}</a></li>
+                                                                                               title="{{$nav.contacts.3}}">
+                                                                                               <i class="fa fa-users fa-fw" aria-hidden="true"></i>
+                                                                                               {{$nav.contacts.1}}
+                                                                                       </a>
+                                                                               </li>
                                                                        {{/if}}
                                                                        {{if $nav.delegation}}
-                                                                               <li role="presentation"><a role="menuitem" id="nav-delegation-link"
+                                                                               <li role="presentation">
+                                                                                       <a role="menuitem" id="nav-delegation-link"
                                                                                                class="nav-commlink {{$nav.delegation.2}} {{$sel.delegation}}"
-                                                                                               href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i
-                                                                                                       class="fa fa-flag fa-fw" aria-hidden="true"></i> {{$nav.delegation.1}}</a></li>
+                                                                                               href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}">
+                                                                                               <i class="fa fa-flag fa-fw" aria-hidden="true"></i> {{$nav.delegation.1}}
+                                                                                       </a>
+                                                                               </li>
                                                                        {{/if}}
-                                                                       <li role="presentation"><a role="menuitem" id="nav-directory-link"
-                                                                                       class="nav-link {{$nav.directory.2}}" href="{{$nav.directory.0}}"
-                                                                                       title="{{$nav.directory.3}}"><i class="fa fa-sitemap fa-fw"
-                                                                                               aria-hidden="true"></i>{{$nav.directory.1}}</a></li>
+                                                                       <li role="presentation">
+                                                                               <a role="menuitem" id="nav-directory-link" class="nav-link {{$nav.directory.2}}"
+                                                                                       href="{{$nav.directory.0}}" title="{{$nav.directory.3}}">
+                                                                                       <i class="fa fa-sitemap fa-fw" aria-hidden="true"></i>{{$nav.directory.1}}
+                                                                               </a>
+                                                                       </li>
                                                                        <li role="presentation" class="divider"></li>
                                                                        {{if $nav.apps}}
-                                                                               <li role="presentation"><a role="menuitem" id="nav-apps-link"
-                                                                                               class="nav-link {{$nav.apps.2}}" href="{{$nav.apps.0}}" title="{{$nav.apps.3}}"><i
-                                                                                                       class="fa fa-puzzle-piece fa-fw" aria-hidden="true"></i> {{$nav.apps.1}}</a>
+                                                                               <li role="presentation">
+                                                                                       <a role="menuitem" id="nav-apps-link" class="nav-link {{$nav.apps.2}}"
+                                                                                               href="{{$nav.apps.0}}" title="{{$nav.apps.3}}">
+                                                                                               <i class="fa fa-puzzle-piece fa-fw" aria-hidden="true"></i> {{$nav.apps.1}}
+                                                                                       </a>
                                                                                <li role="presentation" class="divider"></li>
                                                                        {{/if}}
                                                                        {{if $nav.help}}
-                                                                               <li role="presentation"><a role="menuitem" id="nav-help-link"
-                                                                                               class="nav-link {{$nav.help.2}}" href="{{$nav.help.0}}" title="{{$nav.help.3}}"><i
-                                                                                                       class="fa fa-question-circle fa-fw" aria-hidden="true"></i> {{$nav.help.1}}</a>
+                                                                               <li role="presentation">
+                                                                                       <a role="menuitem" id="nav-help-link" class="nav-link {{$nav.help.2}}"
+                                                                                               href="{{$nav.help.0}}" title="{{$nav.help.3}}">
+                                                                                               <i class="fa fa-question-circle fa-fw" aria-hidden="true"></i> {{$nav.help.1}}
+                                                                                       </a>
                                                                                </li>
                                                                        {{/if}}
                                                                        {{if $nav.settings}}
-                                                                               <li role="presentation"><a role="menuitem" id="nav-settings-link"
-                                                                                               class="nav-link {{$nav.settings.2}}" href="{{$nav.settings.0}}"
-                                                                                               title="{{$nav.settings.3}}"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>
-                                                                                               {{$nav.settings.1}}</a></li>
+                                                                               <li role="presentation">
+                                                                                       <a role="menuitem" id="nav-settings-link" class="nav-link {{$nav.settings.2}}"
+                                                                                               href="{{$nav.settings.0}}" title="{{$nav.settings.3}}">
+                                                                                               <i class="fa fa-cog fa-fw" aria-hidden="true"></i> {{$nav.settings.1}}
+                                                                                       </a>
+                                                                               </li>
                                                                        {{/if}}
                                                                        {{if $nav.admin}}
                                                                                <li role="presentation"><a accesskey="a" role="menuitem" id="nav-admin-link"
@@ -260,13 +283,15 @@
                                                {{/if}}
 
                                                <!-- Language selector, I do not find it relevant, activate if necessary.
-                                       <li>{{$langselector}}</li>
-                               -->
+                                               <li>{{$langselector}}</li>
+                                               -->
                                        </ul>
                                </div>{{* End of right navbar *}}
 
-                               {{* The usermenu dropdown for the mobile view. It is called via the buttons. Have a look at the top of this file *}}
-                               <div id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-right offcanvas">
+                               {{* The usermenu dropdown for the mobile view. Offcanvas on the right side of the screen.
+                                       It is called via the buttons. Have a look at the top of this file *}}
+                               <div class="offcanvas-right-overlay visible-xs-block"></div>
+                               <div id="offcanvasUsermenu" class="offcanvas-right visible-xs-block">
                                        <div class="nav-container">
                                                <ul role="menu" class="list-group">
                                                        {{if $nav.remote}}
@@ -282,10 +307,14 @@
                                                                <li role="menuitem" class="list-group-item"><a role="menuitem" class="{{$usermenu.2}}"
                                                                                href="{{$usermenu.0}}" title="{{$usermenu.3}}">{{$usermenu.1}}</a></li>
                                                        {{/foreach}}
+                                                       {{if $nav.notifications || $nav.contacts || $nav.messages || $nav.delegation}}
+                                                               <li role="presentation" class="list-group-separator"></li>
+                                                       {{/if}}
                                                        {{if $nav.notifications}}
                                                                <li role="presentation" class="list-group-item"><a role="menuitem"
                                                                                href="{{$nav.notifications.all.0}}" title="{{$nav.notifications.1}}"><i
-                                                                                       class="fa fa-bell fa-fw" aria-hidden="true"></i> {{$nav.notifications.1}}</a></li>
+                                                                                       class="fa fa-bell fa-fw" aria-hidden="true"></i> {{$nav.notifications.1}}</a>
+                                                               </li>
                                                        {{/if}}
                                                        {{if $nav.contacts}}
                                                                <li role="presentation" class="list-group-item"><a role="menuitem"
@@ -305,21 +334,27 @@
                                                                                href="{{$nav.delegation.0}}" title="{{$nav.delegation.3}}"><i class="fa fa-flag fa-fw"
                                                                                        aria-hidden="true"></i> {{$nav.delegation.1}}</a></li>
                                                        {{/if}}
+                                                       {{if $nav.settings || $nav.admin || $nav.logout}}
+                                                               <li role="presentation" class="list-group-separator"></li>
+                                                       {{/if}}
                                                        {{if $nav.settings}}
-                                                               <li role="presentation" class="list-group-item"><a role="menuitem"
-                                                                               class="nav-link {{$nav.settings.2}}" href="{{$nav.settings.0}}"
+                                                               <li role="presentation" class="list-group-item">
+                                                                       <a role="menuitem" class="nav-link {{$nav.settings.2}}" href="{{$nav.settings.0}}"
                                                                                title="{{$nav.settings.3}}"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>
-                                                                               {{$nav.settings.1}}</a></li>
+                                                                               {{$nav.settings.1}}</a>
+                                                               </li>
                                                        {{/if}}
                                                        {{if $nav.admin}}
                                                                <li role="presentation" class="list-group-item"><a role="menuitem"
                                                                                class="nav-link {{$nav.admin.2}}" href="{{$nav.admin.0}}" title="{{$nav.admin.3}}"><i
-                                                                                       class="fa fa-user-secret fa-fw" aria-hidden="true"></i> {{$nav.admin.1}}</a></li>
+                                                                                       class="fa fa-user-secret fa-fw" aria-hidden="true"></i>
+                                                                               {{$nav.admin.1}}</a></li>
                                                        {{/if}}
                                                        {{if $nav.logout}}
                                                                <li role="presentation" class="list-group-item"><a role="menuitem"
                                                                                class="nav-link {{$nav.logout.2}}" href="{{$nav.logout.0}}" title="{{$nav.logout.3}}"><i
-                                                                                       class="fa fa fa-sign-out fa-fw" aria-hidden="true"></i> {{$nav.logout.1}}</a></li>
+                                                                                       class="fa fa fa-sign-out fa-fw" aria-hidden="true"></i>
+                                                                               {{$nav.logout.1}}</a></li>
                                                        {{else}}
                                                                <li role="presentation" class="list-group-item"><a role="menuitem"
                                                                                class="nav-login-link {{$nav.login.2}}" href="{{$nav.login.0}}"