From 38a1e5ac1c493e637c4466afd19f3cf844af7592 Mon Sep 17 00:00:00 2001
From: Scott Torborg <scott@crookedmedia.com>
Date: Thu, 12 Nov 2009 22:10:45 -0800
Subject: [PATCH 1/1] added orientation changing interface

---
 bluechips/public/css/mobile.css      | 32 +++++++++++++++++++++++++---
 bluechips/public/js/mobile.js        | 14 ++++++++++++
 bluechips/templates/mobile/base.mako |  2 +-
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/bluechips/public/css/mobile.css b/bluechips/public/css/mobile.css
index 76476ba..64a1bbe 100644
--- a/bluechips/public/css/mobile.css
+++ b/bluechips/public/css/mobile.css
@@ -9,20 +9,22 @@ body {
 #tabs a {
     text-align: center;
     display: block;
+}
+#portrait #tabs a {
     width: 98px;
     float: left;
     border-top: 1px solid #fff;
     border-bottom: 1px solid #aaa;
     padding: 5px 1px;
 }
-#tabs a.selected {
+#portrait #tabs a.selected {
     border: 1px solid #aaa;
     border-bottom: 1px solid #fff;
     padding: 5px 0;
     -webkit-border-top-left-radius: 10px;
     -webkit-border-top-right-radius: 10px;
 }
-#tabs:after {
+#portrait #tabs:after {
     content: ".";
     display: block;
     clear: both;
@@ -31,13 +33,37 @@ body {
     height: 0;
     margin-bottom: 10px;
 }
+#landscape #tabs {
+    float: left;
+    width: 100px;
+    margin-right: 10px;
+}
+#landscape #tabs a {
+    border-left: 1px solid #fff;
+    border-right: 1px solid #aaa;
+    padding: 4px 5px;
+}
+#landscape #tabs a.selected {
+    border: 1px solid #aaa;
+    border-right: 1px solid #fff;
+    padding: 3px 5px;
+    -webkit-border-top-left-radius: 10px;
+    -webkit-border-bottom-left-radius: 10px;
+}
 div.tab {
     display: none;
 }
 #non-mobile a {
     display: block;
-    width: 100%;
     text-align: center;
     padding: 5px 0;
     border: 1px solid #aaa;
+    margin-bottom: 5px;
+}
+#portrait #non-mobile a {
+    width: 100%;
+}
+#landscape #non-mobile a {
+    float: right;
+    width: 352px;
 }
diff --git a/bluechips/public/js/mobile.js b/bluechips/public/js/mobile.js
index a7ab326..44090ee 100644
--- a/bluechips/public/js/mobile.js
+++ b/bluechips/public/js/mobile.js
@@ -24,6 +24,20 @@ $(function() {
     });
     $('#tabs a.selected').click();
 
+    $('body').bind('orientationchange', function() {
+        switch(window.orientation) {
+            case 0:
+            case 180:
+                $('body').attr('id', 'portrait');
+                break;
+            case -90:
+            case 90:
+                $('body').attr('id', 'landscape');
+                break;
+        }
+    });
+    $('body').trigger('orientationchange');
+
     console.log("ready() done");
 });
 
diff --git a/bluechips/templates/mobile/base.mako b/bluechips/templates/mobile/base.mako
index 3d1f390..ebd28c4 100644
--- a/bluechips/templates/mobile/base.mako
+++ b/bluechips/templates/mobile/base.mako
@@ -6,7 +6,7 @@
     <title>${self.title()}</title>
     ${h.stylesheet_link('/css/main.css')}
     <link media="only screen and (max-device-width: 480px)" href="/css/mobile.css" type="text/css" rel="stylesheet" />
-    <meta name="viewport" content="width = device-width, user-scalable=no" />
+    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no" />
     <link rel="apple-touch-icon" href="/icons/apple-touch.png" />
     <link rel="apple-touch-startup-image" href="/icons/apple-touch-startup.png" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
-- 
2.45.2