Merge branch 'feat/first_lvl_navi_rework' into 'master'

Navigation rework

See merge request !33

src/Foundation.hs

@@ -501,6 +501,7 @@ instance Yesod UniWorX where
             addStylesheet $ StaticR css_tabber_css
             addStylesheet $ StaticR css_fonts_css
             addStylesheet $ StaticR css_icons_css
+            addStylesheet $ StaticR css_fontawesome_css
             $(widgetFile "default-layout")
             $(widgetFile "standalone/modal")
             $(widgetFile "standalone/showHide")
@@ -688,20 +689,20 @@ defaultLinks = -- Define the menu items of the header.
       , menuItemAccessCallback' = isJust <$> maybeAuthPair
       }
   , NavbarAside $ MenuItem
-      { menuItemLabel = "Veranstaltungen"
+      { menuItemLabel = "Kurse"
-      , menuItemIcon = Just "book"
+      , menuItemIcon = Just "calendar-alt"
       , menuItemRoute = CourseListR -- should be CourseListActiveR or similar in the future
       , menuItemAccessCallback' = return True
       }
   , NavbarAside $ MenuItem
       { menuItemLabel = "Semester"
-      , menuItemIcon = Nothing
+      , menuItemIcon = Just "graduation-cap"
       , menuItemRoute = TermShowR
       , menuItemAccessCallback' = return True
       }
   , NavbarAside $ MenuItem
       { menuItemLabel = "Benutzer"
-      , menuItemIcon = Just "user"
+      , menuItemIcon = Just "users"
       , menuItemRoute = UsersR
       , menuItemAccessCallback' = return True -- Creates a LOOP: (Authorized ==) <$> isAuthorized UsersR False
       }

static/css/fonts.css

@@ -1,9 +1,29 @@
 @font-face {
   font-family: 'Glyphicons Halflings';
-  src: url('../fonts/glyphicons-halflings-regular.eot');
+  src: url('../fonts/glyphicons/glyphicons-halflings-regular.eot');
-  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
+  src: url('../fonts/glyphicons/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
-       url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
+       url('../fonts/glyphicons/glyphicons-halflings-regular.woff2') format('woff2'),
-       url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
+       url('../fonts/glyphicons/glyphicons-halflings-regular.woff') format('woff'),
-       url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
+       url('../fonts/glyphicons/glyphicons-halflings-regular.ttf') format('truetype'),
-       url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
+       url('../fonts/glyphicons/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
+}
+
+/*!
+ * Font Awesome Free 5.1.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+ @font-face{
+  font-family:"Font Awesome 5 Free";
+  font-style:normal;
+  font-weight:900;
+  src:url(../fonts/fontawesome/fa-solid-900.eot);
+  src:url(../fonts/fontawesome/fa-solid-900.eot?#iefix) format("embedded-opentype"),
+      url(../fonts/fontawesome/fa-solid-900.woff2) format("woff2"),
+      url(../fonts/fontawesome/fa-solid-900.woff) format("woff"),
+      url(../fonts/fontawesome/fa-solid-900.ttf) format("truetype"),
+      url(../fonts/fontawesome/fa-solid-900.svg#fontawesome) format("svg");
+}
+.fa,.fas{
+  font-family:"Font Awesome 5 Free";
+  font-weight:900;
 }

static/css/icons.css

@@ -26,6 +26,13 @@
 .glyphicon--user::before {
   content: '\e008';
 }
+.glyphicon--group::before {
+  /* TODO: get updated glyphicons for group-icon */
+  content: '\e284';
+}
+.glyphicon--education::before {
+  content: '\e233';
+}
 .glyphicon--login::before {
   content: '\e161';
 }

templates/default-layout.lucius

@@ -129,6 +129,21 @@ h4 {
   margin: 0;
 }
 
+@media (max-width: 768px) {
+
+  h1 {
+    font-size: 24px;
+  }
+
+  h2 {
+    font-size: 20px;
+  }
+
+  h3 {
+    font-size: 16px;
+  }
+}
+
 /* LAYOUT */
 .main {
   min-height: calc(100vh - var(--header-height));

templates/widgets/asidenav.hamlet

@@ -1,19 +1,9 @@
 $newline never
 <aside .main__aside>
   <div .asidenav>
-    <div .asidenav__box>
-      <ul .asidenav__list>
-        $forall menuType <- menuTypes
-          $case menuType
-            $of NavbarAside (MenuItem label mIcon route _)
-              <li .asidenav__list-item :highlight route:.asidenav__list-item--active>
-                <a .asidenav__link-wrapper href=@{route}>
-                  <div .glyphicon.glyphicon--#{fromMaybe "none" mIcon}>
-                  <div .asidenav__link-label>#{label}
-            $of _
-
     <div .asidenav__box>
       <h3 .asidenav__box-title>
+        $# TODO: this has to come from favourites somehow. Show favourites from older terms?
         WiSe 17/18
       <ul .asidenav__list>
         $forall (Course{..}, courseRoute, pageActions) <- favourites

templates/widgets/asidenav.lucius

@@ -6,16 +6,26 @@
   flex: 0 0 300px;
   min-height: calc(100% - 80px);
   transition: all .2s ease-out;
-  width: 300px;
+  width: 24%;
 
   ~ .main__content {
-    padding-left: 300px;
+    padding-left: 24%;
     transition: padding-left .2s ease-out;
   }
 }
 
+/* maximum width of 300px for wide screens */
+@media (min-width: 1200px) {
+  .main__aside {
+    width: 300px;
+
+    ~ .main__content {
+      padding-left: 300px;
+    }
+  }
+}
+
 .asidenav {
-  width: 300px;
   color: white;
 }
 
@@ -33,7 +43,6 @@
 .asidenav__list-item {
   position: relative;
   color: var(--color-lightwhite);
-  padding-left: 10px;
 
   &:hover {
     color: var(--color-link);
@@ -61,6 +70,14 @@
   }
 }
 
+/* small list-item-padding for medium to large screens */
+@media (min-width: 1024px) {
+
+  .asidenav__list-item {
+    padding-left: 10px;
+  }
+}
+
 .asidenav__list-item--active {
   background-color: var(--color-lightwhite);
 
@@ -79,7 +96,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding: 7px 0;
+  padding: 7px 10px;
   justify-content: flex-start;
   color: var(--color-lightwhite);
   z-index: 1;
@@ -100,7 +117,6 @@
 
 .asidenav__link-label {
   line-height: 1;
-  padding-left: 13px;
 }
 
 /* hover sub-menus */
@@ -153,11 +169,6 @@
       padding-left: 50px;
     }
 
-    &.pseudo-hover {
-      overflow: visible;
-      flex-basis: 300px;
-    }
-
     .asidenav__box-title {
       width: 50px;
       padding: 1px;
@@ -193,22 +204,14 @@
       }
     }
 
-    .asidenav__list-item:hover {
-
-      > .asidenav__link-wrapper {
-        color: var(--color-dark);
-        background-color: var(--color-lightwhite);
-      }
-    }
-
     .asidenav__link-wrapper {
       color: var(--color-lightwhite);
       padding: 0;
-      // background-color: var(--color-dark);
     }
 
+    .asidenav__nested-list,
     .asidenav__link-label {
-      padding-left: 0;
+      display: none;
     }
 
     .asidenav__list-item--active {
@@ -218,5 +221,6 @@
         color: var(--color-dark);
       }
     }
+
   }
 }

templates/widgets/navbar.hamlet

@@ -2,7 +2,17 @@ $newline never
 <div .navbar-container>
   <nav .navbar.js-sticky-navbar>
 
-    <div .navbar__logo>
+    <a href="/" .navbar__logo>
+
+    <ul .navbar__list.list--inline>
+        $forall menuType <- menuTypes
+          $case menuType
+            $of NavbarAside (MenuItem label mIcon route _)
+              <li .navbar__list-item :highlight route:.navbar__list-item--active>
+                <a .navbar__link-wrapper href=@{route}>
+                  <i .fas.fa-#{fromMaybe "none" mIcon}>
+                  <div .navbar__link-label>#{label}
+            $of _
 
     <ul .navbar__list.list--inline>
       $forall menuType <- menuTypes

templates/widgets/navbar.julius

@@ -8,32 +8,23 @@
 
     init();
     function init() {
-      window.setTimeout(function () {
-        nav.classList.add('navbar--animated');
-      }, 200);
-      checkScroll();
-      addListener();
-    }
-
-    // checks scroll direction and shows/hides navbar accordingly
-    function checkScroll() {
-      var sticky = window.scrollY > 0;
-      sticky = sticky && window.innerHeight < (document.scrollingElement.scrollHeight - 100);
-      nav.classList.toggle('navbar--sticky', sticky);
-      ticking = false;
-    }
-
-    function addListener() {
       window.addEventListener('scroll', function (e) {
         if (!ticking) {
-          window.requestAnimationFrame(checkScroll);
+          window.requestAnimationFrame(update);
           ticking = true;
         }
       }, false);
+      update();
+    }
+
+    function update() {
+      var sticky = window.scrollY > 0;
+      sticky = sticky && window.innerHeight < (document.scrollingElement.scrollHeight - 200);
+      nav.classList.toggle('navbar--sticky', sticky);
+      ticking = false;
     }
   }
 
-
 })();
 
 document.addEventListener('DOMContentLoaded', function () {

templates/widgets/navbar.lucius

@@ -6,8 +6,8 @@
   justify-content: space-between;
   width: 100%;
   height: var(--header-height);
-  padding-right: 5vw;
+  padding-right: 2vw;
-  padding-left: 20px;
+  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 */
@@ -17,28 +17,36 @@
   top: 0;
   left: 0;
   overflow: hidden;
-  transition: height 0.2s cubic-bezier(0.03, 0.43, 0.58, 1);
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+  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 {
-    padding-left: 90px;
+    padding: 0px;
-  }
-}
-
-@media (max-width: 500px) {
-
-  .navbar {
-    padding-left: 20px;
   }
 }
 
 .navbar__logo {
+  position: absolute;
+  top: 15px;
+  left: 20px;
   transition: all .2s ease;
   transform-origin: left;
   width: 0px;
+  color: var(--color-lightwhite);
+
+  &:hover {
+    color: var(--color-lightwhite);
+  }
 
   &::before {
     content: 'UniWorkY';
@@ -49,43 +57,21 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
 
   .navbar__logo {
     transform: scale(0.7);
   }
 }
 
-@media (max-width: 425px) {
+@media (max-width: 768px) {
 
   .navbar__logo {
-    transform: scale(0.3);
+    display: none;
   }
 }
 
-.navbar__list {
+/* links */
-  align-self: flex-end;
-  white-space: nowrap;
-}
-
-.navbar__list-item {
-  position: relative;
-  transition: background-color .1s ease;
-
-  .glyphicon {
-    position: relative;
-    width: 100%;
-    height: 20px;
-  }
-
-  .glyphicon::before {
-    height: 20px;
-  }
-}
-.navbar :last-child {
-  margin-left: auto;
-}
-
 .navbar__link-wrapper {
   display: flex;
   flex-direction: column;
@@ -99,14 +85,67 @@
 .navbar__link-label {
   transition: opacity .2s ease;
   padding: 0 13px;
-  color: var(--color-lightwhite);
   text-transform: uppercase;
 }
 
+@media (max-width: 768px) {
+
+  .navbar__link-label {
+    padding: 0 7px;
+  }
+}
+
+@media (max-width: 500px) {
+
+  .navbar__link-label {
+    display: none;
+  }
+}
+
+/* navbar list */
+.navbar__list {
+  white-space: nowrap;
+}
+
+/* list item */
+.navbar__list-item {
+  position: relative;
+  transition: background-color .1s ease;
+
+  .glyphicon {
+    position: relative;
+    width: 20px;
+    height: 20px;
+  }
+
+  .glyphicon::before {
+    height: 20px;
+  }
+
+  .fas {
+    height: 20px;
+  }
+}
+
+@media (max-width: 500px) {
+
+  .navbar__list-item {
+    width: 50px;
+  }
+}
+
 .navbar__list-item--secondary {
   margin-left: 20px;
   color: var(--color-grey);
 }
+
+@media (max-width: 768px) {
+
+  .navbar__list-item--secondary {
+    margin-left: 0;
+  }
+}
+
 .navbar__list-item--secondary + .navbar__list-item--secondary {
   margin-left: 0;
   border-left: 0;
@@ -120,27 +159,22 @@
     color: var(--color-dark);
   }
 }
+
 .navbar__list-item--active .navbar__link-wrapper {
   pointer-events: none;
-}
-.navbar__list-item--active .navbar__link-label {
   color: var(--color-dark);
 }
 
-.navbar .navbar__list-item:not(.navbar__list-item--active):hover {
-  background-color: var(--color-darker);
-}
 .navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-wrapper {
+  background-color: var(--color-darker);
   color: var(--color-lightwhite);
 }
-.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-label {
+
-  color: var(--color-lightwhite);
+.navbar__list-item--secondary .navbar__link-wrapper {
-}
-.navbar__list-item--secondary .navbar__link-wrapper,
-.navbar__list-item--secondary .navbar__link-label {
   color: var(--color-grey);
 }
 
+/* sticky state */
 .navbar--sticky {
   height: var(--header-height-collapsed);
   z-index: 100;
@@ -148,10 +182,10 @@
   .navbar__link-wrapper {
     height: var(--header-height-collapsed);
   }
-}
 
-.navbar--animated {
+  .navbar__logo {
-  transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
+    top: 5px;
+  }
 }
 
 .navbar__pushdown {