Redesign infoblock
This commit is contained in:
James Wilson
parent
cf6fcdce6a
commit
e5fcd4035f
|
|
@ -63,63 +63,118 @@
|
||||||
<div id="layout_container">
|
<div id="layout_container">
|
||||||
|
|
||||||
<div id="selected_infoblock" class="hidden">
|
<div id="selected_infoblock" class="hidden">
|
||||||
<table style="width: 100%">
|
<div class="highlightedTitle">
|
||||||
<tr class="infoblock_heading">
|
<span id="selected_flightaware_link" class="link rightLink"></span>
|
||||||
<td colspan="2">
|
<span class="identLarge"><span id="selected_callsign">n/a</span></span>
|
||||||
<b>
|
<span class="identSmall"><span id="selected_icao">n/a</span></span>
|
||||||
<span id="selected_callsign" onclick="toggleFollowSelected();" class="pointer">n/a</span>
|
</div>
|
||||||
</b>
|
<div class="highlightedInfo">
|
||||||
<span id="selected_follow" onclick="toggleFollowSelected();" class="pointer">⇒</span>
|
<div class="infoBlockTopSection">
|
||||||
|
<div class="infoRow removePadding">
|
||||||
<span id="selected_flag">
|
<div class="infoHeading infoRowFluid">Registration: </div>
|
||||||
<img style="width: 20px; height=12px" src="about:blank" alt="Flag">
|
<div class="infoData infoRowFluid"><span id="selected_registration">n/a</span></div>
|
||||||
</span>
|
</div>
|
||||||
|
<div class="infoRow removePadding">
|
||||||
<a href="http://www.airframes.org/" onclick="document.getElementById('horrible_hack').submit.call(document.getElementById('airframes_post')); return false;">
|
<div class="infoHeading infoRowFluid">Country of registration: </div>
|
||||||
<span id="selected_icao"></span>
|
<div class="infoData infoRowFluid"><span id="selected_country">n/a</span></div>
|
||||||
</a>
|
</div>
|
||||||
<span id="selected_registration"></span>
|
</div>
|
||||||
|
<div class="infoBlock45pxSection lightGreyBackground">
|
||||||
|
<div class="infoHeading infoRowFluid fourColumnSection1">
|
||||||
|
Aircraft Type:
|
||||||
|
</div>
|
||||||
|
<div class="infoData infoRowFluid fourColumnSection2">
|
||||||
<span id="selected_icaotype"></span>
|
<span id="selected_icaotype"></span>
|
||||||
<span id="selected_emergency"></span>
|
</div>
|
||||||
<span id="selected_flightaware_link"></span>
|
<div class="infoHeading infoRowFluid fourColumnSection3">
|
||||||
</td>
|
Source:
|
||||||
</tr>
|
</div>
|
||||||
|
<div class="infoData infoRowFluid fourColumnSection4">
|
||||||
|
<span id="selected_source"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="infoBlockSection">
|
||||||
|
<div>
|
||||||
|
<div class="infoHeading infoRowFluid fourColumnSection1">
|
||||||
|
Squawk:
|
||||||
|
</div>
|
||||||
|
<div class="infoData infoRowFluid fourColumnSection2">
|
||||||
|
<span id="selected_squawk"></span>
|
||||||
|
</div>
|
||||||
|
<div class="infoHeading infoRowFluid fourColumnSection3">
|
||||||
|
Speed:
|
||||||
|
</div>
|
||||||
|
<div class="infoData infoRowFluid fourColumnSection4">
|
||||||
|
<span id="selected_speed">n/a</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="infoHeading infoRowFluid fourColumnSection1">
|
||||||
|
Altitude:
|
||||||
|
</div>
|
||||||
|
<div class="infoData infoRowFluid fourColumnSection2">
|
||||||
|
<span id="selected_altitude"></span>
|
||||||
|
</div>
|
||||||
|
<div class="infoHeading infoRowFluid fourColumnSection3">
|
||||||
|
Distance:
|
||||||
|
</div>
|
||||||
|
<div class="infoData infoRowFluid fourColumnSection4">
|
||||||
|
<span id="selected_sitedist">n/a</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="infoBlockSection lightGreyBackground">
|
||||||
|
<div>
|
||||||
|
<div class="infoHeading infoRowFluid fourColumnSection1">
|
||||||
|
Track:
|
||||||
|
</div>
|
||||||
|
<div class="infoData infoRowFluid fourColumnSection2">
|
||||||
|
<span id="selected_track">n/a</span>
|
||||||
|
</div>
|
||||||
|
<div class="infoHeading infoRowFluid fourColumnSection3">
|
||||||
|
Position:
|
||||||
|
</div>
|
||||||
|
<div class="infoData infoRowFluid fourColumnSection4">
|
||||||
|
<span id="selected_position">n/a</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="infoHeading infoRowFluid fourColumnSection1">
|
||||||
|
Vertical Rate:
|
||||||
|
</div>
|
||||||
|
<div class="infoData infoRowFluid fourColumnSection2">
|
||||||
|
<span id="selected_vertical_rate">n/a</span>
|
||||||
|
</div>
|
||||||
|
<div class="infoHeading infoRowFluid fourColumnSection3">
|
||||||
|
Last Seen:
|
||||||
|
</div>
|
||||||
|
<div class="infoData infoRowFluid fourColumnSection4">
|
||||||
|
<span id="selected_seen">n/a</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="infoBlockSection">
|
||||||
|
<div>
|
||||||
|
<div class="infoHeading infoRowFluid fourColumnSection1">
|
||||||
|
Messages:
|
||||||
|
</div>
|
||||||
|
<div class="infoData infoRowFluid fourColumnSection2">
|
||||||
|
<span id="selected_message_count">n/a</span>
|
||||||
|
</div>
|
||||||
|
<div class="infoHeading infoRowFluid fourColumnSection3">
|
||||||
|
RSSI:
|
||||||
|
</div>
|
||||||
|
<div class="infoData infoRowFluid fourColumnSection4">
|
||||||
|
<span id="selected_rssi">n/a</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="http://www.airframes.org/" onclick="document.getElementById('horrible_hack').submit.call(document.getElementById('airframes_post')); return false;" class="link rightLink">
|
||||||
|
AirFrames.org Link
|
||||||
|
</a>
|
||||||
|
<span id="selected_photo_link" class="link"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<tr id="infoblock_country" class="infoblock_body">
|
|
||||||
<td colspan="2">Country of registration: <span id="selected_country">n/a</span></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr class="infoblock_body">
|
|
||||||
<td style="width: 55%">Altitude: <span id="selected_altitude"></span></td>
|
|
||||||
<td style="width: 45%">Squawk: <span id="selected_squawk"></span></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr class="infoblock_body">
|
|
||||||
<td>Speed: <span id="selected_speed">n/a</span></td>
|
|
||||||
<td>RSSI: <span id="selected_rssi">n/a</span></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr class="infoblock_body">
|
|
||||||
<td>Vertical rate: <span id="selected_vertical_rate">n/a</span></td>
|
|
||||||
<td>Messages: <span id="selected_message_count">n/a</span></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr class="infoblock_body">
|
|
||||||
<td>Track: <span id="selected_track">n/a</span></td>
|
|
||||||
<td>Last seen: <span id="selected_seen">n/a</span></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr class="infoblock_body">
|
|
||||||
<td colspan="2">Position: <span id="selected_position">n/a</span></td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr class="infoblock_body">
|
|
||||||
<td colspan="2">Distance from Site: <span id="selected_sitedist">n/a</span></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="infoblock_body">
|
|
||||||
<td colspan="2"><span id="selected_photo_link"></span></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div> <!-- selected_infoblock -->
|
</div> <!-- selected_infoblock -->
|
||||||
|
|
||||||
<div id="highlighted_infoblock">
|
<div id="highlighted_infoblock">
|
||||||
|
|
|
||||||
|
|
@ -801,7 +801,7 @@ function refreshSelected() {
|
||||||
} else {
|
} else {
|
||||||
$('#selected_callsign').text('n/a');
|
$('#selected_callsign').text('n/a');
|
||||||
}
|
}
|
||||||
$('#selected_flightaware_link').html(getFlightAwareModeSLink(selected.icao, selected.flight, "[FlightAware]"));
|
$('#selected_flightaware_link').html(getFlightAwareModeSLink(selected.icao, selected.flight, "FlightAware.com Link"));
|
||||||
|
|
||||||
if (selected.registration !== null) {
|
if (selected.registration !== null) {
|
||||||
$('#selected_registration').text(selected.registration);
|
$('#selected_registration').text(selected.registration);
|
||||||
|
|
@ -815,13 +815,14 @@ function refreshSelected() {
|
||||||
$('#selected_icaotype').text("");
|
$('#selected_icaotype').text("");
|
||||||
}
|
}
|
||||||
|
|
||||||
var emerg = document.getElementById('selected_emergency');
|
// Not using this logic for the redesigned info panel at the time, but leaving it in if/when adding it back
|
||||||
if (selected.squawk in SpecialSquawks) {
|
// var emerg = document.getElementById('selected_emergency');
|
||||||
emerg.className = SpecialSquawks[selected.squawk].cssClass;
|
// if (selected.squawk in SpecialSquawks) {
|
||||||
emerg.textContent = NBSP + 'Squawking: ' + SpecialSquawks[selected.squawk].text + NBSP ;
|
// emerg.className = SpecialSquawks[selected.squawk].cssClass;
|
||||||
} else {
|
// emerg.textContent = NBSP + 'Squawking: ' + SpecialSquawks[selected.squawk].text + NBSP ;
|
||||||
emerg.className = 'hidden';
|
// } else {
|
||||||
}
|
// 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));
|
||||||
|
|
||||||
|
|
@ -856,12 +857,13 @@ function refreshSelected() {
|
||||||
$('#selected_position').text('n/a');
|
$('#selected_position').text('n/a');
|
||||||
$('#selected_follow').addClass('hidden');
|
$('#selected_follow').addClass('hidden');
|
||||||
} else {
|
} else {
|
||||||
var mlat_bit = (selected.position_from_mlat ? "MLAT: " : "");
|
|
||||||
if (selected.seen_pos > 1) {
|
if (selected.seen_pos > 1) {
|
||||||
$('#selected_position').text(mlat_bit + format_latlng(selected.position) + " (" + selected.seen_pos.toFixed(1) + "s)");
|
$('#selected_position').text(format_latlng(selected.position));
|
||||||
} else {
|
} else {
|
||||||
$('#selected_position').text(mlat_bit + format_latlng(selected.position));
|
$('#selected_position').text(format_latlng(selected.position));
|
||||||
}
|
}
|
||||||
|
$('#selected_source').text( (selected.position_from_mlat ? "MLAT" : "ADS-B"));
|
||||||
$('#selected_follow').removeClass('hidden');
|
$('#selected_follow').removeClass('hidden');
|
||||||
if (FollowSelected) {
|
if (FollowSelected) {
|
||||||
$('#selected_follow').css('font-weight', 'bold');
|
$('#selected_follow').css('font-weight', 'bold');
|
||||||
|
|
@ -1476,7 +1478,7 @@ function getFlightAwareModeSLink(code, ident, linkText) {
|
||||||
|
|
||||||
function getFlightAwarePhotoLink(registration) {
|
function getFlightAwarePhotoLink(registration) {
|
||||||
if (registration !== null && registration !== "") {
|
if (registration !== null && registration !== "") {
|
||||||
return "<a target=\"_blank\" href=\"https://flightaware.com/photos/aircraft/" + registration.trim() + "\">See Photos</a>";
|
return "<a target=\"_blank\" href=\"https://flightaware.com/photos/aircraft/" + registration.trim() + "\">See Aircraft Photos</a>";
|
||||||
}
|
}
|
||||||
|
|
||||||
return "";
|
return "";
|
||||||
|
|
|
||||||
|
|
@ -10,10 +10,10 @@ html, body {
|
||||||
|
|
||||||
#selected_infoblock {
|
#selected_infoblock {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 20px;
|
left: 40px;
|
||||||
top: 20px;
|
top: 60px;
|
||||||
min-width: 360px;
|
min-width: 394px;
|
||||||
padding: 20px;
|
padding: 10px;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
box-shadow: 4px 4px 10px #444444;
|
box-shadow: 4px 4px 10px #444444;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -267,10 +267,6 @@ div#loader { z-index: 99; position: absolute; left: 0; top: 0; bottom: 0; right:
|
||||||
.infoblock_heading a { text-decoration: none; color: blue; font-size: x-small;}
|
.infoblock_heading a { text-decoration: none; color: blue; font-size: x-small;}
|
||||||
.infoblock_body { font-size: small; }
|
.infoblock_body { font-size: small; }
|
||||||
|
|
||||||
#selected_icao { font-size: x-small; }
|
|
||||||
#selected_registration { font-size: x-small; }
|
|
||||||
#selected_icaotype { font-size: x-small; }
|
|
||||||
|
|
||||||
.dim { opacity: 0.3; filter:alpha(opacity=30); /* For IE8 and earlier */ }
|
.dim { opacity: 0.3; filter:alpha(opacity=30); /* For IE8 and earlier */ }
|
||||||
|
|
||||||
.pointer { cursor: pointer; }
|
.pointer { cursor: pointer; }
|
||||||
|
|
@ -527,6 +523,57 @@ select.error, textarea.error, input.error {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.infoRowFluid {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
.infoRow {
|
.infoRow {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.removePadding {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightLink {
|
||||||
|
float: right;
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoBlockTopSection {
|
||||||
|
padding-top: 14px;
|
||||||
|
padding-bottom: 14px;
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoBlock45pxSection {
|
||||||
|
height: 45px;
|
||||||
|
line-height: 45px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoBlockSection {
|
||||||
|
padding-top: 14px;
|
||||||
|
padding-bottom: 14px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightGreyBackground {
|
||||||
|
background-color: #efefef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fourColumnSection1 {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fourColumnSection2 {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fourColumnSection3 {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fourColumnSection4 {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue