Manuel Cillero
0b8f3f3000
- `Breakpoint` gana variante `Xxxl` y métodos `name()`/`min_width()`/ `resolved()`, para consultarse contra el tema activo. - `Theme::breakpoint_entry()` sustituye a `breakpoint_min_width()`: devuelve un `BreakpointEntry` con nombre y ancho mínimo. - Nuevo `Responsive<T>`, valor en cascada mobile-first por punto de corte. - Ejemplo `examples/intro-responsive.rs` con los patrones de uso.
261 lines
9.1 KiB
Rust
261 lines
9.1 KiB
Rust
use pagetop::prelude::*;
|
|
|
|
include_locales!(LOC from "examples/locale");
|
|
|
|
struct IntroResponsive;
|
|
|
|
#[async_trait]
|
|
impl Extension for IntroResponsive {
|
|
fn dependencies(&self) -> Vec<ExtensionRef> {
|
|
vec![&pagetop_bootsier::Bootsier]
|
|
}
|
|
|
|
fn configure_router(&self, router: Router) -> Router {
|
|
router.route("/", web::get(intro_responsive))
|
|
}
|
|
}
|
|
|
|
async fn intro_responsive(request: HttpRequest) -> Result<Markup, ErrorPage> {
|
|
Page::new(request)
|
|
.with_assets(AssetsOp::AddStyleSheet(demo_styles()))
|
|
.with_child(
|
|
Intro::default()
|
|
.with_opening(IntroOpening::Custom)
|
|
.with_title(Lc::n("PageTop"))
|
|
.with_slogan(Lc::t("responsive_slogan", &LOC))
|
|
.with_button(None::<(Lc, Route)>)
|
|
.with_child(Html::with(|cx| {
|
|
html! {
|
|
p class="intro-text-lead" {
|
|
(Lc::t("responsive_note", &LOC).using(cx))
|
|
}
|
|
}
|
|
}))
|
|
.with_child(activation_block())
|
|
.with_child(direction_block())
|
|
.with_child(grid_block())
|
|
.with_child(justify_align_block())
|
|
.with_child(order_block())
|
|
.with_child(gap_grow_block()),
|
|
)
|
|
.render()
|
|
.await
|
|
}
|
|
|
|
fn activation_block() -> Block {
|
|
Block::new()
|
|
.with_title(Lc::t("responsive_block_title_activation", &LOC))
|
|
.with_child(caption(
|
|
Lc::t("responsive_title_activation", &LOC),
|
|
Lc::n("Flex::at(Breakpoint::Md)"),
|
|
))
|
|
.with_child(
|
|
demo_row(Flex::at(Breakpoint::Md).with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))))
|
|
.with_child(demo_box(Lc::t("responsive_box_nav_home", &LOC)))
|
|
.with_child(demo_box(Lc::t("responsive_box_nav_products", &LOC)))
|
|
.with_child(demo_box(Lc::t("responsive_box_nav_about", &LOC)))
|
|
.with_child(demo_box(Lc::t("responsive_box_nav_contact", &LOC))),
|
|
)
|
|
}
|
|
|
|
fn direction_block() -> Block {
|
|
Block::new()
|
|
.with_title(Lc::t("responsive_block_title_direction", &LOC))
|
|
.with_child(caption(
|
|
Lc::t("responsive_title_direction", &LOC),
|
|
Lc::n(concat!(
|
|
"Flex::new()",
|
|
".with_direction(Direction::Column)",
|
|
".with_direction_at(Breakpoint::Md, Direction::RowReverse)",
|
|
)),
|
|
))
|
|
.with_child(
|
|
demo_row(
|
|
Flex::new()
|
|
.with_direction(flex::Direction::Column)
|
|
.with_direction_at(Breakpoint::Md, flex::Direction::RowReverse)
|
|
.with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))),
|
|
)
|
|
.with_child(sized_box(
|
|
Lc::t("responsive_box_image", &LOC),
|
|
"2.5rem 1rem",
|
|
))
|
|
.with_child(demo_box(Lc::t("responsive_box_text", &LOC))),
|
|
)
|
|
}
|
|
|
|
fn grid_block() -> Block {
|
|
let mut row = demo_row(Flex::new().with_wrap(flex::Behavior::Wrap));
|
|
for n in 1..=6 {
|
|
row = row.with_child(
|
|
Container::new()
|
|
.with_prop(PropsOp::add_style("padding", "0.25rem"))
|
|
.with_prop(PropsOp::flex_item(
|
|
FlexItem::new()
|
|
.with_size(flex::ItemSize::Percent100)
|
|
.with_size_at(Breakpoint::Sm, flex::ItemSize::Percent50)
|
|
.with_size_at(Breakpoint::Md, flex::ItemSize::Percent33),
|
|
))
|
|
.with_child(demo_box(card_label(n))),
|
|
);
|
|
}
|
|
Block::new()
|
|
.with_title(Lc::t("responsive_block_title_grid", &LOC))
|
|
.with_child(caption(
|
|
Lc::t("responsive_title_grid", &LOC),
|
|
Lc::n(concat!(
|
|
"FlexItem::new()",
|
|
".with_size(ItemSize::Percent100)",
|
|
".with_size_at(Breakpoint::Sm, ItemSize::Percent50)",
|
|
".with_size_at(Breakpoint::Md, ItemSize::Percent33)",
|
|
)),
|
|
))
|
|
.with_child(row)
|
|
}
|
|
|
|
fn justify_align_block() -> Block {
|
|
Block::new()
|
|
.with_title(Lc::t("responsive_block_title_justify_align", &LOC))
|
|
.with_child(caption(
|
|
Lc::t("responsive_title_justify_align", &LOC),
|
|
Lc::n(concat!(
|
|
"Flex::new()",
|
|
".with_justify(ContentJustify::Center)",
|
|
".with_justify_at(Breakpoint::Md, ContentJustify::SpaceBetween)",
|
|
".with_align(Align::Center)",
|
|
)),
|
|
))
|
|
.with_child(
|
|
demo_row(
|
|
Flex::new()
|
|
.with_justify(flex::ContentJustify::Center)
|
|
.with_justify_at(Breakpoint::Md, flex::ContentJustify::SpaceBetween)
|
|
.with_align(flex::Align::Center)
|
|
.with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))),
|
|
)
|
|
.with_child(demo_box(Lc::t("responsive_box_logo", &LOC)))
|
|
.with_child(demo_box(Lc::t("responsive_box_menu", &LOC))),
|
|
)
|
|
}
|
|
|
|
fn order_block() -> Block {
|
|
Block::new()
|
|
.with_title(Lc::t("responsive_block_title_order", &LOC))
|
|
.with_child(caption(
|
|
Lc::t("responsive_title_order", &LOC),
|
|
Lc::n(concat!(
|
|
"Flex::at(Breakpoint::Lg)",
|
|
" + FlexItem::new().with_order_at(Breakpoint::Lg, ItemOrder::First)",
|
|
)),
|
|
))
|
|
.with_child(
|
|
demo_row(Flex::at(Breakpoint::Lg).with_gap(flex::Gap::Both(UnitValue::RelRem(0.5))))
|
|
.with_child(demo_box(Lc::t("responsive_box_content", &LOC)))
|
|
.with_child(demo_box(Lc::t("responsive_box_sidebar", &LOC)).with_prop(
|
|
PropsOp::flex_item(
|
|
FlexItem::new().with_order_at(Breakpoint::Lg, flex::ItemOrder::First),
|
|
),
|
|
)),
|
|
)
|
|
}
|
|
|
|
fn gap_grow_block() -> Block {
|
|
Block::new()
|
|
.with_title(Lc::t("responsive_block_title_gap_grow", &LOC))
|
|
.with_child(caption(
|
|
Lc::t("responsive_title_gap_grow", &LOC),
|
|
Lc::n(concat!(
|
|
"Flex::new()",
|
|
".with_gap(Gap::Both(RelRem(0.5)))",
|
|
".with_gap_at(Breakpoint::Md, Gap::Both(RelRem(1.5)))",
|
|
" + FlexItem::new().with_grow_at(Breakpoint::Md, ItemGrow::Is1)",
|
|
)),
|
|
))
|
|
.with_child(
|
|
demo_row(
|
|
Flex::new()
|
|
.with_gap(flex::Gap::Both(UnitValue::RelRem(0.5)))
|
|
.with_gap_at(Breakpoint::Md, flex::Gap::Both(UnitValue::RelRem(1.5))),
|
|
)
|
|
.with_child(demo_box(Lc::t("responsive_box_file", &LOC)))
|
|
.with_child(demo_box(Lc::t("responsive_box_edit", &LOC)))
|
|
.with_child(demo_box(Lc::t("responsive_box_search", &LOC)).with_prop(
|
|
PropsOp::flex_item(
|
|
FlexItem::new().with_grow_at(Breakpoint::Md, flex::ItemGrow::Is1),
|
|
),
|
|
)),
|
|
)
|
|
}
|
|
|
|
// **< HELPERS >************************************************************************************
|
|
|
|
// Aspecto fijo de las cajas y filas de muestra.
|
|
fn demo_styles() -> StyleSheet {
|
|
StyleSheet::inline("intro-responsive", |_| {
|
|
util::indoc!(
|
|
r#"
|
|
.flex-demo-box {
|
|
background-color: #0d6efd;
|
|
color: #fff;
|
|
min-width: 3rem;
|
|
width: auto;
|
|
max-width: none;
|
|
margin: 0;
|
|
border-radius: 0.375rem;
|
|
text-align: center;
|
|
}
|
|
.flex-demo-row {
|
|
background-color: #f1f3f5;
|
|
width: 100%;
|
|
max-width: none;
|
|
margin: 0 0 1.5rem;
|
|
padding: 0.75rem;
|
|
}
|
|
code {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
"#
|
|
)
|
|
.to_string()
|
|
})
|
|
}
|
|
|
|
// Caja con fondo azul y relleno vertical configurable, para mostrar diferencias de altura.
|
|
fn sized_box(label: Lc, padding: &'static str) -> Container {
|
|
Container::new()
|
|
.with_prop(PropsOp::add_classes("flex-demo-box"))
|
|
.with_prop(PropsOp::add_style("padding", padding))
|
|
.with_child(Html::with(move |cx| html! { (label.using(cx)) }))
|
|
}
|
|
|
|
// Caja con el relleno vertical estandar del resto de ejemplos.
|
|
fn demo_box(label: Lc) -> Container {
|
|
sized_box(label, "0.5rem 1rem")
|
|
}
|
|
|
|
// Etiqueta "Tarjeta N" para las cajas de la rejilla responsive.
|
|
fn card_label(n: usize) -> Lc {
|
|
Lc::t("responsive_box_card", &LOC).with_arg("n", n.to_string())
|
|
}
|
|
|
|
// Fila de demostracion con fondo gris para visualizar los limites del propio contenedor flex.
|
|
fn demo_row(flex: Flex) -> Container {
|
|
Container::new()
|
|
.with_prop(PropsOp::add_classes("flex-demo-row"))
|
|
.with_flex(flex)
|
|
}
|
|
|
|
// Titulo y fragmento de codigo que introducen cada demostracion.
|
|
fn caption(title: Lc, code: Lc) -> Html {
|
|
Html::with(move |cx| {
|
|
html! {
|
|
h3 { (title.using(cx)) }
|
|
p { code { (code.using(cx)) } }
|
|
}
|
|
})
|
|
}
|
|
|
|
#[pagetop::main]
|
|
async fn main() -> std::io::Result<()> {
|
|
Application::prepare(&IntroResponsive).await.run().await
|
|
}
|