re-align main buttons

This commit is contained in:
Jakob Ketterl 2020-03-16 22:48:42 +01:00
parent 1a1ad670ee
commit 8a03951713
3 changed files with 17 additions and 20 deletions

View File

@ -121,31 +121,27 @@
display:none; display:none;
} }
#openwebrx-main-buttons ul #openwebrx-main-buttons .button {
{ display: block;
margin:0;
padding: 0;
}
#openwebrx-main-buttons ul li
{
display: inline-block;
width: 55px; width: 55px;
cursor:pointer; cursor:pointer;
} }
#openwebrx-main-buttons .button img {
height: 38px;
}
#openwebrx-main-buttons a { #openwebrx-main-buttons a {
color: inherit; color: inherit;
text-decoration: inherit; text-decoration: inherit;
} }
#openwebrx-main-buttons li:hover #openwebrx-main-buttons .button:hover
{ {
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
} }
#openwebrx-main-buttons li:active #openwebrx-main-buttons .button:active
{ {
background-color: rgba(255, 255, 255, 0.55); background-color: rgba(255, 255, 255, 0.55);
} }
@ -153,6 +149,9 @@
#openwebrx-main-buttons #openwebrx-main-buttons
{ {
padding: 5px 0;
display: flex;
list-style: none;
float: right; float: right;
margin:0; margin:0;
color: white; color: white;

View File

@ -14,13 +14,11 @@
<a id="openwebrx-rx-details-arrow-down" class="openwebrx-photo-trigger"><img src="static/gfx/openwebrx-rx-details-arrow.png" /></a> <a id="openwebrx-rx-details-arrow-down" class="openwebrx-photo-trigger"><img src="static/gfx/openwebrx-rx-details-arrow.png" /></a>
</div> </div>
<section id="openwebrx-main-buttons"> <section id="openwebrx-main-buttons">
<ul> <div class="button" data-toggle-panel="openwebrx-panel-status"><img src="static/gfx/openwebrx-panel-status.png" /><br/>Status</div>
<li data-toggle-panel="openwebrx-panel-status"><img src="static/gfx/openwebrx-panel-status.png" /><br/>Status</li> <div class="button" data-toggle-panel="openwebrx-panel-log"><img src="static/gfx/openwebrx-panel-log.png" /><br/>Log</div>
<li data-toggle-panel="openwebrx-panel-log"><img src="static/gfx/openwebrx-panel-log.png" /><br/>Log</li> <div class="button" data-toggle-panel="openwebrx-panel-receiver"><img src="static/gfx/openwebrx-panel-receiver.png" /><br/>Receiver</div>
<li data-toggle-panel="openwebrx-panel-receiver"><img src="static/gfx/openwebrx-panel-receiver.png" /><br/>Receiver</li> <a class="button" href="map" target="_blank"><img src="static/gfx/openwebrx-panel-map.png" /><br/>Map</a>
<li><a href="map" target="_blank"><img src="static/gfx/openwebrx-panel-map.png" /><br/>Map</a></li> <a class="button" href="admin" target="_blank"><img src="static/gfx/openwebrx-panel-settings.png" /><br/>Settings</a>
<li><a href="admin" target="_blank"><img src="static/gfx/openwebrx-panel-settings.png" /><br/>Settings</a></li>
</ul>
</section> </section>
</div> </div>
<div id="webrx-rx-photo-title"></div> <div id="webrx-rx-photo-title"></div>

View File

@ -1770,7 +1770,7 @@ function openwebrx_resize() {
} }
function init_header() { function init_header() {
$('#openwebrx-main-buttons').find('li[data-toggle-panel]').click(function () { $('#openwebrx-main-buttons').find('[data-toggle-panel]').click(function () {
toggle_panel($(this).data('toggle-panel')); toggle_panel($(this).data('toggle-panel'));
}); });
} }