Make site mobile friendly.

For devices(more strict than screen width) with screen width < 640px: * change the CSS so that things are scroll friendly. * Add an enter button so that Android users can save.
shane-tomlinson · Oct 28, 2011 · 5579e71 · 5579e71
1 parent 7dc57ef
commit 5579e71
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 25 deletions.
diff --git a/static/index.html b/static/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>My Favorite Beer, a BrowserID example</title>
+    <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;">
     <!--[if lt IE 9]>
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
@@ -13,11 +14,13 @@
   </head>
   <body>
 
-    <header>
+    <header class="cf">
       <div>
         <h1 id="title">My Favorite Beer</h1>
-        <div class="picture"></div>
-        <div class="login"></div>
+        <div id="loginInfo">
+            <div class="picture"></div>
+            <div class="login"></div>
+          </div>
       </div>
     </header>
 
@@ -43,7 +46,8 @@ <h1 id="title">My Favorite Beer</h1>
           <input type="text">
         </p>
         <p>
-          (click ^^ to modify, &lt;enter&gt; saves)
+          (click ^^ to modify<span id="desktopSave">, &lt;enter&gt; saves</span>)
+          <a href="#" id="save">Save</a>
         </p>
       </div>
     </div>

diff --git a/static/js/main.js b/static/js/main.js
@@ -35,19 +35,12 @@ function loggedIn(email, immediate) {
   // enter causes us to save the value and do a little animation
   $('input').keypress(function(e){
     if(e.which == 13) {
-      $.ajax({
-        type: 'POST',
-        url: '/api/set',
-        data: { beer: $("input").val() },
-        success: function(res, status, xhr) {
-          // noop
-        }
-      });
-      $("#content input").fadeOut(200).fadeIn(400);
-      e.preventDefault();
+      save(e);
     }
   });
 
+  $("#save").click(save);
+
   $.ajax({
     type: 'GET',
     url: '/api/get',
@@ -63,6 +56,19 @@ function loggedIn(email, immediate) {
   $("<img>").attr('src', iurl).appendTo($("header .picture"));
 }
 
+function save(event) {
+  event.preventDefault();
+  $.ajax({
+    type: 'POST',
+    url: '/api/set',
+    data: { beer: $("input").val() },
+    success: function(res, status, xhr) {
+      // noop
+    }
+  });
+  $("#content input").fadeOut(200).fadeIn(400);
+}
+
 // when the user clicks logout, we'll make a call to the server to clear
 // our current session.
 function logout(event) {

diff --git a/static/style.less b/static/style.less
@@ -4,6 +4,25 @@ body {
     font-family: 'lucida grande', helvetica, arial, sans-serif;
 }
 
+/* for floats */
+.cf:after {
+  content: ".";
+  display: block;
+  clear: both;
+  visibility: hidden;
+  line-height: 0;
+  height: 0;
+}
+
+html[xmlns] .cf {
+  display: block;
+}
+
+* html .cf {
+  height: 1%;
+}
+
+
 header {
     display: block;
     background-color: #143352;
@@ -31,12 +50,17 @@ header {
         float: left;
     }
 
-    .picture {
+    #loginInfo {
         float: right;
+        width: 250px;
+    }
+
+    .picture {
+        float: left;
         margin: 10px;
     }
     .login {
-        float: right;
+        float: left;
         margin-top: 10px;
         img {
             margin-top: 3px;
@@ -86,15 +110,21 @@ header {
         font-size: 1.4em;
     }
 
-    .business input {
-        background-color: transparent;
-        border: 1px solid #999;
-        font: 3em "Shadows Into Light";
-        padding: .4em;
-        width: 500px;
-        -moz-border-radius: 50px;
-        -webkit-border-radius: 50px;
-        border-radius: 50px;
+    .business {
+        #save {
+            display: none;
+        }
+
+        input {
+            background-color: transparent;
+            border: 1px solid #999;
+            font: 3em "Shadows Into Light";
+            padding: .4em;
+            width: 500px;
+            -moz-border-radius: 50px;
+            -webkit-border-radius: 50px;
+            border-radius: 50px;
+        }
     }
 }
 
@@ -135,4 +165,81 @@ footer {
         opacity: .8;
         margin-top: 1.5em;
     }
+
+}
+
+@media screen and (max-device-width: 640px) {
+    header {
+        position: static;
+        height: auto;
+        text-align: center;
+
+        > div {
+            width: auto;
+        }
+
+        h1 {
+            float: none;
+            margin-top: 0;
+            padding-top: 0;
+            font-size: 2em;
+        }
+
+        #loginInfo {
+            float: none;
+            margin: 0 auto;
+        }
+
+    }
+
+    #content {
+        position: static;
+        padding: 10px 0;
+
+        .intro, .business {
+            width: auto;
+            font-size: 1.2em;
+        }
+
+        .business {
+            #save {
+                display: inline-block;
+                color: #333;
+                padding: 10px;
+                border: 1px solid #999;
+                border-radius: 10px;
+                background-color: #ccc;
+            }
+
+            #desktopSave {
+                display: none;
+            }
+
+            input {
+                -webkit-box-sizing: border-box;
+                   -moz-box-sizing: border-box;
+                     -o-box-sizing: border-box;
+                        box-sizing: border-box;
+                width: 95%;
+            }
+        }
+
+        p:first-child {
+            margin-top: 0;
+        }
+
+        p:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    footer {
+        position: static;
+        height: auto;
+        > div {
+            margin-top: 0;
+            width: auto;
+            font-size: 0.7em;
+        }
+    }
 }