From e1a705b32fffe33d2a6d27fa35b677088706ae4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Asger=20Juul=20Brunsh=C3=B8j?= Date: Fri, 21 Mar 2025 15:31:01 +0100 Subject: [PATCH] wip --- crates/ascend/src/components/button.rs | 2 +- crates/ascend/src/components/checkbox.rs | 4 ++-- crates/ascend/src/components/outlined_box.rs | 2 +- crates/ascend/src/components/problem.rs | 4 ++-- crates/ascend/src/components/problem_info.rs | 2 +- crates/ascend/src/css.rs | 9 ++++++++ crates/ascend/src/lib.rs | 2 ++ crates/ascend/src/pages/edit_wall.rs | 2 +- crates/ascend/src/pages/wall.rs | 16 ++++++++----- crates/ascend/style/tailwind.css | 24 +++++++++++++++++--- 10 files changed, 50 insertions(+), 17 deletions(-) create mode 100644 crates/ascend/src/css.rs diff --git a/crates/ascend/src/components/button.rs b/crates/ascend/src/components/button.rs index b65ce53..452f2b8 100644 --- a/crates/ascend/src/components/button.rs +++ b/crates/ascend/src/components/button.rs @@ -27,7 +27,7 @@ pub fn Button( }); let separator = icon.get().is_some().then(|| { - let mut classes = "w-0.5 bg-gradient-to-br min-w-0.5".to_string(); + let mut classes = "w-0.5 bg-linear-to-br min-w-0.5".to_string(); classes.push(' '); classes.push_str(color.class_from()); classes.push(' '); diff --git a/crates/ascend/src/components/checkbox.rs b/crates/ascend/src/components/checkbox.rs index 44a2f66..b85e03d 100644 --- a/crates/ascend/src/components/checkbox.rs +++ b/crates/ascend/src/components/checkbox.rs @@ -8,7 +8,7 @@ pub fn Checkbox(checked: RwSignal, #[prop(into)] text: Signal, #[p let unique_id = Oco::from(format!("checkbox-{}", uuid::Uuid::new_v4())); let checkbox_view = view! { -
+
@@ -16,7 +16,7 @@ pub fn Checkbox(checked: RwSignal, #[prop(into)] text: Signal, #[p }; let separator = { - let mut classes = "w-0.5 bg-gradient-to-br min-w-0.5".to_string(); + let mut classes = "w-0.5 bg-linear-to-br min-w-0.5".to_string(); classes.push(' '); classes.push_str(color.class_from()); classes.push(' '); diff --git a/crates/ascend/src/components/outlined_box.rs b/crates/ascend/src/components/outlined_box.rs index 4822bb8..286ed6e 100644 --- a/crates/ascend/src/components/outlined_box.rs +++ b/crates/ascend/src/components/outlined_box.rs @@ -6,7 +6,7 @@ pub fn OutlinedBox(children: Children, color: Gradient, #[prop(optional)] highli let highlight = move || highlight.get().unwrap_or(false); let outer_classes = move || { - let mut c = "p-0.5 bg-gradient-to-br rounded-lg".to_string(); + let mut c = "p-0.5 bg-linear-to-br rounded-lg".to_string(); c.push(' '); c.push_str(color.class_from()); c.push(' '); diff --git a/crates/ascend/src/components/problem.rs b/crates/ascend/src/components/problem.rs index a05cf36..3a65f44 100644 --- a/crates/ascend/src/components/problem.rs +++ b/crates/ascend/src/components/problem.rs @@ -31,7 +31,7 @@ pub fn Problem( let grid_classes = move || format!("grid grid-rows-{} grid-cols-{} gap-3", dim.get().rows, dim.get().cols); view! { -
+
{holds}
} @@ -48,7 +48,7 @@ fn Hold(#[prop(into)] role: Signal>) -> impl IntoView { Some(HoldRole::End) => Some("outline outline-offset-2 outline-red-500"), None => Some("brightness-50"), }; - let mut s = "min-w-2 bg-sky-100 aspect-square rounded".to_string(); + let mut s = "min-w-2 bg-sky-100 aspect-square rounded-sm".to_string(); if let Some(c) = role_classes { s.push(' '); s.push_str(c); diff --git a/crates/ascend/src/components/problem_info.rs b/crates/ascend/src/components/problem_info.rs index 36d41fc..36a0638 100644 --- a/crates/ascend/src/components/problem_info.rs +++ b/crates/ascend/src/components/problem_info.rs @@ -11,7 +11,7 @@ pub fn ProblemInfo(#[prop(into)] problem: Signal) -> impl IntoV let method = Signal::derive(move || problem.read().method.to_string()); view! { -
+
diff --git a/crates/ascend/src/css.rs b/crates/ascend/src/css.rs new file mode 100644 index 0000000..4e4e4d7 --- /dev/null +++ b/crates/ascend/src/css.rs @@ -0,0 +1,9 @@ +/// Tailwind's grid-rows- +pub fn grid_rows_n(n: u64) -> String { + format!("grid-template-rows: repeat({n}, minmax(0, 1fr));") +} + +/// Tailwind's grid-cols- +pub fn grid_cols_n(n: u64) -> String { + format!("grid-template-columns: repeat({n}, minmax(0, 1fr));") +} diff --git a/crates/ascend/src/lib.rs b/crates/ascend/src/lib.rs index 5629f05..d48b10a 100644 --- a/crates/ascend/src/lib.rs +++ b/crates/ascend/src/lib.rs @@ -38,6 +38,8 @@ pub mod gradient; pub mod resources; +pub mod css; + pub mod codec; pub mod models; pub mod server_functions; diff --git a/crates/ascend/src/pages/edit_wall.rs b/crates/ascend/src/pages/edit_wall.rs index c95e80f..48482a2 100644 --- a/crates/ascend/src/pages/edit_wall.rs +++ b/crates/ascend/src/pages/edit_wall.rs @@ -155,7 +155,7 @@ fn Hold(wall_uid: models::WallUid, hold: models::Hold) -> impl IntoView { view! { {"Problems:"}

}; let value = view! {

{filtered_problems.read().len()}

}; view! { -
+
{name} {value}
} @@ -271,7 +271,7 @@ fn WithWall( }; view! { -
+
{grid}
@@ -454,11 +454,15 @@ fn Grid( }; cells.push(cell); } - let grid_classes = format!("grid grid-rows-{} grid-cols-{} gap-1", wall.rows, wall.cols,); + let style = { + let grid_rows = crate::css::grid_rows_n(wall.rows); + let grid_cols = crate::css::grid_cols_n(wall.cols); + format!("max-height: 90vh; max-width: 90vh; {}", [grid_rows, grid_cols].join(" ")) + }; view! { -
-
+
+
{cells}
@@ -478,7 +482,7 @@ fn Hold( tracing::trace!("Enter"); move || { - let mut class = "bg-sky-100 aspect-square rounded hover:brightness-125".to_string(); + let mut class = "bg-sky-100 aspect-square rounded-sm hover:brightness-125".to_string(); if let Some(role) = role { let role = role.get()?; diff --git a/crates/ascend/style/tailwind.css b/crates/ascend/style/tailwind.css index b5c61c9..9cb2d3c 100644 --- a/crates/ascend/style/tailwind.css +++ b/crates/ascend/style/tailwind.css @@ -1,3 +1,21 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import 'tailwindcss'; + +@config '../tailwind.config.js'; + +/* + The default border color has changed to `currentColor` in Tailwind CSS v4, + so we've added these compatibility styles to make sure everything still + looks the same as it did with Tailwind CSS v3. + + If we ever want to remove these styles, we need to add an explicit border + color utility to any element that depends on these defaults. +*/ +@layer base { + *, + ::after, + ::before, + ::backdrop, + ::file-selector-button { + border-color: var(--color-gray-200, currentColor); + } +}