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

added toggler for asidenav

Browse Source
This commit is contained in:
Felix Hamann 2018-03-19 17:29:50 +01:00
parent e58851cd3c
commit 0b3d662eea
3 changed files with 36 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/widgets/asidenav.hamlet
View File

@ -28,3 +28,5 @@
<a .asidenav__link-wrapper href="/course/S2018/dbs/show"> <a .asidenav__link-wrapper href="/course/S2018/dbs/show">
<div .asidenav__link-triple>DBS <div .asidenav__link-triple>DBS
<div .asidenav__link-label>Datenbanksysteme <div .asidenav__link-label>Datenbanksysteme
<div .asidenav__toggler>

8
templates/widgets/asidenav.julius
View File

@ -41,11 +41,9 @@
return asideEl.classList.contains(collClass); return asideEl.classList.contains(collClass);
} }
asideEl.addEventListener('click', function(event) { asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) {
if (event.target === asideEl) { collapsed = !collapsed;
collapsed = !collapsed; check();
check();
}
}, false); }, false);
asideEl.addEventListener('transitionend', function(event) { asideEl.addEventListener('transitionend', function(event) {
if (event.propertyName === 'opacity') { if (event.propertyName === 'opacity') {

31
templates/widgets/asidenav.lucius
View File

@ -1,4 +1,5 @@
.main__aside { .main__aside {
position: relative;
background-color: var(--darkbase); background-color: var(--darkbase);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1; z-index: 1;
@ -46,6 +47,7 @@
.asidenav__box { .asidenav__box {
margin: 10px 0; margin: 10px 0;
padding: 10px 0; padding: 10px 0;
width: 100%;
border-bottom: 4px solid var(--whitebase); border-bottom: 4px solid var(--whitebase);
background-color: var(--darkbase); background-color: var(--darkbase);
} }
@ -114,3 +116,32 @@
outline: 1px solid white; outline: 1px solid white;
} }
} }
.asidenav__toggler {
position: absolute;
bottom: 20px;
height: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: background-color .2s ease;
border-top: 1px solid var(--whitebase);
border-bottom: 1px solid var(--whitebase);
cursor: pointer;
&::before {
content: '\e079';
display: block;
font-family: 'Glyphicons Halflings';
color: var(--whitebase);
}
&:hover {
background-color: var(--lightbase);
}
}
.main__aside--collapsed .asidenav__toggler::before {
content: '\e080';
}