From 3c7ba0e8246e62c4b31fb4bb6ebc981ddc0bbc7e Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 27 Jan 2019 18:17:40 +0100
Subject: [PATCH] preparation for menu for secondary pageactions

---
 templates/widgets/pageactionprime.hamlet | 35 ++++++++++-------
 templates/widgets/pageactionprime.julius |  0
 templates/widgets/pageactionprime.lucius | 49 ++++++++++++++++++++++++
 3 files changed, 70 insertions(+), 14 deletions(-)
 create mode 100644 templates/widgets/pageactionprime.julius

diff --git a/templates/widgets/pageactionprime.hamlet b/templates/widgets/pageactionprime.hamlet
index 624ec8e51..c9dd7dc02 100644
--- a/templates/widgets/pageactionprime.hamlet
+++ b/templates/widgets/pageactionprime.hamlet
@@ -1,16 +1,23 @@
 $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 _
+  <div .pagenav>
+    <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 _
+    <div .pagenav-secondary>
+      Weitere Punkte
+      <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 href=#{route} ##{menuIdent}>_{SomeMessage menuItemLabel}
+            $of _
diff --git a/templates/widgets/pageactionprime.julius b/templates/widgets/pageactionprime.julius
new file mode 100644
index 000000000..e69de29bb
diff --git a/templates/widgets/pageactionprime.lucius b/templates/widgets/pageactionprime.lucius
index 831bdec11..8e83f70b2 100644
--- a/templates/widgets/pageactionprime.lucius
+++ b/templates/widgets/pageactionprime.lucius
@@ -1,6 +1,55 @@
+.pagenav {
+  display: flex;
+  justify-content: space-between;
+}
+
+.pagenav-secondary {
+  float: right;
+  position: relative;
+  flex-basis: 50px;
+  height: 50px;
+  width: 50px;
+  overflow: visible;
+
+  &:hover {
+    .pagenav-secondary__list {
+      animation: pagenav-fade-in 200ms ease-in-out;
+      display: block;
+    }
+  }
+}
+
+@keyframes pagenav-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+.pagenav-secondary__list {
+  position: absolute;
+  display: none;
+  right: 0;
+  top: 0;
+  width: 250px;
+  text-align: right;
+  padding: 7px 13px;
+  background-color: white;
+  box-shadow: 0 0 6px 3px var(--color-grey-light)
+}
+
 .pagenav__list-item {
+  position: relative;
   display: inline-block;
   padding: 7px 10px;
   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6);
   margin: 10px 10px 0 0;
 }
+
+.pagenav__list-item--secondary {
+  display: block;
+  margin: 0;
+
+  +.pagenav__list-item--secondary {
+    margin-top: 10px;
+  }
+}