♻️ Refactor for latest code improvements

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.unwrap_or_default())
-                            #header class="region" { (header.unwrap()) }
+                        (nav_branding.unwrap_or_default())
-                        }
+                        (nav_main.unwrap_or_default())
-                        @if nav_branding.is_some() {
+                        (nav_additional.unwrap_or_default())
-                            #nav_branding class="region" { (nav_branding.unwrap()) }
+                        (breadcrumb.unwrap_or_default())
-                        }
+                        (content.unwrap_or_default())
-                        @if nav_main.is_some() {
+                        (sidebar_first.unwrap_or_default())
-                            #nav_main class="region" { (nav_main.unwrap()) }
+                        (sidebar_second.unwrap_or_default())
-                        }
+                        (footer.unwrap_or_default())
-                        @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()) }
-                        }
                     }
                 }
             }

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::<Anchor>(component);
                 a.alter_classes(
                     ClassesOp::SetDefault,
@@ -48,7 +48,7 @@ impl ThemeTrait for Bulmix {
                     },
                 );
             }
-            COMPONENT_HEADING => {
+            COMPONENT_BASE_HEADING => {
                 let h = component_as_mut::<Heading>(component);
                 h.alter_classes(
                     ClassesOp::SetDefault,
@@ -63,7 +63,7 @@ impl ThemeTrait for Bulmix {
                     },
                 );
             }
-            COMPONENT_PARAGRAPH => {
+            COMPONENT_BASE_PARAGRAPH => {
                 let p = component_as_mut::<Paragraph>(component);
                 p.alter_classes(
                     ClassesOp::SetDefault,
@@ -87,7 +87,7 @@ impl ThemeTrait for Bulmix {
         _cx: &mut Context,
     ) -> Option<Markup> {
         match component.handle() {
-            COMPONENT_ICON => {
+            COMPONENT_BASE_ICON => {
                 let icon = component_as_ref::<Icon>(component);
                 Some(html! {
                     span class="icon" {

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() {
+                div class="pt-body__wrapper" {
-                    @if let Some(content) = page.prepare_region(region) {
+                    div class="pt-body__regions" {
-                        #(region) class="region" { (content) }
+                        (header.unwrap_or_default())
+                        (pagetop.unwrap_or_default())
+                        (content.unwrap_or_default())
+                        (sidebar.unwrap_or_default())
+                        (footer.unwrap_or_default())
                     }
                 }
             }

pagetop/src/locale/en-US/base.ftl

@@ -1,4 +1,4 @@
-# SiteBranding component.
+# Branding component.
 site_home = Home
 
 # PoweredBy component.

pagetop/src/locale/es-ES/base.ftl

@@ -1,4 +1,4 @@
-# SiteBranding component.
+# Branding component.
 site_home = Inicio
 
 # PoweredBy component.

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)
+                }
+            })
         }
     }
 }

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;
+}

pagetop/static/base/css/looks.css

@@ -5,7 +5,7 @@
 	height: auto;
 }
 
-/* SiteBranding component */
+/* Branding component */
 
 .pt-branding__wrapper {
 	display: flex;

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;

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;
+}