From db0076a628b5895a3a960ab29ba0ed7b27303e02 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 1 Jul 2018 01:32:36 +0200
Subject: [PATCH] navbar now with lmu-boxes

---
 src/Foundation.hs               |   2 +-
 templates/default-layout.lucius |  11 +++
 templates/widgets/navbar.hamlet |   2 +-
 templates/widgets/navbar.lucius | 116 +++++++++++++++++++++++++-------
 4 files changed, 103 insertions(+), 28 deletions(-)

diff --git a/src/Foundation.hs b/src/Foundation.hs
index c70a713c0..cf10ff20d 100644
--- a/src/Foundation.hs
+++ b/src/Foundation.hs
@@ -725,7 +725,7 @@ pageActions (HomeR) =
 --   ,
     NavbarAside $ MenuItem
       { menuItemLabel = "AdminDemo"
-      , menuItemIcon  = Nothing
+      , menuItemIcon  = Just "book"
       , menuItemRoute = AdminTestR
       , menuItemAccessCallback' = return True
       }
diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index b78d81b29..2219e7edd 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -46,7 +46,18 @@ body {
   --color-darker: #274a65;
   --color-link: var(--color-dark);
   --color-link-hover: var(--color-darker);
+  --color-lmu-box-border: transparent;
 
+  /* WIP LMU THEME */
+  &.theme--lmu {
+    --color-lmu-box-border: var(--color-lightwhite);
+    --color-primary: #0a9342;
+    --color-dark: #087536;
+    --color-darker: #075728;
+    --color-link: var(--color-font);
+    --color-link-hover: var(--color-font);
+    --header-height: 100px;
+  }
 
   &.theme--neutral-blue {
     --color-primary: #3E606F;
diff --git a/templates/widgets/navbar.hamlet b/templates/widgets/navbar.hamlet
index 7329fd2db..9a67a13fe 100644
--- a/templates/widgets/navbar.hamlet
+++ b/templates/widgets/navbar.hamlet
@@ -4,7 +4,7 @@ $newline never
 
     <a href="/" .navbar__logo>
 
-    <ul .navbar__list.list--inline>
+    <ul .navbar__list.list--inline.navbar__list-left>
         $forall menuType <- menuTypes
           $case menuType
             $of NavbarAside (MenuItem label mIcon route _)
diff --git a/templates/widgets/navbar.lucius b/templates/widgets/navbar.lucius
index 0c29ca920..9e4a244c3 100644
--- a/templates/widgets/navbar.lucius
+++ b/templates/widgets/navbar.lucius
@@ -3,11 +3,10 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   width: 100%;
   height: var(--header-height);
   padding-right: 2vw;
-  padding-left: calc(24% + 40px);
   background: var(--color-darker); /* Old browsers */
   background: -moz-linear-gradient(bottom, var(--color-dark) 0%, var(--color-darker) 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(bottom, var(--color-dark) 0%,var(--color-darker) 100%); /* Chrome10-25,Safari5.1-6 */
@@ -21,13 +20,6 @@
   transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
 }
 
-@media (min-width: 1200px) {
-
-  .navbar {
-    padding-left: 340px;
-  }
-}
-
 @media (max-width: 768px) {
 
   .navbar {
@@ -36,31 +28,67 @@
 }
 
 .navbar__logo {
-  position: absolute;
-  top: 15px;
+  top: 10px;
   left: 20px;
-  transition: all .2s ease;
-  transform-origin: left;
-  width: 0px;
+  height: 80px;
+  padding: 0 20px;
+  display: flex;
+  flex-basis: 300px;
+  font-size: 16px;
+  align-items: center;
   color: var(--color-lightwhite);
+  transform-origin: left;
+  transition: all .2s ease;
 
   &:hover {
     color: var(--color-lightwhite);
   }
 
   &::before {
-    content: 'Uni2work';
+    content: 'LMU';
     font-family: var(--font-logo);
-    font-size: 42px;
     font-weight: bold;
     letter-spacing: 2px;
+    display: flex;
+    align-items: flex-end;
+    font-size: 30px;
+    min-width: 70px;
+    height: calc(100% - 4px);
+    padding: 0 6px 4px;
+    box-shadow: 0 0 0 1px inset var(--color-lmu-box-border);
+  }
+
+  &::after {
+    content: 'Uni2work';
+    margin-left: 12px;
+    font-weight: normal;
+    letter-spacing: 2px;
+    display: flex;
+    align-items: flex-end;
+    text-transform: uppercase;
+    width: 100%;
+    height: calc(100% - 4px);
+    padding: 0 6px 4px;
+    box-shadow: 0 0 0 1px inset var(--color-lmu-box-border);
+  }
+}
+
+@media (max-width: 1200px) {
+
+  .navbar__logo {
+    flex-basis: 24%;
+    font-size: 16px;
   }
 }
 
 @media (max-width: 1024px) {
 
   .navbar__logo {
-    transform: scale(0.7);
+    font-size: 14px;
+
+    &::before {
+      content: none;
+    }
   }
 }
 
@@ -75,21 +103,30 @@
 .navbar__link-wrapper {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: var(--header-height);
+  justify-content: flex-end;
+  align-items: flex-start;
+  height: 80px;
+  min-width: 90px;
   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);
 }
 
 .navbar__link-label {
   transition: opacity .2s ease;
-  padding: 0 13px;
+  padding: 4px 6px;
   text-transform: uppercase;
 }
 
 @media (max-width: 768px) {
 
+  .navbar__link-wrapper {
+    box-shadow: none;
+    min-width: 0;
+    align-items: center;
+    justify-content: center;
+  }
+
   .navbar__link-label {
     padding: 0 7px;
   }
@@ -112,6 +149,10 @@
   position: relative;
   transition: background-color .1s ease;
 
+  + .navbar__list-item {
+    margin-left: 12px;
+  }
+
   .glyphicon {
     position: relative;
     width: 20px;
@@ -120,10 +161,22 @@
 
   .glyphicon::before {
     height: 20px;
+    margin-left: 6px;
   }
 
   .fas {
     height: 20px;
+    margin-left: 8px;
+  }
+}
+
+@media (max-width: 768px) {
+
+  .navbar__list-item {
+
+    .fas {
+      margin-left: 0;
+    }
   }
 }
 
@@ -134,15 +187,29 @@
   }
 }
 
+.navbar__list-left {
+  flex: 5;
+  padding-left: 40px;
+}
+
 .navbar__list-item--secondary {
   margin-left: 20px;
   color: var(--color-grey);
+
+  .navbar__link-wrapper {
+    color: var(--color-grey);
+    box-shadow: 0 0 0 1px inset var(--color-grey);
+  }
 }
 
 @media (max-width: 768px) {
 
   .navbar__list-item--secondary {
     margin-left: 0;
+
+    .navbar__link-wrapper {
+      box-shadow: none;
+    }
   }
 }
 
@@ -169,10 +236,6 @@
   color: var(--color-lightwhite);
 }
 
-.navbar__list-item--secondary .navbar__link-wrapper {
-  color: var(--color-grey);
-}
-
 /* sticky state */
 .navbar--sticky {
   height: var(--header-height-collapsed);
@@ -209,7 +272,7 @@
   }
 }
 
-@media (max-height: 768px) {
+@media (max-height: 500px) {
 
   .navbar,
   .navbar__pushdown {
@@ -222,5 +285,6 @@
 
   .navbar__logo {
     top: 5px;
+    height: var(--header-height-collapsed);
   }
 }