From fa6af3756bc54eb4b1e7d0990d31bcb97d804a69 Mon Sep 17 00:00:00 2001
From: Bram van der Veen <96aa48@gmail.com>
Date: Mon, 22 Jun 2015 20:23:48 +0200
Subject: [PATCH] Finished mobile responsiveness.

---
 resources/jade/header.jade   |  1 +
 resources/jade/schedule.jade | 56 +++++++++++++++---------------
 resources/less/mobile.less   | 67 ++++++++++++++++++++++++++++++++++--
 resources/less/style.less    | 10 ++++--
 4 files changed, 101 insertions(+), 33 deletions(-)

diff --git a/resources/jade/header.jade b/resources/jade/header.jade
index 674aadc..2964c8f 100644
--- a/resources/jade/header.jade
+++ b/resources/jade/header.jade
@@ -3,6 +3,7 @@ html
     title Werkmanrooster
     link(rel="stylesheet", href="/css/skeleton.css", type="text/css")
     link(rel="stylesheet", href="/css/style.css", type="text/css")
+    meta(name='viewport', content='width=device-width, user-scalable=no')
     script(type="text/javascript", src="http://code.jquery.com/jquery-1.11.3.min.js")
     script(type="text/javascript", src="/js/script.js")
     script(type="text/javascript").
diff --git a/resources/jade/schedule.jade b/resources/jade/schedule.jade
index 66b8754..abd3429 100644
--- a/resources/jade/schedule.jade
+++ b/resources/jade/schedule.jade
@@ -4,32 +4,32 @@ include header
 include search
 
 - var days = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'];
-
-div.schedule
-  ul
-    each type in match.json.types
-      li
-        span=type.letter
-        a(href='?tab=' + type.tab)=type.value
-  each day in match.json
-    div.day
-      div.hour.title
-        span= days[match.json.indexOf(day)]
-      each hour in day
-        if hour.teacher != 'vrij'
-          div.hour(class=hour.changed == 'true' ? 'changed' : '')
-            each subhour in hour.teacher
-               span.teacher(class='sub_' + hour.teacher.length)
-                  a(href=hour.teacher[hour.teacher.indexOf(subhour)])= hour.teacher[hour.teacher.indexOf(subhour)]
-               span.chamber(class='sub_' + hour.teacher.length)
-                  a(href=hour.chamber[hour.teacher.indexOf(subhour)])= hour.chamber[hour.teacher.indexOf(subhour)]
-               span.course(class='sub_' + hour.teacher.length)=  hour.course[hour.teacher.indexOf(subhour)]
-            
-            if match.json.indexOf(day) == 0
-                span.time= times[match.json[0].indexOf(hour)]
-            
-        else 
-          div.hour.changed
-            span.free Vrij
-            
+div#wrapper
+  div.schedule
+    ul
+      each type in match.json.types
+        li
+          span=type.letter
+          a(href='?tab=' + type.tab)=type.value
+    each day in match.json
+      div.day
+        div.hour.title
+          span= days[match.json.indexOf(day)]
+        each hour in day
+          if hour.teacher != 'vrij'
+            div.hour(class=hour.changed == 'true' ? 'changed' : '')
+              each subhour in hour.teacher
+                 span.teacher(class='sub_' + hour.teacher.length)
+                    a(href=hour.teacher[hour.teacher.indexOf(subhour)])= hour.teacher[hour.teacher.indexOf(subhour)]
+                 span.chamber(class='sub_' + hour.teacher.length)
+                    a(href=hour.chamber[hour.teacher.indexOf(subhour)])= hour.chamber[hour.teacher.indexOf(subhour)]
+                 span.course(class='sub_' + hour.teacher.length)=  hour.course[hour.teacher.indexOf(subhour)]
+              
+              if match.json.indexOf(day) == 0
+                  span.time= times[match.json[0].indexOf(hour)]
+              
+          else 
+            div.hour.changed
+              span.free Vrij
+              
 include links
diff --git a/resources/less/mobile.less b/resources/less/mobile.less
index 3574f35..75d6011 100644
--- a/resources/less/mobile.less
+++ b/resources/less/mobile.less
@@ -1,4 +1,67 @@
 //mobile.less
-body {
-   
+/* Larger than mobile */
+
+/* Larger than phablet */
+@media (max-width: 550px) {}
+
+/* Larger than tablet */
+@media (max-width: 755px) {
+  #title {
+    font-size: 40px !important;
+  }
+
+  input, button {
+    width: 80% !important;
+  }
+
+  #wrapper {
+    overflow: hidden;
+    overflow-x: auto;
+    width: 100% !important;
+  }
+
+  .schedule {
+    width: 500% !important;
+    padding: 0px;
+
+    div.day {
+      width: 20% !important;
+
+      .hour {
+        width: 100% !important;
+        height: 45px !important;
+        line-height: 45px;
+      }
+    }
+
+    ul {
+      position: absolute;
+      left: 0px;
+      z-index: 1;
+      background: none !important;
+
+      li {
+        height: 50px !important;
+        width: 50px !important;
+        span {
+          height: 50px !important;
+          width: 50px !important;
+          line-height: 50px;
+          font-size: 25px;
+        }
+
+      }
+    }
+  }
+
+}
+
+@media (max-width: 400px) {
+  #title {
+    font-size: 25px !important;
+
+    span {
+      display: none !important;
+    }
+  }
 }
diff --git a/resources/less/style.less b/resources/less/style.less
index 1620e5b..4c556b9 100644
--- a/resources/less/style.less
+++ b/resources/less/style.less
@@ -2,7 +2,7 @@
 @import url('http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400|Oswald');
 
 .big {
-  margin-top: 20%;
+  margin-top: 10%;
 }
 
 .search {
@@ -77,7 +77,7 @@ div.schedule {
 
       &:hover {
         -webkit-transition: 1s ease;
-        width: 200px;
+        width: 200px !important;
       }
 
       &:first-child span {
@@ -109,7 +109,7 @@ div.schedule {
       width: 150px;
       height: 20px;
       border-bottom: solid 1px #DDD;
-      padding: 12px 15px;
+      padding: 12px 0px;
       border-bottom: 1px solid #e1e1e1;
       border-left: 1px solid #FFF;
       position: relative;
@@ -131,6 +131,8 @@ div.schedule {
 
       .teacher {
         text-align: left;
+        position: relative;
+        left: 15px;
       }
 
       .chamber {
@@ -139,6 +141,8 @@ div.schedule {
 
       .course {
         text-align: right;
+        position: relative;
+        right: 15px;
       }
 
       &.changed {