Merge branch 'pageactions' into 'master'

Hover-menu to hide secondary page actions in

Closes #249

See merge request !134

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
+      pageaction :: Widget
-      pageactionprime = $(widgetFile "widgets/pageactionprime") -- TODO: rename, since it also shows secondary pageActions now
+      pageaction = $(widgetFile "widgets/pageaction")
       -- functions to determine if there are page-actions (primary or secondary)
-      isPageAction :: MenuType -> Bool
+      hasPageActions, hasSecondaryPageActions, hasPrimaryPageActions :: Bool
-      isPageAction PageActionPrime     = True
+      hasPageActions = hasPrimaryPageActions || hasSecondaryPageActions
-      isPageAction PageActionSecondary = True
+      hasSecondaryPageActions = any (is _PageActionSecondary) $ toListOf (traverse . _1 . _menuItemType) menuTypes
-      isPageAction _                   = False
+      hasPrimaryPageActions = any (is _PageActionPrime) $ toListOf (traverse . _1 . _menuItemType) menuTypes
-      hasPageActions :: Bool
-      hasPageActions = any (isPageAction . menuItemType . view _1) menuTypes
 
   pc <- widgetToPageContent $ do
       addScript $ StaticR js_zepto_js

templates/default-layout.hamlet

@@ -15,27 +15,28 @@ $if not isModal
 
     <div .main__content-body>
 
-      $maybe headline <- contentHeadline
+      <section>
-        <h1>
+        $maybe headline <- contentHeadline
-          <!-- $maybe back <- lastMaybe parents
+          <h1 .headline-one>
-            <a .breadcrumbs__link href="@{fst back}">#{snd back}  -->
+            <!-- $maybe back <- lastMaybe parents
-          ^{headline}
+              <a .breadcrumbs__link href="@{fst back}">#{snd back}  -->
+            ^{headline}
 
-      $if not isModal
+        $if not isModal && hasPageActions
-        <!-- prime page actions -->
+          <!-- page actions -->
-        ^{pageactionprime}
+          ^{pageaction}
-
-      <!-- alerts -->
-      <div #alerts .alerts>
-        $forall (status, msg) <- mmsgs
-          $with status2 <- bool status "info" (status == "")
-            <div class="alert alert-#{status2}">
-              <div .alert__content>
-                #{msg}
 
       <!-- actual content -->
       ^{widget}
 
-      <!-- footer -->
+      <!-- alerts -->
-      $if not isModal
+      <div #alerts .alerts>
-        ^{footer}
+          $forall (status, msg) <- mmsgs
+            $with status2 <- bool status "info" (status == "")
+              <div class="alert alert-#{status2}">
+                <div .alert__content>
+                  #{msg}
+
+    <!-- footer -->
+    $if not isModal
+      ^{footer}

templates/default-layout.lucius

@@ -528,18 +528,24 @@ ul.list--inline {
 }
 
 section {
-    padding: 0 0 12px;
+    padding-bottom: 20px;
-    margin: 0 0 12px;
+    margin-bottom: 20px;
     border-bottom: 1px solid #d3d3d3;
 
-}
+    + section {
+      margin-top: 20px;
+      padding-top: 20px;
+    }
 
-section:last-of-type {
+    section {
-    padding: 0;
+      border-bottom: none;
-    margin: 0;
+    }
-    border-bottom: none;
 }
 
 .pseudonym {
     font-family: monospace;
 }
+
+.headline-one {
+  margin-bottom: 15px;
+}

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

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

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

templates/widgets/navbar.lucius

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

templates/widgets/pageaction.hamlet

@@ -0,0 +1,23 @@
+$newline never
+<div .pagenav>
+  $if hasPrimaryPageActions
+    <div .pagenav-prime>
+      $forall (MenuItem{menuItemLabel, menuItemType, menuItemModal}, menuIdent, route) <- menuTypes
+        $case menuItemType
+          $of PageActionPrime
+            <div .pagenav__list-item>
+              $if menuItemModal
+                <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
+              <a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
+          $of _
+  $if hasSecondaryPageActions
+    <div .pagenav-secondary>
+      <div .pagenav-secondary__list>
+        $forall (MenuItem{menuItemLabel, menuItemType, menuItemModal}, menuIdent, route) <- menuTypes
+          $case menuItemType
+            $of PageActionSecondary
+              <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.pagenav__link-wrapper--secondary href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
+            $of _

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

templates/widgets/pageactionprime.hamlet

@@ -1,16 +0,0 @@
-$newline never
-$if hasPageActions
-  <div .page-nav-prime>
-    $forall (MenuItem{menuItemLabel, menuItemType, menuItemModal}, menuIdent, route) <- menuTypes
-      $case menuItemType
-        $of PageActionPrime
-          <div .pagenav__list-item>
-            $if menuItemModal
-              <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
-            <a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
-        $of PageActionSecondary
-          <div .pagenav__list-item>
-            $if menuItemModal
-              <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
-            <a .pagenav__link-wrapper href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
-        $of _

templates/widgets/pageactionprime.lucius

@@ -1,10 +0,0 @@
-.page-nav-prime {
-  margin: 10px 0 20px;
-  background-color: var(--color-lightwhite);
-}
-
-.pagenav__list-item {
-  display: inline-block;
-  padding: 15px;
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
-}