diff --git a/packages/pagetop-bootsier/Cargo.toml b/packages/pagetop-bootsier/Cargo.toml index 5f1aa3b1..68cf59b0 100644 --- a/packages/pagetop-bootsier/Cargo.toml +++ b/packages/pagetop-bootsier/Cargo.toml @@ -17,6 +17,7 @@ license = { workspace = true } [dependencies] pagetop.workspace = true +serde.workspace = true static-files.workspace = true [build-dependencies] diff --git a/packages/pagetop-bootsier/src/bs.rs b/packages/pagetop-bootsier/src/bs.rs index 3933b8ff..f3108edf 100644 --- a/packages/pagetop-bootsier/src/bs.rs +++ b/packages/pagetop-bootsier/src/bs.rs @@ -11,22 +11,27 @@ pub mod grid; #[rustfmt::skip] #[derive(AutoDefault)] pub enum BreakPoint { - #[default] - None, // < 576px (Dispositivos muy pequeños: teléfonos en modo vertical, menos de 576px) - SM, // >= 576px (Dispositivos pequeños: teléfonos en modo horizontal, 576px o más) - MD, // >= 768px (Dispositivos medianos: tabletas, 768px o más) - LG, // >= 992px (Dispositivos grandes: puestos de escritorio, 992px o más) - XL, // >= 1200px (Dispositivos muy grandes: puestos de escritorio grandes, 1200px o más) - XXL, // >= 1400px (Dispositivos extragrandes: puestos de escritorio más grandes, 1400px o más) - Fluid, // Siempre aplica el 100% del dispositivo + #[default] // DIMENSIONES - DISPOSITIVOS --------------------------------------------------- + None, // < 576px Muy pequeños: teléfonos en modo vertical, menos de 576px + SM, // >= 576px Pequeños: teléfonos en modo horizontal, 576px o más + MD, // >= 768px Medianos: tabletas, 768px o más + LG, // >= 992px Grandes: puestos de escritorio, 992px o más + XL, // >= 1200px Muy grandes: puestos de escritorio grandes, 1200px o más + XXL, // >= 1400px Extragrandes: puestos de escritorio más grandes, 1400px o más + // ------------------------------------------------------------------------------ + Fluid, // Para Container, aplica el 100% del dispositivo siempre + FluidMax(unit::Value) // Para Container, aplica el 100% del dispositivo hasta un ancho máximo } impl BreakPoint { /// Indica si se trata de un punto de interrupción de Bootstrap. /// Devuelve `true` si el valor es SM, MD, LG, XL o XXL. - /// Devuelve `false` si es None o Fluid. + /// Devuelve `false` si es None, Fluid o FluidMax. pub fn is_breakpoint(&self) -> bool { - !matches!(self, BreakPoint::None | BreakPoint::Fluid) + !matches!( + self, + BreakPoint::None | BreakPoint::Fluid | BreakPoint::FluidMax(_) + ) } } @@ -35,13 +40,14 @@ impl BreakPoint { impl fmt::Display for BreakPoint { fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result { match self { - BreakPoint::None => write!(f, ""), - BreakPoint::SM => write!(f, "sm"), - BreakPoint::MD => write!(f, "md"), - BreakPoint::LG => write!(f, "lg"), - BreakPoint::XL => write!(f, "xl"), - BreakPoint::XXL => write!(f, "xxl"), - BreakPoint::Fluid => write!(f, "fluid"), + BreakPoint::None => write!(f, ""), + BreakPoint::SM => write!(f, "sm"), + BreakPoint::MD => write!(f, "md"), + BreakPoint::LG => write!(f, "lg"), + BreakPoint::XL => write!(f, "xl"), + BreakPoint::XXL => write!(f, "xxl"), + BreakPoint::Fluid => write!(f, "fluid"), + BreakPoint::FluidMax(_) => write!(f, "fluid"), } } } diff --git a/packages/pagetop-bootsier/src/bs/container.rs b/packages/pagetop-bootsier/src/bs/container.rs index 28bf14d6..e645c810 100644 --- a/packages/pagetop-bootsier/src/bs/container.rs +++ b/packages/pagetop-bootsier/src/bs/container.rs @@ -45,34 +45,39 @@ impl ComponentTrait for Container { if output.is_empty() { return PrepareMarkup::None; } + let style = if let BreakPoint::FluidMax(max_width) = self.breakpoint() { + Some(join_string!("max-width: ", max_width.to_string(), ";")) + } else { + None + }; match self.container_type() { ContainerType::Default => PrepareMarkup::With(html! { - div id=[self.id()] class=[self.classes().get()] { + div id=[self.id()] class=[self.classes().get()] style=[style] { (output) } }), ContainerType::Main => PrepareMarkup::With(html! { - main id=[self.id()] class=[self.classes().get()] { + main id=[self.id()] class=[self.classes().get()] style=[style] { (output) } }), ContainerType::Header => PrepareMarkup::With(html! { - header id=[self.id()] class=[self.classes().get()] { + header id=[self.id()] class=[self.classes().get()] style=[style] { (output) } }), ContainerType::Footer => PrepareMarkup::With(html! { - footer id=[self.id()] class=[self.classes().get()] { + footer id=[self.id()] class=[self.classes().get()] style=[style] { (output) } }), ContainerType::Section => PrepareMarkup::With(html! { - section id=[self.id()] class=[self.classes().get()] { + section id=[self.id()] class=[self.classes().get()] style=[style] { (output) } }), ContainerType::Article => PrepareMarkup::With(html! { - article id=[self.id()] class=[self.classes().get()] { + article id=[self.id()] class=[self.classes().get()] style=[style] { (output) } }), diff --git a/packages/pagetop-bootsier/src/config.rs b/packages/pagetop-bootsier/src/config.rs new file mode 100644 index 00000000..849c8a6c --- /dev/null +++ b/packages/pagetop-bootsier/src/config.rs @@ -0,0 +1,43 @@ +//! Opciones de configuración. +//! +//! Ejemplo: +//! +//! ```toml +//! [bootsier] +//! max_width = "90rem" +//! ``` +//! +//! Uso: +//! +//! ```rust#ignore +//! use pagetop_bootsier::config; +//! +//! assert_eq!(config::SETTINGS.bootsier.max_width, unit::Value::Rem(90)); +//! ``` +//! +//! Consulta [`pagetop::config`] para aprender cómo `PageTop` lee los archivos de opciones y aplica +//! los valores de configuración. + +use pagetop::prelude::*; + +use serde::Deserialize; + +include_config!(SETTINGS: Settings => [ + // [bootsier] + "bootsier.max_width" => "1440px", +]); + +#[derive(Debug, Deserialize)] +/// Opciones de configuración para la sección [`[bootsier]`](Bootsier) (ver [`SETTINGS`]). +pub struct Settings { + pub bootsier: Bootsier, +} +#[derive(Debug, Deserialize)] +/// Sección `[bootsier]` de la configuración. +/// +/// Ver [`Settings`]. +pub struct Bootsier { + /// Ancho máximo predeterminado para la página, por ejemplo "100%" o "90rem". + /// Valor por defecto: *"1440px"* + pub max_width: unit::Value, +} diff --git a/packages/pagetop-bootsier/src/lib.rs b/packages/pagetop-bootsier/src/lib.rs index b3086f61..9036c938 100644 --- a/packages/pagetop-bootsier/src/lib.rs +++ b/packages/pagetop-bootsier/src/lib.rs @@ -11,6 +11,8 @@ const BOOTSTRAP_VERSION: &str = "5.3.3"; // Versión de la librería Bootstrap. // API ********************************************************************************************* +pub mod config; + pub mod bs; pub struct Bootsier; @@ -22,12 +24,12 @@ impl PackageTrait for Bootsier { fn actions(&self) -> Vec { actions![ - // action::theme::BeforePrepare::::new(&Self, before_prepare_icon), - // action::theme::BeforePrepare::