Merge branch 'master' into feat/file_inputs

2018-03-30 01:12:28 +02:00 · 2018-03-30 01:12:28 +02:00 · 49d5008f0e
commit 49d5008f0e
parent c04f01ad87 fc3cb2de3b
18 changed files with 427 additions and 108 deletions
--- a/src/Foundation.hs
+++ b/src/Foundation.hs
@ -399,6 +399,20 @@ defaultMenuLayout menu widget = do
        asidenav = $(widgetFile "widgets/asidenav")
        breadcrumbs :: Widget
        breadcrumbs = $(widgetFile "widgets/breadcrumbs")
+        modal :: [Char] -> [Char] -> Widget
+        modal modalTrigger modalContent = do
+          let
+            modalId :: Int32
+            modalId = 13
+          $(widgetFile "widgets/modal")
+        pageactionprime :: Widget
+        pageactionprime = $(widgetFile "widgets/pageactionprime")
+        -- functions to determine if there are page-actions
+        isPageActionPrime :: MenuTypes -> Bool
+        isPageActionPrime (PageActionPrime _) = True
+        isPageActionPrime _ = False
+        hasPageActions :: Bool
+        hasPageActions = any isPageActionPrime menuTypes

    pc <- widgetToPageContent $ do
        addStylesheetRemote "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900"
--- a/src/Handler/Course.hs
+++ b/src/Handler/Course.hs
@ -64,7 +64,7 @@ getCourseListTermR tidini = do
          )
        ]
  let pageLinks =
-        [ NavbarAside $ MenuItem
+        [ PageActionPrime $ MenuItem
          { menuItemLabel = "Neuer Kurs"
          , menuItemIcon  = Just "book"
          , menuItemRoute = CourseNewR
@ -93,7 +93,7 @@ getCourseShowR tid csh = do
  let course = entityVal courseEnt
  (regWidget, regEnctype) <- generateFormPost $ identifyForm "registerBtn" $ registerButton $ mbRegistered
  let pageActions =
-        [ NavbarAside $ MenuItem
+        [ PageActionPrime $ MenuItem
          { menuItemLabel = "Übungsblätter"
          , menuItemIcon  = Nothing
          , menuItemRoute = CSheetR tid csh SheetListR
--- a/src/Handler/Term.hs
+++ b/src/Handler/Term.hs
@ -76,7 +76,7 @@ getTermShowR = do
        , dbtIdent = "terms" :: Text
        }
      let pageActions =
-            [ NavbarAside $ MenuItem
+            [ PageActionPrime $ MenuItem
              { menuItemLabel = "Neues Semester"
              , menuItemIcon  = Nothing
              , menuItemRoute = TermEditR
--- a/templates/default-layout-wrapper.hamlet
+++ b/templates/default-layout-wrapper.hamlet
@ -38,7 +38,12 @@ $newline never
      \  });
      }

-  <body>
+
+  <body .no-js>
+    <!-- removes no-js class from body if client supports javascript -->
+    <script>
+      document.body.classList.remove('no-js');
+
    ^{pageBody pc}

    $maybe analytics <- appAnalytics $ appSettings master
--- a/templates/default-layout.hamlet
+++ b/templates/default-layout.hamlet
@ -6,6 +6,8 @@
  <!-- secondary navigation at the side -->
  ^{asidenav}

+  ^{modal ".toggler" "<h2>Neue Veranstaltung</h2><br>Erstelle eine neue Veranstaltung! Jetzt und hier. Kostenlos."}
+
  <div .main__content>

    <!-- alerts -->
@ -13,5 +15,8 @@
      $with status2 <- bool status "info" (status == "")
        <div class="alert alert-#{status2}">#{msg}

+    <!-- prime page actions -->
+    ^{pageactionprime}
+
    <!-- actual content -->
    ^{widget}
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@ -25,6 +25,7 @@
  --lighterbase: #5F98C2;
  --whitebase: #FCFFFA;
  --greybase: #B1B5C0;
+  --lightgreybase: #D9DEDB;
  --blackbase: #1A2A36;
  --fontbase: #34303a;
  --fontsec: #5b5861;
@ -158,7 +159,7 @@ th {
 input[type="submit"],
 input[type="button"],
 button,
-.btn {
+.btn, a.btn {
  outline: 0;
  border: 0;
  box-shadow: 0;
@ -174,12 +175,14 @@ button,
 }
 input.btn-primary,
 button.btn-primary,
+a.btn.btn-primary,
 .btn.btn-primary {
  background-color: var(--primarybase);
 }

 input.btn-info,
 button.btn-info,
+a.btn.btn-info,
 .btn.btn-info {
  background-color: var(--infobase)
 }
@ -187,6 +190,7 @@ button.btn-info,
 input[type="submit"][disabled],
 input[type="button"][disabled],
 button[disabled],
+a.btn[disabled],
 .btn[disabled] {
  opacity: 0.3;
  background-color: var(--greybase);
@ -196,14 +200,17 @@ button[disabled],
 input[type="submit"]:not([disabled]):hover,
 input[type="button"]:not([disabled]):hover,
 button:not([disabled]):hover,
+a.btn:not([disabled]):hover,
 .btn:not([disabled]):hover {
  background-color: var(--lighterbase);
  text-decoration: underline;
+  color: white;
 }

 input[type="submit"].btn-info:hover,
 input[type="button"].btn-info:hover,
 button.btn-info:hover,
+a.btn.btn-info:hover,
 .btn.btn-info:hover {
  background-color: var(--greybase)
 }
--- a/templates/standalone/inputs.julius
+++ b/templates/standalone/inputs.julius
@ -172,6 +172,11 @@ document.addEventListener('DOMContentLoaded', function() {
  // setup reactive labels
  Array.from(document.querySelectorAll('.reactive-label')).forEach(function(label) {
    var input = document.querySelector('#' + label.getAttribute('for'));
+    if (!input) {
+      console.error('No input found for ReactiveLabel! Targeted input: \'#%s\'', label.getAttribute('for'));
+      return false;
+    }
+
    var parent = label.parentElement;
    var type = input.getAttribute('type');
    var isFileInput = /file/i.test(type);
--- a/templates/standalone/inputs.lucius
+++ b/templates/standalone/inputs.lucius
@ -3,6 +3,53 @@ form {
  margin: 20px 0;
 }

+/* FORM GROUPS */
+.form-group {
+  position: relative;
+  display: flex;
+  display: grid;
+  grid-template-columns: 25% max-content;
+  grid-auto-columns: 25%;
+  grid-gap: 5px;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 10px 0;
+  padding-left: 10px;
+  border-left: 8px solid transparent;
+}
+
+.form-group--required {
+  border-left: 8px solid var(--lighterbase);
+}
+
+.form-group--valid {
+  border-left: 8px solid var(--validbase);
+}
+
+.form-group--has-error {
+  border-left: 8px solid var(--errorbase) !important;
+}
+
+.form-group__label {
+  width: 25%;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+@media (max-width: 999px) {
+  .form-group {
+    grid-template-columns: 1fr;
+    grid-template-rows: 30px;
+    align-items: baseline;
+    margin-top: 17px;
+    flex-direction: column;
+
+    > * {
+      width: 100%;
+    }
+  }
+}
+
 /* TEXT INPUTS */
 input[type="text"],
 input[type="password"],
@ -18,7 +65,7 @@ input[type="email"] {
  color: var(--fontbase);
  transition: all .1s;
  font-size: 16px;
-  min-width: 300px;
+  min-width: 400px;
 }

 input[type="text"]:focus,
@ -37,7 +84,7 @@ textarea {
  outline: 0;
  border: 0;
  padding: 7px 4px;
-  min-width: 300px;
+  min-width: 400px;
  min-height: 100px;
  font-family: var(--fontfamilybase);
  font-size: 16px;
@ -51,30 +98,6 @@ textarea:focus {
  background-color: transparent;
  border-bottom-color: var(--lightbase);
 }
-/* FORM GROUPS */
-.form-group {
-  position: relative;
-  display: grid;
-  grid-template-columns: repeat(2, minmax(150px, max-content));
-  grid-auto-columns: minmax(150px, max-content);
-  grid-gap: 5px;
-  align-items: center;
-  margin: 10px 0;
-  padding-left: 10px;
-  border-left: 8px solid transparent;
-}
-
-.form-group--required {
-  border-left: 8px solid var(--lighterbase);
-}
-
-.form-group--valid {
-  border-left: 8px solid var(--validbase);
-}
-
-.form-group--has-error {
-  border-left: 8px solid var(--errorbase) !important;
-}

 /* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */
 input[type="checkbox"] {
@ -202,12 +225,6 @@ input[type="checkbox"]:checked::after {
  color: var(--fontbase);
 }
@media (max-width: 999px) {
-  .form-group {
-    grid-template-rows: 30px;
-    grid-template-columns: 1fr;
-    align-items: baseline;
-    margin-top: 17px;
-  }
  .reactive-label {
    position: relative;
    transform: translate(2px, 30px);
--- a/templates/widgets/asidenav.hamlet
+++ b/templates/widgets/asidenav.hamlet
@ -1,3 +1,4 @@
+$newline never
 <aside .main__aside>
  <div .asidenav>
    <div .asidenav__box--dont-hide>
@ -10,12 +11,6 @@
                  $if isJust mIcon
                    <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
                  <div .asidenav__link-label>#{label}
-            $of PageActionPrime (MenuItem label mIcon route _)
-              <li .asidenav__list-item :Just route == mcurrentRoute:.asidenav__list-item--active>
-                <a .asidenav__link-wrapper href=@{route}>
-                  $if isJust mIcon
-                    <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
-                  <div .asidenav__link-label>#{label}
            $of _

    <div .asidenav__box--dont-hide>
@ -26,13 +21,28 @@
          <a .asidenav__link-wrapper href="/course/S2018/ixd/show">
            <div .asidenav__link-triple>IXD
            <div .asidenav__link-label>Interaction Design
+          <ul .asidenav__nested-list>
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/ixd/ex">Übungsblätter
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/ixd/show">Klausuren
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/ixd/show">Übungsgruppen
        <li .asidenav__list-item>
          <a .asidenav__link-wrapper href="/course/S2018/ffp/show">
            <div .asidenav__link-triple>FFP
            <div .asidenav__link-label>Fortgeschrittene Funktionale Programmierung
+          <ul .asidenav__nested-list>
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/ffp/ex">Abgaben
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/ffp/show">Klausuren
        <li .asidenav__list-item>
          <a .asidenav__link-wrapper href="/course/S2018/dbs/show">
            <div .asidenav__link-triple>DBS
            <div .asidenav__link-label>Datenbanksysteme
+          <ul .asidenav__nested-list>
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/dbs/ex">Übungsgruppen

  <div .asidenav__toggler>
--- a/templates/widgets/asidenav.julius
+++ b/templates/widgets/asidenav.julius
@ -3,9 +3,18 @@

  window.utils = window.utils || {};

-  window.utils.aside = function(asideEl, topNav) {
+  // Defines a function to turn an element into an interactive aside-navigation.
+  // If the small is smaller than 999px the navigation is automatically
+  // collapsed - even when dynamically resized (e.g. switching from portatit
+  // to landscape).
+  // The can user may also manually collapse and expand the navigation by
+  // using the little arrow at the bottom.
+  window.utils.aside = function(asideEl) {
    var collapsed = false;
    var collClass = 'main__aside--collapsed';
+    // animClass used to enable transitions only when needed so that
+    // (potentially happening) initial collapse of the asidenav
+    // goes unnoticed by the user.
    var animClass = 'main__aside--transitioning';
    var aboveCollapsedNav = false;

@ -15,24 +24,14 @@
      if (document.body.getBoundingClientRect().width < 999 || collLS) {
        asideEl.classList.add(collClass);
        collapsed = true;
-          if (topNav) {
-            topNav.style.paddingLeft = '90px';
-          window.setTimeout(function() {
-                topNav.classList.add('navbar--animated');
-          }, 200);
-        }
-      } else if (topNav) {
-        topNav.classList.add('navbar--animated');
      }
+      addListener();
    }

    function check() {
      if (collapsed && !hasClass() || !collapsed && hasClass()) {
        asideEl.classList.add(animClass);
        asideEl.classList.toggle(collClass, collapsed);
-          if (topNav) {
-            topNav.style.paddingLeft = collapsed ? '90px' : '';
-        }
        window.localStorage.setItem('asidenavCollapsed', collapsed);
      }
    }
@ -41,41 +40,46 @@
      return asideEl.classList.contains(collClass);
    }

-    asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) {
-      collapsed = !collapsed;
-      check();
-    }, false);
-    asideEl.addEventListener('transitionend', function(event) {
-      if (event.propertyName === 'opacity') {
-        asideEl.classList.remove(animClass);
-      }
-    }, false);
-    window.addEventListener('resize', function() {
-      collapsed = document.body.getBoundingClientRect().width < 999;
-      check();
-    }, false);
+    function addListener() {

-    asideEl.addEventListener('mouseover', function(event) {
-      if (!collapsed) {
-        return false;
-      }
-      aboveCollapsedNav = true;
-      console.log(event);
-      window.setTimeout(function() {
-        if (aboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
-          asideEl.classList.add('pseudo-hover');
+      asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) {
+        collapsed = !collapsed;
+        check();
+      }, false);
+
+      asideEl.addEventListener('transitionend', function(event) {
+        if (event.propertyName === 'opacity') {
+          asideEl.classList.remove(animClass);
        }
-      }, 430);
-    }, false);
-    asideEl.addEventListener('mouseleave', function(event) {
-      aboveCollapsedNav = false;
-      asideEl.classList.remove('pseudo-hover');
-    }, false);
+      }, false);
+
+      window.addEventListener('resize', function() {
+        collapsed = document.body.getBoundingClientRect().width < 999;
+        check();
+      }, false);
+
+      asideEl.addEventListener('mouseover', function(event) {
+        if (!collapsed) {
+          return false;
+        }
+        aboveCollapsedNav = true;
+        window.setTimeout(function() {
+          if (aboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
+            asideEl.classList.add('pseudo-hover');
+          }
+        }, 800);
+      }, false);
+
+      asideEl.addEventListener('mouseleave', function(event) {
+        aboveCollapsedNav = false;
+        asideEl.classList.remove('pseudo-hover');
+      }, false);
+    }
  };
 })();

 document.addEventListener('DOMContentLoaded', function() {

-    utils.aside(document.querySelector('.main__aside'), document.querySelector('.navbar'));
+    utils.aside(document.querySelector('.main__aside'));

 });
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@ -4,7 +4,6 @@
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 1;
  flex: 0 0 300px;
-  overflow: hidden;
 }
 .main__aside--transitioning {
  transition: flex-basis .2s ease;
@ -19,6 +18,7 @@
 .main__aside--collapsed {
  width: 50px;
  flex-basis: 50px;
+  overflow: hidden;

  .asidenav__box-title {
    width: 50px;
@ -44,6 +44,9 @@
  margin-top: 20px;
  color: white;

+  .js-show-hide__target {
+    overflow: visible;
+  }
  .js-show-hide__toggle::before {
    top: 14px;
    right: 12px;
@ -76,6 +79,39 @@
  }
 }

+.asidenav__nested-list {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: var(--fontbase);
+  transform: translateX(0);
+  opacity: 0;
+  transition: all .2s ease;
+  z-index: -1;
+
+  .asidenav__list-item {
+    background-color: var(--darkbase);
+    color: white;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  .asidenav__link-wrapper {
+    padding-left: 13px;
+    padding-right: 13px;
+    border-left: 20px solid white;
+    transition: all .2s ease;
+
+    &:hover {
+      background-color: white;
+      color: var(--darkbase) !important;
+      border-left: 20px solid var(--darkbase);
+    }
+  }
+}
+
 .asidenav__list-item {
  position: relative;
  background-color: white;
@ -86,6 +122,11 @@
    color: white;
    background-color: var(--darkbase);

+    .asidenav__nested-list {
+      transform: translateX(100%);
+      opacity: 1;
+    }
+
    .asidenav__link-wrapper,
    .asidenav__link-label {
      color: white;
--- a/templates/widgets/modal.hamlet
+++ b/templates/widgets/modal.hamlet
@ -0,0 +1,15 @@
+<div .modal.js-modal #modal-#{modalId} data-trigger=#{modalTrigger} data-closeable=true>
+  <h2>Neue Veranstaltung
+  #{modalContent}
+  <form>
+    <div .form-group>
+      <label .reactive-label for="inp1">Name
+      <input type="text" id="inp1">
+    <div .form-group>
+      <label .reactive-label for="inp2">Kürzel
+      <input type="text" id="inp2">
+    <div .form-group>
+      <label .reactive-label for="inp3">Semester
+      <input type="text" id="inp3">
+    <div .form-group>
+      <input type="submit" value="Submit">
--- a/templates/widgets/modal.julius
+++ b/templates/widgets/modal.julius
@ -0,0 +1,57 @@
+document.addEventListener('DOMContentLoaded', function() {
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  if (!window.utils.modal) {
+    window.utils.modal = function(modal) {
+      var overlay = document.createElement('div');
+      var closer = document.createElement('div');
+      var trigger = document.querySelector(modal.dataset.trigger);
+      var closeBound;
+
+      this.open = function openFn() {
+        modal.classList.add('modal--open');
+        overlay.classList.add('modal__overlay');
+        modal.parentNode.insertBefore(overlay, modal);
+        overlay.classList.add('modal__overlay--open');
+        toggleScroll(false);
+
+        if (modal.dataset.closeable === 'true') {
+          closer.classList.add('modal__closer');
+          modal.insertBefore(closer, null);
+          closer.addEventListener('click', closeBound, false);
+          overlay.addEventListener('click', closeBound, false);
+        }
+      };
+
+      this.openOnEvent = function openOnEventFn(event) {
+        if (event.detail.for === modal.getAttribute('id')) {
+          this.open();
+        }
+      };
+      this.close = function closeFn(event) {
+        if (typeof event === 'undefined' || event.target === closer || event.target === overlay) {
+          modal.classList.remove('modal--open');
+          overlay.classList.remove('modal__overlay--open');
+          toggleScroll(true);
+          closer.removeEventListener('click', closeBound, false);
+        }
+      };
+
+      document.addEventListener('modal-open', this.openOnEvent.bind(this), false);
+      closeBound = this.close.bind(this);
+      if (trigger) {
+        trigger.classList.add('modal__trigger');
+        trigger.addEventListener('click', this.open.bind(this), false);
+      }
+    }
+  }
+
+  function toggleScroll(scrollable) {
+    document.body.classList.toggle('no-scroll', !scrollable);
+  }
+
+  new utils.modal(document.querySelector('#modal-13')); // hashtag{modalId} scope-variable
+
+}, false);
--- a/templates/widgets/modal.lucius
+++ b/templates/widgets/modal.lucius
@ -0,0 +1,86 @@
+.modal {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(0.8, 0.8);
+  display: block;
+  background-color: rgba(255, 255, 255, 0.9);
+  min-width: 60vw;
+  min-height: 100px;
+  max-height: calc(100vh - 30px);
+  border-radius: 7px;
+  z-index: -1;
+  color: var(--fontbase);
+  padding: 20px;
+  overflow: auto;
+  opacity: 0;
+  transition: all .15s ease;
+
+  &.modal--open {
+    opacity: 1;
+    z-index: 200;
+    transform: translate(-50%, -50%) scale(1, 1);
+  }
+}
+
+@media (max-width: 999px) {
+  .modal {
+    min-width: 80vw;
+  }
+}
+@media (max-width: 666px) {
+  .modal {
+    min-width: 90vw;
+  }
+}
+@media (max-width: 444px) {
+  .modal {
+    min-width: calc(100vw - 20px);
+  }
+}
+
+.modal__overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background-color: transparent;
+  z-index: -1;
+  opacity: 0;
+  transition: all .2s ease;
+
+  &.modal__overlay--open {
+    z-index: 199;
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+}
+
+.modal__trigger {
+  cursor: pointer;
+}
+
+.modal__closer {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  background-color: var(--darkbase);
+  border-radius: 2px;
+  cursor: pointer;
+
+  &::before {
+    content: '\e014';
+    font-family: 'Glyphicons Halflings';
+    color: white;
+  }
+}
+
+.no-scroll {
+  overflow: hidden;
+}
--- a/templates/widgets/navbar.hamlet
+++ b/templates/widgets/navbar.hamlet
@ -1,3 +1,4 @@
+$newline never
 <div .navbar-container>
  <nav .navbar.js-sticky-navbar>

--- a/templates/widgets/navbar.julius
+++ b/templates/widgets/navbar.julius
@ -1,28 +1,48 @@
-/**
- * .js-sticky-navbar
- *   ul
- *     li Item 1
- *     li Item 2
- */
+ (function() {
+   'use strict';
+
+   window.utils = window.utils || {};
+
+   window.utils.stickynav = function(nav) {
+     var ticking = false;
+
+     init();
+     function init() {
+       nav.style.paddingLeft = document.body.getBoundingClientRect().width < 999 ? '90px' : '';
+       window.setTimeout(function() {
+         nav.classList.add('navbar--animated');
+       }, 200);
+       checkScroll();
+       addListener();
+     }
+
+     // checks scroll direction and shows/hides navbar accordingly
+     function checkScroll() {
+       var sticky = window.scrollY > 0;
+       nav.classList.toggle('navbar--sticky', sticky);
+       ticking = false;
+     }
+
+     function addListener() {
+       window.addEventListener('scroll', function(e) {
+         if (!ticking) {
+           window.requestAnimationFrame(checkScroll);
+           ticking = true;
+         }
+       }, false);
+     }
+
+     window.addEventListener('resize', function() {
+       nav.style.paddingLeft = document.body.getBoundingClientRect().width < 999 ? '90px' : '';
+     }, false);
+   }
+
+
+
+})();

 document.addEventListener('DOMContentLoaded', function() {

-  var ticking = false;
-  var nav = document.querySelector('.js-sticky-navbar');
-
-  window.addEventListener('scroll', function(e) {
-      if (!ticking) {
-          window.requestAnimationFrame(checkScroll);
-          ticking = true;
-      }
-  }, false);
-
-  // checks scroll direction and shows/hides navbar accordingly
-  function checkScroll() {
-      var sticky = window.scrollY > 0;
-      nav.classList.toggle('navbar--sticky', sticky);
-      ticking = false;
-  }
-  checkScroll();
+  utils.stickynav(document.querySelector('.js-sticky-navbar'));

 });
--- a/templates/widgets/pageactionprime.hamlet
+++ b/templates/widgets/pageactionprime.hamlet
@ -0,0 +1,11 @@
+$newline never
+$if hasPageActions
+  <div .page-nav-prime>
+    <h3>Aktionen:
+    <ul .pagenav__list>
+      $forall menuType <- menuTypes
+        $case menuType
+          $of PageActionPrime (MenuItem label mIcon route _)
+            <li .pagenav__list-item>
+              <a .pagenav__link-wrapper href=@{route}>#{label}
+          $of _
--- a/templates/widgets/pageactionprime.lucius
+++ b/templates/widgets/pageactionprime.lucius
@ -0,0 +1,21 @@
+.page-nav-prime {
+  background-color: var(--lightgreybase);
+  box-shadow: -20px -20px 0 20px var(--lightgreybase),
+              20px -20px 0 20px var(--lightgreybase);
+  padding: 13px 0;
+}
+
+.page-nav-prime .pagenav__list {
+  margin: 7px 0 0;
+  display: block;
+}
+.page-nav-prime .pagenav__list-item {
+  display: inline-block;
+  border-bottom: 2px solid var(--lightbase);
+  margin-right: 7px;
+  transition: border-bottom-color .2s ease;
+
+  &:hover {
+    border-bottom-color: var(--lighterbase);
+  }
+}