feat: responsive /wall layout
This commit is contained in:
parent
f1d0fc68c5
commit
7118b66104
@ -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>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
1
todo.md
1
todo.md
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user