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

fix: design tweaks

Browse Source
This commit is contained in:
Gregor Kleen 2020-01-24 16:43:24 +01:00
parent 68eb44884e
commit 18ae75890a
9 changed files with 232 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/app.sass
View File

@ -1003,13 +1003,13 @@ th, td
.breadcrumbs__container
position: relative
color: var(--color-lightwhite)
padding: 4px 13px
padding: 4px 13px 4px 40px
background-color: var(--color-dark)
line-height: 30px
@media (min-width: 426px)
.breadcrumbs__container
padding: 7px 20px
padding: 7px 20px 7px 40px
@media (min-width: 769px)
.breadcrumbs__container
@ -1035,7 +1035,7 @@ th, td
&::after
content: ''
position: absolute
top: 11px
top: 5.5px
right: 0
width: 7px
height: 7px
@ -1047,6 +1047,24 @@ th, td
transform: rotate(-45deg)
z-index: 10
@media (min-width: 426px)
top: 11px
a.breadcrumbs__home
position: absolute
left: 10px
top: 8px
width: 20px
height: 30px
opacity: 0.5
text-decoration: none
color: var(--color-lightwhite)
text-align: center
line-height: 30px
&:hover
opacity: 1
.breadcrumbs__last-item
line-height: 28px
vertical-align: bottom
@ -1118,6 +1136,11 @@ th, td
overflow: auto
.footer
display: flex
flex-flow: row wrap
justify-content: center
align-items: baseline
align-content: flex-start
text-align: center
padding: 20px
position: relative
@ -1132,9 +1155,9 @@ th, td
height: 2px
background-color: var(--color-grey-light)
.footer-links *
.footer-links > *
margin-right: 0.5em
display: inline-block
display: block
&:last
margin-right: 0

1
frontend/src/utils/asidenav/asidenav.sass
View File

@ -85,6 +85,7 @@
padding: 10px 13px
margin: 0
border-bottom: 1px solid var(--color-grey)
height: 44px
.asidenav-term-identifier--long
display: inherit

24
frontend/src/utils/navbar/navbar.sass
View File

@ -26,6 +26,17 @@
@media (max-width: 768px)
left: 0
display: flex
& > *
flex-grow: 1
.navbar__stack
display: flex
flex-flow: column nowrap
& > *
flex-grow: 1
.navbar__list-wrapper
display: flex
flex-flow: row nowrap
@ -52,14 +63,15 @@
display: block
.navbar__container-list
position: relative
width: 100%
/* margin: 10px 0 0 0 */
padding: 0 40px
overflow: hidden
display: flex
flex-grow: 1
& > ul
display: flex
flex-grow: 1
flex-flow: row nowrap
align-items: center
overflow: overlay
@ -70,7 +82,7 @@
& > *
display: block
@media (min-width: 769px) and (min-height: 501px)
@media (min-width: 501px)
margin-right: 12px
&:last-child
@ -82,10 +94,9 @@
@media (max-width: 768px)
padding: 0
visibility: collapse
margin: 0
height: 0
transition: height 0.2s cubic-bezier(0.03, 0.43, 0.58, 1), margin 0.2s cubic-bezier(0.03, 0.43, 0.58, 1)
transition: all 0.2s cubic-bezier(0.03, 0.43, 0.58, 1)
.navbar__container-list-closer
position: absolute
@ -214,6 +225,9 @@
.navbar__list-item--favorite
display: none !important
& + .navbar__list-item
margin-left: 0
.navbar__list-item--active
background-color: var(--color-lightwhite)
color: var(--color-dark)

210
src/Foundation.hs
View File

@ -1761,6 +1761,12 @@ siteLayout' headingOverride widget = do
ident = navIdent
in $(widgetFile "widgets/pageaction/secondary")
NavHeaderContainer{..} -> $(widgetFile "widgets/navbar/container")
NavFooter{ navLink = navLink@NavLink{..} }
| NavTypeLink{..} <- navType
, not navModal
-> let route = navRoute'
ident = navIdent
in $(widgetFile "widgets/footer/link")
_other -> error "not implemented"
navContainerItemWidget :: (Nav, Text, Maybe Text, [(NavLink, Text, Text)])
@ -2157,7 +2163,43 @@ submissionList tid csh shn uid = E.select . E.from $ \(course `E.InnerJoin` shee
defaultLinks :: (MonadHandler m, HandlerSite m ~ UniWorX) => m [Nav]
defaultLinks = fmap catMaybes . mapM runMaybeT $ -- Define the menu items of the header.
[ do
[ return NavHeader
{ navHeaderRole = NavHeaderSecondary
, navIcon = IconMenuLogout
, navLink = NavLink
{ navLabel = MsgMenuLogout
, navRoute = AuthR LogoutR
, navAccess' = is _Just <$> maybeAuthId
, navType = NavTypeLink { navModal = False }
, navQuick = False
, navForceActive = False
}
}
, return NavHeader
{ navHeaderRole = NavHeaderSecondary
, navIcon = IconMenuLogin
, navLink = NavLink
{ navLabel = MsgMenuLogin
, navRoute = AuthR LoginR
, navAccess' = is _Nothing <$> maybeAuthId
, navType = NavTypeLink { navModal = True }
, navQuick = False
, navForceActive = False
}
}
, return NavHeader
{ navHeaderRole = NavHeaderSecondary
, navIcon = IconMenuProfile
, navLink = NavLink
{ navLabel = MsgMenuProfile
, navRoute = ProfileR
, navAccess' = is _Just <$> maybeAuthId
, navType = NavTypeLink { navModal = False }
, navQuick = False
, navForceActive = False
}
}
, do
mCurrentRoute <- getCurrentRoute
activeLang <- selectLanguage appLanguages
@ -2182,98 +2224,82 @@ defaultLinks = fmap catMaybes . mapM runMaybeT $ -- Define the menu items of the
, navIcon = IconLanguage
, navChildren
}
, do
mCurrentRoute <- getCurrentRoute
return NavHeader
{ navHeaderRole = NavHeaderSecondary
, navIcon = IconMenuHelp
, navLink = NavLink
{ navLabel = MsgMenuHelp
, navRoute = (HelpR, [(toPathPiece GetReferer, toPathPiece currentRoute) | let Just currentRoute = mCurrentRoute ])
, navAccess' = return True
, navType = NavTypeLink { navModal = True }
, navQuick = False
, navForceActive = False
}
}
, return $ NavFooter NavLink
{ navLabel = MsgMenuDataProt
, navRoute = LegalR :#: ("data-protection" :: Text)
, navAccess' = return True
, navType = NavTypeLink { navModal = False }
, navQuick = False
, navForceActive = False
}
, return $ NavFooter NavLink
{ navLabel = MsgMenuTermsUse
, navRoute = LegalR :#: ("terms-of-use" :: Text)
, navAccess' = return True
, navType = NavTypeLink { navModal = False }
, navQuick = False
, navForceActive = False
}
, return $ NavFooter NavLink
{ navLabel = MsgMenuCopyright
, navRoute = LegalR :#: ("copyright" :: Text)
, navAccess' = return True
, navType = NavTypeLink { navModal = False }
, navQuick = False
, navForceActive = False
}
, return $ NavFooter NavLink
{ navLabel = MsgMenuImprint
, navRoute = LegalR :#: ("imprint" :: Text)
, navAccess' = return True
, navType = NavTypeLink { navModal = False }
, navQuick = False
, navForceActive = False
}
, return $ NavFooter NavLink
{ navLabel = MsgMenuInformation
, navRoute = InfoR
, navAccess' = return True
, navType = NavTypeLink { navModal = False }
, navQuick = False
, navForceActive = False
}
, return $ NavFooter NavLink
{ navLabel = MsgMenuGlossary
, navRoute = GlossaryR
, navAccess' = return True
, navType = NavTypeLink { navModal = False }
, navQuick = False
, navForceActive = False
}
, return NavHeader
{ navHeaderRole = NavHeaderPrimary
, navIcon = IconMenuNews
, navLink = NavLink
{ navLabel = MsgMenuNews
, navRoute = NewsR
, navAccess' = return True
, navType = NavTypeLink { navModal = False }
, navQuick = False
, navForceActive = False
}
}
]
-- [ return MenuItem
-- { menuItemType = NavbarAside
-- , menuItemLabel = MsgMenuNews
-- , menuItemIcon = Just "home"
-- , menuItemRoute = SomeRoute NewsR
-- , menuItemModal = False
-- , menuItemAccessCallback' = return True
-- }
-- , return MenuItem
-- { menuItemType = Footer
-- , menuItemLabel = MsgMenuDataProt
-- , menuItemIcon = Nothing
-- , menuItemRoute = SomeRoute $ LegalR :#: ("data-protection" :: Text)
-- , menuItemModal = False
-- , menuItemAccessCallback' = return True
-- }
-- , return MenuItem
-- { menuItemType = Footer
-- , menuItemLabel = MsgMenuTermsUse
-- , menuItemIcon = Nothing
-- , menuItemRoute = SomeRoute $ LegalR :#: ("terms-of-use" :: Text)
-- , menuItemModal = False
-- , menuItemAccessCallback' = return True
-- }
-- , return MenuItem
-- { menuItemType = Footer
-- , menuItemLabel = MsgMenuCopyright
-- , menuItemIcon = Nothing
-- , menuItemRoute = SomeRoute $ LegalR :#: ("copyright" :: Text)
-- , menuItemModal = False
-- , menuItemAccessCallback' = return True
-- }
-- , return MenuItem
-- { menuItemType = Footer
-- , menuItemLabel = MsgMenuImprint
-- , menuItemIcon = Just "file-signature"
-- , menuItemRoute = SomeRoute $ LegalR :#: ("imprint" :: Text)
-- , menuItemModal = False
-- , menuItemAccessCallback' = return True
-- }
-- , return MenuItem
-- { menuItemType = Footer
-- , menuItemLabel = MsgMenuInformation
-- , menuItemIcon = Just "info"
-- , menuItemRoute = SomeRoute InfoR
-- , menuItemModal = False
-- , menuItemAccessCallback' = return True
-- }
-- , return MenuItem
-- { menuItemType = Footer
-- , menuItemLabel = MsgMenuGlossary
-- , menuItemIcon = Nothing
-- , menuItemRoute = SomeRoute GlossaryR
-- , menuItemModal = False
-- , menuItemAccessCallback' = return True
-- }
-- , do
-- mCurrentRoute <- getCurrentRoute
-- return MenuItem
-- { menuItemType = NavbarRight
-- , menuItemLabel = MsgMenuHelp
-- , menuItemIcon = Just "question"
-- , menuItemRoute = SomeRoute (HelpR, catMaybes [(toPathPiece GetReferer, ) . toPathPiece <$> mCurrentRoute])
-- , menuItemModal = True
-- , menuItemAccessCallback' = return True
-- }
-- , return MenuItem
-- { menuItemType = NavbarRight
-- , menuItemLabel = MsgMenuProfile
-- , menuItemIcon = Just "cogs"
-- , menuItemRoute = SomeRoute ProfileR
-- , menuItemModal = False
-- , menuItemAccessCallback' = isJust <$> maybeAuthPair
-- }
-- , return MenuItem
-- { menuItemType = NavbarSecondary
-- , menuItemLabel = MsgMenuLogin
-- , menuItemIcon = Just "sign-in-alt"
-- , menuItemRoute = SomeRoute $ AuthR LoginR
-- , menuItemModal = True
-- , menuItemAccessCallback' = isNothing <$> maybeAuthPair
-- }
-- , return MenuItem
-- { menuItemType = NavbarSecondary
-- , menuItemLabel = MsgMenuLogout
-- , menuItemIcon = Just "sign-out-alt"
-- , menuItemRoute = SomeRoute $ AuthR LogoutR
-- , menuItemModal = False
-- , menuItemAccessCallback' = isJust <$> maybeAuthPair
-- }
-- , return MenuItem
-- { menuItemType = NavbarAside
-- , menuItemLabel = MsgMenuTermShow

11
src/Utils/Icon.hs
View File

@ -70,6 +70,11 @@ data Icon
| IconFavourite
| IconLanguage
| IconNavContainerClose
| IconMenuNews
| IconMenuHelp
| IconMenuProfile
| IconMenuLogin | IconMenuLogout
| IconBreadcrumbsHome
deriving (Eq, Ord, Enum, Bounded, Show, Read, Generic, Typeable)
iconText :: Icon -> Text
@ -115,6 +120,12 @@ iconText = \case
IconFavourite -> "star"
IconLanguage -> "flag-alt"
IconNavContainerClose -> "chevron-up"
IconMenuNews -> "megaphone"
IconMenuHelp -> "question"
IconMenuProfile -> "cogs"
IconMenuLogin -> "sign-in-alt"
IconMenuLogout -> "sign-out-alt"
IconBreadcrumbsHome -> "home"
instance Universe Icon
instance Finite Icon

2
templates/widgets/breadcrumbs/breadcrumbs.hamlet
View File

@ -1,5 +1,7 @@
$newline never
<div .breadcrumbs__container>
<a .breadcrumbs__home href=@{NewsR}>
<i .fas .fa-fw .fa-#{iconText IconBreadcrumbsHome}>
<ul .breadcrumbs__list.list--inline>
$forall (bcRoute, bcTitle, hasAccess) <- parents
<li .breadcrumbs__item>

7
templates/widgets/footer/footer.hamlet
View File

@ -1,6 +1,5 @@
$newline never
<footer .footer>
<div .footer-links>
$forall (NavFooter{ navLink }, navIdent, navRoute', _) <- filter isNavFooter nav
<a href=#{navRoute'} ##{navIdent}>
_{navLink}
<ul .footer-links .list--inline>
$forall n <- filter isNavFooter nav
^{navWidget n}

4
templates/widgets/footer/link.hamlet Normal file
View File

@ -0,0 +1,4 @@
$newline never
<li>
<a href=#{route} ##{ident}>
_{navLink}

91
templates/widgets/navbar/navbar.hamlet
View File

@ -1,53 +1,54 @@
$newline never
<div .navbar-container>
<nav .navbar>
<div .navbar__list-wrapper>
<ul .navbar__list.navbar__list-left>
$# manually add favorites to navbar for small screens
<li .navbar__list-item.navbar__list-item--favorite>
<a .navbar__link-wrapper href="#">
<div .navbar__link-icon>
<i .fas .fa-2x .fa-#{iconText IconFavourite}>
<div .navbar__link-label>_{MsgNavigationFavourites}
<div .navbar__stack>
<div .navbar__list-wrapper>
<ul .navbar__list.navbar__list-left>
$# manually add favorites to navbar for small screens
<li .navbar__list-item.navbar__list-item--favorite>
<a .navbar__link-wrapper href="#">
<div .navbar__link-icon>
<i .fas .fa-2x .fa-#{iconText IconFavourite}>
<div .navbar__link-label>_{MsgNavigationFavourites}
$forall n <- filter isNavHeaderPrimary nav
$case view _1 n
$of NavHeader{ navLink }
<li .navbar__list-item :highlightNav navLink:.navbar__list-item--active>
^{navWidget n}
$of NavHeaderContainer{}
<li .navbar__list-item.navbar__list-item--container-selector>
^{navWidget n}
$of _
$forall n <- filter isNavHeaderPrimary nav
$case view _1 n
$of NavHeader{ navLink }
<li .navbar__list-item :highlightNav navLink:.navbar__list-item--active>
^{navWidget n}
$of NavHeaderContainer{}
<li .navbar__list-item.navbar__list-item--container-selector>
^{navWidget n}
$of _
<ul .navbar__list>
$forall n <- filter isNavHeaderSecondary $ reverse nav
$case view _1 n
$of NavHeader{ navLink }
<li .navbar__list-item :highlightNav navLink:.navbar__list-item--active>
^{navWidget n}
$of NavHeaderContainer{}
<li .navbar__list-item.navbar__list-item--container-selector>
^{navWidget n}
$of _
<ul .navbar__list>
$forall n <- filter isNavHeaderSecondary $ reverse nav
$case view _1 n
$of NavHeader{ navLink }
<li .navbar__list-item :highlightNav navLink:.navbar__list-item--active>
^{navWidget n}
$of NavHeaderContainer{}
<li .navbar__list-item.navbar__list-item--container-selector>
^{navWidget n}
$of _
$forall n@(NavHeaderContainer{ navHeaderRole }, containerIdent, _, ns) <- filter isNavHeaderContainer nav
<div .navbar__container-list :navHeaderRole == NavHeaderPrimary:.navbar__container-list--left ##{containerIdent}-container>
<label .navbar__container-list-closer for=container-radio-none>
<i .fas .fa-fw .fa-#{iconText IconNavContainerClose}>
<ul>
$forall iN@(nl, _, _) <- ns
<li .navbar__container-list-item :highlightNav nl:.navbar__container-list-item--active>
^{navContainerItemWidget n iN}
$forall n@(NavHeaderContainer{ navHeaderRole }, containerIdent, _, ns) <- filter isNavHeaderContainer nav
<div .navbar__container-list :navHeaderRole == NavHeaderPrimary:.navbar__container-list--left ##{containerIdent}-container>
<label .navbar__container-list-closer for=container-radio-none>
<i .fas .fa-fw .fa-#{iconText IconNavContainerClose}>
<ul>
$forall iN@(nl, _, _) <- ns
<li .navbar__container-list-item :highlightNav nl:.navbar__container-list-item--active>
^{navContainerItemWidget n iN}
$# <li .navbar__list-item--lang-wrapper uw-language-select>
$# <input type="checkbox" id="lang-checkbox" uw-no-checkbox>
$# <div id="lang-dropdown">
$# ^{langFormView'}
$# <div .navbar__list-item .navbar__list-item--language>
$# <label .navbar__link-wrapper for="lang-checkbox">
$# <div .navbar__link-icon>
$# <i .fas .fa-2x .fa-flag-alt>
$# <div .navbar__link-label>_{MsgMenuLanguage}
$# <li .navbar__list-item--lang-wrapper uw-language-select>
$# <input type="checkbox" id="lang-checkbox" uw-no-checkbox>
$# <div id="lang-dropdown">
$# ^{langFormView'}
$# <div .navbar__list-item .navbar__list-item--language>
$# <label .navbar__link-wrapper for="lang-checkbox">
$# <div .navbar__link-icon>
$# <i .fas .fa-2x .fa-flag-alt>
$# <div .navbar__link-label>_{MsgMenuLanguage}