sides panels on widescreens

* pages from the top menu become side panesl on screen >900px wide
* aboutbox opens on startup if screen >900px wide

Author: rossengeorgiev

css/main.css

@@ -446,10 +446,22 @@ header > div {
     overflow: auto;
     position: absolute;
     width: 100%;
-    z-index: 50;
+    z-index: 100;
     background: #fff;
 }
 
+.topanel {
+    float: right;
+    position: relative;
+    width: initial;
+    padding: 0;
+    padding-left: 10px;
+    padding-right: 20px;
+    box-shadow: 2px 0px 8px 0px #555;
+    overflow-x: hidden;
+    z-index: 3;
+}
+
 .flatpage p {
     display: block;
     text-align: justify;
@@ -596,6 +608,7 @@ header > div {
         width: 280px;
         background: #fff;
         position: relative;
+        z-index: 2;
     }
     #telemetry_graph .holder {
         border-left: 1px solid #ddd;
@@ -625,6 +638,7 @@ header > div {
         width: 199px;
         overflow: hidden;
         margin-top: 55px;
+        box-shadow: -2px 0px 6px 0px #555;
     }
     #main .data {
         height: 100%;

index.html

@@ -70,20 +70,20 @@ <h2>Embed tracker
                 a specific callsign. Or two, or three. There are options to play with. It's easy. Just visit the page bellow and check it out.
             </p>
             <p>
-                <a href="embed-preview.html">Customize tracker for embedding</a>
+                <a href="embed-preview.html" target="_blank">Customize tracker for embedding</a>
             </p>
         </div>
     </div>
     <div id="aboutbox" style="display: none" class="flatpage">
         <div class="slimContainer">
-            <h2><i class="icon-question rfloat"></i>Motd</h2>
+            <h2><i class="icon-question rfloat"></i>Welcome</h2>
             <hr/>
-            <div id='motd'></div>
+            <div id='motd'><img style='display:block;margin:0 auto' src="img/hab-spinner.gif" /></div>
             <br/>
+<iframe data-src="https://www.google.com/calendar/embed?title=Habhub%20Calendar&amp;showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;mode=AGENDA&amp;height=450&amp;wkst=2&amp;bgcolor=%23ffffff&amp;src=5m4629p2h0esfojq1elep31einvu2q0v%40import.calendar.google.com&amp;color=%2300a3d3&amp;ctz=Pacific%2FMidway" style=" border-width:0 " width="290" height="450" frameborder="0" scrolling="no"></iframe>
             <p>
                 Want to track with <b>Google Earth</b> instead?<br/> <a href="track.kml">Just click here</a>
             </p>
-<iframe data-src="https://www.google.com/calendar/embed?title=Habhub%20Calendar&amp;showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;mode=AGENDA&amp;height=450&amp;wkst=2&amp;bgcolor=%23ffffff&amp;src=5m4629p2h0esfojq1elep31einvu2q0v%40import.calendar.google.com&amp;color=%2300a3d3&amp;ctz=Pacific%2FMidway" style=" border-width:0 " width="290" height="450" frameborder="0" scrolling="no"></iframe>
             <h2>Contribute</h2>
             <hr/>
             <p>

js/app.js

@@ -149,6 +149,15 @@ function checkSize() {
     //h = (h < 300) ? 300 :  h; // absolute minimum 320px minus 20px for the iphone bar
     hh = $('header').height();
 
+    ph = 0;
+
+    if(w > 900 && $('.flatpage:visible').length) {
+        $('.flatpage').addClass('topanel');
+        ph = $('.flatpage:visible').width()+30;
+    } else {
+        $('.flatpage.topanel').removeClass('topanel');
+    }
+
     $("#mapscreen,.flatpage").height(h-hh-5);
 
     sw = (wvar.vlist) ? 199 : 0;
@@ -163,7 +172,7 @@ function checkSize() {
             $('#map').height(h-hh-5);
         }
         $('body,#loading').height(h);
-        $('#mapscreen,#map,#telemetry_graph,#telemetry_graph .holder').width(w-sw);
+        $('#mapscreen,#map,#telemetry_graph,#telemetry_graph .holder').width(w-sw-ph);
         $('#main').width(sw);
     } else { // portrait mode
         //if(h < 420) h = 420;
@@ -489,15 +498,18 @@ $(window).ready(function() {
     .on('click', 'li', function() {
         var e = $(this);
         var name = e.attr('class').replace(" last","");
+
+        // makes the menu buttons act like a switch
+        if($("#"+name+"box").is(':visible')) name = 'home';
+
         var box = $("#"+name+"box");
 
         if(box.is(':hidden')) {
             $('.flatpage').hide();
             box.show().scrollTop(0);
 
-            if(name == 'about') {
-                if(box.hasClass('inited')) return;
-                box.addClass('inited');
+            if(name == 'about' && !$('#motd').hasClass('inited')) {
+                $('#motd').addClass('inited');
 
                 $.getJSON("http://spacenear.us/tracker/datanew.php?type=info", function(data) {
                     if('html' in data) $('#motd').html(data.html.replace(/\\/g,''));

js/tracker.js

@@ -455,6 +455,10 @@ function load() {
               $("#lookanglesbox .nofollow").fadeIn(500, "easeOut");
           }
         });
+
+        // if we there is enough screen space open aboutbox on startup
+        if(!is_mobile && $(window).width() > 900) $('.nav li.about').click();
+
     }, 500);
 
     // initialize clouds layer