added orientation changing interface

diff --git a/bluechips/public/css/mobile.css b/bluechips/public/css/mobile.css
index 76476baacfdf60975aeeadb196aeb8fb0f5d6a1e..64a1bbe9b141d1696d2639e5e643f5c79fbdc964 100644 (file)
--- 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 a7ab3266d5d65627dd1cde160039b0d1a1009e55..44090eef895342e21dc227d57ddf060ba448ddd3 100644 (file)
--- 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 3d1f3907ba0c15abd9f77e3d0bae1b30ebf3147e..ebd28c4fa3ff30f4f3f3674cc2d92ec4820ce3db 100644 (file)
--- 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" />