Redesign infoblock
This commit is contained in:
James Wilson
parent
cf6fcdce6a
commit
e5fcd4035f
|
|
@ -63,63 +63,118 @@
|
|||
<div id="layout_container">
|
||||
|
||||
<div id="selected_infoblock" class="hidden">
|
||||
<table style="width: 100%">
|
||||
<tr class="infoblock_heading">
|
||||
<td colspan="2">
|
||||
<b>
|
||||
<span id="selected_callsign" onclick="toggleFollowSelected();" class="pointer">n/a</span>
|
||||
</b>
|
||||
<span id="selected_follow" onclick="toggleFollowSelected();" class="pointer">⇒</span>
|
||||
|
||||
<span id="selected_flag">
|
||||
<img style="width: 20px; height=12px" src="about:blank" alt="Flag">
|
||||
</span>
|
||||
|
||||
<a href="http://www.airframes.org/" onclick="document.getElementById('horrible_hack').submit.call(document.getElementById('airframes_post')); return false;">
|
||||
<span id="selected_icao"></span>
|
||||
</a>
|
||||
<span id="selected_registration"></span>
|
||||
<div class="highlightedTitle">
|
||||
<span id="selected_flightaware_link" class="link rightLink"></span>
|
||||
<span class="identLarge"><span id="selected_callsign">n/a</span></span>
|
||||
<span class="identSmall"><span id="selected_icao">n/a</span></span>
|
||||
</div>
|
||||
<div class="highlightedInfo">
|
||||
<div class="infoBlockTopSection">
|
||||
<div class="infoRow removePadding">
|
||||
<div class="infoHeading infoRowFluid">Registration: </div>
|
||||
<div class="infoData infoRowFluid"><span id="selected_registration">n/a</span></div>
|
||||
</div>
|
||||
<div class="infoRow removePadding">
|
||||
<div class="infoHeading infoRowFluid">Country of registration: </div>
|
||||
<div class="infoData infoRowFluid"><span id="selected_country">n/a</span></div>
|
||||
</div>
|
||||
</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_emergency"></span>
|
||||
<span id="selected_flightaware_link"></span>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
<div class="infoHeading infoRowFluid fourColumnSection3">
|
||||
Source:
|
||||
</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 id="highlighted_infoblock">
|
||||
|
|
|
|||
|
|
@ -801,7 +801,7 @@ function refreshSelected() {
|
|||
} else {
|
||||
$('#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) {
|
||||
$('#selected_registration').text(selected.registration);
|
||||
|
|
@ -815,13 +815,14 @@ function refreshSelected() {
|
|||
$('#selected_icaotype').text("");
|
||||
}
|
||||
|
||||
var emerg = document.getElementById('selected_emergency');
|
||||
if (selected.squawk in SpecialSquawks) {
|
||||
emerg.className = SpecialSquawks[selected.squawk].cssClass;
|
||||
emerg.textContent = NBSP + 'Squawking: ' + SpecialSquawks[selected.squawk].text + NBSP ;
|
||||
} else {
|
||||
emerg.className = 'hidden';
|
||||
}
|
||||
// Not using this logic for the redesigned info panel at the time, but leaving it in if/when adding it back
|
||||
// var emerg = document.getElementById('selected_emergency');
|
||||
// if (selected.squawk in SpecialSquawks) {
|
||||
// emerg.className = SpecialSquawks[selected.squawk].cssClass;
|
||||
// emerg.textContent = NBSP + 'Squawking: ' + SpecialSquawks[selected.squawk].text + NBSP ;
|
||||
// } else {
|
||||
// emerg.className = 'hidden';
|
||||
// }
|
||||
|
||||
$("#selected_altitude").text(format_altitude_long(selected.altitude, selected.vert_rate, DisplayUnits));
|
||||
|
||||
|
|
@ -856,12 +857,13 @@ function refreshSelected() {
|
|||
$('#selected_position').text('n/a');
|
||||
$('#selected_follow').addClass('hidden');
|
||||
} else {
|
||||
var mlat_bit = (selected.position_from_mlat ? "MLAT: " : "");
|
||||
|
||||
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 {
|
||||
$('#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');
|
||||
if (FollowSelected) {
|
||||
$('#selected_follow').css('font-weight', 'bold');
|
||||
|
|
@ -1476,7 +1478,7 @@ function getFlightAwareModeSLink(code, ident, linkText) {
|
|||
|
||||
function getFlightAwarePhotoLink(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 "";
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ html, body {
|
|||
|
||||
#selected_infoblock {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
min-width: 360px;
|
||||
padding: 20px;
|
||||
left: 40px;
|
||||
top: 60px;
|
||||
min-width: 394px;
|
||||
padding: 10px;
|
||||
background: #ffffff;
|
||||
box-shadow: 4px 4px 10px #444444;
|
||||
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_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 */ }
|
||||
|
||||
.pointer { cursor: pointer; }
|
||||
|
|
@ -527,6 +523,57 @@ select.error, textarea.error, input.error {
|
|||
width: 40%;
|
||||
}
|
||||
|
||||
.infoRowFluid {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.infoRow {
|
||||
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