From 14ff25b87f070d019001d82c67c3a1ed2a4d7c43 Mon Sep 17 00:00:00 2001
From: Trevor Slocum <tslocum@gmail.com>
Date: Wed, 6 Aug 2014 19:31:05 -0700
Subject: [PATCH] Improve map display layout and styling

---
 public_html/gmap.html | 64 ++++++++++++++++++++-----------------------
 public_html/script.js |  6 +++-
 public_html/style.css | 16 ++++++-----
 3 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/public_html/gmap.html b/public_html/gmap.html
index 80afe02..1898e06 100644
--- a/public_html/gmap.html
+++ b/public_html/gmap.html
@@ -3,7 +3,7 @@
 		<link rel="stylesheet" type="text/css" href="style.css" />
 		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
+		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
 		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
 		<script type="text/javascript" src="config.js"></script>
 		<script type="text/javascript" src="planeObject.js"></script>
@@ -18,40 +18,36 @@
 		<div id="dialog-modal" title="Basic modal dialog" style="display:none;">
 			<p>The settings feature is coming soon. Keep checking GitHub.</p>
 		</div>
-		<div id="map_container">
-			<div id="map_canvas"></div>
-		</div>
-		<div id="sidebar_container">
-			<div id="sidebar_canvas">
-				<div id="timestamps" style="align: center">
-					<table width="100%"><tr>
-						<td>Local Time</td>
-						<td>
-							<canvas id="localclock" class="CoolClock:classic:40"></canvas>
-						</td>
-						<td>UTC Time</td>
-						<td>
-							<canvas id="gmtclock" class="CoolClock:classic:40::0"></canvas>
-						</td>
-					</tr></table>
-				</div>
-				<div id="sudo_buttons">
-					<table width="100%"><tr>
-						<td width="150" style="text-align: center;" class="pointer">
-						    [ <span onclick="resetMap();">Reset Map</span> ]
-						</td>
-						<td>&nbsp;</td>
-						<td width="150" style="text-align: center;" id="setings_button" class="pointer">
-						    [ <span onclick="optionsModal();">Settings</span> ]
-						</td>
-					</tr></table>
-				</div>
-
-				<div id="plane_detail"></div>
-				<div id="options"></div>
-				<div id="planes_table"></div>
-				<div id="plane_extension"></div>
+		<div id="map_canvas"></div>
+		<div id="sidebar_canvas">
+			<div id="timestamps" style="align: center">
+				<table width="100%"><tr>
+					<td>Local Time</td>
+					<td>
+						<canvas id="localclock" class="CoolClock:classic:40"></canvas>
+					</td>
+					<td>UTC Time</td>
+					<td>
+						<canvas id="gmtclock" class="CoolClock:classic:40::0"></canvas>
+					</td>
+				</tr></table>
 			</div>
+			<div id="sudo_buttons">
+				<table width="100%"><tr>
+					<td width="150" style="text-align: center;" class="pointer">
+						[ <span onclick="resetMap();">Reset Map</span> ]
+					</td>
+					<td>&nbsp;</td>
+					<td width="150" style="text-align: center;" id="setings_button" class="pointer">
+						[ <span onclick="optionsModal();">Settings</span> ]
+					</td>
+				</tr></table>
+			</div>
+
+			<div id="plane_detail"></div>
+			<div id="options"></div>
+			<div id="planes_table"></div>
+			<div id="plane_extension"></div>
 		</div>
 		<div id="SpecialSquawkWarning">
 		    <b>Squak 7x00 is reported and shown.</b><br>
diff --git a/public_html/script.js b/public_html/script.js
index 05d29b7..1fc8748 100644
--- a/public_html/script.js
+++ b/public_html/script.js
@@ -135,8 +135,12 @@ function initialize() {
 		center: new google.maps.LatLng(CenterLat, CenterLon),
 		zoom: ZoomLvl,
 		mapTypeId: google.maps.MapTypeId.ROADMAP,
+		mapTypeControl: true,
+		streetViewControl: false,
 		mapTypeControlOptions: {
-			mapTypeIds: mapTypeIds
+			mapTypeIds: mapTypeIds,
+			position: google.maps.ControlPosition.TOP_LEFT,
+			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
 		}
 	};
 
diff --git a/public_html/style.css b/public_html/style.css
index 63d0a45..b4dd94e 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -1,21 +1,23 @@
 html, body {
     margin: 0; padding: 0; background-color: #ffffff; font-family: Tahoma, Sans-Serif;
-    font-size: 10pt; overflow: auto;
+    font-size: 12pt; overflow: auto;
 }
-div#map_container     { float: left; width: 100%; height: 100%; }
-div#map_canvas        { height: 100%; margin-right: 420px; }
 
-div#sidebar_container { float: left; width: 410px; margin-left: -410px; height: 100%; overflow: auto; }
+div#map_canvas     { width: 100%; height: 100%; }
 
-div#SpecialSquawkWarning { position: absolute; bottom: 25px; right: 430px; border: 2px solid red;
+div#sidebar_canvas { position: absolute; top: 0px; right: 0px;
+	box-sizing:border-box; width: 410px;
+	background: #FFFFFF; padding: 0px 2px 2px 2px;
+	border-bottom-left-radius: 5px; z-index: 99; overflow: auto; }
+
+div#SpecialSquawkWarning { position: absolute; bottom: 25px; right: 0px; border: 2px solid red;
     background-color: #FFFFA3; opacity: 0.75; filter:alpha(opacity=75); padding: 5px;
     display: none; text-align: center; }
 
 table#optionsTabs { width: 100%; font-size: small; font-family: monospace; background-color: #ddd;
     border: 1px; border-color: #000000;}
 
-#tableinfo { font-size: x-small; font-family: monospace; }
-#sudo_buttons { font-size: x-small; font-family: monospace; }
+#tableinfo, #sudo_buttons { font-family: monospace; }
 
 .vPosition  { font-weight: bold; background-color: #f5fff5; }
 .squawk7500 { font-weight: bold; background-color: #ff5555; }