Change how homepage is constructed to better align everything

frontend/src/homepage.rs

@@ -0,0 +1,97 @@
+use leptos::*;
+
+#[leptos::component]
+pub fn homepage() -> impl leptos::IntoView {
+    let demo_data = create_resource(
+        || (),
+        |_| async move {
+            let res = reqwasm::http::Request::get("/api/demos/list")
+                .send()
+                .await
+                .unwrap();
+            let demos: Vec<common::BaseDemoInfo> = res.json().await.unwrap();
+            demos
+        },
+    );
+
+    view! {
+        <div>
+            <div>
+                <h2>Demos</h2>
+            </div>
+            <DemoList demos=demo_data />
+        </div>
+    }
+}
+
+#[leptos::component]
+fn demo_list(demos: impl SignalGet<Value = Option<Vec<common::BaseDemoInfo>>> + 'static) -> impl leptos::IntoView {
+    let style = stylers::style! {
+        "DemoList",
+        .list {
+            display: inline-grid;
+
+            grid-template-columns: auto auto auto;
+            row-gap: 1ch;
+        }
+    };
+
+    view! {
+        class=style,
+        <div class="list">
+            { move || demos.get().unwrap_or_default().into_iter().enumerate().map(|(i, demo)| view! { <DemoListEntry demo idx=i /> }).collect::<Vec<_>>() }
+        </div>
+    }
+}
+
+#[leptos::component]
+fn demo_list_entry(demo: common::BaseDemoInfo, idx: usize) -> impl leptos::IntoView {
+    let style = stylers::style! {
+        "DemoListEntry",
+        .entry {
+            display: inline-block;
+
+            border: solid #030303aa 1px;
+
+            grid-column: 1 / 4;
+            width: 100%;
+            height: 100%;
+        }
+
+        .score, .map {
+            padding-left: 5px;
+            padding-right: 5px;
+
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+        .score {
+            grid-column: 1;
+            font-size: 20px;
+        }
+        .date {
+            grid-column: 2;
+        }
+        .map {
+            grid-column: 3;
+        }
+
+        .date {
+            display: inline-grid;
+
+            grid-template-columns: auto;
+            grid-template-rows: auto auto;
+        }
+    };
+
+    view! {
+        class=style,
+            <span class="score" style=format!("grid-row: {};", idx + 1)>{demo.team2_score}:{demo.team3_score}</span>
+            <div class="date" style=format!("grid-row: {};", idx + 1)>
+                <span>{demo.uploaded_at.format("%Y-%m-%d").to_string()}</span>
+                <span>{demo.uploaded_at.format("%H-%M-%S").to_string()}</span>
+            </div>
+            <span class="map" style=format!("grid-row: {};", idx + 1)>{demo.map}</span>
+            <a class="entry" href=format!("demo/{}/scoreboard", demo.id) style=format!("grid-row: {};", idx + 1)></a>
+    }
+}

frontend/src/lib.rs

@@ -1,5 +1,4 @@
 use leptos::*;
-use leptos_router::A;
 
 pub mod demo;
 pub use demo::Demo;
@@ -7,59 +6,15 @@ pub use demo::Demo;
 mod navbar;
 pub use navbar::TopBar;
 
+pub mod homepage;
+pub use homepage::Homepage;
+
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum DemoUploadStatus {
     Hidden,
     Shown,
 }
 
-#[leptos::component]
-pub fn demo_list_entry(demo: common::BaseDemoInfo) -> impl leptos::IntoView {
-    let style = stylers::style! {
-        "DemoListEntry",
-        .entry {
-            display: inline-grid;
-
-            grid-template-columns: auto auto auto;
-
-            border: solid #030303aa 1px;
-            margin-top: 5px;
-            margin-bottom: 5px;
-        }
-
-        .score, .map {
-            padding-left: 5px;
-            padding-right: 5px;
-
-            margin-top: auto;
-            margin-bottom: auto;
-        }
-
-        .date {
-            display: inline-grid;
-
-            grid-template-columns: auto;
-            grid-template-rows: auto auto;
-        }
-    };
-
-    view! {
-        class=style,
-        <li>
-            <A href=format!("demo/{}/scoreboard", demo.id)>
-                <div class="entry">
-                    <span class="score">{demo.team2_score}:{demo.team3_score}</span>
-                    <div class="date">
-                        <span>{demo.uploaded_at.format("%Y-%m-%d").to_string()}</span>
-                        <span>{demo.uploaded_at.format("%H-%M-%S").to_string()}</span>
-                    </div>
-                    <span class="map">{demo.map}</span>
-                </div>
-            </A>
-        </li>
-    }
-}
-
 #[leptos::component]
 pub fn upload_demo(
     shown: ReadSignal<DemoUploadStatus>,
@@ -105,31 +60,3 @@ pub fn upload_demo(
         </div>
     }
 }
-
-#[leptos::component]
-pub fn homepage() -> impl leptos::IntoView {
-    let demo_data = create_resource(
-        || (),
-        |_| async move {
-            let res = reqwasm::http::Request::get("/api/demos/list")
-                .send()
-                .await
-                .unwrap();
-            let demos: Vec<common::BaseDemoInfo> = res.json().await.unwrap();
-            demos
-        },
-    );
-
-    view! {
-        <div>
-            <div>
-                <h2>Demos</h2>
-            </div>
-            <ul>
-                { move || demo_data.get().unwrap_or_default().into_iter().map(|demo| crate::DemoListEntry(DemoListEntryProps {
-            demo
-        })).collect::<Vec<_>>() }
-            </ul>
-        </div>
-    }
-}