From fcfc0691fac56e691569b7fbb50f510d2400a492 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marek=20Farka=C5=A1?= <ardoniceksvk@gmail.com>
Date: Sun, 16 Feb 2025 16:17:07 +0100
Subject: [PATCH] description fix

---
 web/css/breadcrumbs.css |   8 +--
 web/css/panels.css      |   1 +
 web/index.ejs           | 136 ++++++++++++++++++++--------------------
 web/js/main.js          |   2 +-
 4 files changed, 74 insertions(+), 73 deletions(-)

diff --git a/web/css/breadcrumbs.css b/web/css/breadcrumbs.css
index ec80b74..549fbbc 100644
--- a/web/css/breadcrumbs.css
+++ b/web/css/breadcrumbs.css
@@ -77,6 +77,7 @@ label {
 .canvas-container {
     width: 100%;
     height: 175px;
+    overflow: hidden;
 }
 
 #data-ant {
@@ -127,15 +128,14 @@ table .form-group {
 .hidden-panel {
     display: none; 
     position: absolute;
-    left: 0;
-    top: 100%;
+    left: 50%;
+    transform:translateX(-50%);
     width: 100%;
     max-width: 1160px;
     background: var(--color-1-transparent);
-    color: white;
+    backdrop-filter: blur(5px);
     text-align: left;
     padding: 20px;
-    backdrop-filter: blur(5px);
     z-index: 10;
     border-radius: 0 0 15px 15px;
 }
diff --git a/web/css/panels.css b/web/css/panels.css
index 177e5a4..153af52 100644
--- a/web/css/panels.css
+++ b/web/css/panels.css
@@ -101,5 +101,6 @@
     }
     #dashboard-panel-description {
         backdrop-filter: blur(25px) !important;
+        width: 90%;
     }
 }
\ No newline at end of file
diff --git a/web/index.ejs b/web/index.ejs
index dfa84ff..59ae43b 100644
--- a/web/index.ejs
+++ b/web/index.ejs
@@ -67,81 +67,81 @@
                 <% } %>
                 <button id="settings" aria-label="Settings" class="hide-phone"><i class="fa-solid fa-gear"></i></button>
             </div>
-            <div id="dashboard-panel-description" class="hidden-panel">
+        </div>
+    </div>
+    <div id="dashboard-panel-description" class="hidden-panel">
                 
-                <div class="flex-container">
-                    <div class="tuner-desc">
-                        <%- tunerDesc %>
-                        <% if(tuningLimit && tuningLimit == true){ %>
-                            <br><span class="text-small">Limit: <span class="color-4"><%= tuningLowerLimit %> MHz - <%= tuningUpperLimit %> MHz</span></span><br>
-                        <% } %>
-                    </div>
-
-                    <div class="flex-phone" style="margin-left: auto;flex-direction: row-reverse;justify-content: space-around;min-width: 200px;">
-                        <div class="flex-container flex-phone" style="text-align: right;justify-content: right;align-items: center; height: 64px;">
-                            <div>
-                                <span class="">Device</span><br>
-                                <span class="text-small color-4">
-                                    <% if (device == 'tef') { %>TEF668x<% } %>
-                                    <% if (device == 'xdr') { %>Sony XDR<% } %>
-                                    <% if (device == 'sdr') { %>SDR<% } %>
-                                </span>
-                            </div>
-                            <div class="color-3 m-10 text-medium">
-                                <i class="fa-solid fa-fw fa-radio"></i>
-                            </div>
-                        </div>
-
-                        <div class="flex-container flex-phone" style="text-align: right;justify-content: right;align-items: center; height: 64px;">
-                            <div>
-                                <span class="">Server time</span><br>
-                                <span class="text-small color-4" id="server-time"></span>
-                            </div>
-                            <div class="color-3 m-10 text-medium">
-                                <i class="fa-solid fa-fw fa-stopwatch"></i>
-                            </div>
-                        </div>
-
-                    </div>
-
-                    <div style="width: 1px;background: var(--color-2);" class="m-10 hide-phone"></div>
+        <div class="flex-container">
+            <div class="tuner-desc">
+                <%- tunerDesc %>
+                <% if(tuningLimit && tuningLimit == true){ %>
+                    <br><span class="text-small">Limit: <span class="color-4"><%= tuningLowerLimit %> MHz - <%= tuningUpperLimit %> MHz</span></span><br>
+                <% } %>
+            </div>
 
+            <div class="flex-phone" style="margin-left: auto;flex-direction: row-reverse;justify-content: space-around;min-width: 200px;">
+                <div class="flex-container flex-phone" style="text-align: right;justify-content: right;align-items: center; height: 64px;">
                     <div>
-                        <div style="height: 64px;" class="flex-center flex-phone">
-                            <button class="no-bg color-4 hover-brighten" id="preset1" style="padding: 6px; width: 64px; min-width: 64px;">
-                                <i class="fa-solid fa-wave-square fa-lg top-10"></i><br>
-                                <span style="font-size: 10px; color: var(--color-text);" id="preset1-text"></span>
-                            </button>
-    
-                            <button class="no-bg color-4 hover-brighten" id="preset2" style="padding: 6px; width: 64px; min-width: 64px;">
-                                <i class="fa-solid fa-wave-square fa-lg top-10"></i><br>
-                                <span style="font-size: 10px; color: var(--color-text);" id="preset2-text"></span>
-                            </button>
-    
-                            <button class="no-bg color-4 hover-brighten" id="preset3" style="padding: 6px; width: 64px; min-width: 64px;">
-                                <i class="fa-solid fa-wave-square fa-lg top-10"></i><br>
-                                <span style="font-size: 10px; color: var(--color-text);" id="preset3-text"></span>
-                            </button>
-    
-                            <button class="no-bg color-4 hover-brighten" id="preset4" style="padding: 6px; width: 64px; min-width: 64px;">
-                                <i class="fa-solid fa-wave-square fa-lg top-10"></i><br>
-                                <span style="font-size: 10px; color: var(--color-text);" id="preset4-text"></span>
-                            </button>
-                        </div>
-
-                        <div class="flex-container flex-phone" style="align-items: center; height: 64px;">
-                            <div class="color-3 m-10 text-medium">
-                                <i class="fa-solid fa-fw fa-user-tie"></i>
-                            </div>
-                            <div>
-                                <span class="">Owner contact</span><br>
-                                <span class="text-small color-4 text-200-px tooltip" data-tooltip="<%= ownerContact %>" data-tooltip-placement="bottom"><%= ownerContact %></span>
-                            </div>
-                        </div>
+                        <span class="">Device</span><br>
+                        <span class="text-small color-4">
+                            <% if (device == 'tef') { %>TEF668x<% } %>
+                            <% if (device == 'xdr') { %>Sony XDR<% } %>
+                            <% if (device == 'sdr') { %>SDR<% } %>
+                        </span>
                     </div>
+                    <div class="color-3 m-10 text-medium">
+                        <i class="fa-solid fa-fw fa-radio"></i>
+                    </div>
+                </div>
 
+                <div class="flex-container flex-phone" style="text-align: right;justify-content: right;align-items: center; height: 64px;">
+                    <div>
+                        <span class="">Server time</span><br>
+                        <span class="text-small color-4" id="server-time"></span>
+                    </div>
+                    <div class="color-3 m-10 text-medium">
+                        <i class="fa-solid fa-fw fa-stopwatch"></i>
+                    </div>
+                </div>
+
+            </div>
+
+            <div style="width: 1px;background: var(--color-2);" class="m-10 hide-phone"></div>
+
+            <div>
+                <div style="height: 64px;" class="flex-center flex-phone">
+                    <button class="no-bg color-4 hover-brighten" id="preset1" style="padding: 6px; width: 64px; min-width: 64px;">
+                        <i class="fa-solid fa-wave-square fa-lg top-10"></i><br>
+                        <span style="font-size: 10px; color: var(--color-text);" id="preset1-text"></span>
+                    </button>
+
+                    <button class="no-bg color-4 hover-brighten" id="preset2" style="padding: 6px; width: 64px; min-width: 64px;">
+                        <i class="fa-solid fa-wave-square fa-lg top-10"></i><br>
+                        <span style="font-size: 10px; color: var(--color-text);" id="preset2-text"></span>
+                    </button>
+
+                    <button class="no-bg color-4 hover-brighten" id="preset3" style="padding: 6px; width: 64px; min-width: 64px;">
+                        <i class="fa-solid fa-wave-square fa-lg top-10"></i><br>
+                        <span style="font-size: 10px; color: var(--color-text);" id="preset3-text"></span>
+                    </button>
+
+                    <button class="no-bg color-4 hover-brighten" id="preset4" style="padding: 6px; width: 64px; min-width: 64px;">
+                        <i class="fa-solid fa-wave-square fa-lg top-10"></i><br>
+                        <span style="font-size: 10px; color: var(--color-text);" id="preset4-text"></span>
+                    </button>
+                </div>
+
+                <div class="flex-container flex-phone" style="align-items: center; height: 64px;">
+                    <div class="color-3 m-10 text-medium">
+                        <i class="fa-solid fa-fw fa-user-tie"></i>
+                    </div>
+                    <div>
+                        <span class="">Owner contact</span><br>
+                        <span class="text-small color-4 text-200-px tooltip" data-tooltip="<%= ownerContact %>" data-tooltip-placement="bottom"><%= ownerContact %></span>
+                    </div>
                 </div>
             </div>
+
         </div>
     </div>
     <div class="wrapper-outer" style="z-index: 100;">
diff --git a/web/js/main.js b/web/js/main.js
index cdfc522..c264db4 100644
--- a/web/js/main.js
+++ b/web/js/main.js
@@ -1103,7 +1103,7 @@ function toggleLock(buttonSelector, activeMessage, inactiveMessage, activeLabel,
 }
 
 function showTunerDescription() {
-    let parentDiv = $("#dashboard-panel-description").parent();
+    let parentDiv = $("#tuner-name").parent();
     
     if (!$("#dashboard-panel-description").is(":visible")) {
         parentDiv.css("border-radius", "15px 15px 0 0");