💄 Aplica BEM a estilos de bienvenida y componente

This commit is contained in:
Manuel Cillero 2025-08-25 23:30:53 +02:00
parent c2a8a58057
commit d43b699a32
3 changed files with 88 additions and 79 deletions

View file

@ -1,10 +1,13 @@
use crate::prelude::*;
/// Muestra un texto con información de copyright, típica en un pie de página.
// Enlace a la página oficial de PageTop.
const LINK: &str = "<a href=\"https://pagetop.cillero.es\" rel=\"noreferrer\">PageTop</a>";
/// Componente que renderiza la sección 'Powered by' (*Funciona con*) típica del pie de página.
///
/// Por defecto, usando [`default()`](Self::default) sólo se muestra un
/// reconocimiento a PageTop. Sin embargo, se puede usar [`new()`](Self::new)
/// para crear una instancia con un texto de copyright predeterminado.
/// Por defecto, usando [`default()`](Self::default) sólo se muestra un reconocimiento a PageTop.
/// Sin embargo, se puede usar [`new()`](Self::new) para crear una instancia con un texto de
/// copyright predeterminado.
#[derive(AutoDefault)]
pub struct PoweredBy {
copyright: Option<String>,
@ -13,8 +16,8 @@ pub struct PoweredBy {
impl Component for PoweredBy {
/// Crea una nueva instancia de `PoweredBy`.
///
/// El copyright se genera automáticamente con el año actual y el nombre de
/// la aplicación configurada en [`global::SETTINGS`].
/// El copyright se genera automáticamente con el año actual y el nombre de la aplicación
/// configurada en [`global::SETTINGS`].
fn new() -> Self {
let year = Utc::now().format("%Y").to_string();
let c = join!(year, " © ", global::SETTINGS.app.name);
@ -22,19 +25,14 @@ impl Component for PoweredBy {
}
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
let poweredby_pagetop = L10n::l("poweredby_pagetop")
.with_arg(
"pagetop_link",
"<a href=\"https://crates.io/crates/pagetop\">PageTop</a>",
)
.to_markup(cx);
PrepareMarkup::With(html! {
div id=[self.id()] class="poweredby" {
@if let Some(c) = self.copyright() {
span class="poweredby__copyright" { (c) "." } " "
}
span class="poweredby__pagetop" { (poweredby_pagetop) }
span class="poweredby__pagetop" {
(L10n::l("poweredby_pagetop").with_arg("pagetop_link", LINK).to_markup(cx))
}
}
})
}

View file

@ -29,19 +29,19 @@ async fn homepage(request: HttpRequest) -> ResultPage<Markup, ErrorPage> {
.with_theme("Basic")
.with_assets(AssetsOp::AddStyleSheet(StyleSheet::from("/css/welcome.css")))
.with_body_classes(ClassesOp::Add, "welcome")
.with_component(Html::with(move |cx| html! {
div id="main-header" {
header {
.with_component_in("header", Html::with(move |cx| html! {
div class="welcome-header" {
header class="welcome-header__body" {
h1
id="header-title"
class="welcome-header__title"
aria-label=(L10n::l("welcome_aria").with_arg("app", app).to_markup(cx))
{
span { (L10n::l("welcome_title").to_markup(cx)) }
(L10n::l("welcome_intro").with_arg("app", app).to_markup(cx))
}
}
aside id="header-image" aria-hidden="true" {
div id="monster" {
aside class="welcome-header__image" aria-hidden="true" {
div class="welcome-header__monster" {
picture {
source
type="image/avif"
@ -61,25 +61,27 @@ async fn homepage(request: HttpRequest) -> ResultPage<Markup, ErrorPage> {
}
}))
.with_component(Html::with(move |cx| html! {
main id="main-content" {
section class="content-body" {
div id="poweredby-button" {
main class="welcome-content" {
section class="welcome-content__body" {
div class="welcome-poweredby" {
a
id="poweredby-link"
class="welcome-poweredby__link"
href="https://pagetop.cillero.es"
target="_blank"
rel="noreferrer"
{
span {} span {} span {}
div id="poweredby-text" { (L10n::l("welcome_powered").to_markup(cx)) }
div class="welcome-poweredby__text" {
(L10n::l("welcome_powered").to_markup(cx))
}
}
}
div class="content-text" {
div class="welcome-text" {
p { (L10n::l("welcome_text1").to_markup(cx)) }
p { (L10n::l("welcome_text2").to_markup(cx)) }
div class="subcontent" {
h1 { span { (L10n::l("welcome_about").to_markup(cx)) } }
div class="welcome-text__block" {
h2 { span { (L10n::l("welcome_about").to_markup(cx)) } }
p { (L10n::l("welcome_pagetop").to_markup(cx)) }
p { (L10n::l("welcome_issues1").to_markup(cx)) }
p { (L10n::l("welcome_issues2").with_arg("app", app).to_markup(cx)) }