From ce0cc09650aa4fdacdf1ffed4c972b3e56aadc86 Mon Sep 17 00:00:00 2001
From: "Stanislav Lechev [0xAF]" <af@0xAF.org>
Date: Thu, 9 Nov 2023 04:46:00 +0200
Subject: [PATCH] animate receiver sections expand/colapse

---
 htdocs/css/openwebrx.css | 6 ++++++
 htdocs/index.html        | 2 +-
 htdocs/lib/UI.js         | 6 +++---
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index 11377086..d8b75edf 100644
--- a/htdocs/css/openwebrx.css
+++ b/htdocs/css/openwebrx.css
@@ -1683,4 +1683,10 @@ img.openwebrx-mirror-img
 
 .openwebrx-section {
     display: block;
+    overflow-y: hidden;
+    transition: max-height 0.25s ease-out;
+    max-height: 15rem;
+}
+.openwebrx-section.closed {
+    max-height: 0;
 }
diff --git a/htdocs/index.html b/htdocs/index.html
index 8b82dbb3..f4610d90 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -260,7 +260,7 @@
                         </div>
                     </div>
                     <div id="openwebrx-section-settings" class="openwebrx-section-divider" onclick="UI.toggleSection(this);">&blacktriangle;&nbsp;Settings</div>
-                    <div class="openwebrx-section" style="display: none;">
+                    <div class="openwebrx-section closed">
                         <div class="openwebrx-panel-line">
                             <div title="Reset theme" class="openwebrx-button openwebrx-slider-button" onclick="UI.setTheme('default');">
                                 <svg viewBox="56 -900 835 835" style="overflow: visible"><use xlink:href="static/gfx/svg-defs.svg#theme-chooser"></use></svg>
diff --git a/htdocs/lib/UI.js b/htdocs/lib/UI.js
index cf17af35..82a943fe 100644
--- a/htdocs/lib/UI.js
+++ b/htdocs/lib/UI.js
@@ -135,13 +135,13 @@ UI.toggleSection = function(el, on) {
 
     var next_el = el.nextElementSibling;
     if (next_el) {
-        if ((next_el.style.display === 'none') && (toggle || on)) {
+        if ((next_el.classList.contains('closed')) && (toggle || on)) {
             el.innerHTML = el.innerHTML.replace('\u25B4', '\u25BE');
-            next_el.style.display = 'block';
+            next_el.classList.remove('closed');
             LS.save(el.id, true);
         } else if (toggle || !on) {
             el.innerHTML = el.innerHTML.replace('\u25BE', '\u25B4');
-            next_el.style.display = 'none';
+            next_el.classList.add('closed');
             LS.save(el.id, false);
         }
     }