plul/ascend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: responsive

Browse Source
This commit is contained in:
Asger Juul Brunshøj
2025-03-05 10:02:30 +01:00
parent 976a416081
commit 9ff76297da
2 changed files with 69 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
crates/ascend/src/components/button.rs
View File

@@ -16,9 +16,13 @@ pub fn Button(
onclick: impl FnMut(MouseEvent) + 'static,
) -> impl IntoView {
let margin = "mx-2 my-1 sm:mx-5 sm:my-2.5";
let icon_view = icon.get().map(|i| {
let icon_view = i.into_view();
let mut classes = "self-center mx-5 my-2.5 rounded-sm".to_string();
let mut classes = "self-center rounded-sm".to_string();
classes.push(' ');
classes.push_str(margin);
classes.push(' ');
classes.push_str(color.class_text());
@@ -35,7 +39,13 @@ pub fn Button(
view! { <div class=classes /> }
});
let text_view = view! { <div class="self-center mx-5 my-2.5 uppercase w-full text-lg font-thin">{text.get()}</div> };
let text_view = {
let mut classes = "self-center uppercase w-full text-sm sm:text-base md:text-lg font-thin".to_string();
classes.push(' ');
classes.push_str(margin);
view! { <div class=classes>{text.get()}</div> }
};
view! {
<button

96
crates/ascend/src/pages/wall.rs
View File

@@ -93,7 +93,7 @@ pub fn Wall() -> impl IntoView {
});
let ui_is_flash = RwSignal::new(false);
let ui_is_climbed = RwSignal::new(false);
let ui_is_send = RwSignal::new(false);
let ui_is_attempt = RwSignal::new(false);
let ui_is_favorite = RwSignal::new(false);
@@ -159,50 +159,17 @@ pub fn Wall() -> impl IntoView {
}
};
let v = view! {
<div class="grid grid-cols-1 gap-8 md:grid-cols-[auto,1fr]">
<div class="inline-grid grid-cols-1 gap-8 md:grid-cols-[auto,1fr]">
<div>{grid}</div>
<div>
<div class="flex">
<Button
onclick=move |_| {
ui_is_flash
.update(|x| {
*x = !*x;
});
}
text="Flash"
icon=Icon::BoltSolid
color=Gradient::CyanBlue
highlight=Signal::derive(move || { ui_is_flash.get() })
<AttemptRadio
flash=ui_is_flash
send=ui_is_send
attempt=ui_is_attempt
/>
<Button
onclick=move |_| {
ui_is_climbed
.update(|x| {
*x = !*x;
});
}
text="Send"
icon=Icon::Trophy
color=Gradient::TealLime
highlight=Signal::derive(move || { ui_is_climbed.get() })
/>
<Button
onclick=move |_| {
ui_is_attempt
.update(|x| {
*x = !*x;
});
}
text="Attempt"
icon=Icon::ArrowTrendingUp
color=Gradient::PinkOrange
highlight=Signal::derive(move || { ui_is_attempt.get() })
/>
</div>
<div class="m-4" />
<Button
icon=Icon::ArrowPath
@@ -259,12 +226,61 @@ pub fn Wall() -> impl IntoView {
}
}
// TODO: refactor along these lines to limit suspend nesting in a single component?
// #[component]
// #[tracing::instrument(skip_all)]
// fn WithWall(#[prop(into)] wall: Signal<models::Wall>) -> impl IntoView {
// tracing::trace!("Enter");
// }
#[component]
#[tracing::instrument(skip_all)]
fn AttemptRadio(#[prop(into)] flash: RwSignal<bool>, #[prop(into)] send: RwSignal<bool>, #[prop(into)] attempt: RwSignal<bool>) -> impl IntoView {
tracing::debug!("Enter");
view! {
<div class="flex flex-row justify-evenly md:flex-col 2xl:flex-row">
<Button
onclick=move |_| {
flash
.update(|x| {
*x = !*x;
});
}
text="Flash"
icon=Icon::BoltSolid
color=Gradient::CyanBlue
highlight=Signal::derive(move || { flash.get() })
/>
<Button
onclick=move |_| {
send.update(|x| {
*x = !*x;
});
}
text="Send"
icon=Icon::Trophy
color=Gradient::TealLime
highlight=Signal::derive(move || { send.get() })
/>
<Button
onclick=move |_| {
attempt
.update(|x| {
*x = !*x;
});
}
text="Attempt"
icon=Icon::ArrowTrendingUp
color=Gradient::PinkOrange
highlight=Signal::derive(move || { attempt.get() })
/>
</div>
}
}
#[component]
#[tracing::instrument(skip_all)]
fn Grid(wall: models::Wall, #[prop(into)] problem: Signal<Result<Option<models::Problem>, ServerFnError>>) -> impl IntoView {