add hover-enabled list of secondary page actions

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);

templates/widgets/navbar.lucius

@@ -19,7 +19,7 @@
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1025px) {
 
   .navbar-shadow {
     display: none;

templates/widgets/pageactionprime.hamlet

@@ -10,8 +10,8 @@ $if hasPageActions
                 <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
               <a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
           $of _
+    <!-- TODO: add check if there are any PageActionSecondarys -->
     <div .pagenav-secondary>
-      Weitere Punkte
       <div .pagenav-secondary__list>
         $forall (MenuItem{menuItemLabel, menuItemType, menuItemModal}, menuIdent, route) <- menuTypes
           $case menuItemType
@@ -19,5 +19,5 @@ $if hasPageActions
               <div .pagenav__list-item.pagenav__list-item--secondary>
                 $if menuItemModal
                   <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
-                <a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
+                <a .pagenav__link-wrapper.pagenav__link-wrapper--secondary href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
             $of _

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;
   }
 }