mirror of
https://github.com/friendica/friendica
synced 2024-11-19 03:03:41 +00:00
Merge pull request #9844 from Extarys/offcanvas
[frio] Redo right offcanvas menu
This commit is contained in:
Hypolite Petovan
GitHub
commit
4be7fcf14c
3 changed files with 206 additions and 57 deletions
|
|
@ -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;
|
||||
}
|
||||
#myNavmenu ul,
|
||||
#myNavmenu ul li:first-child,
|
||||
#myNavmenu ul,
|
||||
#myNavmenu ul li:last-child {
|
||||
#offcanvasUsermenu .nav-container {
|
||||
/* required to compensate for moving the container below the topnav bar */
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
#offcanvasUsermenu li.divider {
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -373,6 +373,29 @@ $(document).ready(function () {
|
|||
$body.removeClass("aside-out");
|
||||
});
|
||||
|
||||
// Right offcanvas elements
|
||||
let $offcanvas_right_toggle = $(".offcanvas-right-toggle");
|
||||
let $offcanvas_right_container = $("#offcanvasUsermenu"); // Use ID for faster lookup, class is .offcanvas-right
|
||||
|
||||
$offcanvas_right_toggle.on("click", function (event) {
|
||||
event.preventDefault();
|
||||
$("body").toggleClass("offcanvas-right-active");
|
||||
});
|
||||
|
||||
// Close the right offcanvas menu when clicking somewhere
|
||||
$(document).on("mouseup touchend", function (event) {
|
||||
if (
|
||||
// Clicked element is not inside the menu
|
||||
!$offcanvas_right_container.is(event.target) &&
|
||||
$offcanvas_right_container.has(event.target).length === 0 &&
|
||||
// Clicked element is not the toggle button (taken care by the toggleClass above)
|
||||
!$offcanvas_right_toggle.is(event.target) &&
|
||||
$offcanvas_right_toggle.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);
|
||||
|
|
|
|||
|
|
@ -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,15 +28,15 @@
|
|||
<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="offcanvasUsermenu" 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>
|
||||
<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse"
|
||||
data-target="#search-mobile" aria-expanded="false" aria-controls="search-mobile">
|
||||
<span class="sr-only">Toggle Search</span>
|
||||
<i class="fa fa-search fa-fw fa-lg" aria-hidden="true" style="color:#FFF;"></i>
|
||||
<i class="fa fa-search fa-fw fa-lg" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button type="button" class="navbar-toggle collapsed pull-left visible-sm visible-xs"
|
||||
data-toggle="offcanvas" data-target="aside" aria-haspopup="true">
|
||||
|
|
@ -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}}
|
||||
|
|
@ -274,18 +299,23 @@
|
|||
<li role="menuitem" class="nav-sitename list-group-item">{{$nav.sitename}}</li>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
<li role="presentation" class="list-group-item"><img src="{{$nav.userinfo.icon}}"
|
||||
alt="{{$nav.userinfo.name}}"
|
||||
<li role="presentation" class="list-group-item">
|
||||
<img src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}"
|
||||
style="max-width:15px; max-height:15px; min-width:15px; min-height:15px; width:15px; height:15px;">
|
||||
{{$nav.userinfo.name}}{{if $nav.remote}} ({{$nav.remote}}){{/if}}</li>
|
||||
{{$nav.userinfo.name}}{{if $nav.remote}} ({{$nav.remote}}){{/if}}
|
||||
</li>
|
||||
{{foreach $nav.usermenu as $usermenu}}
|
||||
<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="divider"></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 +335,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="divider"></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}}"
|
||||
|
|
|
|||
Loading…
Reference in a new issue