From 8a039517131ea45a2bb561816686a7f18d42aaa4 Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Mon, 16 Mar 2020 22:48:42 +0100
Subject: [PATCH] re-align main buttons

---
 htdocs/css/openwebrx-header.css    | 23 +++++++++++------------
 htdocs/include/header.include.html | 12 +++++-------
 htdocs/openwebrx.js                |  2 +-
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/htdocs/css/openwebrx-header.css b/htdocs/css/openwebrx-header.css
index 30b931a..884a049 100644
--- a/htdocs/css/openwebrx-header.css
+++ b/htdocs/css/openwebrx-header.css
@@ -121,31 +121,27 @@
     display:none;
 }
 
-#openwebrx-main-buttons ul
-{
-    margin:0;
-    padding: 0;
-}
-
-
-#openwebrx-main-buttons ul li
-{
-    display: inline-block;
+#openwebrx-main-buttons .button {
+    display: block;
     width: 55px;
     cursor:pointer;
 }
 
+#openwebrx-main-buttons .button img {
+    height: 38px;
+}
+
 #openwebrx-main-buttons a {
     color: inherit;
     text-decoration: inherit;
 }
 
-#openwebrx-main-buttons li:hover
+#openwebrx-main-buttons .button:hover
 {
     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);
 }
@@ -153,6 +149,9 @@
 
 #openwebrx-main-buttons
 {
+    padding: 5px 0;
+    display: flex;
+    list-style: none;
     float: right;
     margin:0;
     color: white;
diff --git a/htdocs/include/header.include.html b/htdocs/include/header.include.html
index 13591cc..3a4fb11 100644
--- a/htdocs/include/header.include.html
+++ b/htdocs/include/header.include.html
@@ -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>
             </div>
             <section id="openwebrx-main-buttons">
-                <ul>
-                    <li data-toggle-panel="openwebrx-panel-status"><img src="static/gfx/openwebrx-panel-status.png" /><br/>Status</li>
-                    <li data-toggle-panel="openwebrx-panel-log"><img  src="static/gfx/openwebrx-panel-log.png" /><br/>Log</li>
-                    <li data-toggle-panel="openwebrx-panel-receiver"><img src="static/gfx/openwebrx-panel-receiver.png" /><br/>Receiver</li>
-                    <li><a href="map" target="_blank"><img src="static/gfx/openwebrx-panel-map.png" /><br/>Map</a></li>
-                    <li><a href="admin" target="_blank"><img src="static/gfx/openwebrx-panel-settings.png" /><br/>Settings</a></li>
-                </ul>
+                <div class="button" data-toggle-panel="openwebrx-panel-status"><img src="static/gfx/openwebrx-panel-status.png" /><br/>Status</div>
+                <div class="button" data-toggle-panel="openwebrx-panel-log"><img  src="static/gfx/openwebrx-panel-log.png" /><br/>Log</div>
+                <div class="button" data-toggle-panel="openwebrx-panel-receiver"><img src="static/gfx/openwebrx-panel-receiver.png" /><br/>Receiver</div>
+                <a class="button" href="map" target="_blank"><img src="static/gfx/openwebrx-panel-map.png" /><br/>Map</a>
+                <a class="button" href="admin" target="_blank"><img src="static/gfx/openwebrx-panel-settings.png" /><br/>Settings</a>
             </section>
         </div>
         <div id="webrx-rx-photo-title"></div>
diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js
index 384776d..be81751 100644
--- a/htdocs/openwebrx.js
+++ b/htdocs/openwebrx.js
@@ -1770,7 +1770,7 @@ function openwebrx_resize() {
 }
 
 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'));
     });
 }