From 5a67421b303b5e18870f2d522f6d4151d4aa2693 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 26 Jan 2019 12:07:03 +0100
Subject: [PATCH] reduce asidenav width on large screens

---
 templates/default-layout.lucius   | 23 ++++++++----------
 templates/widgets/asidenav.lucius | 40 +++++++++++++------------------
 templates/widgets/navbar.lucius   | 11 ++-------
 3 files changed, 28 insertions(+), 46 deletions(-)

diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index 32c8abac0..c5e76804c 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -19,6 +19,10 @@
   /* DIMENSIONS */
   --header-height: 100px;
   --header-height-collapsed: 60px;
+
+  --asidenav-width-xl: 250px;
+  --asidenav-width-lg: 20%;
+  --asidenav-width-md: 50px;
 }
 
 * {
@@ -196,21 +200,14 @@ h4 {
   .main__content {
     margin: 0;
     max-width: none;
+    padding-left: 0;
   }
 }
 
-@media (max-width: 768px) {
+@media (min-width: 425px) {
   .logged-in:not(.modal) {
     .main__content {
-      padding-left: 60px;
-    }
-  }
-}
-
-@media (max-width: 425px) {
-  .logged-in:not(.modal) {
-    .main__content {
-      padding-left: 0;
+      padding-left: calc(var(--asidenav-width-md, 50px) + 10px);
     }
   }
 }
@@ -218,7 +215,7 @@ h4 {
 @media (min-width: 769px) {
   .logged-in:not(.modal) {
     .main__content {
-      padding-left: calc(24% + 30px);
+      padding-left: calc(var(--asidenav-width-lg, 20%) + 20px);
     }
   }
 }
@@ -226,7 +223,7 @@ h4 {
 @media (min-width: 1200px) {
   .logged-in:not(.modal) {
     .main__content {
-      padding-left: 320px;
+      padding-left: calc(var(--asidenav-width-xl, 250px) + 20px);
     }
   }
 }
@@ -450,7 +447,7 @@ input[type="button"].btn-info:hover,
 }
 
 ul.list--inline {
-  
+
   display: inline-block;
   margin-left: 0;
 
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index 37db31849..6f05668a7 100644
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@@ -6,29 +6,17 @@
   z-index: 1;
   top: 0;
   left: 0;
-  flex: 0 0 300px;
+  flex: 0 0 0;
+  flex-basis: var(--asidenav-width-lg, 20%);
   min-height: calc(100% - var(--header-height));
   transition: all .2s ease-out;
-  width: 24%;
+  width: var(--asidenav-width-lg, 20%);
   height: 100%;
 }
 
 .logged-in {
   .main__aside {
     display: block;
-  }
-}
-
-/* maximum width of 300px for wide screens */
-@media (min-width: 1200px) {
-  .main__aside {
-    width: 300px;
-  }
-}
-
-@media (max-width: 768px) {
-
-  .main__aside {
     min-height: calc(100% - var(--header-height-collapsed));
   }
 }
@@ -44,14 +32,12 @@
     height: 100% !important;
     width: 100%;
     z-index: 5;
-    box-shadow: 0 0 13px var(--color-dark);
-    white-space: nowrap;
     overflow: hidden;
-    transform: translateX(0);
+    transform: translateX(-110%);
     transition: transform .2s ease-out;
 
-    &:not(.main__aside--expanded) {
-      transform: translateX(-110%);
+    &.main__aside--expanded {
+      transform: translateX(0%);
     }
 
     .asidenav__box-title {
@@ -65,6 +51,12 @@
   }
 }
 
+@media (min-width: 1200px) {
+  .main__aside {
+    width: var(--asidenav-width-xl, 250px)
+  }
+}
+
 .asidenav {
   color: white;
 }
@@ -213,13 +205,13 @@
 @media (min-width: 425px) and (max-width: 768px) {
 
   .main__aside {
-    width: 50px;
-    flex-basis: 50px;
+    width: var(--asidenav-width-md, 50px);
+    flex-basis: var(--asidenav-width-md, 50px);
     overflow: hidden;
     min-height: calc(100% - var(--header-height-collapsed));
 
     .asidenav__box-title {
-      width: 50px;
+      width: var(--asidenav-width-md, 50px);
       font-size: 18px;
       text-align: center;
       padding: 10px 1px;
@@ -231,7 +223,7 @@
       display: flex;
       position: static;
       height: 50px;
-      width: 50px;
+      width: var(--asidenav-width-md, 50px);
       text-align: center;
       opacity: 1;
       font-size: 15px;
diff --git a/templates/widgets/navbar.lucius b/templates/widgets/navbar.lucius
index 81200d4e8..6a49d2099 100644
--- a/templates/widgets/navbar.lucius
+++ b/templates/widgets/navbar.lucius
@@ -61,7 +61,7 @@
   height: 80px;
   padding: 0 20px;
   display: flex;
-  flex-basis: 300px;
+  flex-basis: var(--asidenav-width-xl, 250px);
   font-size: 16px;
   align-items: center;
   color: var(--color-lightwhite);
@@ -110,7 +110,7 @@
 @media (max-width: 1199px) {
 
   .navbar__logo {
-    flex-basis: 24%;
+    flex-basis: var(--asidenav-width-lg, 20%);
     font-size: 16px;
   }
 }
@@ -180,13 +180,6 @@
   }
 }
 
-@media (max-width: 500px) {
-
-  .navbar__link-label {
-    font-size: 12px;
-  }
-}
-
 /* navbar list */
 .navbar__list {
   white-space: nowrap;