AFG/dump1090
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Change style of settings box and add close icon

Browse source
This commit is contained in:
James Wilson 2017-01-30 14:23:23 -06:00
parent 973182c75e
commit 773668f510
6 changed files with 35 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public_html/images/close-settings.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 482 B

BIN
public_html/images/close-settings@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 874 B

BIN
public_html/images/close-settings@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

15
public_html/index.html
View file

@ -200,15 +200,18 @@
</div> </div>
<div id="settings_infoblock"> <div id="settings_infoblock">
<div id="settings_close" class="settingsCloseBox"></div>
<div class="settingsColumn"> <div class="settingsColumn">
<div class="infoBlockTitleText">Overlay Toggles</div> <div class="settingsOptionContainer">
<div class="infoBlockTitleText">Overlay Toggles</div>
</div>
<div class="settingsOptionContainer"> <div class="settingsOptionContainer">
<div class="settingsCheckbox" id="nexrad_checkbox"></div> <div class="settingsCheckbox" id="nexrad_checkbox"></div>
<div class="settingsText">NEXRAD Weather</div> <div class="settingsText">NEXRAD Weather</div>
</div> </div>
<div class="settingsOptionContainer"> <div class="settingsOptionContainer">
<div class="settingsCheckbox" id="sitepos_checkbox"></div> <div class="settingsCheckbox" id="sitepos_checkbox"></div>
<div class="settingsText">Site Position &amp; Range Rings</div> <div class="settingsText">Site Position and Range Rings</div>
</div> </div>
<div class="settingsOptionContainer"> <div class="settingsOptionContainer">
<div class="settingsCheckbox" id="actrail_checkbox"></div> <div class="settingsCheckbox" id="actrail_checkbox"></div>
@ -220,14 +223,16 @@
</div> </div>
</div> </div>
<div class="settingsColumn"> <div class="settingsColumn">
<div class="infoBlockTitleText">View Toggles</div> <div class="settingsOptionContainer">
<div class="infoBlockTitleText">View Toggles</div>
</div>
<div class="settingsOptionContainer"> <div class="settingsOptionContainer">
<div class="settingsCheckbox" id="blockedmlat_filter"></div> <div class="settingsCheckbox" id="blockedmlat_filter"></div>
<div class="settingsText">Blocked MLAT Flights</div> <div class="settingsText">Show Anonymous MLAT Tracks</div>
</div> </div>
<div class="settingsOptionContainer"> <div class="settingsOptionContainer">
<div class="settingsCheckbox" id="groundvehicle_filter"></div> <div class="settingsCheckbox" id="groundvehicle_filter"></div>
<div class="settingsText">Ground Vehicles</div> <div class="settingsText">Show Ground Vehicles and Other Non-Aircraft Positions</div>
</div> </div>
<div class="settingsOptionContainer"> <div class="settingsOptionContainer">
<div class="settingsCheckbox" id="selectall_checkbox"></div> <div class="settingsCheckbox" id="selectall_checkbox"></div>

4
public_html/script.js
View file

@ -240,6 +240,10 @@ function initialize() {
$('#settings_infoblock').toggle(); $('#settings_infoblock').toggle();
}); });
$('#settings_close').on('click', function() {
$('#settings_infoblock').hide();
});
$('#groundvehicle_filter').on('click', function() { $('#groundvehicle_filter').on('click', function() {
filterGroundVehicles(true); filterGroundVehicles(true);
refreshSelected(); refreshSelected();

25
public_html/style.css
View file

@ -569,10 +569,10 @@ select.error, textarea.error, input.error {
#settings_infoblock { #settings_infoblock {
position: absolute; position: absolute;
right: 40px; right: 1px;
top: 60px; top: 60px;
width: 390px; width: 398px;
min-height: 80px; min-height: 180px;
background: #ffffff; background: #ffffff;
box-shadow: 4px 4px 10px #444444; box-shadow: 4px 4px 10px #444444;
padding: 20px; padding: 20px;
@ -582,10 +582,11 @@ select.error, textarea.error, input.error {
.settingsColumn { .settingsColumn {
display: table-cell; display: table-cell;
width: 199px;
} }
.settingsOptionContainer { .settingsOptionContainer {
display: table; display: table;
padding-bottom: 10px;
} }
.settingsCheckbox { .settingsCheckbox {
@ -602,6 +603,16 @@ select.error, textarea.error, input.error {
background-image: url('images/box-checked.png') !important; background-image: url('images/box-checked.png') !important;
} }
.settingsCloseBox {
position: absolute;
right: 8px;
top: 8px;
background-image: url('images/close-settings.png');
width: 20px;
height: 20px;
cursor: pointer;
}
.settingsText { .settingsText {
line-height: 20px; line-height: 20px;
display: table-cell; display: table-cell;
@ -632,6 +643,9 @@ select.error, textarea.error, input.error {
/* Retina 2x images */ /* Retina 2x images */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.settingsCloseBox {
background-image: url('images/close-settings@2x.png');
}
.settingsCheckboxChecked { .settingsCheckboxChecked {
background-image: url('images/box-checked@2x.png') !important; background-image: url('images/box-checked@2x.png') !important;
} }
@ -660,6 +674,9 @@ select.error, textarea.error, input.error {
/* Retina 3x images */ /* Retina 3x images */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 192dpi) { @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 192dpi) {
.settingsCloseBox {
background-image: url('images/close-settings@3x.png');
}
.settingsCheckboxChecked { .settingsCheckboxChecked {
background-image: url('images/box-checked@3x.png') !important; background-image: url('images/box-checked@3x.png') !important;
} }