fix progress bar styling

requirements.txt

@@ -1,6 +1,4 @@
-flask>=2.0.1
 pyserial>=3.5
-esptool>=4.1
 tqdm>=4.65.0
 paho-mqtt>=1.6.1
 python-dotenv>=1.0.0

static/css/style.css

@@ -864,7 +864,7 @@ button#debug_button.active {
 
 /* Preview Canvas */
 #patternPreviewCanvas {
-    height: 15vw;
+    width: 100%;
     max-width: 300px;
     aspect-ratio: 1/1;
     border: 1px solid var(--border-primary);
@@ -913,16 +913,9 @@ body.playing .bottom-nav {
 }
 
 #currently-playing-container {
-    display: none; /* Hide by default */
     align-items: center;
     background: var(--background-accent);
     color: var(--text-secondary);
-    transition: all var(--transition-medium);
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000;
 }
 
 #currently-playing-container h3,
@@ -931,44 +924,25 @@ body.playing .bottom-nav {
     color: var(--text-secondary);
 }
 
-#currently-playing-container .file-info {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    margin-right: auto;
-}
-
 #currently-playing-container h3 {
     margin: 0;
 }
 
-#currently-playing-container h4 {
-    margin: 0;
-    color: var(--text-secondary);
-    opacity: 0.7;
-    text-align: left;
-    font-size: 0.9em;
-    font-weight: normal;
-}
-
 body:not(.playing) #currently-playing-container {
     display: none;
-    opacity: 0;
 }
 
 #currently-playing-container.open {
     max-height: none;
-    bottom: 0;
+    bottom: 60px;
 }
 
 body.playing #currently-playing-container:not(.open) {
-    display: flex;
     height: 140px;
-    overflow: hidden;
+    overflow:hidden;
     flex-direction: row;
     flex-wrap: wrap;
-    bottom: 0;
-    opacity: 1;
+    bottom: 60px;
 }
 
 body.playing #currently-playing-container .header{
@@ -997,22 +971,15 @@ body.playing #currently-playing-container:not(.open) .header h3 {
 body.playing #currently-playing-container:not(.open) #currently-playing-details{
     flex-grow: 1;
     flex-basis: 50%;
-    display: flex;
-    flex-direction: column;
     align-items: flex-start;
     margin: 0 0 0 10px;
     overflow-y: auto;
 }
 
-body.playing #currently-playing-container:not(.open) #currently-playing-details .play-buttons {
-    margin-top: 10px;
-    align-self: flex-start;
-}
-
 body.playing #currently-playing-container:not(.open) .play-buttons button {
     width: 50px;
     height: 50px;
-    font-size: 1.5rem;
+    font-size: 1.5rem;/* Center within flex container */
 }
 
 body.playing #currently-playing-container:not(.open) #progress-container {
@@ -1042,6 +1009,15 @@ body.playing #currently-playing-container:not(.open) #progress-container {
     font-size: 1rem;
 }
 
+#currently-playing-file,
+#next-file {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+}
+
+
 #progress-container {
     display: flex;
     align-items: center;
@@ -1098,6 +1074,8 @@ body.playing #currently-playing-container:not(.open) #progress-container {
 .play-buttons {
     display: flex;
     gap: 20px;
+    justify-content: flex-end;
+    width: 100%;
 }
 
 .play-buttons button {
@@ -1115,6 +1093,33 @@ body.playing #currently-playing-container:not(.open) #progress-container {
     border-radius: 50%;
 }
 
+body.playing #currently-playing-container.open {
+    position: absolute;
+    bottom: 0;
+}
+
+body.playing #currently-playing-container:not(.open) #currently-playing-details {
+    flex-direction: row;
+    align-items: center;
+}
+
+#currently-playing-container h3 {
+    flex-grow: 1;
+}
+
+body.playing #currently-playing-container.open .header {
+    display: none;
+}
+
+#open-settings-button span {
+    opacity: 0;
+    transition: var(--transition-medium) opacity;
+}
+
+#open-settings-button:hover span {
+    opacity: 1;
+}
+
 /* Debug Log */
 #status_log {
     background: #000;
@@ -1356,28 +1361,6 @@ input[type="number"]:focus {
         display: none;
     }
 
-    button.cancel {
-        background: var(--color-error);
-    }
-
-    button.cta {
-        background: var(--color-success);
-    }
-
-    button.warn {
-        background: var(--color-warning);
-    }
-
-    button.cancel:hover,
-    button.warn:hover,
-    button.cta:hover {
-        background: var(--theme-primary);
-    }
-
-    body.playing section.sticky{
-        bottom: 200px;
-    }
-
 }
 
 /* On larger screens, display all tabs in a 3-column grid */
@@ -1434,32 +1417,6 @@ input[type="number"]:focus {
         display: none;
     }
 
-    body.playing #currently-playing-container.open {
-        position: absolute;
-        bottom: 0;
-    }
-
-    body.playing #currently-playing-container:not(.open) #currently-playing-details {
-        flex-direction: row;
-        align-items: center;
-    }
-
-    #currently-playing-container h3 {
-        flex-grow: 1;
-    }
-
-    body.playing #currently-playing-container.open .header {
-        display: none;
-    }
-
-    #open-settings-button span {
-        opacity: 0;
-        transition: var(--transition-medium) opacity;
-    }
-
-    #open-settings-button:hover span {
-        opacity: 1;
-    }
 }
 
 /* Add specific styles for dark mode inputs */

static/js/main.js

@@ -403,14 +403,14 @@ async function previewPattern(fileName, containerId = 'pattern-preview-container
 
             if (firstCoordElement) {
                 const firstCoord = coordinates[0];
-                firstCoordElement.textContent = `First Coordinate: θ=${firstCoord[0]}, ρ=${firstCoord[1]}`;
+                firstCoordElement.textContent = `First Coordinate: θ=${firstCoord[0].toFixed(2)}, ρ=${firstCoord[1].toFixed(2)}`;
             } else {
                 logMessage('First coordinate element not found.', LOG_TYPE.WARNING);
             }
 
             if (lastCoordElement) {
                 const lastCoord = coordinates[coordinates.length - 1];
-                lastCoordElement.textContent = `Last Coordinate: θ=${lastCoord[0]}, ρ=${lastCoord[1]}`;
+                lastCoordElement.textContent = `Last Coordinate: θ=${lastCoord[0].toFixed(2)}, ρ=${lastCoord[1].toFixed(2)}`;
             } else {
                 logMessage('Last coordinate element not found.', LOG_TYPE.WARNING);
             }
@@ -888,6 +888,8 @@ async function runPlaylist() {
         }
 
         logMessage(`Started playlist: ${playlistName}`, 'success');
+        // Close the playlist editor container after successfully starting the playlist
+        closeStickySection('playlist-editor');
     } catch (error) {
         logMessage('Error running playlist: ' + error, 'error');
     }
@@ -1811,11 +1813,21 @@ function updateCurrentlyPlayingUI(status) {
         console.log('Pattern is running, showing container');
         document.body.classList.add('playing');
         container.style.display = 'flex';
+        
+        // Hide the preview container when a pattern is playing
+        const previewContainer = document.getElementById('pattern-preview-container');
+        if (previewContainer) {
+            previewContainer.classList.add('hidden');
+            previewContainer.classList.remove('visible');
+            // Clear any selected file highlights
+            document.querySelectorAll('#theta_rho_files .file-item').forEach(item => {
+                item.classList.remove('selected');
+            });
+        }
     } else {
         console.log('No pattern running, hiding container');
         document.body.classList.remove('playing');
         container.style.display = 'none';
-        return;
     }
 
     // Update file name display