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

34
templates/widgets/navbar.lucius
View File

@ -17,6 +17,8 @@
overflow: hidden; overflow: hidden;
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); transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
width: 100%;
overflow: auto;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -158,12 +160,21 @@
} }
} }
@media (max-width: 425px) {
.navbar__list {
+ .navbar__list {
margin-left: 0;
}
}
}
/* list item */ /* list item */
.navbar__list-item { .navbar__list-item {
position: relative; position: relative;
transition: background-color .1s ease; transition: background-color .1s ease;
+ .navbar__list-item { &:not(.navbar__list-item--favorite) + .navbar__list-item {
margin-left: 12px; margin-left: 12px;
} }
@ -187,6 +198,10 @@
.navbar__list-item { .navbar__list-item {
width: 50px; 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 { .navbar__list-item--secondary {
margin-left: 20px; margin-left: 20px;
color: var(--color-grey); color: var(--color-grey);