From 6d1945293eb0f62f6b7feaf9adf61a7e497605f0 Mon Sep 17 00:00:00 2001
From: kaotisk <kaotisk@arching-kaos.org>
Date: Sat, 9 Nov 2024 10:23:30 +0200
Subject: Style fixes

---
 client/css/styles.css |  11 ++++
 client/index.html     | 143 +++++++++++++++++++++++++-------------------------
 2 files changed, 82 insertions(+), 72 deletions(-)

diff --git a/client/css/styles.css b/client/css/styles.css
index 5dce3f4..ea7b323 100644
--- a/client/css/styles.css
+++ b/client/css/styles.css
@@ -27,6 +27,10 @@ body {
 div {
     display: flex;
     flex-direction: column;
+    gap: 0px;
+}
+
+.main {
     gap: 10px;
 }
 
@@ -102,6 +106,7 @@ summary:hover {
     flex-wrap: wrap;
     justify-content: space-evenly;
     align-items: flex-start;
+    gap: 10px;
 }
 
 .previously-played {
@@ -172,3 +177,9 @@ audio {
     max-width: 128px;
     max-height: 128px;
 }
+
+.more-details {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
diff --git a/client/index.html b/client/index.html
index 9c9d90b..4bf6e4f 100644
--- a/client/index.html
+++ b/client/index.html
@@ -47,31 +47,6 @@
                             </div>
                             <div class="div-row">
                                 <button onclick="sync_radio()">Sync!</button>
-                                <details style="width:100%;">
-                                    <summary>Details</summary>
-                                    <div>
-                                        <p>Download progress:</p>
-                                        <progress class="dl-progress" max="100"></progress>
-                                    </div>
-                                    <div>
-                                        <p>Live progress:</p>
-                                        <progress class="play-progress"></progress>
-                                    </div>
-                                    <div class="div-inline">
-                                        <div class="div-inline">
-                                            <p>Listening at:</p>
-                                            <p class="listening-at"></p>
-                                        </div>
-                                        <div class="div-inline">
-                                            <p>Show playback: </p>
-                                            <div class="no-break">
-                                                <p class="relative-time"></p>
-                                                <p>/</p>
-                                                <p class="show-duration"></p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </details>
                             </div>
                         </div>
                     </div>
@@ -79,7 +54,77 @@
                     </div>
                 </div>
                 <div class="more-details">
-                    <h2>More details</h2>
+                    <details style="width:100%;">
+                        <summary>Progress details</summary>
+                        <div>
+                            <p>Download progress:</p>
+                            <progress class="dl-progress" max="100"></progress>
+                        </div>
+                        <div>
+                            <p>Live progress:</p>
+                            <progress class="play-progress"></progress>
+                        </div>
+                        <div class="div-inline">
+                            <div class="div-inline">
+                                <p>Listening at:</p>
+                                <p class="listening-at"></p>
+                            </div>
+                            <div class="div-inline">
+                                <p>Show playback: </p>
+                                <div class="no-break">
+                                    <p class="relative-time"></p>
+                                    <p>/</p>
+                                    <p class="show-duration"></p>
+                                </div>
+                            </div>
+                        </div>
+                    </details>
+                    <details>
+                        <summary>Sync info</summary>
+                        <div class="groups">
+                            <table>
+                                <tr>
+                                    <th>Time of visit (ms)</th>
+                                    <td class="time-of-visit"></td>
+                                </tr>
+                                <tr>
+                                    <th>Time elapsed since visited (s)</th>
+                                    <td class="you-are-here"></td>
+                                </tr>
+                                <tr>
+                                    <th>List started on (ms)</th>
+                                    <td class="started-on"></td>
+                                </tr>
+                                <tr>
+                                    <th>List duration (s)</th>
+                                    <td class="list-duration"></td>
+                                </tr>
+                            </table>
+                            <h3>Calculations</h3>
+                            <table>
+                                <tr>
+                                    <th>Times Fully Played</th>
+                                    <td class="min-played"></td>
+                                </tr>
+                                <tr>
+                                    <th>Times Played</th>
+                                    <td class="max-played"></td>
+                                </tr>
+                                <tr>
+                                    <th>Dt = TP - TFP</th>
+                                    <td class="d-t"></td>
+                                </tr>
+                                <tr>
+                                    <th>Delta time</th>
+                                    <td class="delta-time"></td>
+                                </tr>
+                                <tr>
+                                    <th>Initial "tune in" time (s)</th>
+                                    <td class="current-time"></td>
+                                </tr>
+                            </table>
+                        </div>
+                    </details>
                     <details >
                         <summary>Info to get you started</summary>
                         <h2>Notice</h2>
@@ -144,52 +189,6 @@
                             </li>
                         </ul>
                     </details>
-                    <details>
-                        <summary>Sync info</summary>
-                        <div class="groups">
-                            <table>
-                                <tr>
-                                    <th>Time of visit (ms)</th>
-                                    <td class="time-of-visit"></td>
-                                </tr>
-                                <tr>
-                                    <th>Time elapsed since visited (s)</th>
-                                    <td class="you-are-here"></td>
-                                </tr>
-                                <tr>
-                                    <th>List started on (ms)</th>
-                                    <td class="started-on"></td>
-                                </tr>
-                                <tr>
-                                    <th>List duration (s)</th>
-                                    <td class="list-duration"></td>
-                                </tr>
-                            </table>
-                            <h3>Calculations</h3>
-                            <table>
-                                <tr>
-                                    <th>Times Fully Played</th>
-                                    <td class="min-played"></td>
-                                </tr>
-                                <tr>
-                                    <th>Times Played</th>
-                                    <td class="max-played"></td>
-                                </tr>
-                                <tr>
-                                    <th>Dt = TP - TFP</th>
-                                    <td class="d-t"></td>
-                                </tr>
-                                <tr>
-                                    <th>Delta time</th>
-                                    <td class="delta-time"></td>
-                                </tr>
-                                <tr>
-                                    <th>Initial "tune in" time (s)</th>
-                                    <td class="current-time"></td>
-                                </tr>
-                            </table>
-                        </div>
-                    </details>
                     <details>
                         <summary>Data segments</summary>
                         <h3>Hash of list</h3>
-- 
cgit v1.2.3