jketterl/openwebrx
1
0
Fork 0
mirror of https://github.com/jketterl/openwebrx.git synced 2026-01-20 23:50:17 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

add arrow to toggle legend pane

Browse source
This commit is contained in:
Stanislav Lechev [0xAF] 2023-09-19 03:48:37 +03:00
parent 900fbafaa4
commit dc390aa8b7
4 changed files with 35 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
htdocs/css/map.css
View file

@ -30,6 +30,24 @@ ul {
user-select: none;
}
.openwebrx-arrow-up {
margin-top: 5px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}
.openwebrx-arrow-down {
margin-top: 5px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
}
/* show it as soon as google maps has moved it to its container */
.openwebrx-map .openwebrx-map-legend {
display: block;

13
htdocs/lib/MapManager.js
View file

@ -28,16 +28,21 @@ function MapManager() {
}, 1000);
// When stuff loads...
$(function() {
$(function () {
// Create clock display
self.clock = new Clock($('#openwebrx-clock-utc'));
// Clicking clock display toggles legend box on/off
$('#openwebrx-clock-utc').css('cursor', 'pointer').on('click', function() {
$('#openwebrx-legend-toggle').css({
'cursor': 'pointer',
'display': 'flex',
'justify-content': 'space-between'
}).on('click', function () {
var el = document.getElementById('openwebrx-map-selectors');
if (el) {
el.style.display = el.style.display === 'none'?
'block' : 'none';
$(this).find('i').removeClass()
.addClass('openwebrx-arrow-' + (el.style.display === 'none' ? 'down' : 'up'));
el.style.display = el.style.display === 'none' ? 'block' : 'none';
}
});

5
htdocs/map-google.html
View file

@ -27,7 +27,10 @@
<ul class="features">
</ul>
</div>
<h3 id="openwebrx-clock-utc" style="margin: 20px 0 0 0;">00:00 UTC</h3>
<div id='openwebrx-legend-toggle'>
<i class="openwebrx-arrow-down"></i>
<h3 id="openwebrx-clock-utc" style="margin: 0;">00:00 UTC</h3>
</div>
</div>
</body>
</html>

5
htdocs/map-leaflet.html
View file

@ -30,7 +30,10 @@
<ul class="features">
</ul>
</div>
<h3 id="openwebrx-clock-utc" style="margin: 20px 0 0 0;">00:00 UTC</h3>
<div id='openwebrx-legend-toggle'>
<i class="openwebrx-arrow-down"></i>
<h3 id="openwebrx-clock-utc" style="margin: 0;">00:00 UTC</h3>
</div>
</div>
</body>
</html>