Change how homepage is constructed to better align everything

2024-10-19 01:01:07 +02:00
parent f22c1a1420
commit f3dde4a9cd
2 changed files with 100 additions and 76 deletions
--- a/frontend/src/homepage.rs
+++ b/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>
+    }
+}