scollable tables for smaller screens

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")

src/Handler/Term.hs

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

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

@@ -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;

templates/terms.hamlet

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

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);

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;