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

slight navbar code cleanup

Browse Source
This commit is contained in:
Felix Hamann 2018-06-23 13:45:01 +02:00
parent b1ffef00a0
commit 8a0b0c9788
3 changed files with 9 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
templates/widgets/navbar.hamlet
View File

@ -4,14 +4,13 @@ $newline never
<div .navbar__logo> <div .navbar__logo>
<ul .navbar-left__list.list--inline> <ul .navbar-left__list.list--inline>
$forall menuType <- menuTypes $forall menuType <- menuTypes
$case menuType $case menuType
$of NavbarAside (MenuItem label mIcon route _) $of NavbarAside (MenuItem label mIcon route _)
<li .navbar-left__list-item :highlight route:.navbar-left__list-item--active> <li .navbar-left__list-item :highlight route:.navbar-left__list-item--active>
<a .navbar-left__link-wrapper href=@{route}> <a .navbar-left__link-wrapper href=@{route}>
<i .fas.fa-#{fromMaybe "none" mIcon}.fa-2x> <i .fas.fa-#{fromMaybe "none" mIcon}>
<div .navbar-left__link-label>#{label} <div .navbar-left__link-label>#{label}
$of _ $of _

3
templates/widgets/navbar.julius
View File

@ -8,9 +8,6 @@
init(); init();
function init() { function init() {
window.setTimeout(function () {
nav.classList.add('navbar--animated');
}, 200);
window.addEventListener('scroll', function (e) { window.addEventListener('scroll', function (e) {
if (!ticking) { if (!ticking) {
window.requestAnimationFrame(update); window.requestAnimationFrame(update);

27
templates/widgets/navbar.lucius
View File

@ -17,8 +17,8 @@
top: 0; top: 0;
left: 0; left: 0;
overflow: hidden; overflow: hidden;
transition: height 0.2s cubic-bezier(0.03, 0.43, 0.58, 1);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -82,9 +82,6 @@
height: 20px; height: 20px;
} }
} }
.navbar :last-child {
margin-left: auto;
}
.navbar-right__link-wrapper { .navbar-right__link-wrapper {
display: flex; display: flex;
@ -99,7 +96,6 @@
.navbar-right__link-label { .navbar-right__link-label {
transition: opacity .2s ease; transition: opacity .2s ease;
padding: 0 13px; padding: 0 13px;
color: var(--color-lightwhite);
text-transform: uppercase; text-transform: uppercase;
} }
@ -122,25 +118,22 @@
} }
.navbar-right__list-item--active .navbar-right__link-wrapper { .navbar-right__list-item--active .navbar-right__link-wrapper {
pointer-events: none; pointer-events: none;
}
.navbar-right__list-item--active .navbar-right__link-label {
color: var(--color-dark); color: var(--color-dark);
} }
.navbar .navbar-right__list-item:not(.navbar-right__list-item--active):hover {
background-color: var(--color-darker);
}
.navbar .navbar-right__list-item:not(.navbar-right__list-item--active):hover .navbar-right__link-wrapper { .navbar .navbar-right__list-item:not(.navbar-right__list-item--active):hover .navbar-right__link-wrapper {
background-color: var(--color-darker);
color: var(--color-lightwhite); color: var(--color-lightwhite);
} }
.navbar .navbar-right__list-item:not(.navbar-right__list-item--active):hover .navbar-right__link-label { .navbar-right__list-item--secondary .navbar-right__link-wrapper {
color: var(--color-lightwhite);
}
.navbar-right__list-item--secondary .navbar-right__link-wrapper,
.navbar-right__list-item--secondary .navbar-right__link-label {
color: var(--color-grey); color: var(--color-grey);
} }
/* left navbar list */
.navbar-left__list {
color: white;
}
.navbar--sticky { .navbar--sticky {
height: var(--header-height-collapsed); height: var(--header-height-collapsed);
z-index: 100; z-index: 100;
@ -150,10 +143,6 @@
} }
} }
.navbar--animated {
transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
}
.navbar__pushdown { .navbar__pushdown {
height: var(--header-height); height: var(--header-height);
transition: height .2s cubic-bezier(0.03, 0.43, 0.58, 1); transition: height .2s cubic-bezier(0.03, 0.43, 0.58, 1);