added automatic resize of elements

Author: rossengeorgiev

css/main.css

@@ -8,6 +8,7 @@ html, body {
     padding: 0;
     width: 100%;
     height: 100%;
+    overflow: hidden;
 }
 
 #loading {
@@ -22,8 +23,9 @@ header {
     padding: 0;
     margin: 0;
     height: 50px;
-    min-height: 50px;
-    max-height: 50px;
+    min-height: 55px;
+    max-height: 55px;
+    line-height: normal;
     border-bottom: 5px solid #33b5e5;
     box-shadow: 0px 3px 3px #888;
     z-index: 5;
@@ -110,14 +112,20 @@ header > div,
     opacity: 0.6;
 }
 
-
-@media only screen and (max-height: 480px) {
-    .landscape { display: none; }
-    #map{
-        height: 225px;
+@media only screen and (min-width: 321px) {
+    .portrait { display: none; }
+    .landscape { display: block; }
+    #map {
+        float: right;
+        height: 245px;
+        width: 280px;
     }
     #main {
-        height: 180px;
+        float: left;
+        height: 245px;
+        width: 199px;
+        border-right: 1px solid #ddd;
+        overflow: hidden;
     }
     #main .header {
         height: 20px;
@@ -126,23 +134,18 @@ header > div,
     }
     #main .data {
         background-color: #f4f4f4;
-        height: 140px;
+        height: 100%;
+        padding-bottom: 10px;
     }
     #main .data .left {
         float: left;
-        width: 65%;
+        width: 160px;
         padding-left: 10px;
-        padding-right: 20px;
-    }
-    #main .data .right {
-        float: right;
-        padding-right: 10px;
-        width: 20%;
     }
     #main .data dl > dt { 
         color: #000;
         line-height: 11px;
-        margin-top: 15px;
+        margin-top: 10px;
         font-weight: bold;
         font-size: 14px;
     }
@@ -160,22 +163,19 @@ header > div,
     #main .data dl > dd.recievers { 
         font-size: 10px;
     }
+    #main .row .data img {
+        right: 5%;
+        top: 50px;
+    }
 }
-@media only screen and (max-height: 320px) {
-    .portrait { display: none; }
-    .landscape { display: block; }
-    .container { width: 460px; }
-    #map {
-        float: right;
-        height: 245px;
-        width: 280px;
+@media only screen and (max-width: 320px) {
+    .portrait { display: block; }
+    .landscape { display: none; }
+    #map{
+        height: 225px;
     }
     #main {
-        float: left;
-        height: 245px;
-        width: 199px;
-        border-right: 1px solid #ddd;
-        overflow: hidden;
+        height: 180px;
     }
     #main .header {
         height: 20px;
@@ -184,18 +184,23 @@ header > div,
     }
     #main .data {
         background-color: #f4f4f4;
-        height: 100%;
-        padding-bottom: 10px;
+        height: 140px;
     }
     #main .data .left {
         float: left;
-        width: 160px;
+        width: 65%;
         padding-left: 10px;
+        padding-right: 20px;
+    }
+    #main .data .right {
+        float: right;
+        padding-right: 10px;
+        width: 20%;
     }
     #main .data dl > dt { 
         color: #000;
         line-height: 11px;
-        margin-top: 10px;
+        margin-top: 15px;
         font-weight: bold;
         font-size: 14px;
     }
@@ -213,8 +218,4 @@ header > div,
     #main .data dl > dd.recievers { 
         font-size: 10px;
     }
-    #main .row .data img {
-        right: 5%;
-        top: 50px;
-    }
 }

js/app.js

@@ -7,17 +7,34 @@ var preloadImages = [
     "img/menu-icons.png",    
 ];
 
-function hideAddressbar()
-{
-    window.scrollTo(0, 1);
-}
+function checkSize() {
+    // we are in landscape mode
+    w = $(window).width();
+    h = $(window).height();
+    hh = $('header').height();
+    sw = $('#main').width();
+
+    if($('.landscape:visible').length) {
+        $('.container').width(w-40);
+        $('#main,#map').height(h-hh-5);
+        $('#map').width(w-sw-1);
+    } else { // portrait mode
+        $('.container').width(w-20);
+        $('#main,#map').height(h-hh-5-180);
+        $('#map').width(w);
+    }
 
-function checkPreload() {
+    if(map) map.checkResize();
 }
 
+window.onresize = checkSize;
+
 
 $(window).ready(function() {
-    window.onorientationchange = hideAddressbar();
+    // resize elements if needed
+    checkSize();
+
+    // add inline scroll to vehicle list
     listScroll = new iScroll('main', { hScrollbar: false, snap: true });
 
     // click first icon for popup with the window size