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

slide-in asidenav on mobile devices and logo in primary color

Browse Source
This commit is contained in:
Felix Hamann 2018-07-02 00:06:35 +02:00
parent f468e28054
commit d9cc47602c
3 changed files with 47 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
templates/widgets/asidenav.julius
View File

@ -3,7 +3,17 @@
window.utils = window.utils || {}; window.utils = window.utils || {};
window.utils.aside = function(asideEl) { }; window.utils.aside = function(asideEl) {
function init() {
var favoritesBtn = document.querySelector('.navbar__list-item--favorite');
favoritesBtn.addEventListener('click', function(event) {
asideEl.classList.toggle('main__aside--expanded');
event.preventDefault();
}, true);
}
init();
};
})(); })();
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
@ -19,4 +29,6 @@ document.addEventListener('DOMContentLoaded', function() {
}); });
}); });
window.utils.aside(asidenavEl);
}); });

32
templates/widgets/asidenav.lucius
View File

@ -19,7 +19,23 @@
@media (max-width: 425px) { @media (max-width: 425px) {
.main__aside { .main__aside {
display: none; position: fixed;
top: var(--header-height-collapsed);
left: 0;
right: 0;
bottom: 0;
height: 100% !important;
width: 100%;
z-index: 5;
box-shadow: 0 0 13px var(--color-dark);
white-space: nowrap;
overflow: hidden;
transform: translateX(0);
transition: transform .2s ease-out;
&:not(.main__aside--expanded) {
transform: translateX(-110%);
}
} }
} }
@ -36,6 +52,9 @@
margin-top: 30px; margin-top: 30px;
background-color: transparent; background-color: transparent;
transition: all .2s ease; transition: all .2s ease;
padding: 30px 13px 10px;
margin: 0;
background-color: var(--color-darker);
} }
.asidenav__list-item { .asidenav__list-item {
@ -129,6 +148,13 @@
z-index: -1; z-index: -1;
} }
@media (max-width: 425px) {
.asidenav__nested-list {
display: none;
}
}
.asidenav__nested-list-item { .asidenav__nested-list-item {
position: relative; position: relative;
color: var(--color-lightwhite); color: var(--color-lightwhite);
@ -148,7 +174,7 @@
} }
/* STATE COLLAPSED */ /* STATE COLLAPSED */
@media (max-width: 768px) { @media (max-width: 768px) and (min-width: 425px) {
.main__aside { .main__aside {
width: 50px; width: 50px;
@ -161,8 +187,6 @@
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
padding: 10px 1px; padding: 10px 1px;
margin: 0;
background-color: var(--color-darker);
} }
.asidenav__link-shorthand { .asidenav__link-shorthand {

9
templates/widgets/navbar.lucius
View File

@ -57,6 +57,7 @@
height: calc(100% - 4px); height: calc(100% - 4px);
padding: 0 6px 4px; padding: 0 6px 4px;
box-shadow: 0 0 0 1px inset var(--color-lmu-box-border); box-shadow: 0 0 0 1px inset var(--color-lmu-box-border);
background-color: var(--color-primary);
} }
&::after { &::after {
@ -71,6 +72,7 @@
height: calc(100% - 4px); height: calc(100% - 4px);
padding: 0 6px 4px; padding: 0 6px 4px;
box-shadow: 0 0 0 1px inset var(--color-lmu-box-border); box-shadow: 0 0 0 1px inset var(--color-lmu-box-border);
background-color: var(--color-primary);
} }
} }
@ -140,7 +142,7 @@
@media (max-width: 500px) { @media (max-width: 500px) {
.navbar__link-label { .navbar__link-label {
display: none; font-size: 12px;
} }
} }
@ -197,7 +199,7 @@
@media (max-width: 500px) { @media (max-width: 500px) {
.navbar__list-item { .navbar__list-item {
width: 50px; min-width: 60px;
&:not(.navbar__list-item--favorite) + .navbar__list-item { &:not(.navbar__list-item--favorite) + .navbar__list-item {
margin-left: 0; margin-left: 0;
@ -222,6 +224,7 @@
.navbar__list-item--favorite { .navbar__list-item--favorite {
display: none; display: none;
background-color: var(--color-primary);
} }
} }
@ -273,7 +276,7 @@
color: var(--color-dark); color: var(--color-dark);
} }
.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-wrapper { .navbar .navbar__list-item:not(.navbar__list-item--active):not(.navbar__list-item--favorite):hover .navbar__link-wrapper {
background-color: var(--color-darker); background-color: var(--color-darker);
color: var(--color-lightwhite); color: var(--color-lightwhite);
} }