From b2ffb2f0c32f091849d45d102c4cbf4daeed27cb Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Fri, 8 Feb 2019 22:07:01 +0100
Subject: [PATCH] make hover menu for SecondaryPageActions not right-aligned

---
 templates/widgets/pageaction.lucius | 89 ++++++++++++-----------------
 1 file changed, 36 insertions(+), 53 deletions(-)

diff --git a/templates/widgets/pageaction.lucius b/templates/widgets/pageaction.lucius
index c06e9404c..923c8ceee 100644
--- a/templates/widgets/pageaction.lucius
+++ b/templates/widgets/pageaction.lucius
@@ -1,44 +1,8 @@
 .pagenav {
   display: flex;
-  justify-content: space-between;
   align-items: flex-start;
 }
 
-.pagenav-secondary {
-  position: relative;
-  overflow: visible;
-  padding-top: 10px;
-  margin-left: auto;
-
-  &::after {
-    content: '\2807';
-    display: inline-block;
-    font-size: 31px;
-    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 {
-      display: block;
-    }
-  }
-}
-
-.pagenav-secondary__list {
-  position: absolute;
-  display: none;
-  right: 0;
-  top: 10px;
-  width: 250px;
-  text-align: right;
-  background-color: white;
-  box-shadow: 0 0 6px 3px var(--color-grey-light);
-}
-
 .pagenav__list-item {
   flex: 1;
   position: relative;
@@ -47,16 +11,6 @@
   margin: 10px 10px 0 0;
 }
 
-.pagenav__list-item--secondary {
-  display: flex;
-  box-shadow: none;
-  margin: 0;
-
-  &:hover {
-    background-color: var(--color-grey-light);
-  }
-}
-
 .pagenav__link-wrapper {
   flex: 1;
   padding: 10px 10px 12px;
@@ -66,24 +20,53 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
 
   .pagenav {
     flex-direction: column;
   }
+}
 
+@media (min-width: 1025px) {
   .pagenav-secondary {
-    width: 100%;
+    position: relative;
+    overflow: visible;
+    padding-top: 10px;
 
     &::after {
-      content: none;
+      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 {
-    display: block;
-    position: relative;
-    width: initial;
-    text-align: initial;
+    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);
+    }
   }
 }