diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius index 63a646e9a..c37796da4 100644 --- a/templates/widgets/asidenav.lucius +++ b/templates/widgets/asidenav.lucius @@ -216,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; @@ -297,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/pageactionprime.hamlet b/templates/widgets/pageactionprime.hamlet index c9dd7dc02..dc826db15 100644 --- a/templates/widgets/pageactionprime.hamlet +++ b/templates/widgets/pageactionprime.hamlet @@ -10,8 +10,8 @@ $if hasPageActions
_{SomeMessage menuItemLabel} $of _ +
- Weitere Punkte
$forall (MenuItem{menuItemLabel, menuItemType, menuItemModal}, menuIdent, route) <- menuTypes $case menuItemType @@ -19,5 +19,5 @@ $if hasPageActions
$if menuItemModal
- _{SomeMessage menuItemLabel} + _{SomeMessage menuItemLabel} $of _ diff --git a/templates/widgets/pageactionprime.lucius b/templates/widgets/pageactionprime.lucius index 30d821fd9..3d375e2a6 100644 --- a/templates/widgets/pageactionprime.lucius +++ b/templates/widgets/pageactionprime.lucius @@ -1,16 +1,24 @@ .pagenav { display: flex; justify-content: space-between; + align-items: flex-end; } .pagenav-secondary { - float: right; position: relative; - flex-basis: 50px; - height: 50px; - width: 50px; overflow: visible; + &::after { + content: '\2807'; + display: inline-block; + font-size: 25px; + padding: 4px 5px 2px 10px; + 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 { animation: pagenav-fade-in 200ms ease-in-out; @@ -32,14 +40,8 @@ top: 0; width: 250px; text-align: right; - padding: 7px 13px; background-color: white; - box-shadow: 0 0 6px 3px var(--color-grey-light) -} - -.page-nav-prime { - margin: 10px 0 20px; - background-color: var(--color-lightwhite); + box-shadow: 0 0 6px 3px var(--color-grey-light); } .pagenav__list-item { @@ -51,10 +53,44 @@ } .pagenav__list-item--secondary { - display: block; + display: flex; margin: 0; + padding: 0; + box-shadow: none; - +.pagenav__list-item--secondary { - margin-top: 10px; + &:hover { + background-color: var(--color-grey-light); + } +} + +.pagenav__link-wrapper--secondary { + flex: 1; + padding: 10px 10px 15px; +} + +@media (max-width: 768px) { + + .pagenav { + flex-direction: column; + } + + .pagenav-secondary { + float: none; + flex-basis: auto; + height: initial; + width: initial; + overflow: visible; + margin-top: 20px; + + &::after { + content: none; + } + } + + .pagenav-secondary__list { + display: block; + position: relative; + width: initial; + text-align: initial; } }