From 3bd43d6b887d39b5a1be3e3819525c5ee0f5bec6 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Tue, 10 Apr 2018 22:52:03 +0200
Subject: [PATCH] asidenav cleanup

closes #36
---
 templates/widgets/asidenav.hamlet | 26 ++++------------
 templates/widgets/asidenav.lucius | 50 ++++++++++++++++---------------
 2 files changed, 31 insertions(+), 45 deletions(-)

diff --git a/templates/widgets/asidenav.hamlet b/templates/widgets/asidenav.hamlet
index 2c1cd66fc..a46c06ad9 100644
--- a/templates/widgets/asidenav.hamlet
+++ b/templates/widgets/asidenav.hamlet
@@ -1,7 +1,7 @@
 $newline never
 <aside .main__aside>
   <div .asidenav>
-    <div .asidenav__box--dont-hide>
+    <div .asidenav__box>
       <ul .asidenav__list>
         $forall menuType <- menuTypes
           $case menuType
@@ -13,20 +13,20 @@ $newline never
                   <div .asidenav__link-label>#{label}
             $of _
 
-    <div .asidenav__box--dont-hide>
+    <div .asidenav__box>
       <h3 .asidenav__box-title>
         WiSe 17/18
       <ul .asidenav__list>
         $forall (Entity _ Course{..}) <- favourites
           <li .asidenav__list-item>
             <a .asidenav__link-wrapper href=@{CourseR courseTermId courseShorthand CourseShowR}>
-              <div .asidenav__link-triple>#{courseShorthand}
+              <div .asidenav__link-shorthand>#{courseShorthand}
               <div .asidenav__link-label>#{courseName}
 
         <li .asidenav__list-item>
           <a .asidenav__link-wrapper href="/course/S2018/ixd/show">
-            <div .asidenav__link-triple>IXD
-            <div .asidenav__link-label>Interaction Design
+            <div .asidenav__link-shorthand>EXAMPLE
+            <div .asidenav__link-label>Beispiel-Kurs
           <ul .asidenav__nested-list>
             <li .asidenav__list-item>
               <a .asidenav__link-wrapper href="/course/S2018/ixd/ex">Übungsblätter
@@ -34,21 +34,5 @@ $newline never
               <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>
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index d073cea89..1f7e26ba5 100644
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@@ -24,19 +24,15 @@
     width: 50px;
     padding: 0;
   }
-}
-.main__aside--collapsed .asidenav__box {
-  opacity: 0;
-}
-.main__aside--collapsed .asidenav__box--dont-hide {
-  opacity: 1;
-}
 
-.main__aside--collapsed:not(.main__aside--transitioning) .asidenav__box {
-  height: 0;
-  padding: 0;
-  margin: 0;
-  visibility: hidden;
+  .asidenav__link-wrapper {
+    .asidenav__link-shorthand {
+      display: flex;
+    }
+    .asidenav__link-label {
+      padding-left: 0;
+    }
+  }
 }
 
 .asidenav {
@@ -63,13 +59,6 @@
     right: 12px !important;
   }
 }
-.asidenav__box {
-  margin: 10px 0;
-  padding: 10px 0;
-  width: 100%;
-  border-bottom: 4px solid var(--whitebase);
-  background-color: var(--darkbase);
-}
 
 .asidenav__box-title {
   padding: 7px 13px;
@@ -79,6 +68,7 @@
   }
 }
 
+/* hover sub-menus */
 .asidenav__nested-list {
   position: absolute;
   top: 0;
@@ -132,8 +122,9 @@
       color: white;
     }
 
-    .asidenav__link-triple {
-      transform: scale(1.2, 1);
+    .asidenav__link-shorthand {
+      background-color: var(--whitebase);
+      color: var(--darkbase);
     }
   }
 }
@@ -160,17 +151,28 @@
     width: 50px;
   }
 
-  .asidenav__link-triple {
+  .asidenav__link-shorthand {
     background-color: var(--darkbase);
     color: var(--whitebase);
     height: 50px;
     width: 50px;
-    display: inline-block;
-    line-height: 50px;
+    display: none;
     text-align: center;
     margin-right: 13px;
     flex-shrink: 0;
     outline: 1px solid white;
+    text-transform: uppercase;
+    word-break: break-all;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .asidenav__link-label {
+    padding-left: 13px;
+  }
+
+  .glyphicon + .asidenav__link-label {
+    padding-left: 0;
   }
 }