From e1bc4b39f86b1061fbb356af1af716a17dcba704 Mon Sep 17 00:00:00 2001 From: Manuel Cillero Date: Fri, 20 Oct 2023 00:59:43 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20for=20latest=20?= =?UTF-8?q?code=20improvements?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pagetop-bootsier/src/lib.rs | 36 +++++--------------- pagetop-bulmix/src/lib.rs | 8 ++--- pagetop/src/core/theme/definition.rs | 15 +++++++-- pagetop/src/locale/en-US/base.ftl | 2 +- pagetop/src/locale/es-ES/base.ftl | 2 +- pagetop/src/response/page.rs | 8 +++-- pagetop/static/base/css/components.css | 46 ++++++++++++++++++++++++++ pagetop/static/base/css/looks.css | 2 +- pagetop/static/base/css/root.css | 2 +- pagetop/static/base/css/styles.css | 5 +++ 10 files changed, 86 insertions(+), 40 deletions(-) create mode 100644 pagetop/static/base/css/components.css diff --git a/pagetop-bootsier/src/lib.rs b/pagetop-bootsier/src/lib.rs index de98e6cb..860fb307 100644 --- a/pagetop-bootsier/src/lib.rs +++ b/pagetop-bootsier/src/lib.rs @@ -65,33 +65,15 @@ impl ThemeTrait for Bootsier { let footer = page.prepare_region("footer"); html! { body class=[page.body_classes().get()] { - @if header.is_some() { - #header class="region" { (header.unwrap()) } - } - @if nav_branding.is_some() { - #nav_branding class="region" { (nav_branding.unwrap()) } - } - @if nav_main.is_some() { - #nav_main class="region" { (nav_main.unwrap()) } - } - @if nav_additional.is_some() { - #nav_additional class="region" { (nav_additional.unwrap()) } - } - @if breadcrumb.is_some() { - #breadcrumb class="region" { (breadcrumb.unwrap()) } - } - @if content.is_some() { - #content class="region" { (content.unwrap()) } - } - @if sidebar_first.is_some() { - #sidebar_first class="region" { (sidebar_first.unwrap()) } - } - @if sidebar_second.is_some() { - #sidebar_second class="region" { (sidebar_second.unwrap()) } - } - @if footer.is_some() { - #footer class="region" { (footer.unwrap()) } - } + (header.unwrap_or_default()) + (nav_branding.unwrap_or_default()) + (nav_main.unwrap_or_default()) + (nav_additional.unwrap_or_default()) + (breadcrumb.unwrap_or_default()) + (content.unwrap_or_default()) + (sidebar_first.unwrap_or_default()) + (sidebar_second.unwrap_or_default()) + (footer.unwrap_or_default()) } } } diff --git a/pagetop-bulmix/src/lib.rs b/pagetop-bulmix/src/lib.rs index 65c5f7a9..12b33a76 100644 --- a/pagetop-bulmix/src/lib.rs +++ b/pagetop-bulmix/src/lib.rs @@ -38,7 +38,7 @@ impl ThemeTrait for Bulmix { _cx: &mut Context, ) { match component.handle() { - COMPONENT_ANCHOR => { + COMPONENT_BASE_ANCHOR => { let a = component_as_mut::(component); a.alter_classes( ClassesOp::SetDefault, @@ -48,7 +48,7 @@ impl ThemeTrait for Bulmix { }, ); } - COMPONENT_HEADING => { + COMPONENT_BASE_HEADING => { let h = component_as_mut::(component); h.alter_classes( ClassesOp::SetDefault, @@ -63,7 +63,7 @@ impl ThemeTrait for Bulmix { }, ); } - COMPONENT_PARAGRAPH => { + COMPONENT_BASE_PARAGRAPH => { let p = component_as_mut::(component); p.alter_classes( ClassesOp::SetDefault, @@ -87,7 +87,7 @@ impl ThemeTrait for Bulmix { _cx: &mut Context, ) -> Option { match component.handle() { - COMPONENT_ICON => { + COMPONENT_BASE_ICON => { let icon = component_as_ref::(component); Some(html! { span class="icon" { diff --git a/pagetop/src/core/theme/definition.rs b/pagetop/src/core/theme/definition.rs index 4fbd3744..20ac8c33 100644 --- a/pagetop/src/core/theme/definition.rs +++ b/pagetop/src/core/theme/definition.rs @@ -24,11 +24,20 @@ pub trait ThemeTrait: ModuleTrait + Send + Sync { fn before_prepare_body(&self, page: &mut Page) {} fn prepare_body(&self, page: &mut Page) -> Markup { + let header = page.prepare_region("header"); + let pagetop = page.prepare_region("pagetop"); + let content = page.prepare_region("content"); + let sidebar = page.prepare_region("sidebar"); + let footer = page.prepare_region("footer"); html! { body class=[page.body_classes().get()] { - @for (region, _) in self.regions().iter() { - @if let Some(content) = page.prepare_region(region) { - #(region) class="region" { (content) } + div class="pt-body__wrapper" { + div class="pt-body__regions" { + (header.unwrap_or_default()) + (pagetop.unwrap_or_default()) + (content.unwrap_or_default()) + (sidebar.unwrap_or_default()) + (footer.unwrap_or_default()) } } } diff --git a/pagetop/src/locale/en-US/base.ftl b/pagetop/src/locale/en-US/base.ftl index 07c1d040..200ae5d1 100644 --- a/pagetop/src/locale/en-US/base.ftl +++ b/pagetop/src/locale/en-US/base.ftl @@ -1,4 +1,4 @@ -# SiteBranding component. +# Branding component. site_home = Home # PoweredBy component. diff --git a/pagetop/src/locale/es-ES/base.ftl b/pagetop/src/locale/es-ES/base.ftl index 3e6f4eec..ee6d2544 100644 --- a/pagetop/src/locale/es-ES/base.ftl +++ b/pagetop/src/locale/es-ES/base.ftl @@ -1,4 +1,4 @@ -# SiteBranding component. +# Branding component. site_home = Inicio # PoweredBy component. diff --git a/pagetop/src/response/page.rs b/pagetop/src/response/page.rs index e40ad2a7..7398d9f1 100644 --- a/pagetop/src/response/page.rs +++ b/pagetop/src/response/page.rs @@ -3,7 +3,7 @@ use crate::base::component::L10n; use crate::core::component::{ArcComponent, ComponentTrait, TypedComponent}; use crate::core::component::{Context, ContextOp}; use crate::core::theme::ComponentsRegions; -use crate::html::{html, ClassesOp, Favicon, Markup, OptionClasses, DOCTYPE}; +use crate::html::{html, ClassesOp, Favicon, Markup, OptionClasses, OptionId, DOCTYPE}; use crate::response::fatal_error::FatalError; use crate::{fn_builder, service}; @@ -177,7 +177,11 @@ impl Page { if render.is_empty() { None } else { - Some(render) + Some(html! { + div id=[OptionId::with(region).get()] class="region" { + (render) + } + }) } } } diff --git a/pagetop/static/base/css/components.css b/pagetop/static/base/css/components.css new file mode 100644 index 00000000..57f93007 --- /dev/null +++ b/pagetop/static/base/css/components.css @@ -0,0 +1,46 @@ +/* Image component */ + +.pt-img__fluid { + max-width: 100%; + height: auto; +} + +/* Branding component */ + +.pt-branding__wrapper { + display: flex; + align-items: flex-end; + column-gap: var(--pt-gap-0-75); +} +.pt-branding__name { + letter-spacing: 0.02em; + font-size: var(--pt-font-size-xl); +} +.pt-branding__slogan { + font-size: var(--pt-font-size-l); +} + +/* SM - Applies <= 568px */ +@media (max-width: 35.5em) { + .pt-branding__logo { + display: none; + } +} +/* LG - Applies <= 992px */ +@media (max-width: 62em) { + .pt-branding__slogan { + font-size: var(--pt-font-size-l); + } +} + +/* PoweredBy component */ + +#pt-powered-by { + text-align: center; +} +#pt-powered-by .pt-pagetop__logo img, +#pt-powered-by .pt-pagetop__logo svg { + margin-left: .275em; + height: 1.275em; + vertical-align: middle; +} diff --git a/pagetop/static/base/css/looks.css b/pagetop/static/base/css/looks.css index c3c077d7..57f93007 100644 --- a/pagetop/static/base/css/looks.css +++ b/pagetop/static/base/css/looks.css @@ -5,7 +5,7 @@ height: auto; } -/* SiteBranding component */ +/* Branding component */ .pt-branding__wrapper { display: flex; diff --git a/pagetop/static/base/css/root.css b/pagetop/static/base/css/root.css index c838590b..6375ccf8 100644 --- a/pagetop/static/base/css/root.css +++ b/pagetop/static/base/css/root.css @@ -14,6 +14,7 @@ --pt-line-height-base: 1.5; --pt-color-bg: #fff; --pt-color: #212529; + --pt-max-width: 80rem; /* --pt-color-rgb: 33,37,41; --pt-main--bg-rgb: 255,255,255; @@ -21,7 +22,6 @@ --line-height-base: 1.6875rem; --line-height-s: 1.125rem; - --max-width: 84.375rem; --max-bg-color: 98.125rem; */ --pt-gap: 1.125rem; diff --git a/pagetop/static/base/css/styles.css b/pagetop/static/base/css/styles.css index 403362de..234b8b3c 100644 --- a/pagetop/static/base/css/styles.css +++ b/pagetop/static/base/css/styles.css @@ -9,3 +9,8 @@ body { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } + +.pt-body__wrapper { + max-width: var(--pt-max-width); + margin: 0 auto; +}