From 7118b661046b5d4fdbc046a9f2c8c34e659c944e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Asger=20Juul=20Brunsh=C3=B8j?= <asgerbrunshoj@gmail.com>
Date: Wed, 26 Feb 2025 15:39:34 +0100
Subject: [PATCH] feat: responsive /wall layout

---
 crates/ascend/src/components/problem_info.rs |  6 +++---
 crates/ascend/src/pages/wall.rs              | 12 ++++++------
 todo.md                                      |  1 -
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/crates/ascend/src/components/problem_info.rs b/crates/ascend/src/components/problem_info.rs
index 4edb45d..e5062d5 100644
--- a/crates/ascend/src/components/problem_info.rs
+++ b/crates/ascend/src/components/problem_info.rs
@@ -11,7 +11,7 @@ pub fn ProblemInfo(problem: models::Problem) -> impl IntoView {
     let method = problem.method;
 
     view! {
-        <div class="grid grid-rows-none grid-cols-[auto,1fr]">
+        <div class="grid grid-rows-none grid-cols-[auto,1fr] gap-0.5">
             <NameValue name="Name:" value=name />
             <NameValue name="Method:" value=method.to_string() />
             <NameValue name="Set By:" value=set_by />
@@ -23,7 +23,7 @@ pub fn ProblemInfo(problem: models::Problem) -> impl IntoView {
 #[tracing::instrument(skip_all)]
 fn NameValue(#[prop(into)] name: String, #[prop(into)] value: String) -> impl IntoView {
     view! {
-            <p class="text-orange-300 mr-4">{name}</p>
-            <p class="text-white font-semibold">{value}</p>
+        <p class="text-orange-300 mr-4 text-right">{name}</p>
+        <p class="text-white font-semibold">{value}</p>
     }
 }
diff --git a/crates/ascend/src/pages/wall.rs b/crates/ascend/src/pages/wall.rs
index 91876b4..5cc0fa8 100644
--- a/crates/ascend/src/pages/wall.rs
+++ b/crates/ascend/src/pages/wall.rs
@@ -1,5 +1,3 @@
-// TODO: Put current problem UID in url
-
 use crate::codec::ron::RonEncoded;
 use crate::components::ProblemInfo;
 use crate::components::button::Button;
@@ -109,8 +107,10 @@ pub fn Wall() -> impl IntoView {
                         tracing::info!("executing Suspend future");
                         let wall = wall.await?;
                         let v = view! {
-                            <div class="grid grid-cols-[auto,1fr] gap-8">
-                                <Grid wall=wall.clone() problem=problem_signal />
+                            <div class="grid grid-cols-1 md:grid-cols-[auto,1fr] gap-8">
+                                <div>
+                                    <Grid wall=wall.clone() problem=problem_signal />
+                                </div>
 
                                 <div>
                                     <Button
@@ -144,10 +144,10 @@ fn Grid(wall: models::Wall, problem: Signal<Option<models::Problem>>) -> impl In
         let cell = view! { <Hold role hold=hold.clone() /> };
         cells.push(cell);
     }
-    let grid_classes = format!("grid grid-rows-{} grid-cols-{} gap-3", wall.rows, wall.cols,);
+    let grid_classes = format!("grid grid-rows-{} grid-cols-{} gap-1", wall.rows, wall.cols,);
 
     view! {
-        <div class="grid grid-cols-[auto,1fr] gap-8">
+        <div class="grid grid-cols-[auto,1fr]">
             <div style="max-height: 90vh; max-width: 90vh;" class=move || { grid_classes.clone() }>
                 {cells}
             </div>
diff --git a/todo.md b/todo.md
index a5c316d..252c5d3 100644
--- a/todo.md
+++ b/todo.md
@@ -5,7 +5,6 @@
 - Record problem success (enum: flash, send, no-send)
 - implement routes page to show all routes for a given wall
 - implement favorite routes feature
-- use wall id in URL.
 - decide on routes vs problems terminology
 - decide on holds vs wall-edit terminology
 - clock