6 columns. 120 notes

BlinkyStitt · Apr 22, 2024 · d6bc747 · d6bc747
1 parent e1987e2
commit d6bc747
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/musical-leptos/public/styles.css b/musical-leptos/public/styles.css
@@ -49,4 +49,10 @@ button {
   margin-right: auto;
   text-align: center;
   margin: 2rem;
+}
+
+#dancinglights {
+  column-width: 200px;
+  column-gap: 50px;
+  column-count: 6;
 }
diff --git a/musical-leptos/src/components/dancing_lights.rs b/musical-leptos/src/components/dancing_lights.rs
@@ -189,9 +189,9 @@ pub fn DancingLights() -> impl IntoView {
                     Now listening to {media_stream_id}
                 </button>
 
-                <p>Sample Rate: {sample_rate}</p>
+                // <p>Sample Rate: {sample_rate}</p>
 
-                <ol>
+                <ol id="dancinglights">
                     // TODO: change audio to be a vec of signals and then use a For
                     // <For
                     //     each={move || audio.get().into_iter().enumerate()}
@@ -231,7 +231,8 @@ pub fn audio_list_item<const N: usize>(gradient: &Gradient<N>, i: usize, x: u8)
         _ => "ERROR!!!",
     };
 
+    // TODO: show the frequency on hover
     view! {
-        <li style={format!("background-color: {}; color: white; width: 200px;", color)}>{text}</li>
+        <li style={format!("background-color: {}; color: white; width: 120px;", color)}>{text}</li>
     }
 }