feat: responsive /wall layout

This commit is contained in:
Asger Juul Brunshøj 2025-02-26 15:39:34 +01:00
parent f1d0fc68c5
commit 7118b66104
3 changed files with 9 additions and 10 deletions

View File

@ -11,7 +11,7 @@ pub fn ProblemInfo(problem: models::Problem) -> impl IntoView {
let method = problem.method; let method = problem.method;
view! { 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="Name:" value=name />
<NameValue name="Method:" value=method.to_string() /> <NameValue name="Method:" value=method.to_string() />
<NameValue name="Set By:" value=set_by /> <NameValue name="Set By:" value=set_by />
@ -23,7 +23,7 @@ pub fn ProblemInfo(problem: models::Problem) -> impl IntoView {
#[tracing::instrument(skip_all)] #[tracing::instrument(skip_all)]
fn NameValue(#[prop(into)] name: String, #[prop(into)] value: String) -> impl IntoView { fn NameValue(#[prop(into)] name: String, #[prop(into)] value: String) -> impl IntoView {
view! { view! {
<p class="text-orange-300 mr-4">{name}</p> <p class="text-orange-300 mr-4 text-right">{name}</p>
<p class="text-white font-semibold">{value}</p> <p class="text-white font-semibold">{value}</p>
} }
} }

View File

@ -1,5 +1,3 @@
// TODO: Put current problem UID in url
use crate::codec::ron::RonEncoded; use crate::codec::ron::RonEncoded;
use crate::components::ProblemInfo; use crate::components::ProblemInfo;
use crate::components::button::Button; use crate::components::button::Button;
@ -109,8 +107,10 @@ pub fn Wall() -> impl IntoView {
tracing::info!("executing Suspend future"); tracing::info!("executing Suspend future");
let wall = wall.await?; let wall = wall.await?;
let v = view! { let v = view! {
<div class="grid grid-cols-[auto,1fr] gap-8"> <div class="grid grid-cols-1 md:grid-cols-[auto,1fr] gap-8">
<Grid wall=wall.clone() problem=problem_signal /> <div>
<Grid wall=wall.clone() problem=problem_signal />
</div>
<div> <div>
<Button <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() /> }; let cell = view! { <Hold role hold=hold.clone() /> };
cells.push(cell); 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! { 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() }> <div style="max-height: 90vh; max-width: 90vh;" class=move || { grid_classes.clone() }>
{cells} {cells}
</div> </div>

View File

@ -5,7 +5,6 @@
- Record problem success (enum: flash, send, no-send) - Record problem success (enum: flash, send, no-send)
- implement routes page to show all routes for a given wall - implement routes page to show all routes for a given wall
- implement favorite routes feature - implement favorite routes feature
- use wall id in URL.
- decide on routes vs problems terminology - decide on routes vs problems terminology
- decide on holds vs wall-edit terminology - decide on holds vs wall-edit terminology
- clock - clock