fraport/fradrive
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

collapsible aside navigation

Browse Source
This commit is contained in:
Felix Hamann 2018-03-17 16:24:55 +01:00
parent be383f84b8
commit d480195b2d
6 changed files with 128 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
templates/default-layout.hamlet
View File

@ -1,11 +1,9 @@
<!-- navigation -->
<div .navbar-container>
^{navbar}
^{navbar}
<div .main>
<aside .main__aside>
^{asidenav}
^{asidenav}
<div .main__content>
<!-- breadcrumbs -->

16
templates/default-layout.lucius
View File

@ -46,9 +46,6 @@
--header-height-collapsed: 50px;
}
* {
box-sizing: border-box;
padding: 0;
@ -126,19 +123,6 @@ th {
min-height: calc(100vh - var(--header-height));
}
.main__aside {
width: 300px;
flex-shrink: 0;
padding-right: 20px;
padding-left: 4vw;
background-color: var(--darkbase);
/*background: -moz-linear-gradient(right, var(--darkbase) 0%, #395069 100%); /* FF3.6-15 */*/
/*background: -webkit-linear-gradient(right, var(--darkbase) 0%, #395069 100%); /* Chrome10-25,Safari5.1-6 */*/
/*background: linear-gradient(to left, var(--darkbase) 0%, #395069 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */*/
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1;
}
.main__content {
background-color: white;
padding: 20px 40px;

33
templates/widgets/asidenav.hamlet
View File

@ -1,17 +1,18 @@
<div .asidenav>
<div .asidenav__box>
<ul .asidenav__list>
$forall menuType <- menuTypes
$case menuType
$of NavbarLeft (MenuItem label route _)
<li .asidenav__list-item :Just route == mcurrentRoute:.asidenav__list-item--active>
<a .asidenav__link href=@{route}>#{label}
$of _
<aside .main__aside>
<div .asidenav>
<div .asidenav__box--dont-hide>
<ul .asidenav__list>
$forall menuType <- menuTypes
$case menuType
$of NavbarLeft (MenuItem label icon route _)
<li .asidenav__list-item :Just route == mcurrentRoute:.asidenav__list-item--active>
<a .asidenav__link.asidenav__icon--#{icon} href=@{route}>#{label}
$of _
<div .asidenav__box>
<h3 .asidenav__box-title>WiSe 17/18
<ul .asidenav__list>
<li>CD
<li>IxD
<li>Funktionale Programmierung
<li>Programmierung und Modellierung
<div .asidenav__box>
<h3 .asidenav__box-title>WiSe 17/18
<ul .asidenav__list>
<li>CD
<li>IxD
<li>Funktionale Programmierung
<li>Programmierung und Modellierung

55
templates/widgets/asidenav.julius Normal file
View File

@ -0,0 +1,55 @@
(function() {
'use strict';
window.utils = window.utils || {};
window.utils.aside = function(el) {
var asideEl = el;
var collapsed = false;
var collClass = 'main__aside--collapsed';
var animClass = 'main__aside--transitioning';
init();
function init() {
var collLS = window.localStorage.getItem('asidenavCollapsed') === 'true';
if (document.body.getBoundingClientRect().width < 999 || collLS) {
asideEl.classList.add(collClass);
collapsed = true;
}
}
function check() {
if (collapsed && !hasClass() || !collapsed && hasClass()) {
asideEl.classList.add(animClass);
asideEl.classList.toggle(collClass, collapsed);
window.localStorage.setItem('asidenavCollapsed', collapsed);
}
}
function hasClass() {
return asideEl.classList.contains(collClass);
}
asideEl.addEventListener('click', function(event) {
if (event.target === asideEl) {
collapsed = !collapsed;
check();
}
});
asideEl.addEventListener('transitionend', function(event) {
if (event.propertyName === 'opacity') {
asideEl.classList.remove(animClass);
}
});
window.addEventListener('resize', function() {
collapsed = document.body.getBoundingClientRect().width < 999;
check();
});
};
})();
document.addEventListener('DOMContentLoaded', function() {
utils.aside(document.querySelector('.main__aside'));
});

43
templates/widgets/asidenav.lucius
View File

@ -1,21 +1,60 @@
.main__aside {
flex-shrink: 0;
background-color: var(--darkbase);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1;
width: 300px;
overflow: hidden;
}
.main__aside--transitioning {
transition: width .2s ease;
}
.main__aside--transitioning .asidenav__box{
transition: opacity .2s ease;
}
.main__aside--collapsed {
width: 50px;
}
.main__aside--collapsed .asidenav__box {
opacity: 0;
}
.main__aside--collapsed .asidenav__box--dont-hide {
opacity: 1;
}
.main__aside--collapsed:not(.main__aside--transitioning) .asidenav__box {
visibility: hidden;
pointer-events: none;
z-index: -10;
height: 0;
padding: 0;
margin: 0;
}
.asidenav {
width: 300px;
margin-top: 20px;
color: white;
}
.asidenav__box {
margin: 10px 0;
padding: 10px;
padding: 10px 0;
border-bottom: 4px solid var(--whitebase);
}
.asidenav__box-title {
margin-left: -10px;
}
.asidenav .asidenav__link {
position: relative;
display: block;
padding: 4px 7px;
border-radius: 2px;
line-height: 40px;
margin: 4px 0;
padding-left: 60px;
color: var(--darkbase);
background-color: white;
}

25
templates/widgets/navbar.hamlet
View File

@ -1,14 +1,15 @@
<nav .navbar.js-sticky-navbar>
<div .navbar-container>
<nav .navbar.js-sticky-navbar>
<ul .navbar__list.list--inline>
$forall menuType <- menuTypes
$case menuType
$of NavbarRight (MenuItem label route _)
<li .navbar__list-item :Just route == mcurrentRoute:.navbar__list-item--active>
<a .navbar__link href=@{route}>#{label}
$of NavbarSecondary (MenuItem label route _)
<li .navbar__list-item.navbar__list-item--secondary :Just route == mcurrentRoute:.navbar__list-item--active>
<a .navbar__link href=@{route}>#{label}
$of _
<ul .navbar__list.list--inline>
$forall menuType <- menuTypes
$case menuType
$of NavbarRight (MenuItem label icon route _)
<li .navbar__list-item :Just route == mcurrentRoute:.navbar__list-item--active>
<a .navbar__link href=@{route}>#{label}
$of NavbarSecondary (MenuItem label icon route _)
<li .navbar__list-item.navbar__list-item--secondary :Just route == mcurrentRoute:.navbar__list-item--active>
<a .navbar__link href=@{route}>#{label}
$of _
<div .navbar__pushdown>
<div .navbar__pushdown>