From 61b17bc586fd6752496e4e1a77f6f840e4a39309 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 18 Mar 2018 17:15:52 +0100
Subject: [PATCH] fix for breadcrumbs, more design on aside-nav done

---
 templates/default-layout.lucius      | 12 +++++---
 templates/widgets/asidenav.hamlet    | 30 ++++++++++++------
 templates/widgets/asidenav.julius    | 45 +++++++++++++++++----------
 templates/widgets/asidenav.lucius    | 46 +++++++++++++++++++++-------
 templates/widgets/breadcrumbs.lucius | 15 +++------
 templates/widgets/navbar.hamlet      |  8 ++---
 templates/widgets/navbar.lucius      | 32 +++++++++++++------
 7 files changed, 123 insertions(+), 65 deletions(-)

diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index cbbf4437b..83fb22d87 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -63,14 +63,10 @@ body {
 
 a,
 a:visited {
-  color: var(--darkbase);
   text-decoration: none;
   font-weight: 600;
   transition: color .2s ease, background-color .2s ease;
 }
-a:hover {
-  color: var(--lightbase);
-}
 
 ul {
   list-style-type: none;
@@ -138,6 +134,14 @@ th {
   p {
     margin: 10px 0;
   }
+
+  a {
+    color: var(--darkbase);
+  }
+
+  a:hover {
+    color: var(--lightbase);
+  }
 }
 
 .pseudo-focus {
diff --git a/templates/widgets/asidenav.hamlet b/templates/widgets/asidenav.hamlet
index 6de2b5f82..2ced1a97a 100644
--- a/templates/widgets/asidenav.hamlet
+++ b/templates/widgets/asidenav.hamlet
@@ -6,15 +6,25 @@
           $case menuType
             $of NavbarAside (MenuItem label mIcon route _)
               <li .asidenav__list-item :Just route == mcurrentRoute:.asidenav__list-item--active>
-                $if isJust mIcon
-                  <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
-                <a .asidenav__link href=@{route}>#{label}
+                <a .asidenav__link-wrapper href=@{route}>
+                  $if isJust mIcon
+                    <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
+                  <div .asidenav__link-label>#{label}
             $of _
 
-    <div .asidenav__box>
-      <h3 .asidenav__box-title>WiSe 17/18
-      <ul .asidenav__list.asidenav__list--padded>
-        <li>Vorlesung 1
-        <li>Vorlesung 2
-        <li>Vorlesung 3
-        <li>Vorlesung 4
+    <div .asidenav__box--dont-hide>
+      <h3 .asidenav__box-title>
+        <a href="/course/W2017">WiSe 17/18
+      <ul .asidenav__list>
+        <li .asidenav__list-item>
+          <a .asidenav__link-wrapper href="/course/S2018/ixd/show">
+            <div .asidenav__link-triple>IXD
+            <div .asidenav__link-label>Interaction Design
+        <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
+        <li .asidenav__list-item>
+          <a .asidenav__link-wrapper href="/course/S2018/dbs/show">
+            <div .asidenav__link-triple>DBS
+            <div .asidenav__link-label>Datenbanksysteme
diff --git a/templates/widgets/asidenav.julius b/templates/widgets/asidenav.julius
index 26b16ed99..700aa0d36 100644
--- a/templates/widgets/asidenav.julius
+++ b/templates/widgets/asidenav.julius
@@ -3,12 +3,11 @@
 
   window.utils = window.utils || {};
 
-  window.utils.aside = function(el, bc) {
-    var asideEl = el;
+  window.utils.aside = function(asideEl, topNav) {
     var collapsed = false;
     var collClass = 'main__aside--collapsed';
     var animClass = 'main__aside--transitioning';
-    var breadcrumbs = bc;
+    var aboveCollapsedNav = false;
 
     init();
     function init() {
@@ -16,16 +15,14 @@
       if (document.body.getBoundingClientRect().width < 999 || collLS) {
         asideEl.classList.add(collClass);
         collapsed = true;
-        if (breadcrumbs) {
-          breadcrumbs.style.left = '90px';
+          if (topNav) {
+            topNav.style.paddingLeft = '90px';
           window.setTimeout(function() {
-            breadcrumbs.classList.add('breadcrumbs__container--animated');
+                topNav.classList.add('navbar--animated');
           }, 200);
         }
-      } else {
-        if (breadcrumbs) {
-          breadcrumbs.classList.add('breadcrumbs__container--animated');
-        }
+      } else if (topNav) {
+        topNav.classList.add('navbar--animated');
       }
     }
 
@@ -33,8 +30,8 @@
       if (collapsed && !hasClass() || !collapsed && hasClass()) {
         asideEl.classList.add(animClass);
         asideEl.classList.toggle(collClass, collapsed);
-        if (breadcrumbs) {
-          breadcrumbs.style.left = collapsed ? '90px' : '';
+          if (topNav) {
+            topNav.style.paddingLeft = collapsed ? '90px' : '';
         }
         window.localStorage.setItem('asidenavCollapsed', collapsed);
       }
@@ -49,21 +46,37 @@
         collapsed = !collapsed;
         check();
       }
-    });
+    }, false);
     asideEl.addEventListener('transitionend', function(event) {
       if (event.propertyName === 'opacity') {
         asideEl.classList.remove(animClass);
       }
-    });
+    }, false);
     window.addEventListener('resize', function() {
       collapsed = document.body.getBoundingClientRect().width < 999;
       check();
-    });
+    }, false);
+
+    asideEl.addEventListener('mouseover', function(event) {
+      if (!collapsed) {
+        return false;
+      }
+      aboveCollapsedNav = true;
+      window.setTimeout(function() {
+        if (aboveCollapsedNav) {
+          asideEl.classList.add('pseudo-hover');
+        }
+      }, 430);
+    }, false);
+    asideEl.addEventListener('mouseleave', function(event) {
+      aboveCollapsedNav = false;
+      asideEl.classList.remove('pseudo-hover');
+    }, false);
   };
 })();
 
 document.addEventListener('DOMContentLoaded', function() {
 
-  utils.aside(document.querySelector('.main__aside'), document.querySelector('.breadcrumbs__container'));
+    utils.aside(document.querySelector('.main__aside'), document.querySelector('.navbar'));
 
 });
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index 4c5df64bf..2a5d97885 100644
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@@ -13,11 +13,16 @@
   transition: opacity .2s ease;
 }
 
-.main__aside--collapsed:hover {
+.main__aside--collapsed.pseudo-hover {
   overflow: visible;
 }
 .main__aside--collapsed {
   width: 50px;
+
+  .asidenav__box-title {
+    width: 50px;
+    padding: 0;
+  }
 }
 .main__aside--collapsed .asidenav__box {
   opacity: 0;
@@ -47,22 +52,24 @@
 
 .asidenav__box-title {
   padding: 7px 13px;
-}
 
-.asidenav__list--padded {
-  padding: 0 13px;
+  a {
+    color: white;
+  }
 }
 
 .asidenav__list-item {
   position: relative;
   background-color: white;
   color: var(--darkbase);
+  margin: 4px 0;
 
   &:not(.asidenav__list-item--active):hover {
     color: white;
     background-color: var(--darkbase);
 
-    .asidenav__link {
+    .asidenav__link-wrapper,
+    .asidenav__link-label {
       color: white;
     }
   }
@@ -71,18 +78,35 @@
   background-color: var(--darkbase);
   color: white;
 
-  .asidenav__link {
+  .asidenav__link-wrapper {
     pointer-events: none;
     color: white;
   }
 }
 
-.asidenav__link {
+.asidenav__link-wrapper {
   position: relative;
-  display: block;
-  line-height: 50px;
-  margin: 4px 0;
-  padding-left: 54px;
+  display: flex;
+  height: 50px;
+  align-items: center;
+  justify-content: flex-start;
   color: var(--darkbase);
   z-index: 1;
+
+  .glyphicon {
+    width: 50px;
+  }
+
+  .asidenav__link-triple {
+    background-color: var(--darkbase);
+    color: white;
+    height: 50px;
+    width: 50px;
+    display: inline-block;
+    line-height: 50px;
+    text-align: center;
+    margin-right: 13px;
+    flex-shrink: 0;
+    outline: 1px solid white;
+  }
 }
diff --git a/templates/widgets/breadcrumbs.lucius b/templates/widgets/breadcrumbs.lucius
index 2ec2d1a9e..b110eb0e3 100644
--- a/templates/widgets/breadcrumbs.lucius
+++ b/templates/widgets/breadcrumbs.lucius
@@ -1,9 +1,10 @@
 .breadcrumbs__container {
-  position: absolute;
+  position: relative;
   color: white;
-  left: 340px;
-  bottom: 20px;
-  z-index: 100;
+  z-index: 10;
+  align-self: flex-end;
+  margin-bottom: 20px;
+  transition: margin-bottom .2s ease;
 }
 .breadcrumbs__container--animated {
   transition: left .2s ease;
@@ -11,9 +12,3 @@
 .breadcrumbs__container .breadcrumbs__link {
   color: white;
 }
-
-@media (max-width: 999px) {
-  .breadcrumbs__container {
-    left: 90px;
-  }
-}
diff --git a/templates/widgets/navbar.hamlet b/templates/widgets/navbar.hamlet
index cb2bc5415..b557b0d6d 100644
--- a/templates/widgets/navbar.hamlet
+++ b/templates/widgets/navbar.hamlet
@@ -1,6 +1,10 @@
 <div .navbar-container>
   <nav .navbar.js-sticky-navbar>
 
+    <!-- breadcrumbs -->
+    $if not $ Just HomeR == mcurrentRoute
+      ^{breadcrumbs}
+
     <ul .navbar__list.list--inline>
       $forall menuType <- menuTypes
         $case menuType
@@ -18,8 +22,4 @@
                 <div .navbar__link-label>#{label}
           $of _
 
-    <!-- breadcrumbs -->
-    $if not $ Just HomeR == mcurrentRoute
-      ^{breadcrumbs}
-
   <div .navbar__pushdown>
diff --git a/templates/widgets/navbar.lucius b/templates/widgets/navbar.lucius
index ec6feadf5..b04c47366 100644
--- a/templates/widgets/navbar.lucius
+++ b/templates/widgets/navbar.lucius
@@ -3,10 +3,11 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
   width: 100%;
   height: var(--header-height);
   padding-right: 5vw;
+  padding-left: 340px;
   background: var(--darkbase); /* Old browsers */
   background: -moz-linear-gradient(bottom, var(--darkbase) 0%, #425d79 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(bottom, var(--darkbase) 0%,#425d79 100%); /* Chrome10-25,Safari5.1-6 */
@@ -14,7 +15,15 @@
   color: white;
   box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
   z-index: 10;
+  top: 0;
+  left: 0;
   overflow: hidden;
+  transition: height 0.2s ease;
+}
+
+.navbar__list {
+  align-self: flex-end;
+  white-space: nowrap;
 }
 
 .navbar__list-item {
@@ -31,6 +40,9 @@
     height: 20px;
   }
 }
+.navbar :last-child {
+  margin-left: auto;
+}
 
 .navbar .navbar__link-wrapper {
   display: flex;
@@ -39,6 +51,7 @@
   align-items: center;
   height: 80px;
   color: var(--whitebase);
+  transition: height .2s ease;
 }
 
 .navbar__link-label {
@@ -88,21 +101,20 @@
 }
 
 .navbar--sticky {
-  position: fixed;
-  top: 0;
-  left: 0;
   height: var(--header-height-collapsed);
   z-index: 100;
-  transition: height 0.2s ease, line-height 0.2s ease;
 
-  .navbar__link {
-    /*opacity: 0;*/
+  .navbar__link-wrapper {
+    height: 50px;
   }
 
-  .breadcrumbs__container--animated {
-    bottom: 7px;
-    transition: all .2s ease;
+  .breadcrumbs__container {
+    margin-bottom: 7px;
   }
+
+}
+.navbar--animated {
+  transition: all .2s ease;
 }
 .navbar__pushdown {
   /*display: none;*/