feat: responsive

crates/ascend/src/components/button.rs

@@ -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

crates/ascend/src/pages/wall.rs

@@ -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">
+                                    <AttemptRadio
-                                        <Button
+                                        flash=ui_is_flash
-                                            onclick=move |_| {
+                                        send=ui_is_send
-                                                ui_is_flash
+                                        attempt=ui_is_attempt
-                                                    .update(|x| {
-                                                        *x = !*x;
-                                                    });
-                                            }
-                                            text="Flash"
-                                            icon=Icon::BoltSolid
-                                            color=Gradient::CyanBlue
-                                            highlight=Signal::derive(move || { ui_is_flash.get() })
                                     />
 
-                                        <Button
+                                    <div class="m-4" />
-                                            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>
 
                                     <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 {