From 4512751c80720c06569d4a554efee692a37cb2db Mon Sep 17 00:00:00 2001
From: Brandon Hilkert <brandonhilkert@gmail.com>
Date: Fri, 7 Dec 2012 11:40:45 -0500
Subject: [PATCH] Make layout responsive for mobile.

---
 web/assets/stylesheets/application.css | 88 +++++++++++++++++---------
 web/views/layout.slim                  |  1 +
 2 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/web/assets/stylesheets/application.css b/web/assets/stylesheets/application.css
index e800ff6c..31739f33 100755
--- a/web/assets/stylesheets/application.css
+++ b/web/assets/stylesheets/application.css
@@ -159,27 +159,6 @@ td form {
   text-shadow: none;
 }
 
-@media (max-width: 450px) {
-  .navbar ul.nav li a {
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-
-  .navbar-fixed-bottom li p {
-    font-size: 0.85em;
-  }
-}
-
-@media (max-width: 979px) {
-  .navbar-fixed-top, .navbar-fixed-bottom {
-    margin: 0 -20px;
-  }
-
-  .admin #page {
-    padding-top: 20px;
-  }
-}
-
 .navbar-footer .navbar ul.nav {
   text-align: center;
   float: none;
@@ -189,20 +168,12 @@ td form {
   font-size: 16px;
   padding: 15px;
 }
-@media (max-width: 500px) {
-  .navbar-footer .navbar ul.nav a {
-    padding: 15px 5px;
-  }
-}
+
 .navbar-footer .navbar ul.nav a.brand {
   font-weight: 400;
   padding: 0 15px 0 0;
 }
-@media (max-width: 500px) {
-  .navbar-footer .navbar ul.nav a.brand {
-    padding-right: 5px;
-  }
-}
+
 .navbar-footer .navbar ul.nav li {
   display: inline-block;
   float: none;
@@ -283,3 +254,58 @@ img.smallogo {
   padding: 10px 0;
 }
 
+@media (max-width: 450px) {
+  .navbar .container {
+    text-align: center
+  }
+
+  .navbar .brand {
+    float: none;
+  }
+
+  .navbar ul.nav li a {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+
+  .navbar.navbar-fixed-top ul {
+    float: none;
+    margin-right: 0;
+  }
+
+  .navbar.navbar-fixed-top li {
+    float: none;
+    margin-right: 0;
+  }
+
+  .navbar.navbar-fixed-bottom ul {
+    float: none;
+    margin-right: 0;
+  }
+
+  .navbar.navbar-fixed-bottom li {
+    float: none;
+    margin-right: 0;
+  }
+
+  .navbar-text {
+    line-height: 30px;
+  }
+}
+
+@media (max-width: 979px) {
+  .navbar-fixed-top, .navbar-fixed-bottom {
+    margin: 0 -20px;
+  }
+
+  .admin #page {
+    padding-top: 10px;
+  }
+}
+
+@media (max-width: 500px) {
+  .navbar-footer .navbar ul.nav a.brand {
+    padding-right: 5px;
+  }
+}
+
diff --git a/web/views/layout.slim b/web/views/layout.slim
index 0f58ab15..7a05d905 100755
--- a/web/views/layout.slim
+++ b/web/views/layout.slim
@@ -1,6 +1,7 @@
 doctype html
 html
   head
+    meta name="viewport" content="width=device-width,initial-scale=1.0"
     link href='#{{root_path}}stylesheets/bootstrap.css' media='screen' rel='stylesheet' type='text/css'
     link href='#{{root_path}}stylesheets/application.css' media='screen' rel='stylesheet' type='text/css'
     title= Sidekiq::NAME