Merge branch 'general_frontend_refinement' into 'master'

General frontend refinement

See merge request !11

src/Foundation.hs

@@ -88,9 +88,9 @@ data MenuItem = MenuItem
     }
 
 data MenuTypes
-    = NavbarLeft  { menuItem :: MenuItem }
-    | NavbarRight { menuItem :: MenuItem }
-    | NavbarExtra { menuItem :: MenuItem }
+    = NavbarAside     { menuItem :: MenuItem }
+    | NavbarRight     { menuItem :: MenuItem }
+    | NavbarExtra     { menuItem :: MenuItem }
     | NavbarSecondary { menuItem :: MenuItem }
 
 -- | A convenient synonym for creating forms.
@@ -285,21 +285,9 @@ defaultLinks = -- Define the menu items of the header.
       , menuItemRoute = HomeR
       , menuItemAccessCallback = return True
       }
-  , NavbarLeft $ MenuItem
-      { menuItemLabel = "Kurse"
-      , menuItemIcon = Just "book"
-      , menuItemRoute = CourseListR
-      , menuItemAccessCallback = return True
-      }
-  , NavbarLeft $ MenuItem
-      { menuItemLabel = "Users"
-      , menuItemIcon = Just "user"
-      , menuItemRoute = UsersR
-      , menuItemAccessCallback = return True -- Creates a LOOP: (Authorized ==) <$> isAuthorized UsersR False
-      }
   , NavbarRight $ MenuItem
       { menuItemLabel = "Profile"
-      , menuItemIcon = Just "user"
+      , menuItemIcon = Just "profile"
       , menuItemRoute = ProfileR
       , menuItemAccessCallback = isJust <$> maybeAuthPair
       }
@@ -315,6 +303,30 @@ defaultLinks = -- Define the menu items of the header.
       , menuItemRoute = AuthR LogoutR
       , menuItemAccessCallback = isJust <$> maybeAuthPair
       }
+  , NavbarAside $ MenuItem
+      { menuItemLabel = "Aktuelle Veranstaltungen"
+      , menuItemIcon = Just "book"
+      , menuItemRoute = CourseListR -- should be CourseListActiveR or similar in the future
+      , menuItemAccessCallback = return True
+      }
+  , NavbarAside $ MenuItem
+      { menuItemLabel = "Alte Veranstaltungen"
+      , menuItemIcon = Just "book"
+      , menuItemRoute = CourseListR -- should be CourseListInactiveR or similar in the future
+      , menuItemAccessCallback = return True
+      }
+  , NavbarAside $ MenuItem
+      { menuItemLabel = "Veranstaltungen"
+      , menuItemIcon = Just "book"
+      , menuItemRoute = CourseListR
+      , menuItemAccessCallback = return True
+      }
+  , NavbarAside $ MenuItem
+      { menuItemLabel = "Benutzer"
+      , menuItemIcon = Just "user"
+      , menuItemRoute = UsersR
+      , menuItemAccessCallback = return True -- Creates a LOOP: (Authorized ==) <$> isAuthorized UsersR False
+      }
   ]
 
 defaultLinkLayout :: [MenuTypes] -> Widget -> Handler Html
@@ -348,6 +360,7 @@ defaultMenuLayout menu widget = do
 
     pc <- widgetToPageContent $ do
         addStylesheetRemote "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900"
+        addScript $ StaticR js_featureChecker_js
         addStylesheet $ StaticR css_fonts_css
         addStylesheet $ StaticR css_icons_css
         $(widgetFile "default-layout")

src/Handler/Course.hs

@@ -64,7 +64,7 @@ getCourseListTermR tidini = do
           )
         ]
   let pageLinks =
-        [ NavbarLeft $ MenuItem
+        [ NavbarAside $ MenuItem
           { menuItemLabel = "Neuer Kurs"
           , menuItemIcon = Just "book"
           , menuItemRoute = CourseEditR

src/Handler/Term.hs

@@ -77,7 +77,7 @@ getTermShowR = do
         }
       defaultLayout $ do
         setTitle "Freigeschaltete Semester"
-        table
+        $(widgetFile "terms")
 
 getTermEditR :: Handler Html
 getTermEditR = do

static/css/icons.css

@@ -1,13 +1,14 @@
 .glyphicon {
+  position: relative;
   display: inline-block;
   width: 40px;
   height: 40px;
-  line-height: 40px;
 }
 .glyphicon::before {
   position: absolute;
-  left: 4px;
-  margin: 0 13px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   font-family: 'Glyphicons Halflings';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -19,6 +20,9 @@
 .glyphicon--book::before {
   content: '\e043';
 }
+.glyphicon--profile::before {
+  content: '\e019';
+}
 .glyphicon--user::before {
   content: '\e008';
 }

static/js/featureChecker.js

@@ -0,0 +1,7 @@
+window.addEventListener('touchstart', function onFirstTouch() {
+  // we could use a class
+  document.body.classList.add('touch-supported');
+
+  // we only need to know once that a human touched the screen, so we can stop listening now
+  window.removeEventListener('touchstart', onFirstTouch, false);
+}, false);

templates/courses.hamlet

@@ -1,6 +1,7 @@
 <div .container>
   <h1>Kursübersicht für Semester #{termToText $ unTermKey tidini}
-  ^{coursesTable}
+  <div .scrolltable>
+    ^{coursesTable}
 
 <div .container>
   <a href=@{CourseEditR}>Neuen Kurs anlegen

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;
@@ -101,8 +97,13 @@ h4 {
 }
 table {
   margin: 21px 0;
-  /*width: 100%;*/
 }
+
+.scrolltable {
+  width: 100%;
+  overflow: auto;
+}
+
 th, td {
   text-align: left;
   padding: 0 13px 0 7px;
@@ -119,17 +120,17 @@ th {
 /* LAYOUT */
 .main {
   display: flex;
-  padding-right: 5vw;
   min-height: calc(100vh - var(--header-height));
+  overflow: hidden;
 }
 
 .main__content {
   position: relative;
   background-color: white;
   padding: 0 40px;
-  padding-right: 0;
   flex: 1;
   z-index: 0;
+  overflow: hidden;
 
   > .container {
     margin: 20px 0;
@@ -138,6 +139,14 @@ th {
   p {
     margin: 10px 0;
   }
+
+  a {
+    color: var(--darkbase);
+  }
+
+  a:hover {
+    color: var(--lightbase);
+  }
 }
 
 .pseudo-focus {

templates/standalone/showHide.lucius

@@ -36,9 +36,14 @@
 }
 
 .js-show-hide__target {
-
+  transition: all .2s ease;
+  overflow: hidden;
 }
 
 .js-show-hide--collapsed > .js-show-hide__target {
-  display: none;
+  display: block;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  max-height: 0;
 }

templates/terms.hamlet

@@ -0,0 +1,5 @@
+<div .container>
+  <h1>Semesterübersicht
+
+  <div .scrolltable>
+    ^{table}

templates/widgets/asidenav.hamlet

@@ -4,17 +4,29 @@
       <ul .asidenav__list>
         $forall menuType <- menuTypes
           $case menuType
-            $of NavbarLeft (MenuItem label mIcon route _)
+            $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.js-show-hide__toggle>
+        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
+
+  <div .asidenav__toggler>

templates/widgets/asidenav.julius

@@ -3,11 +3,11 @@
 
   window.utils = window.utils || {};
 
-  window.utils.aside = function(el) {
-    var asideEl = el;
+  window.utils.aside = function(asideEl, topNav) {
     var collapsed = false;
     var collClass = 'main__aside--collapsed';
     var animClass = 'main__aside--transitioning';
+    var aboveCollapsedNav = false;
 
     init();
     function init() {
@@ -15,6 +15,14 @@
       if (document.body.getBoundingClientRect().width < 999 || collLS) {
         asideEl.classList.add(collClass);
         collapsed = true;
+          if (topNav) {
+            topNav.style.paddingLeft = '90px';
+          window.setTimeout(function() {
+                topNav.classList.add('navbar--animated');
+          }, 200);
+        }
+      } else if (topNav) {
+        topNav.classList.add('navbar--animated');
       }
     }
 
@@ -22,6 +30,9 @@
       if (collapsed && !hasClass() || !collapsed && hasClass()) {
         asideEl.classList.add(animClass);
         asideEl.classList.toggle(collClass, collapsed);
+          if (topNav) {
+            topNav.style.paddingLeft = collapsed ? '90px' : '';
+        }
         window.localStorage.setItem('asidenavCollapsed', collapsed);
       }
     }
@@ -30,26 +41,41 @@
       return asideEl.classList.contains(collClass);
     }
 
-    asideEl.addEventListener('click', function(event) {
-      if (event.target === asideEl) {
-        collapsed = !collapsed;
-        check();
-      }
-    });
+    asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) {
+      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;
+      console.log(event);
+      window.setTimeout(function() {
+        if (aboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
+          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'));
+    utils.aside(document.querySelector('.main__aside'), document.querySelector('.navbar'));
 
 });

templates/widgets/asidenav.lucius

@@ -1,23 +1,29 @@
 .main__aside {
-  flex-shrink: 0;
+  position: relative;
   background-color: var(--darkbase);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   z-index: 1;
-  width: 300px;
+  flex: 0 0 300px;
   overflow: hidden;
 }
 .main__aside--transitioning {
-  transition: width .2s ease;
+  transition: flex-basis .2s ease;
 }
 .main__aside--transitioning .asidenav__box{
   transition: opacity .2s ease;
 }
 
-.main__aside--collapsed:hover {
+.main__aside--collapsed.pseudo-hover {
   overflow: visible;
 }
 .main__aside--collapsed {
   width: 50px;
+  flex-basis: 50px;
+
+  .asidenav__box-title {
+    width: 50px;
+    padding: 0;
+  }
 }
 .main__aside--collapsed .asidenav__box {
   opacity: 0;
@@ -37,58 +43,121 @@
   width: 300px;
   margin-top: 20px;
   color: white;
+
+  .js-show-hide__toggle::before {
+    top: 14px;
+    right: 12px;
+    left: auto !important;
+  }
+
+  .js-show-hide__toggle:hover::before,
+  .js-show-hide--collapsed .js-show-hide__toggle::before {
+    top: 10px !important;
+    right: 8px !important;
+  }
+  .js-show-hide--collapsed .js-show-hide__toggle:hover::before {
+    top: 14px !important;
+    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;
-}
 
-.asidenav__list--padded {
-  padding: 0 13px;
+  a {
+    color: white;
+  }
 }
 
 .asidenav__list-item {
   position: relative;
   background-color: white;
   color: var(--darkbase);
-
-  .glyphicon {
-    position: absolute;
-    z-index: 1;
-    top: 5px;
-  }
+  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;
     }
+
+    .asidenav__link-triple {
+      transform: scale(1.2, 1);
+    }
   }
 }
 .asidenav__list-item--active {
   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: var(--whitebase);
+    height: 50px;
+    width: 50px;
+    display: inline-block;
+    line-height: 50px;
+    text-align: center;
+    margin-right: 13px;
+    flex-shrink: 0;
+    outline: 1px solid white;
+  }
+}
+
+.asidenav__toggler {
+  position: absolute;
+  bottom: 20px;
+  height: 50px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color .2s ease;
+  border-top: 1px solid var(--whitebase);
+  border-bottom: 1px solid var(--whitebase);
+  cursor: pointer;
+
+  &::before {
+    content: '\e079';
+    display: block;
+    font-family: 'Glyphicons Halflings';
+    color: var(--whitebase);
+  }
+
+  &:hover {
+    background-color: var(--lightbase);
+  }
+}
+
+.main__aside--collapsed .asidenav__toggler::before {
+  content: '\e080';
 }

templates/widgets/breadcrumbs.lucius

@@ -1,17 +1,14 @@
 .breadcrumbs__container {
-  position: absolute;
+  position: relative;
   color: white;
-  left: 340px;
-  top: 7px;
-  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;
 }
 .breadcrumbs__container .breadcrumbs__link {
   color: white;
 }
-
-@media (max-width: 999px) {
-  .breadcrumbs__container {
-    left: 90px;
-  }
-}

templates/widgets/navbar.hamlet

@@ -1,23 +1,25 @@
 <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
           $of NavbarRight (MenuItem label mIcon route _)
             <li .navbar__list-item :Just route == mcurrentRoute:.navbar__list-item--active>
-              $if isJust mIcon
-                <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
-              <a .navbar__link href=@{route}>#{label}
+              <a .navbar__link-wrapper href=@{route}>
+                $if isJust mIcon
+                  <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
+                <div .navbar__link-label>#{label}
           $of NavbarSecondary (MenuItem label mIcon route _)
             <li .navbar__list-item.navbar__list-item--secondary :Just route == mcurrentRoute:.navbar__list-item--active>
-              $if isJust mIcon
-                <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
-              <a .navbar__link href=@{route}>#{label}
+              <a .navbar__link-wrapper href=@{route}>
+                $if isJust mIcon
+                  <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
+                <div .navbar__link-label>#{label}
           $of _
 
-    <!-- breadcrumbs -->
-    $if not $ Just HomeR == mcurrentRoute
-      ^{breadcrumbs}
-
   <div .navbar__pushdown>

templates/widgets/navbar.lucius

@@ -1,13 +1,13 @@
 .navbar {
-  position: relative;
+  position: fixed;
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
   width: 100%;
   height: var(--header-height);
-  line-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 */
@@ -15,41 +15,51 @@
   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 .navbar__link {
-  position: relative;
-  display: inline-block;
-  height: 100%;
-  padding: 0 13px;
-  color: white;
-  text-transform: uppercase;
-}
-
-.navbar .navbar__link.glyphicon::before {
-  left: 50%;
-  top: -20px;
-  transform: translateX(-50%);
-  margin: 0;
+.navbar__list {
+  align-self: flex-end;
+  white-space: nowrap;
 }
 
 .navbar__list-item {
   position: relative;
-  padding-top: 13px;
+  transition: background-color .1s ease;
 
-  > .glyphicon {
-    position: absolute;
+  .glyphicon {
+    position: relative;
     width: 100%;
+    height: 20px;
   }
 
-  > .glyphicon::before {
-    height: 40px;
-    margin: 0;
-    left: 50%;
-    transform: translateX(-50%);
+  .glyphicon::before {
+    height: 20px;
   }
 }
+.navbar :last-child {
+  margin-left: auto;
+}
+
+.navbar .navbar__link-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 80px;
+  color: var(--whitebase);
+  transition: height .2s ease;
+}
+
+.navbar__link-label {
+  transition: opacity .2s ease;
+  padding: 0 13px;
+  color: white;
+  text-transform: uppercase;
+}
 
 .navbar__list-item--secondary {
   margin-left: 20px;
@@ -63,49 +73,55 @@
 .navbar__list-item--active {
   background-color: white;
   color: var(--darkbase);
+
+  .navbar__link-wrapper {
+    color: var(--darkbase);
+  }
 }
-.navbar__list-item--active > .navbar__link {
-  color: var(--darkbase);
+.navbar__list-item--active .navbar__link-wrapper {
   pointer-events: none;
 }
+.navbar__list-item--active .navbar__link-label {
+  color: var(--darkbase);
+}
 
 .navbar .navbar__list-item:not(.navbar__list-item--active):hover {
   background-color: var(--darkbase);
   color: var(--whitebase);
 }
-.navbar .navbar__list-item:not(.navbar__list-item--active):hover > .navbar__link {
+.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-wrapper {
   color: var(--whitebase);
 }
-.navbar__list-item--secondary > .navbar__link {
+.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-label {
+  color: var(--whitebase);
+}
+.navbar__list-item--secondary .navbar__link-wrapper,
+.navbar__list-item--secondary .navbar__link-label {
   color: var(--greybase);
 }
 
-.navbar__link {
-  transition: opacity .2s ease;
-}
-
 .navbar--sticky {
-  position: fixed;
-  top: 0;
-  left: 0;
   height: var(--header-height-collapsed);
-  line-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 {
-    top: 0px;
+    margin-bottom: 7px;
   }
+
+}
+.navbar--animated {
+  transition: all .2s ease;
 }
 .navbar__pushdown {
-  display: none;
-  background-color: var(--darkbase);
+  /*display: none;*/
   height: var(--header-height);
+  transition: height .2s ease;
 }
 .navbar--sticky + .navbar__pushdown {
   display: block;
+  height: var(--header-height-collapsed);
 }