diff --git a/src/Foundation.hs b/src/Foundation.hs index c4f9aaa06..4938141d6 100644 --- a/src/Foundation.hs +++ b/src/Foundation.hs @@ -254,6 +254,11 @@ uniworxMessages = UniWorXMessages . map SomeMessage data MenuType = NavbarAside | NavbarRight | NavbarSecondary | PageActionPrime | PageActionSecondary | Footer deriving (Eq, Ord, Enum, Bounded, Read, Show, Generic) +instance Universe MenuType +instance Finite MenuType + +makePrisms ''MenuType + data MenuItem = MenuItem { menuItemLabel :: UniWorXMessage , menuItemIcon :: Maybe Text -- currently from: https://fontawesome.com/icons?d=gallery @@ -263,6 +268,8 @@ data MenuItem = MenuItem , menuItemType :: MenuType } +makeLenses_ ''MenuItem + instance RedirectUrl UniWorX MenuItem where toTextUrl MenuItem{..} = toTextUrl menuItemRoute instance HasRoute UniWorX MenuItem where @@ -958,15 +965,13 @@ siteLayout headingOverride widget = do contentHeadline = (toWidget <$> headingOverride) <|> (pageHeading =<< mcurrentRoute) breadcrumbsWgt :: Widget breadcrumbsWgt = $(widgetFile "widgets/breadcrumbs") - pageactionprime :: Widget - pageactionprime = $(widgetFile "widgets/pageactionprime") -- TODO: rename, since it also shows secondary pageActions now + pageaction :: Widget + pageaction = $(widgetFile "widgets/pageaction") -- functions to determine if there are page-actions (primary or secondary) - isPageAction :: MenuType -> Bool - isPageAction PageActionPrime = True - isPageAction PageActionSecondary = True - isPageAction _ = False - hasPageActions :: Bool - hasPageActions = any (isPageAction . menuItemType . view _1) menuTypes + hasPageActions, hasSecondaryPageActions, hasPrimaryPageActions :: Bool + hasPageActions = hasPrimaryPageActions || hasSecondaryPageActions + hasSecondaryPageActions = any (is _PageActionSecondary) $ toListOf (traverse . _1 . _menuItemType) menuTypes + hasPrimaryPageActions = any (is _PageActionPrime) $ toListOf (traverse . _1 . _menuItemType) menuTypes pc <- widgetToPageContent $ do addScript $ StaticR js_zepto_js diff --git a/templates/default-layout.hamlet b/templates/default-layout.hamlet index b6b6ecdf7..bf936affd 100644 --- a/templates/default-layout.hamlet +++ b/templates/default-layout.hamlet @@ -15,27 +15,28 @@ $if not isModal
- $maybe headline <- contentHeadline -

- - ^{headline} +
+ $maybe headline <- contentHeadline +

+ + ^{headline} - $if not isModal - - ^{pageactionprime} - - -
- $forall (status, msg) <- mmsgs - $with status2 <- bool status "info" (status == "") -
-
- #{msg} + $if not isModal && hasPageActions + + ^{pageaction} ^{widget} - - $if not isModal - ^{footer} + +
+ $forall (status, msg) <- mmsgs + $with status2 <- bool status "info" (status == "") +
+
+ #{msg} + + + $if not isModal + ^{footer} diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius index 729e4c672..2280e1849 100644 --- a/templates/default-layout.lucius +++ b/templates/default-layout.lucius @@ -528,18 +528,24 @@ ul.list--inline { } section { - padding: 0 0 12px; - margin: 0 0 12px; + padding-bottom: 20px; + margin-bottom: 20px; border-bottom: 1px solid #d3d3d3; -} + + section { + margin-top: 20px; + padding-top: 20px; + } -section:last-of-type { - padding: 0; - margin: 0; - border-bottom: none; + section { + border-bottom: none; + } } .pseudonym { font-family: monospace; } + +.headline-one { + margin-bottom: 15px; +} diff --git a/templates/standalone/alerts.julius b/templates/standalone/alerts.julius index 632661eb5..c8c04dc14 100644 --- a/templates/standalone/alerts.julius +++ b/templates/standalone/alerts.julius @@ -5,6 +5,8 @@ var ALERT_INVISIBLE_CLASS = 'alert--invisible'; var TOGGLER_INVISIBLE_CLASS = 'alerts__toggler--visible'; + var ALERT_AUTO_DISAPPEAR_DELAY = 10; + var alertsShowingToggler = false; window.utils.alerts = function(alertsEl) { @@ -29,7 +31,7 @@ var iconEl = document.createElement('DIV'); var closeEl = document.createElement('DIV'); var dataDecay = alertEl.dataset.decay; - var autoDecay = 10; + var autoDecay = ALERT_AUTO_DISAPPEAR_DELAY; if (dataDecay) { autoDecay = parseInt(dataDecay, 10); } diff --git a/templates/standalone/alerts.lucius b/templates/standalone/alerts.lucius index c2479508d..bc5603220 100644 --- a/templates/standalone/alerts.lucius +++ b/templates/standalone/alerts.lucius @@ -48,7 +48,7 @@ align-items: center; justify-content: center; width: 30px; - color: var(--color-lightblack); + color: var(--color-grey); font-size: 30px; transform: translateX(-50%); } diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius index 188d143f3..4086d946e 100644 --- a/templates/widgets/asidenav.lucius +++ b/templates/widgets/asidenav.lucius @@ -89,7 +89,7 @@ transition: all .2s ease; padding: 30px 13px 10px; margin: 0; - border-bottom: 1px solid var(--color-lightwhite); + border-bottom: 1px solid var(--color-grey); &.js-show-hide__toggle { @@ -187,6 +187,7 @@ color: var(--color-font); min-height: 50px; display: flex; + flex-direction: column; justify-content: flex-start; align-items: center; @@ -215,7 +216,7 @@ } /* small list-item-padding for medium to large screens */ -@media (min-width: 1024px) { +@media (min-width: 1025px) { .asidenav__list-item { padding-left: 10px; @@ -239,6 +240,7 @@ .asidenav__link-wrapper { position: relative; display: flex; + flex: 1; align-items: center; padding: 7px 10px; justify-content: flex-start; @@ -295,7 +297,7 @@ } /* TABLET */ -@media (min-width: 425px) and (max-width: 768px) { +@media (min-width: 426px) and (max-width: 768px) { .main__aside { width: var(--asidenav-width-md, 50px); diff --git a/templates/widgets/navbar.lucius b/templates/widgets/navbar.lucius index 71f897af4..89c339c61 100644 --- a/templates/widgets/navbar.lucius +++ b/templates/widgets/navbar.lucius @@ -19,7 +19,7 @@ } } -@media (min-width: 1024px) { +@media (min-width: 1025px) { .navbar-shadow { display: none; diff --git a/templates/widgets/pageaction.hamlet b/templates/widgets/pageaction.hamlet new file mode 100644 index 000000000..b7dcfc86e --- /dev/null +++ b/templates/widgets/pageaction.hamlet @@ -0,0 +1,23 @@ +$newline never +
+ $if hasPrimaryPageActions +
+ $forall (MenuItem{menuItemLabel, menuItemType, menuItemModal}, menuIdent, route) <- menuTypes + $case menuItemType + $of PageActionPrime +
+ $if menuItemModal +
+ _{SomeMessage menuItemLabel} + $of _ + $if hasSecondaryPageActions +
+
+ $forall (MenuItem{menuItemLabel, menuItemType, menuItemModal}, menuIdent, route) <- menuTypes + $case menuItemType + $of PageActionSecondary +
+ $if menuItemModal +
+ _{SomeMessage menuItemLabel} + $of _ diff --git a/templates/widgets/pageaction.julius b/templates/widgets/pageaction.julius new file mode 100644 index 000000000..e69de29bb diff --git a/templates/widgets/pageaction.lucius b/templates/widgets/pageaction.lucius new file mode 100644 index 000000000..29977228d --- /dev/null +++ b/templates/widgets/pageaction.lucius @@ -0,0 +1,73 @@ +.pagenav { + display: flex; + align-items: flex-start; +} + +.pagenav__list-item { + flex: 1; + position: relative; + display: inline-flex; + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6); + margin: 10px 10px 0 0; +} + +.pagenav__link-wrapper { + flex: 1; + padding: 10px 10px 12px; + text-decoration: none !important; + + &:hover { + background-color: var(--color-grey-light); + } +} + +@media (max-width: 1024px) { + + .pagenav { + flex-direction: column; + } +} + +@media (min-width: 1025px) { + .pagenav-secondary { + position: relative; + overflow: visible; + padding-top: 10px; + + &::after { + content: '\2026'; + display: inline-block; + padding: 10px 10px 12px; + width: 40px; + box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6); + box-sizing: border-box; + text-align: center; + } + + &:hover { + .pagenav-secondary__list { + display: block; + } + } + } + + .pagenav-secondary__list { + position: absolute; + display: none; + left: 0; + top: 10px; + width: 250px; + background-color: white; + box-shadow: 0 0 6px 3px var(--color-grey-light); + } + + .pagenav__list-item--secondary { + display: flex; + box-shadow: none; + margin: 0; + + &:hover { + background-color: var(--color-grey-light); + } + } +} diff --git a/templates/widgets/pageactionprime.hamlet b/templates/widgets/pageactionprime.hamlet deleted file mode 100644 index 624ec8e51..000000000 --- a/templates/widgets/pageactionprime.hamlet +++ /dev/null @@ -1,16 +0,0 @@ -$newline never -$if hasPageActions -