💄 Aplica BEM a estilos de bienvenida y componente
This commit is contained in:
parent
c2a8a58057
commit
d43b699a32
3 changed files with 88 additions and 79 deletions
|
@ -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))
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
@ -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)) }
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue