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

started moving first lvl navi to top

Browse Source
This commit is contained in:
Felix Hamann 2018-06-22 23:40:34 +02:00
parent 20c50b1a45
commit 2c9c076213
5 changed files with 46 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/Foundation.hs
View File

@ -688,20 +688,20 @@ defaultLinks = -- Define the menu items of the header.
, menuItemAccessCallback' = isJust <$> maybeAuthPair
}
, NavbarAside $ MenuItem
{ menuItemLabel = "Veranstaltungen"
{ menuItemLabel = "Kurse"
, menuItemIcon = Just "book"
, menuItemRoute = CourseListR -- should be CourseListActiveR or similar in the future
, menuItemAccessCallback' = return True
}
, NavbarAside $ MenuItem
{ menuItemLabel = "Semester"
, menuItemIcon = Nothing
, menuItemIcon = Just "education"
, menuItemRoute = TermShowR
, menuItemAccessCallback' = return True
}
, NavbarAside $ MenuItem
{ menuItemLabel = "Benutzer"
, menuItemIcon = Just "user"
, menuItemIcon = Just "group"
, menuItemRoute = UsersR
, menuItemAccessCallback' = return True -- Creates a LOOP: (Authorized ==) <$> isAuthorized UsersR False
}

7
static/css/icons.css
View File

@ -26,6 +26,13 @@
.glyphicon--user::before {
content: '\e008';
}
.glyphicon--group::before {
/* TODO: get updated glyphicons for group-icon */
content: '\e284';
}
.glyphicon--education::before {
content: '\e233';
}
.glyphicon--login::before {
content: '\e161';
}

11
templates/widgets/asidenav.hamlet
View File

@ -1,17 +1,6 @@
$newline never
<aside .main__aside>
<div .asidenav>
<div .asidenav__box>
<ul .asidenav__list>
$forall menuType <- menuTypes
$case menuType
$of NavbarAside (MenuItem label mIcon route _)
<li .asidenav__list-item :highlight route:.asidenav__list-item--active>
<a .asidenav__link-wrapper href=@{route}>
<div .glyphicon.glyphicon--#{fromMaybe "none" mIcon}>
<div .asidenav__link-label>#{label}
$of _
<div .asidenav__box>
<h3 .asidenav__box-title>
WiSe 17/18

26
templates/widgets/navbar.hamlet
View File

@ -4,21 +4,33 @@ $newline never
<div .navbar__logo>
<ul .navbar__list.list--inline>
<ul .navbar-left__list.list--inline>
$forall menuType <- menuTypes
$case menuType
$of NavbarAside (MenuItem label mIcon route _)
<li .navbar-left__list-item :highlight route:.asidenav__list-item--active>
<!-- TODO: rename classes to match navbar -->
<a .asidenav__link-wrapper href=@{route}>
<div .glyphicon.glyphicon--#{fromMaybe "none" mIcon}>
<div .asidenav__link-label>#{label}
$of _
<ul .navbar-right__list.list--inline>
$forall menuType <- menuTypes
$case menuType
$of NavbarRight (MenuItem label mIcon route _)
<li .navbar__list-item :Just route == mcurrentRoute:.navbar__list-item--active>
<a .navbar__link-wrapper href=@{route}>
<li .navbar-right__list-item :Just route == mcurrentRoute:.navbar-right__list-item--active>
<a .navbar-right__link-wrapper href=@{route}>
$if isJust mIcon
<div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
<div .navbar__link-label>#{label}
<div .navbar-right__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}>
<li .navbar-right__list-item.navbar-right__list-item--secondary :Just route == mcurrentRoute:.navbar-right__list-item--active>
<a .navbar-right__link-wrapper href=@{route}>
$if isJust mIcon
<div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
<div .navbar__link-label>#{label}
<div .navbar-right__link-label>#{label}
$of _
<div .navbar__pushdown>

34
templates/widgets/navbar.lucius
View File

@ -63,12 +63,12 @@
}
}
.navbar__list {
.navbar-right__list {
align-self: flex-end;
white-space: nowrap;
}
.navbar__list-item {
.navbar-right__list-item {
position: relative;
transition: background-color .1s ease;
@ -86,7 +86,7 @@
margin-left: auto;
}
.navbar__link-wrapper {
.navbar-right__link-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
@ -96,48 +96,48 @@
transition: height .2s cubic-bezier(0.03, 0.43, 0.58, 1);
}
.navbar__link-label {
.navbar-right__link-label {
transition: opacity .2s ease;
padding: 0 13px;
color: var(--color-lightwhite);
text-transform: uppercase;
}
.navbar__list-item--secondary {
.navbar-right__list-item--secondary {
margin-left: 20px;
color: var(--color-grey);
}
.navbar__list-item--secondary + .navbar__list-item--secondary {
.navbar-right__list-item--secondary + .navbar-right__list-item--secondary {
margin-left: 0;
border-left: 0;
}
.navbar__list-item--active {
.navbar-right__list-item--active {
background-color: var(--color-lightwhite);
color: var(--color-dark);
.navbar__link-wrapper {
.navbar-right__link-wrapper {
color: var(--color-dark);
}
}
.navbar__list-item--active .navbar__link-wrapper {
.navbar-right__list-item--active .navbar-right__link-wrapper {
pointer-events: none;
}
.navbar__list-item--active .navbar__link-label {
.navbar-right__list-item--active .navbar-right__link-label {
color: var(--color-dark);
}
.navbar .navbar__list-item:not(.navbar__list-item--active):hover {
.navbar .navbar-right__list-item:not(.navbar-right__list-item--active):hover {
background-color: var(--color-darker);
}
.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-wrapper {
.navbar .navbar-right__list-item:not(.navbar-right__list-item--active):hover .navbar-right__link-wrapper {
color: var(--color-lightwhite);
}
.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-label {
.navbar .navbar-right__list-item:not(.navbar-right__list-item--active):hover .navbar-right__link-label {
color: var(--color-lightwhite);
}
.navbar__list-item--secondary .navbar__link-wrapper,
.navbar__list-item--secondary .navbar__link-label {
.navbar-right__list-item--secondary .navbar-right__link-wrapper,
.navbar-right__list-item--secondary .navbar-right__link-label {
color: var(--color-grey);
}
@ -145,7 +145,7 @@
height: var(--header-height-collapsed);
z-index: 100;
.navbar__link-wrapper {
.navbar-right__link-wrapper {
height: var(--header-height-collapsed);
}
}
@ -171,7 +171,7 @@
height: var(--header-height-collapsed);
}
.navbar__link-wrapper {
.navbar-right__link-wrapper {
height: var(--header-height-collapsed);
}
}