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/components/outlined_box.rs

@@ -25,6 +25,8 @@ pub fn OutlinedBox(children: Children, color: Gradient, #[prop(optional)] highli
                 Gradient::PinkOrange => "bg-pink-900",
                 Gradient::CyanBlue => "bg-cyan-900",
                 Gradient::TealLime => "bg-teal-900",
+                Gradient::PurplePink => "bg-purple-900",
+                Gradient::PurpleBlue => "bg-purple-900",
             };
 
             c.push(' ');

crates/ascend/src/gradient.rs

@@ -1,9 +1,11 @@
 #[derive(Debug, Copy, Clone, Default)]
 pub enum Gradient {
     #[default]
+    PurpleBlue,
     PinkOrange,
     CyanBlue,
     TealLime,
+    PurplePink,
 }
 impl Gradient {
     pub fn class_from(&self) -> &str {
@@ -11,6 +13,8 @@ impl Gradient {
             Gradient::PinkOrange => "from-pink-500",
             Gradient::CyanBlue => "from-cyan-500",
             Gradient::TealLime => "from-teal-300",
+            Gradient::PurplePink => "from-purple-500",
+            Gradient::PurpleBlue => "from-purple-600",
         }
     }
 
@@ -19,6 +23,8 @@ impl Gradient {
             Gradient::PinkOrange => "to-orange-400",
             Gradient::CyanBlue => "to-blue-500",
             Gradient::TealLime => "to-lime-300",
+            Gradient::PurplePink => "to-pink-500",
+            Gradient::PurpleBlue => "to-blue-500",
         }
     }
 
@@ -27,6 +33,8 @@ impl Gradient {
             Gradient::PinkOrange => "text-pink-500",
             Gradient::CyanBlue => "text-cyan-500",
             Gradient::TealLime => "text-teal-300",
+            Gradient::PurplePink => "text-purple-500",
+            Gradient::PurpleBlue => "text-purple-600",
         }
     }
 }

crates/ascend/src/pages/wall.rs

@@ -33,7 +33,6 @@
 use crate::components::ProblemInfo;
 use crate::components::attempt::Attempt;
 use crate::components::button::Button;
-use crate::components::checkbox::Checkbox;
 use crate::components::header::HeaderItem;
 use crate::components::header::HeaderItems;
 use crate::components::header::StyledHeader;
@@ -93,7 +92,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,58 +158,27 @@ 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 flex-col">
-                                    <div class="flex">
+                                    <div class="self-center">
-                                        <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() })
-                                        />
-
-                                        <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>
-
                                         <Button
                                             icon=Icon::ArrowPath
                                             text="Next problem"
                                             onclick=move |_| fn_next_problem(&wall)
                                         />
+                                    </div>
 
-                                    <div class="m-4" />
+                                    <Separator />
+
+                                    <AttemptRadio
+                                        flash=ui_is_flash
+                                        send=ui_is_send
+                                        attempt=ui_is_attempt
+                                    />
+
+                                    <Separator />
 
                                     <Transition fallback=|| ()>
                                         {move || Suspend::new(async move {
@@ -223,7 +191,7 @@ pub fn Wall() -> impl IntoView {
                                         })}
                                     </Transition>
 
-                                    <div class="m-4" />
+                                    <Separator />
 
                                     <Suspense fallback=move || {
                                         view! {}
@@ -259,12 +227,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 {
@@ -322,3 +339,8 @@ fn Hold(hold: models::Hold, role: Signal<Result<Option<HoldRole>, ServerFnError>
         Ok::<_, ServerFnError>(view)
     }
 }
+
+#[component]
+fn Separator() -> impl IntoView {
+    view! { <div class="m-2 sm:m-3 md:m-4" /> }
+}