From 30dd84104856e20dfb29ca07eeb3720e8b8c3c02 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Mon, 16 Jul 2018 00:50:57 +0200
Subject: [PATCH] more consistent spacing for main_content and favorites only
 .logged-in

---
 templates/default-layout.lucius      | 67 +++++++++++++---------------
 templates/standalone/alerts.lucius   |  3 +-
 templates/widgets/asidenav.julius    |  1 +
 templates/widgets/asidenav.lucius    |  9 ++++
 templates/widgets/breadcrumbs.lucius | 17 -------
 templates/widgets/navbar.lucius      | 35 +++++++++++----
 6 files changed, 69 insertions(+), 63 deletions(-)

diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index 4d4e3976f..a559e17f6 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -154,12 +154,14 @@ h4 {
 .main {
   position: relative;
   min-height: calc(100vh - var(--header-height));
+  padding: 20px;
 }
 
 @media (max-width: 768px) {
 
   .main {
     min-height: calc(100vh - var(--header-height-collapsed));
+    padding: 10px;
   }
 }
 
@@ -167,7 +169,6 @@ h4 {
   position: relative;
   background-color: white;
   overflow: hidden;
-  padding-left: 24%;
   transition: padding-left .2s ease-out;
 
   > .container {
@@ -183,42 +184,36 @@ h4 {
   }
 }
 
+@media (max-width: 768px) {
+  .logged-in {
+    .main__content {
+      padding-left: 60px;
+    }
+  }
+}
+
+@media (max-width: 425px) {
+  .logged-in {
+    .main__content {
+      padding-left: 0;
+    }
+  }
+}
+
+@media (min-width: 769px) {
+  .logged-in {
+    .main__content {
+      padding-left: calc(24% + 30px);
+    }
+  }
+}
+
 @media (min-width: 1200px) {
 
-  .main__content {
-    padding-left: 300px;
-  }
-}
-
-@media (max-width: 768px) {
-
-  .main__content {
-    padding-left: 50px;
-  }
-}
-
-@media (max-width: 425px) {
-
-  .main__content {
-    padding-left: 0;
-  }
-}
-
-.main__content-body {
-  padding: 30px 40px 60px;
-}
-
-@media (max-width: 768px) {
-
-  .main__content-body {
-    padding: 30px 20px 60px;
-  }
-}
-
-@media (max-width: 425px) {
-
-  .main__content-body {
-    padding: 20px 10px 60px;
+  .logged-in {
+    .main__content {
+      padding-left: 320px;
+    }
   }
 }
 
@@ -420,7 +415,7 @@ input[type="button"].btn-info:hover,
 }
 
 /* LIST MODIFIERS */
-.list--inline > li {
+.list--inline li {
   display: inline-block;
 }
 
diff --git a/templates/standalone/alerts.lucius b/templates/standalone/alerts.lucius
index 18b4cec41..d8118762f 100644
--- a/templates/standalone/alerts.lucius
+++ b/templates/standalone/alerts.lucius
@@ -97,13 +97,14 @@
   font-weight: 600;
   justify-content: flex-end;
   align-items: center;
+  text-align: left;
 }
 
 @media (max-width: 768px) {
 
   .alert__content {
     padding: 4px 7px;
-    padding-left: 20px;
+    padding-left: 25px;
   }
 }
 
diff --git a/templates/widgets/asidenav.julius b/templates/widgets/asidenav.julius
index 772e1b455..b43b2f97c 100644
--- a/templates/widgets/asidenav.julius
+++ b/templates/widgets/asidenav.julius
@@ -8,6 +8,7 @@
     function init() {
       var favoritesBtn = document.querySelector('.navbar__list-item--favorite');
       favoritesBtn.addEventListener('click', function(event) {
+        favoritesBtn.classList.toggle('navbar__list-item--active');
         asideEl.classList.toggle('main__aside--expanded');
         event.preventDefault();
       }, true);
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index a9bb88576..e2da210cd 100644
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@@ -1,8 +1,11 @@
 .main__aside {
   position: absolute;
+  display: none;
   background-color: var(--color-dark);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   z-index: 1;
+  top: 0;
+  left: 0;
   flex: 0 0 300px;
   min-height: calc(100% - var(--header-height));
   transition: all .2s ease-out;
@@ -10,6 +13,12 @@
   height: 100%;
 }
 
+.logged-in {
+  .main__aside {
+    display: block;
+  }
+}
+
 /* maximum width of 300px for wide screens */
 @media (min-width: 1200px) {
   .main__aside {
diff --git a/templates/widgets/breadcrumbs.lucius b/templates/widgets/breadcrumbs.lucius
index 1a2b07c6d..e0a3cd9ea 100644
--- a/templates/widgets/breadcrumbs.lucius
+++ b/templates/widgets/breadcrumbs.lucius
@@ -1,26 +1,9 @@
 .breadcrumbs__container {
   position: relative;
   color: var(--color-font);
-  margin-left: 40px;
-  margin-top: 15px;
   margin-bottom: 10px;
 }
 
-@media (max-width: 768px) {
-
-  .breadcrumbs__container {
-    margin-left: 20px;
-  }
-}
-
-@media (max-width: 425px) {
-
-  .breadcrumbs__container {
-    margin-left: 10px;
-    margin-top: 10px;
-  }
-}
-
 .breadcrumbs__link {
 
   &:hover {
diff --git a/templates/widgets/navbar.lucius b/templates/widgets/navbar.lucius
index 0c41669d7..368fdb271 100644
--- a/templates/widgets/navbar.lucius
+++ b/templates/widgets/navbar.lucius
@@ -115,6 +115,10 @@
   color: var(--color-lightwhite);
   transition: height .2s cubic-bezier(0.03, 0.43, 0.58, 1);
   box-shadow: 0 0 0 1px inset var(--color-lmu-box-border);
+
+  &:hover {
+    color: var(--color-lightwhite);
+  }
 }
 
 .navbar__link-label {
@@ -217,20 +221,33 @@
   }
 }
 
-/* "Favorites" list item, only visible on small screens */
-.navbar__list {
-
-  .navbar__list-item--favorite {
+/* "Favorites" list item, only visible on small screens and logged in */
+.navbar__list-item {
+  &.navbar__list-item--favorite {
     display: none;
-    background-color: var(--color-primary);
+  }
+}
+.navbar__list-item--favorite {
+  display: none;
+  background-color: var(--color-primary);
+}
+
+.logged-in {
+  .navbar__list {
+    li.navbar__list-item--favorite,
+    .navbar__list-item--favorite {
+      display: inline-block;
+    }
   }
 }
 
-@media (max-width: 425px) {
+@media (min-width: 426px) {
 
-  .navbar__list {
-    .navbar__list-item--favorite {
-      display: inline-block;
+  .logged-in {
+    .navbar__list {
+      .navbar__list-item--favorite {
+        display: none !important;
+      }
     }
   }
 }