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

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

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

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

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

210
src/Foundation.hs
View File

@ -1761,6 +1761,12 @@ siteLayout' headingOverride widget = do
ident = navIdent ident = navIdent
in $(widgetFile "widgets/pageaction/secondary") in $(widgetFile "widgets/pageaction/secondary")
NavHeaderContainer{..} -> $(widgetFile "widgets/navbar/container") 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" _other -> error "not implemented"
navContainerItemWidget :: (Nav, Text, Maybe Text, [(NavLink, Text, Text)]) 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 :: (MonadHandler m, HandlerSite m ~ UniWorX) => m [Nav]
defaultLinks = fmap catMaybes . mapM runMaybeT $ -- Define the menu items of the header. 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 mCurrentRoute <- getCurrentRoute
activeLang <- selectLanguage appLanguages activeLang <- selectLanguage appLanguages
@ -2182,98 +2224,82 @@ defaultLinks = fmap catMaybes . mapM runMaybeT $ -- Define the menu items of the
, navIcon = IconLanguage , navIcon = IconLanguage
, navChildren , navChildren
} }
] , do
-- [ return MenuItem mCurrentRoute <- getCurrentRoute
-- { 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 return NavHeader
-- { menuItemType = NavbarRight { navHeaderRole = NavHeaderSecondary
-- , menuItemLabel = MsgMenuHelp , navIcon = IconMenuHelp
-- , menuItemIcon = Just "question" , navLink = NavLink
-- , menuItemRoute = SomeRoute (HelpR, catMaybes [(toPathPiece GetReferer, ) . toPathPiece <$> mCurrentRoute]) { navLabel = MsgMenuHelp
-- , menuItemModal = True , navRoute = (HelpR, [(toPathPiece GetReferer, toPathPiece currentRoute) | let Just currentRoute = mCurrentRoute ])
-- , menuItemAccessCallback' = return True , navAccess' = return True
-- } , navType = NavTypeLink { navModal = True }
-- , return MenuItem , navQuick = False
-- { menuItemType = NavbarRight , navForceActive = False
-- , menuItemLabel = MsgMenuProfile }
-- , menuItemIcon = Just "cogs" }
-- , menuItemRoute = SomeRoute ProfileR , return $ NavFooter NavLink
-- , menuItemModal = False { navLabel = MsgMenuDataProt
-- , menuItemAccessCallback' = isJust <$> maybeAuthPair , navRoute = LegalR :#: ("data-protection" :: Text)
-- } , navAccess' = return True
-- , return MenuItem , navType = NavTypeLink { navModal = False }
-- { menuItemType = NavbarSecondary , navQuick = False
-- , menuItemLabel = MsgMenuLogin , navForceActive = False
-- , menuItemIcon = Just "sign-in-alt" }
-- , menuItemRoute = SomeRoute $ AuthR LoginR , return $ NavFooter NavLink
-- , menuItemModal = True { navLabel = MsgMenuTermsUse
-- , menuItemAccessCallback' = isNothing <$> maybeAuthPair , navRoute = LegalR :#: ("terms-of-use" :: Text)
-- } , navAccess' = return True
-- , return MenuItem , navType = NavTypeLink { navModal = False }
-- { menuItemType = NavbarSecondary , navQuick = False
-- , menuItemLabel = MsgMenuLogout , navForceActive = False
-- , menuItemIcon = Just "sign-out-alt" }
-- , menuItemRoute = SomeRoute $ AuthR LogoutR , return $ NavFooter NavLink
-- , menuItemModal = False { navLabel = MsgMenuCopyright
-- , menuItemAccessCallback' = isJust <$> maybeAuthPair , 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 -- , return MenuItem
-- { menuItemType = NavbarAside -- { menuItemType = NavbarAside
-- , menuItemLabel = MsgMenuTermShow -- , menuItemLabel = MsgMenuTermShow

11
src/Utils/Icon.hs
View File

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

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

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

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

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

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

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

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

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