Skip to content
Browse files

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.
  • Loading branch information...
1 parent 7dc57ef commit 5579e71cb959d3f2a63cfdb4630270126789e58f @shane-tomlinson committed
Showing with 142 additions and 25 deletions.
  1. +8 −4 static/index.html
  2. +16 −10 static/js/main.js
  3. +118 −11 static/style.less
View
12 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>
View
26 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) {
View
129 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;
+ }
+ }
}

0 comments on commit 5579e71

Please sign in to comment.
Something went wrong with that request. Please try again.