fix style

This commit is contained in:
tommy
2025-11-03 16:26:01 +08:00
parent 6c18bbe1d1
commit 42667df0a1

View File

@@ -185,6 +185,10 @@ fn UiShowcase() -> Element {
"Pick a destination from the sidebar to preview the content area.".to_string(),
),
};
let scroll_container_style = "width: 100%; overflow-x: auto; padding-bottom: 2.5rem;";
let showcase_grid_style = "display: grid; grid-template-columns: repeat(2, minmax(520px, 1fr)); gap: 2.5rem; align-items: start; min-width: 1100px;";
let full_width_style = "grid-column: 1 / -1; min-width: 520px;";
let single_column_style = "min-width: 520px;";
rsx! {
section {
@@ -192,8 +196,14 @@ fn UiShowcase() -> Element {
"data-theme": if dark_mode() { "dark" } else { "light" },
div {
class: "ui-demo-grid",
class: "ui-showcase-scroll",
style: scroll_container_style,
div {
class: "ui-showcase-grid",
style: showcase_grid_style,
div {
style: full_width_style,
Card {
CardHeader {
CardTitle { "Profile form" }
@@ -269,7 +279,10 @@ fn UiShowcase() -> Element {
}
}
}
}
div {
style: single_column_style,
Card {
CardHeader {
CardTitle { "Buttons & badges" }
@@ -309,7 +322,10 @@ fn UiShowcase() -> Element {
}
}
}
}
div {
style: single_column_style,
Card {
CardHeader {
CardTitle { "Select & dropdowns" }
@@ -354,7 +370,10 @@ fn UiShowcase() -> Element {
}
}
}
}
div {
style: full_width_style,
Card {
CardHeader {
CardTitle { "Navigation patterns" }
@@ -423,7 +442,10 @@ fn UiShowcase() -> Element {
}
}
}
}
div {
style: full_width_style,
Card {
CardHeader {
CardTitle { "Structural navigation" }
@@ -531,7 +553,10 @@ fn UiShowcase() -> Element {
}
}
}
}
div {
style: single_column_style,
Card {
CardHeader {
CardTitle { "Selection controls" }
@@ -578,7 +603,10 @@ fn UiShowcase() -> Element {
}
}
}
}
div {
style: single_column_style,
Card {
CardHeader {
CardTitle { "Command & context" }
@@ -613,7 +641,10 @@ fn UiShowcase() -> Element {
}
}
}
}
div {
style: single_column_style,
Card {
CardHeader {
CardTitle { "Tabs & panels" }
@@ -652,7 +683,10 @@ fn UiShowcase() -> Element {
}
}
}
}
div {
style: full_width_style,
Card {
CardHeader {
CardTitle { "Dialogs & overlays" }
@@ -702,7 +736,10 @@ fn UiShowcase() -> Element {
}
}
}
}
div {
style: single_column_style,
Card {
CardHeader {
CardTitle { "Alerts & extras" }
@@ -756,6 +793,8 @@ fn UiShowcase() -> Element {
}
}
}
}
}
Dialog {
open: dialog_signal.clone(),
title: Some("Create project".to_string()),