From e58851cd3c53c5c885ba79e0a4ca8bfbbe1f1729 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 18 Mar 2018 17:28:43 +0100
Subject: [PATCH] scollable tables for smaller screens

---
 src/Foundation.hs                 |  1 +
 src/Handler/Term.hs               |  2 +-
 static/js/featureChecker.js       |  7 +++++++
 templates/courses.hamlet          |  3 ++-
 templates/default-layout.lucius   | 11 ++++++++---
 templates/terms.hamlet            |  5 +++++
 templates/widgets/asidenav.julius |  3 ++-
 templates/widgets/asidenav.lucius | 12 ++++++++----
 8 files changed, 34 insertions(+), 10 deletions(-)
 create mode 100644 static/js/featureChecker.js
 create mode 100644 templates/terms.hamlet

diff --git a/src/Foundation.hs b/src/Foundation.hs
index 32ae21e7e..62383403b 100644
--- a/src/Foundation.hs
+++ b/src/Foundation.hs
@@ -360,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")
diff --git a/src/Handler/Term.hs b/src/Handler/Term.hs
index 3eee14c4e..6fa1ae646 100644
--- a/src/Handler/Term.hs
+++ b/src/Handler/Term.hs
@@ -77,7 +77,7 @@ getTermShowR = do
         }
       defaultLayout $ do
         setTitle "Freigeschaltete Semester"
-        table
+        $(widgetFile "terms")
 
 getTermEditR :: Handler Html
 getTermEditR = do
diff --git a/static/js/featureChecker.js b/static/js/featureChecker.js
new file mode 100644
index 000000000..a3a21e663
--- /dev/null
+++ b/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);
diff --git a/templates/courses.hamlet b/templates/courses.hamlet
index 56a9134b6..e4f6fb292 100644
--- a/templates/courses.hamlet
+++ b/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
diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index 83fb22d87..c324b2efc 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -97,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;
@@ -115,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;
diff --git a/templates/terms.hamlet b/templates/terms.hamlet
new file mode 100644
index 000000000..d327861ab
--- /dev/null
+++ b/templates/terms.hamlet
@@ -0,0 +1,5 @@
+<div .container>
+  <h1>Semesterübersicht
+
+  <div .scrolltable>
+    ^{table}
diff --git a/templates/widgets/asidenav.julius b/templates/widgets/asidenav.julius
index 700aa0d36..019b36da2 100644
--- a/templates/widgets/asidenav.julius
+++ b/templates/widgets/asidenav.julius
@@ -62,8 +62,9 @@
         return false;
       }
       aboveCollapsedNav = true;
+      console.log(event);
       window.setTimeout(function() {
-        if (aboveCollapsedNav) {
+        if (aboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
           asideEl.classList.add('pseudo-hover');
         }
       }, 430);
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index 2a5d97885..e150b3c2a 100644
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@@ -1,13 +1,12 @@
 .main__aside {
-  flex-shrink: 0;
   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;
@@ -18,6 +17,7 @@
 }
 .main__aside--collapsed {
   width: 50px;
+  flex-basis: 50px;
 
   .asidenav__box-title {
     width: 50px;
@@ -72,6 +72,10 @@
     .asidenav__link-label {
       color: white;
     }
+
+    .asidenav__link-triple {
+      transform: scale(1.2, 1);
+    }
   }
 }
 .asidenav__list-item--active {
@@ -99,7 +103,7 @@
 
   .asidenav__link-triple {
     background-color: var(--darkbase);
-    color: white;
+    color: var(--whitebase);
     height: 50px;
     width: 50px;
     display: inline-block;