From 18ae75890a83d82f49343778d18185258e1985a4 Mon Sep 17 00:00:00 2001 From: Gregor Kleen Date: Fri, 24 Jan 2020 16:43:24 +0100 Subject: [PATCH] fix: design tweaks --- frontend/src/app.sass | 33 ++- frontend/src/utils/asidenav/asidenav.sass | 1 + frontend/src/utils/navbar/navbar.sass | 24 +- src/Foundation.hs | 210 ++++++++++-------- src/Utils/Icon.hs | 11 + .../widgets/breadcrumbs/breadcrumbs.hamlet | 2 + templates/widgets/footer/footer.hamlet | 7 +- templates/widgets/footer/link.hamlet | 4 + templates/widgets/navbar/navbar.hamlet | 91 ++++---- 9 files changed, 232 insertions(+), 151 deletions(-) create mode 100644 templates/widgets/footer/link.hamlet diff --git a/frontend/src/app.sass b/frontend/src/app.sass index cf7e2d300..240c495bb 100644 --- a/frontend/src/app.sass +++ b/frontend/src/app.sass @@ -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 diff --git a/frontend/src/utils/asidenav/asidenav.sass b/frontend/src/utils/asidenav/asidenav.sass index b9beb15b4..176b5ab4f 100644 --- a/frontend/src/utils/asidenav/asidenav.sass +++ b/frontend/src/utils/asidenav/asidenav.sass @@ -85,6 +85,7 @@ padding: 10px 13px margin: 0 border-bottom: 1px solid var(--color-grey) + height: 44px .asidenav-term-identifier--long display: inherit diff --git a/frontend/src/utils/navbar/navbar.sass b/frontend/src/utils/navbar/navbar.sass index 92d0d225e..37f234270 100644 --- a/frontend/src/utils/navbar/navbar.sass +++ b/frontend/src/utils/navbar/navbar.sass @@ -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) diff --git a/src/Foundation.hs b/src/Foundation.hs index 126df1e64..f6a8ec719 100644 --- a/src/Foundation.hs +++ b/src/Foundation.hs @@ -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 diff --git a/src/Utils/Icon.hs b/src/Utils/Icon.hs index 6bbaae5b2..199042d3c 100644 --- a/src/Utils/Icon.hs +++ b/src/Utils/Icon.hs @@ -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 diff --git a/templates/widgets/breadcrumbs/breadcrumbs.hamlet b/templates/widgets/breadcrumbs/breadcrumbs.hamlet index c6aa3cc4f..30c0b2acd 100644 --- a/templates/widgets/breadcrumbs/breadcrumbs.hamlet +++ b/templates/widgets/breadcrumbs/breadcrumbs.hamlet @@ -1,5 +1,7 @@ $newline never
+ +