diff --git a/public_html/formatter.js b/public_html/formatter.js index d25460b..957ff84 100644 --- a/public_html/formatter.js +++ b/public_html/formatter.js @@ -12,7 +12,8 @@ var UnitLabels = { 'altitude': { metric: "m", imperial: "ft", nautical: "ft"}, 'speed': { metric: "km/h", imperial: "mph", nautical: "kt" }, 'distance': { metric: "km", imperial: "mi", nautical: "NM" }, - 'verticalRate': { metric: "m/s", imperial: "ft/min", nautical: "ft/min" } + 'verticalRate': { metric: "m/s", imperial: "ft/min", nautical: "ft/min" }, + 'distanceShort': {metric: "m", imperial: "ft", nautical: "m"} }; // formatting helpers @@ -91,6 +92,17 @@ function format_altitude_long(alt, vr, displayUnits) { } } +// alt ground/airborne +function format_onground (alt) { + if (alt === null) { + return "n/a"; + } else if (alt === "ground") { + return "on ground"; + } else { + return "airborne"; + } +} + // alt in feet function convert_altitude(alt, displayUnits) { if (displayUnits === "metric") { @@ -156,6 +168,16 @@ function format_distance_long(dist, displayUnits, fixed) { return dist_text; } +function format_distance_short (dist, displayUnits) { + if (dist === null) { + return "n/a"; + } + + var dist_text = Math.round(convert_distance_short(dist, displayUnits)) + NBSP + get_unit_label("distanceShort", displayUnits); + + return dist_text; +} + // dist in meters function convert_distance(dist, displayUnits) { if (displayUnits === "metric") { @@ -167,6 +189,15 @@ function convert_distance(dist, displayUnits) { return (dist / 1852); // meters to nautical miles } +// dist in meters +// converts meters to feet or just returns meters +function convert_distance_short(dist, displayUnits) { + if (displayUnits === "imperial") { + return (dist / 0.3048); // meters to feet + } + return dist; // just meters +} + // rate in ft/min function format_vert_rate_brief(rate, displayUnits) { if (rate === null || rate === undefined) { @@ -225,3 +256,52 @@ function format_data_source(source) { return ""; } + +function format_nac_p (value) { + switch (value) { + case 0: + return "EPU ≥ 18.52 km"; + case 1: + return "EPU < 18.52 km"; + case 2: + return "EPU < 7.408 km"; + case 3: + return "EPU < 3.704 km"; + case 4: + return "EPU < 1852 m"; + case 5: + return "EPU < 926 m"; + case 6: + return "EPU < 555.6 m"; + case 7: + return "EPU < 185.2 m"; + case 8: + return "EPU < 92.6 m"; + case 9: + return "EPU < 30 m"; + case 10: + return "EPU < 10 m"; + case 11: + return "EPU < 3 m"; + default: + return "n/a"; + + } +} + +function format_nac_v (value) { + switch (value) { + case 0: + return "Unknown or 10 m/s"; + case 1: + return "< 10 m/s"; + case 2: + return "< 3 m/s"; + case 3: + return "< 1 m/s"; + case 4: + return "< 0.3 m/s"; + default: + return "n/a"; + } +} diff --git a/public_html/images/icon-information@2x.png b/public_html/images/icon-information@2x.png new file mode 100644 index 0000000..ec261ce Binary files /dev/null and b/public_html/images/icon-information@2x.png differ diff --git a/public_html/images/toggle-height@2x.png b/public_html/images/toggle-height@2x.png new file mode 100644 index 0000000..b127fc2 Binary files /dev/null and b/public_html/images/toggle-height@2x.png differ diff --git a/public_html/images/toggle-width@2x.png b/public_html/images/toggle-width@2x.png new file mode 100644 index 0000000..626757a Binary files /dev/null and b/public_html/images/toggle-width@2x.png differ diff --git a/public_html/index.html b/public_html/index.html index 48bb634..bb791d8 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -2,13 +2,13 @@ - + - + @@ -18,11 +18,11 @@ - - + + - + PiAware Skyview @@ -63,182 +63,7 @@
- +
@@ -246,6 +71,10 @@ n/a
+
+
Registration:
+
n/a
+
Aircraft Type:
n/a
@@ -258,11 +87,23 @@
Speed:
n/a
+
+
Source:
+
n/a
+
+
+ + +
Overlay Toggles
@@ -326,114 +167,473 @@
diff --git a/public_html/planeObject.js b/public_html/planeObject.js index db9c56c..437fc0c 100644 --- a/public_html/planeObject.js +++ b/public_html/planeObject.js @@ -5,8 +5,8 @@ function PlaneObject(icao) { this.icao = icao; this.icaorange = findICAORange(icao); this.flight = null; - this.squawk = null; - this.selected = false; + this.squawk = null; + this.selected = false; this.category = null; // Basic location information @@ -29,6 +29,13 @@ function PlaneObject(icao) { this.nav_heading = null; this.nav_modes = null; this.nav_qnh = null; + this.rc = null; + + this.nac_p = null; + this.nac_v = null; + this.nic_baro = null; + this.sil_type = null; + this.sil = null; this.baro_rate = null; this.geom_rate = null; @@ -438,8 +445,9 @@ PlaneObject.prototype.updateData = function(receiver_timestamp, data) { var fields = ["alt_baro", "alt_geom", "gs", "ias", "tas", "track", "track_rate", "mag_heading", "true_heading", "mach", - "roll", "nav_altitude", "nav_heading", "nav_modes", - "nav_qnh", "baro_rate", "geom_rate", + "roll", "nav_altitude", "nav_heading", "nav_modes", + "nac_p", "nac_v", "nic_baro", "sil_type", "sil", + "nav_qnh", "baro_rate", "geom_rate", "rc", "squawk", "category", "version"]; for (var i = 0; i < fields.length; ++i) { diff --git a/public_html/script.js b/public_html/script.js index 8d58106..ae98b09 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -203,11 +203,59 @@ function initialize() { } // Set up map/sidebar splitter - $("#sidebar_container").resizable({handles: {w: '#splitter'}}); + $("#sidebar_container").resizable({ + handles: { + w: '#splitter' + }, + minWidth: 350 + }); - // Set up aircraft information panel - $("#selected_infoblock").draggable({containment: "parent"}); + // Set up datablock splitter + $('#selected_infoblock').resizable({ + handles: { + s: '#splitter-infoblock' + }, + containment: "#sidebar_container", + minHeight: 50 + }); + $('#close-button').on('click', function() { + if (SelectedPlane !== null) { + var selectedPlane = Planes[SelectedPlane]; + SelectedPlane = null; + selectedPlane.selected = null; + selectedPlane.clearLines(); + selectedPlane.updateMarker(); + refreshSelected(); + refreshHighlighted(); + $('#selected_infoblock').hide(); + } + }); + + // this is a little hacky, but the best, most consitent way of doing this. change the margin bottom of the table container to the height of the overlay + $('#selected_infoblock').on('resize', function() { + $('#sidebar_canvas').css('margin-bottom', $('#selected_infoblock').height() + 'px'); + }); + // look at the window resize to resize the pop-up infoblock so it doesn't float off the bottom or go off the top + $(window).on('resize', function() { + var topCalc = ($(window).height() - $('#selected_infoblock').height() - 60); + // check if the top will be less than zero, which will be overlapping/off the screen, and set the top correctly. + if (topCalc < 0) { + topCalc = 0; + $('#selected_infoblock').css('height', ($(window).height() - 60) +'px'); + } + $('#selected_infoblock').css('top', topCalc + 'px'); + }); + + // to make the infoblock responsive + $('#sidebar_container').on('resize', function() { + if ($('#sidebar_container').width() < 500) { + $('#selected_infoblock').addClass('infoblock-container-small'); + } else { + $('#selected_infoblock').removeClass('infoblock-container-small'); + } + }); + // Set up event handlers for buttons $("#toggle_sidebar_button").click(toggleSidebarVisibility); $("#expand_sidebar_button").click(expandSidebar); @@ -331,21 +379,22 @@ function initialize() { } var CurrentHistoryFetch = null; -var PositionHistoryBuffer = [] +var PositionHistoryBuffer = []; var HistoryItemsReturned = 0; function start_load_history() { - if (PositionHistorySize > 0 && window.location.hash != '#nohistory') { - $("#loader_progress").attr('max',PositionHistorySize); - console.log("Starting to load history (" + PositionHistorySize + " items)"); - //Load history items in parallel - for (var i = 0; i < PositionHistorySize; i++) { - load_history_item(i); - } - } + if (PositionHistorySize > 0 && window.location.hash != '#nohistory') { + $("#loader_progress").attr('max',PositionHistorySize); + console.log("Starting to load history (" + PositionHistorySize + " items)"); + //Load history items in parallel + for (var i = 0; i < PositionHistorySize; i++) { + load_history_item(i); + } + } } function load_history_item(i) { console.log("Loading history #" + i); + $("#loader_progress").attr('value',i); $.ajax({ url: 'data/history_' + i + '.json', timeout: 5000, @@ -353,20 +402,20 @@ function load_history_item(i) { dataType: 'json' }) .done(function(data) { - PositionHistoryBuffer.push(data); - HistoryItemsReturned++; - $("#loader_progress").attr('value',HistoryItemsReturned); - if (HistoryItemsReturned == PositionHistorySize) { - end_load_history(); - } + PositionHistoryBuffer.push(data); + HistoryItemsReturned++; + $("#loader_progress").attr('value',HistoryItemsReturned); + if (HistoryItemsReturned == PositionHistorySize) { + end_load_history(); + } }) .fail(function(jqxhr, status, error) { - //Doesn't matter if it failed, we'll just be missing a data point - HistoryItemsReturned++; - if (HistoryItemsReturned == PositionHistorySize) { - end_load_history(); - } + //Doesn't matter if it failed, we'll just be missing a data point + HistoryItemsReturned++; + if (HistoryItemsReturned == PositionHistorySize) { + end_load_history(); + } }); } @@ -587,9 +636,9 @@ function initialize_map() { if (FollowSelected) { // On manual navigation, disable follow var selected = Planes[SelectedPlane]; - if (typeof selected === 'undefined' || - (Math.abs(center[0] - selected.position[0]) > 0.0001 && - Math.abs(center[1] - selected.position[1]) > 0.0001)) { + if (typeof selected === 'undefined' || + (Math.abs(center[0] - selected.position[0]) > 0.0001 && + Math.abs(center[1] - selected.position[1]) > 0.0001)){ FollowSelected = false; refreshSelected(); refreshHighlighted(); @@ -856,18 +905,18 @@ function refreshSelected() { } else { $('#selected_callsign').text('n/a'); } - $('#selected_flightaware_link').html(getFlightAwareModeSLink(selected.icao, selected.flight, "FlightAware.com")); + $('#selected_flightaware_link').html(getFlightAwareModeSLink(selected.icao, selected.flight, "Visit Flight Page")); if (selected.registration !== null) { $('#selected_registration').text(selected.registration); } else { - $('#selected_registration').text(""); + $('#selected_registration').text("n/a"); } if (selected.icaotype !== null) { $('#selected_icaotype').text(selected.icaotype); } else { - $('#selected_icaotype').text(""); + $('#selected_icaotype').text("n/a"); } // Not using this logic for the redesigned info panel at the time, but leaving it in if/when adding it back @@ -879,7 +928,9 @@ function refreshSelected() { // emerg.className = 'hidden'; // } - $("#selected_altitude").text(format_altitude_long(selected.altitude, selected.vert_rate, DisplayUnits)); + $("#selected_altitude").text(format_altitude_long(selected.altitude, selected.vert_rate, DisplayUnits)); + + $('#selected_onground').text(format_onground(selected.altitude)); if (selected.squawk === null || selected.squawk === '0000') { $('#selected_squawk').text('n/a'); @@ -887,11 +938,14 @@ function refreshSelected() { $('#selected_squawk').text(selected.squawk); } - $('#selected_gs').text(format_speed_long(selected.gs, DisplayUnits)); - $('#selected_vertical_rate').text(format_vert_rate_long(selected.vert_rate, DisplayUnits)); + $('#selected_speed').text(format_speed_long(selected.gs, DisplayUnits)); + $('#selected_ias').text(format_speed_long(selected.ias, DisplayUnits)); + $('#selected_tas').text(format_speed_long(selected.tas, DisplayUnits)); + $('#selected_vertical_rate').text(format_vert_rate_long(selected.baro_rate, DisplayUnits)); + $('#selected_vertical_rate_geo').text(format_vert_rate_long(selected.geom_rate, DisplayUnits)); $('#selected_icao').text(selected.icao.toUpperCase()); $('#airframes_post_icao').attr('value',selected.icao); - $('#selected_track').text(format_track_long(selected.track)); + $('#selected_track').text(format_track_long(selected.track)); if (selected.seen <= 1) { $('#selected_seen').text('now'); @@ -917,8 +971,8 @@ function refreshSelected() { $('#selected_position').text(format_latlng(selected.position)); } else { $('#selected_position').text(format_latlng(selected.position)); - } - + } + $('#selected_follow').removeClass('hidden'); if (FollowSelected) { $('#selected_follow').css('font-weight', 'bold'); @@ -927,21 +981,22 @@ function refreshSelected() { $('#selected_follow').css('font-weight', 'normal'); } } - if (selected.getDataSource() === "adsb_icao") { - $('#selected_source').text("ADS-B"); - } else if (selected.getDataSource() === "tisb_trackfile" || selected.getDataSource() === "tisb_icao" || selected.getDataSource() === "tisb_other") { - $('#selected_source').text("TIS-B"); - } else if (selected.getDataSource() === "mlat") { - $('#selected_source').text("MLAT"); - } else { - $('#selected_source').text("Other"); - } + if (selected.getDataSource() === "adsb_icao") { + $('#selected_source').text("ADS-B"); + } else if (selected.getDataSource() === "tisb_trackfile" || selected.getDataSource() === "tisb_icao" || selected.getDataSource() === "tisb_other") { + $('#selected_source').text("TIS-B"); + } else if (selected.getDataSource() === "mlat") { + $('#selected_source').text("MLAT"); + } else { + $('#selected_source').text("Other"); + } + $('#selected_category').text(selected.category ? selected.category : "n/a"); $('#selected_sitedist').text(format_distance_long(selected.sitedist, DisplayUnits)); $('#selected_rssi').text(selected.rssi.toFixed(1) + ' dBFS'); $('#selected_message_count').text(selected.messages); - $('#selected_photo_link').html(getFlightAwarePhotoLink(selected.registration)); - - $('#selected_alt_geom').text(format_altitude_long(selected.alt_geom, selected.geom_rate, DisplayUnits)); + $('#selected_photo_link').html(getFlightAwarePhotoLink(selected.registration)); + + $('#selected_altitude_geom').text(format_altitude_long(selected.alt_geom, selected.geom_rate, DisplayUnits)); $('#selected_mag_heading').text(format_track_long(selected.mag_heading)); $('#selected_true_heading').text(format_track_long(selected.true_heading)); $('#selected_ias').text(format_speed_long(selected.ias, DisplayUnits)); @@ -957,9 +1012,9 @@ function refreshSelected() { $('#selected_roll').text(selected.roll.toFixed(1)); } if (selected.track_rate == null) { - $('#selected_track_rate').text('n/a'); + $('#selected_trackrate').text('n/a'); } else { - $('#selected_track_rate').text(selected.track_rate.toFixed(2)); + $('#selected_trackrate').text(selected.track_rate.toFixed(2)); } $('#selected_geom_rate').text(format_vert_rate_long(selected.geom_rate, DisplayUnits)); if (selected.nav_qnh == null) { @@ -973,7 +1028,58 @@ function refreshSelected() { $('#selected_nav_modes').text("n/a"); } else { $('#selected_nav_modes').text(selected.nav_modes.join()); - } + } + if (selected.nic_baro == null) { + $('#selected_nic_baro').text("n/a"); + } else { + if (selected.nic_baro == 1) { + $('#selected_nic_baro').text("cross-checked"); + } else { + $('#selected_nic_baro').text("not cross-checked"); + } + } + + $('#selected_nac_p').text(format_nac_p(selected.nac_p)); + $('#selected_nac_v').text(format_nac_v(selected.nac_v)); + if (selected.rc == null) { + $('#selected_rc').text("n/a"); + } else if (selected.rc == 0) { + $('#selected_rc').text("unknown"); + } else { + $('#selected_rc').text(format_distance_short(selected.rc, DisplayUnits)); + } + + if (selected.sil == null || selected.sil_type == null) { + $('#selected_sil').text("n/a"); + } else { + var sampleRate = ""; + var silDesc = ""; + if (selected.sil_type == "perhour") { + sampleRate = " per flight hour"; + } else if (selected.sil_type == "persample") { + sampleRate = " per sample"; + } + + switch (selected.sil) { + case 0: + silDesc = "> 1×10-3"; + break; + case 1: + silDesc = "≤ 1×10-3"; + break; + case 2: + silDesc = "≤ 1×10-5"; + break; + case 3: + silDesc = "≤ 1×10-7"; + break; + default: + silDesc = "n/a"; + sampleRate = ""; + break; + } + $('#selected_sil').html(silDesc + sampleRate); + } if (selected.version == null) { $('#selected_version').text('none'); @@ -986,7 +1092,8 @@ function refreshSelected() { } else { $('#selected_version').text('v' + selected.version); } -} + + } function refreshHighlighted() { // this is following nearly identical logic, etc, as the refreshSelected function, but doing less junk for the highlighted pane @@ -1004,6 +1111,48 @@ function refreshHighlighted() { $('#highlighted_infoblock').show(); + // Get info box position and size + var infoBox = $('#highlighted_infoblock'); + var infoBoxPosition = infoBox.position(); + if (typeof infoBoxOriginalPosition.top === 'undefined') { + infoBoxOriginalPosition.top = infoBoxPosition.top; + infoBoxOriginalPosition.left = infoBoxPosition.left; + } else { + infoBox.css("left", infoBoxOriginalPosition.left); + infoBox.css("top", infoBoxOriginalPosition.top); + infoBoxPosition = infoBox.position(); + } + var infoBoxExtent = getExtent(infoBoxPosition.left, infoBoxPosition.top, infoBox.outerWidth(), infoBox.outerHeight()); + + // Get map size + var mapCanvas = $('#map_canvas'); + var mapExtent = getExtent(0, 0, mapCanvas.width(), mapCanvas.height()); + + var marker = highlighted.marker; + var markerCoordinates = highlighted.marker.getGeometry().getCoordinates(); + var markerPosition = OLMap.getPixelFromCoordinate(markerCoordinates); + + // Check for overlap + //FIXME TODO: figure out this/remove this check + if (isPointInsideExtent(markerPosition[0], markerPosition[1], infoBoxExtent) || true) { + // Array of possible new positions for info box + var candidatePositions = []; + candidatePositions.push( { x: 40, y: 80 } ); + candidatePositions.push( { x: markerPosition[0] + 20, y: markerPosition[1] + 60 } ); + + // Find new position + for (var i = 0; i < candidatePositions.length; i++) { + var candidatePosition = candidatePositions[i]; + var candidateExtent = getExtent(candidatePosition.x, candidatePosition.y, infoBox.outerWidth(), infoBox.outerHeight()); + + if (!isPointInsideExtent(markerPosition[0], markerPosition[1], candidateExtent) && isPointInsideExtent(candidatePosition.x, candidatePosition.y, mapExtent)) { + // Found a new position that doesn't overlap marker - move box to that position + infoBox.css("left", candidatePosition.x); + infoBox.css("top", candidatePosition.y); + } + } + } + if (highlighted.flight !== null && highlighted.flight !== "") { $('#highlighted_callsign').text(highlighted.flight); } else { @@ -1013,9 +1162,24 @@ function refreshHighlighted() { if (highlighted.icaotype !== null) { $('#higlighted_icaotype').text(highlighted.icaotype); } else { - $('#higlighted_icaotype').text(""); + $('#higlighted_icaotype').text("n/a"); } + if (highlighted.getDataSource() === "adsb_icao") { + $('#highlighted_source').text("ADS-B"); + } else if (highlighted.getDataSource() === "tisb_trackfile" || highlighted.getDataSource() === "tisb_icao" || highlighted.getDataSource() === "tisb_other") { + $('#highlighted_source').text("TIS-B"); + } else if (highlighted.getDataSource() === "mlat") { + $('#highlighted_source').text("MLAT"); + } else { + $('#highlighted_source').text("Other"); + } + + if (highlighted.registration !== null) { + $('#highlighted_registration').text(highlighted.registration); + } else { + $('#highlighted_registration').text("n/a"); + } $('#highlighted_speed').text(format_speed_long(highlighted.speed, DisplayUnits)); @@ -1213,7 +1377,6 @@ function sortBy(id,sc,se) { function selectPlaneByHex(hex,autofollow) { //console.log("select: " + hex); // If SelectedPlane has something in it, clear out the selected - removeHighlight(); if (SelectedAllPlanes) { deselectAllPlanes(); } @@ -1223,6 +1386,8 @@ function selectPlaneByHex(hex,autofollow) { Planes[SelectedPlane].clearLines(); Planes[SelectedPlane].updateMarker(); $(Planes[SelectedPlane].tr).removeClass("selected"); + // scroll the infoblock back to the top for the next plane to be selected + $('.infoblock-container').scrollTop(0); } // If we are clicking the same plane, we are deselecting it. @@ -1255,10 +1420,6 @@ function selectPlaneByHex(hex,autofollow) { } function highlightPlaneByHex(hex) { - // if we've selected a plane, don't show the highlighting box - if (SelectedPlane != null) { - return; - } if (hex != null) { HighlightedPlane = hex; @@ -1424,10 +1585,12 @@ function setSelectedInfoBlockVisibility() { if (planeSelected && mapIsVisible) { $('#selected_infoblock').show(); + $('#sidebar_canvas').css('margin-bottom', $('#selected_infoblock').height() + 'px'); } else { $('#selected_infoblock').hide(); - } + $('#sidebar_canvas').css('margin-bottom', 0); + } } // Reposition selected plane info box if it overlaps plane marker @@ -1446,21 +1609,8 @@ function adjustSelectedInfoBlockPosition() { // Get marker position var marker = selectedPlane.marker; var markerCoordinates = selectedPlane.marker.getGeometry().getCoordinates(); - var markerPosition = OLMap.getPixelFromCoordinate(markerCoordinates); - - // Get info box position and size - var infoBox = $('#selected_infoblock'); - var infoBoxPosition = infoBox.position(); - if (typeof infoBoxOriginalPosition.top === 'undefined') { - infoBoxOriginalPosition.top = infoBoxPosition.top; - infoBoxOriginalPosition.left = infoBoxPosition.left; - } else { - infoBox.css("left", infoBoxOriginalPosition.left); - infoBox.css("top", infoBoxOriginalPosition.top); - infoBoxPosition = infoBox.position(); - } - var infoBoxExtent = getExtent(infoBoxPosition.left, infoBoxPosition.top, infoBox.outerWidth(), infoBox.outerHeight()); - + var markerPosition = OLMap.getPixelFromCoordinate(markerCoordinates); + // Get map size var mapCanvas = $('#map_canvas'); var mapExtent = getExtent(0, 0, mapCanvas.width(), mapCanvas.height()); @@ -1684,7 +1834,7 @@ function getFlightAwareModeSLink(code, ident, linkText) { function getFlightAwarePhotoLink(registration) { if (registration !== null && registration !== "") { - return "See Aircraft Photos"; + return "See Photos"; } return ""; diff --git a/public_html/style.css b/public_html/style.css index e1af4db..e62ecf6 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -1,6 +1,7 @@ html, body { + -ms-overflow-style: -ms-autohiding-scrollbar; margin: 0; padding: 0; background-color: #ffffff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 10pt; overflow: auto; height: 100%; + font-size: 10pt; overflow: hidden; height: 100%; } #layout_container { @@ -9,15 +10,27 @@ html, body { } #selected_infoblock { - position: absolute; - left: 40px; - top: 60px; - min-width: 394px; - padding: 10px; + position: absolute; + bottom: 0; + margin: 0; background: #ffffff; - box-shadow: 4px 4px 10px #444444; - cursor: pointer; - z-index: 9999; + width: 100%; + height: 400px; +} +.infoblock-container { + overflow: scroll; + height: 100%; +} +#sidebar_canvas { + padding: 10px; + overflow: scroll; +} +#sidebar_container { + display: flex; + flex-direction: column; + width: 500px; + left: 0 !important; + height: 100%; } #map_container { @@ -85,15 +98,9 @@ html, body { background-size: cover; } -#sidebar_container { - display: flex; - width: 500px; - left: 0 !important; -} - #splitter { - cursor: col-resize; + cursor: ew-resize; display: block; position: absolute; top: 125px; @@ -106,10 +113,44 @@ html, body { background-position: 0px; background-color: transparent; border: none; - background-image: url("images/column-adjust.png"); + background-image: url("images/toggle-width@2x.png"); background-size: cover; } +#splitter-infoblock { + cursor: ns-resize; + display: inline-block; + position: absolute ; + top: 0px; + right: 0; + margin-left: auto; + width: 24px; + height: 4px; + background-size: 24px 25px; + background-repeat: no-repeat; + background-position: 0px; + border: none; + width: 100%; + border-bottom: #234c75; + background-color: #65819e; + border-bottom-width: 1px; + border-bottom-style: solid; +} +#close-button { + display: inline-block; + position: absolute; + top: 18px; + color: #00A0E2; + right: 30px; + margin-left: auto; + font-size: 75%; + text-decoration: underline; + cursor: pointer; + background: #fff; + padding: 3px; + border-radius: 2px; +} + .ol-zoom-in { background-image: url("images/zoom-in.png"); background-size: cover; @@ -134,11 +175,7 @@ html, body { left: 10px !important; } -#sidebar_canvas { - flex: 1 1 auto; - padding: 10px; - overflow: scroll; -} + div#SpecialSquawkWarning { position: absolute; bottom: 25px; right: 430px; border: 2px solid red; background-color: #FFFFA3; opacity: 0.75; filter:alpha(opacity=75); padding: 5px; @@ -257,22 +294,35 @@ select.error, textarea.error, input.error { padding-right: 20px; } -.infoHeading -{ +.infoHeading { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 18px; + font-size: 12px; + font-weight: bold; + line-height: 16px; color: #002F5D; - color: rgb(0, 47, 93); } -.infoData -{ +.infoHeading sub { + font-weight: normal; +} + +.infoData { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 18px; + font-size: 12px; + line-height: 16px; color: #000000; - color: rgb(0, 0, 0); +} + +.sectionTitle { + width: 100%; + text-transform: uppercase; + color: #fff; + background: #002F5D; + font-size: 14px; +} + +.section-title-content { + padding: 5px 20px; } .legend @@ -301,8 +351,7 @@ select.error, textarea.error, input.error { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; - text-indent: 16px - color: #000000; + text-indent: 16px; color: rgb(0, 0, 0); } @@ -316,24 +365,6 @@ select.error, textarea.error, input.error { text-decoration: underline; } -.infoHeading -{ - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 12px; - line-height: 16px; - color: #666666; - color: rgb(102, 102, 102); -} - -.infoData -{ - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 12px; - line-height: 16px; - color: #000000; - color: rgb(0, 0, 0); -} - #header { width: 100%; height: 60px; @@ -407,6 +438,10 @@ select.error, textarea.error, input.error { text-align: center; } +.lightblue-link, .lightblue-link a { + color: #00A0E2; +} + .buttonHeader { margin-top: 15px; } @@ -440,7 +475,7 @@ select.error, textarea.error, input.error { height: 36px; border-bottom: 1px solid #00A0E2; padding-left: 18px; - padding-top: 14px; + padding-top: 18px; } .highlightedInfo { @@ -471,12 +506,10 @@ select.error, textarea.error, input.error { .infoRowTitle { display: inline-block; - width: 50%; } .infoRowContent { display: inline-block; - width: 40%; } .infoRowFluid { @@ -487,6 +520,13 @@ select.error, textarea.error, input.error { padding-top: 10px; } +.infoRowLine { + width: 49%; + display: inline-block; + padding-top: 2px; + padding-bottom: 2px; +} + .removePadding { padding: 0; } @@ -518,22 +558,6 @@ select.error, textarea.error, input.error { background-color: #efefef; } -.fourColumnSection1 { - width: 20%; -} - -.fourColumnSection2 { - width: 20%; -} - -.fourColumnSection3 { - width: 20%; -} - -.fourColumnSection4 { - width: 20%; -} - #dump1090_infoblock { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } @@ -569,7 +593,6 @@ select.error, textarea.error, input.error { } .legendTitle { - /*margin-left: auto;*/ line-height: 19px; display: inline-block; padding-right: 20px; @@ -655,6 +678,45 @@ select.error, textarea.error, input.error { outline: none; } +.bottom-container { + width: 100%; + margin-top: 8px; + padding: 40px 0px; + text-align: center; + background-color: #eee; +} +#selected_flightaware_link a { + background-color: #00a0e2; + color: white; + text-decoration: none; + padding: 10px; + border-radius: 4px; + float: right; + margin-right: 25px; + margin-top: 10px; +} +.bottom-info-container { + padding-top: 10px; + padding-bottom: 10px; + text-align: center; + color: #002F5D; + line-height: 18px; +} +.bottom-info-container img { + vertical-align: middle; +} +.bottom-info-container .bottom-info-text { + vertical-align: middle; + display: inline; +} +.selected_airframe a { + color: #002F5D; +} + +.infoblock-container-small .infoRowFluid { + display: block; +} + /* Retina 2x images */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .settingsCloseBox { @@ -672,9 +734,6 @@ select.error, textarea.error, input.error { .ol-zoom-in { background-image: url("images/zoom-in@2x.png"); } - #splitter { - background-image: url("images/column-adjust@2x.png"); - } #toggle_sidebar_button.show_sidebar { background-image: url("images/table-icon@2x.png"); } @@ -703,9 +762,6 @@ select.error, textarea.error, input.error { .ol-zoom-in { background-image: url("images/zoom-in@3x.png"); } - #splitter { - background-image: url("images/column-adjust@3x.png"); - } #toggle_sidebar_button.show_sidebar { background-image: url("images/table-icon@3x.png"); }