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

made navbar scrollable on mobile devices and added favorites-list-item

Browse Source
This commit is contained in:
Felix Hamann 2018-07-01 23:11:46 +02:00
parent 7e7e08837c
commit ecdf194f74
2 changed files with 49 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
templates/widgets/navbar.hamlet
View File

@ -5,14 +5,20 @@ $newline never
<a href="/" .navbar__logo>
<ul .navbar__list.list--inline.navbar__list-left>
$forall menuType <- menuTypes
$case menuType
$of NavbarAside (MenuItem label mIcon route _)
<li .navbar__list-item :highlight route:.navbar__list-item--active>
<a .navbar__link-wrapper href=@{route}>
<i .fas.fa-#{fromMaybe "none" mIcon}>
<div .navbar__link-label>#{label}
$of _
$# manually add favorites to navbar for small screens
<li .navbar__list-item.navbar__list-item--favorite>
<a .navbar__link-wrapper href="#">
<i .fas.fa-star>
<div .navbar__link-label> Favorites
$forall menuType <- menuTypes
$case menuType
$of NavbarAside (MenuItem label mIcon route _)
<li .navbar__list-item :highlight route:.navbar__list-item--active>
<a .navbar__link-wrapper href=@{route}>
<i .fas.fa-#{fromMaybe "none" mIcon}>
<div .navbar__link-label>#{label}
$of _
<ul .navbar__list.list--inline>
$forall menuType <- menuTypes
@ -20,14 +26,12 @@ $newline never
$of NavbarRight (MenuItem label mIcon route _)
<li .navbar__list-item :Just route == mcurrentRoute:.navbar__list-item--active>
<a .navbar__link-wrapper href=@{route}>
$if isJust mIcon
<div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
<i .fas.fa-#{fromMaybe "none" mIcon}>
<div .navbar__link-label>#{label}
$of NavbarSecondary (MenuItem label mIcon route _)
<li .navbar__list-item.navbar__list-item--secondary :Just route == mcurrentRoute:.navbar__list-item--active>
<a .navbar__link-wrapper href=@{route}>
$if isJust mIcon
<div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
<i .fas.fa-#{fromMaybe "none" mIcon}>
<div .navbar__link-label>#{label}
$of _

34
templates/widgets/navbar.lucius
View File

@ -17,6 +17,8 @@
overflow: hidden;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
width: 100%;
overflow: auto;
}
@media (max-width: 768px) {
@ -158,12 +160,21 @@
}
}
@media (max-width: 425px) {
.navbar__list {
+ .navbar__list {
margin-left: 0;
}
}
}
/* list item */
.navbar__list-item {
position: relative;
transition: background-color .1s ease;
+ .navbar__list-item {
&:not(.navbar__list-item--favorite) + .navbar__list-item {
margin-left: 12px;
}
@ -187,6 +198,10 @@
.navbar__list-item {
width: 50px;
&:not(.navbar__list-item--favorite) + .navbar__list-item {
margin-left: 0;
}
}
}
@ -202,6 +217,23 @@
}
}
/* "Favorites" list item, only visible on small screens */
.navbar__list {
.navbar__list-item--favorite {
display: none;
}
}
@media (max-width: 425px) {
.navbar__list {
.navbar__list-item--favorite {
display: inline-block;
}
}
}
.navbar__list-item--secondary {
margin-left: 20px;
color: var(--color-grey);