♻️ Major refactor for improved base asset use

pagetop-admin/Cargo.toml

@@ -16,4 +16,3 @@ license = "Apache-2.0 OR MIT"
 
 [dependencies]
 pagetop = { version = "0.0", path = "../pagetop" }
-pagetop-megamenu = { version = "0.0", path = "../pagetop-megamenu" }

pagetop-admin/src/lib.rs

@@ -21,13 +21,6 @@ impl ModuleTrait for Admin {
         L10n::t("module_description", &LOCALES_ADMIN)
     }
 
-    #[rustfmt::skip]
-    fn dependencies(&self) -> Vec<ModuleRef> {
-        vec![
-            &pagetop_megamenu::MegaMenu,
-        ]
-    }
-
     fn actions(&self) -> Vec<Action> {
         actions![action::page::BeforePrepareBody::with(before_prepare_body)]
     }

pagetop-admin/src/summary.rs

@@ -1,65 +1,167 @@
 use crate::LOCALES_ADMIN;
 
 use pagetop::prelude::*;
-use pagetop_megamenu::component::{MegaItem, MegaMenu};
 
 pub async fn summary(request: service::HttpRequest) -> ResultPage<Markup, FatalError> {
-    let top_menu = MegaMenu::new()
+    let top_menu = Menu::new()
-        .with_item(MegaItem::label(L10n::t("module_name", &LOCALES_ADMIN)))
+        .with_item(menu::Item::label(L10n::t("module_name", &LOCALES_ADMIN)))
-        .with_item(MegaItem::link(L10n::n("Opción 2"), |_| {
+        .with_item(menu::Item::label(L10n::n("Ejemplo \"Label\"")))
+        .with_item(menu::Item::link(L10n::n("Ejemplo \"Link\""), |_| {
             "https://www.google.es"
         }))
-        .with_item(MegaItem::link_blank(L10n::n("Opción 3"), |_| {
+        .with_item(menu::Item::link_blank(
-            "https://www.google.es"
+            L10n::n("Ejemplo \"LinkBlank\""),
-        }))
+            |_| "https://www.google.es",
-        .with_item(MegaItem::submenu(
-            L10n::n("Submenú 1"),
-            MegaMenu::new()
-                .with_item(MegaItem::label(L10n::n("Opción 1")))
-                .with_item(MegaItem::label(L10n::n("Opción 2"))),
         ))
-        .with_item(MegaItem::separator())
+        .with_item(menu::Item::submenu(
-        .with_item(MegaItem::submenu(
+            L10n::n("Ejemplo Submenú"),
-            L10n::n("Submenú 2"),
+            menu::Submenu::new()
-            MegaMenu::new()
+                .with_title(L10n::n("Título submenú"))
-                .with_item(MegaItem::label(L10n::n("Opción 1")))
+                .with_item(menu::Item::link(L10n::n("Opción \"Link\""), |_| {
-                .with_item(MegaItem::label(L10n::n("Opción 2"))),
+                    "https://www.google.es"
+                }))
+                .with_item(menu::Item::link_blank(
+                    L10n::n("Opción \"LinkBlank\""),
+                    |_| "https://www.google.es",
+                ))
+                .with_item(menu::Item::submenu(
+                    L10n::n("Otro submenú con un texto muy, pero que muy largo"),
+                    menu::Submenu::new()
+                        .with_item(menu::Item::label(L10n::n("Opción \"Label\"")))
+                        .with_item(menu::Item::link(L10n::n("Opción \"Link\""), |_| {
+                            "https://www.google.es"
+                        }))
+                        .with_item(menu::Item::link_blank(
+                            L10n::n("Opción \"LinkBlank\""),
+                            |_| "https://www.google.es",
+                        ))
+                        .with_item(menu::Item::label(L10n::n("Opción \"Label\""))),
+                ))
+                .with_item(menu::Item::label(L10n::n("Opción \"Label\""))),
         ))
-        .with_item(MegaItem::label(L10n::n("Opción 4")));
+        .with_item(menu::Item::megamenu(
+            L10n::n("Ejemplo Megamenú 1"),
+            menu::Megamenu::new()
+                .with_group(
+                    menu::Group::new()
+                        .with_element(menu::Element::submenu(
+                            menu::Submenu::new()
+                                .with_title(L10n::n("Título submenú"))
+                                .with_item(menu::Item::label(L10n::n("Opción \"Label\"")))
+                                .with_item(menu::Item::link(L10n::n("Opción \"Link\""), |_| {
+                                    "https://www.google.es"
+                                }))
+                                .with_item(menu::Item::link_blank(
+                                    L10n::n("Opción \"LinkBlank\""),
+                                    |_| "https://www.google.es",
+                                )),
+                        ))
+                        .with_element(menu::Element::submenu(
+                            menu::Submenu::new()
+                                .with_title(L10n::n("Título submenú"))
+                                .with_item(menu::Item::label(L10n::n("Opción \"Label\"")))
+                                .with_item(menu::Item::link(L10n::n("Opción \"Link\""), |_| {
+                                    "https://www.google.es"
+                                }))
+                                .with_item(menu::Item::link_blank(
+                                    L10n::n("Opción \"LinkBlank\""),
+                                    |_| "https://www.google.es",
+                                )),
+                        )),
+                )
+                .with_group(
+                    menu::Group::new().with_element(menu::Element::submenu(
+                        menu::Submenu::new()
+                            .with_item(menu::Item::label(L10n::n("Opción \"Label\"")))
+                            .with_item(menu::Item::link(L10n::n("Opción \"Link\""), |_| {
+                                "https://www.google.es"
+                            }))
+                            .with_item(menu::Item::link_blank(
+                                L10n::n("Opción \"LinkBlank\""),
+                                |_| "https://www.google.es",
+                            ))
+                            .with_item(menu::Item::label(L10n::n("Opción \"Label\""))),
+                    )),
+                )
+                .with_group(
+                    menu::Group::new()
+                        .with_element(menu::Element::submenu(
+                            menu::Submenu::new()
+                                .with_title(L10n::n("Título submenú"))
+                                .with_item(menu::Item::label(L10n::n("Opción \"Label\"")))
+                                .with_item(menu::Item::link(L10n::n("Opción \"Link\""), |_| {
+                                    "https://www.google.es"
+                                }))
+                                .with_item(menu::Item::link_blank(
+                                    L10n::n("Opción \"LinkBlank\""),
+                                    |_| "https://www.google.es",
+                                )),
+                        ))
+                        .with_element(menu::Element::submenu(
+                            menu::Submenu::new()
+                                .with_title(L10n::n("Título submenú"))
+                                .with_item(menu::Item::label(L10n::n("Opción \"Label\"")))
+                                .with_item(menu::Item::link(L10n::n("Opción \"Link\""), |_| {
+                                    "https://www.google.es"
+                                }))
+                                .with_item(menu::Item::link_blank(
+                                    L10n::n("Opción \"LinkBlank\""),
+                                    |_| "https://www.google.es",
+                                )),
+                        )),
+                )
+                .with_group(
+                    menu::Group::new().with_element(menu::Element::submenu(
+                        menu::Submenu::new()
+                            .with_item(menu::Item::label(L10n::n("Opción \"Label\"")))
+                            .with_item(menu::Item::link(L10n::n("Opción \"Link\""), |_| {
+                                "https://www.google.es"
+                            }))
+                            .with_item(menu::Item::link_blank(
+                                L10n::n("Opción \"LinkBlank\""),
+                                |_| "https://www.google.es",
+                            ))
+                            .with_item(menu::Item::label(L10n::n("Opción \"Label\""))),
+                    )),
+                ),
+        ));
 
-    let side_menu = MegaMenu::new()
+    let side_menu = Menu::new()
-        .with_item(MegaItem::label(L10n::n("Opción 1")))
+        .with_item(menu::Item::label(L10n::n("Opción 1")))
-        .with_item(MegaItem::link(L10n::n("Opción 2"), |_| {
+        .with_item(menu::Item::link(L10n::n("Opción 2"), |_| {
             "https://www.google.es"
         }))
-        .with_item(MegaItem::link_blank(L10n::n("Opción 3"), |_| {
+        .with_item(menu::Item::link_blank(L10n::n("Opción 3"), |_| {
             "https://www.google.es"
         }))
-        .with_item(MegaItem::submenu(
+        .with_item(menu::Item::submenu(
             L10n::n("Submenú 1"),
-            MegaMenu::new()
+            menu::Submenu::new()
-                .with_item(MegaItem::label(L10n::n("Opción 1")))
+                .with_item(menu::Item::label(L10n::n("Opción 1")))
-                .with_item(MegaItem::label(L10n::n("Opción 2"))),
+                .with_item(menu::Item::label(L10n::n("Opción 2"))),
-        ))
+        )) /*
-        .with_item(MegaItem::separator())
+        .with_item(menu::Item::separator()) */
-        .with_item(MegaItem::submenu(
+        .with_item(menu::Item::submenu(
             L10n::n("Submenú 2"),
-            MegaMenu::new()
+            menu::Submenu::new()
-                .with_item(MegaItem::label(L10n::n("Opción 1")))
+                .with_item(menu::Item::label(L10n::n("Opción 1")))
-                .with_item(MegaItem::label(L10n::n("Opción 2"))),
+                .with_item(menu::Item::label(L10n::n("Opción 2"))),
         ))
-        .with_item(MegaItem::label(L10n::n("Opción 4")));
+        .with_item(menu::Item::label(L10n::n("Opción 4")));
 
     Page::new(request)
-        .with_context(ContextOp::Theme("Bootsier"))
+        //.with_context(ContextOp::Theme("Bootsier"))
         .with_title(L10n::n("Admin"))
-        .with_in("top-menu", top_menu)
+        .with_in("top-menu", side_menu)
         .with_in(
             "content",
             flex::Container::new()
-                .with_item(flex::Item::new().with_component(side_menu))
                 .with_item(flex::Item::new().with_component(Html::with(html! {
-                    p { "Columna 2"}
+                    p { "Columna 1"}
+                })))
+                .with_item(flex::Item::new().with_component(top_menu))
+                .with_item(flex::Item::new().with_component(Html::with(html! {
+                    p { "Columna 3"}
                 }))),
         )
         .with_template("admin")

pagetop-aliner/src/lib.rs

@@ -22,7 +22,7 @@ impl ModuleTrait for Aliner {
 
 impl ThemeTrait for Aliner {
     fn before_prepare_body(&self, page: &mut Page) {
-        page.alter_favicon(Some(Favicon::new().with_icon("/theme/favicon.ico")))
+        page.alter_favicon(Some(Favicon::new().with_icon("/base/favicon.ico")))
             .alter_context(ContextOp::AddStyleSheet(
                 StyleSheet::at("/aliner/css/styles.css").with_weight(-99),
             ));

pagetop-bootsier/Cargo.toml

@@ -15,7 +15,6 @@ license = "Apache-2.0 OR MIT"
 
 [dependencies]
 pagetop = { version = "0.0", path = "../pagetop" }
-pagetop-jquery = { version = "0.0", path = "../pagetop-jquery" }
 static-files = "0.2.3"
 
 [build-dependencies]

pagetop-bootsier/src/lib.rs

@@ -1,5 +1,4 @@
 use pagetop::prelude::*;
-use pagetop_jquery::JQuery;
 
 new_handle!(THEME_BOOTSIER);
 
@@ -18,10 +17,6 @@ impl ModuleTrait for Bootsier {
         Some(&Bootsier)
     }
 
-    fn dependencies(&self) -> Vec<ModuleRef> {
-        vec![&pagetop_jquery::JQuery]
-    }
-
     fn configure_service(&self, scfg: &mut service::web::ServiceConfig) {
         static_files_service!(scfg, "/bootsier", bootsier);
     }
@@ -53,7 +48,7 @@ impl ThemeTrait for Bootsier {
                         "content"
                     ] {
                         @if let Some(content) = page.prepare_region(region) {
-                            #(region) { (content) }
+                            #(region) class="region" { (content) }
                         }
                     }
                 }
@@ -71,31 +66,31 @@ impl ThemeTrait for Bootsier {
                 html! {
                     body class=[page.body_classes().get()] {
                         @if header.is_some() {
-                            #header { (header.unwrap()) }
+                            #header class="region" { (header.unwrap()) }
                         }
                         @if nav_branding.is_some() {
-                            #nav_branding { (nav_branding.unwrap()) }
+                            #nav_branding class="region" { (nav_branding.unwrap()) }
                         }
                         @if nav_main.is_some() {
-                            #nav_main { (nav_main.unwrap()) }
+                            #nav_main class="region" { (nav_main.unwrap()) }
                         }
                         @if nav_additional.is_some() {
-                            #nav_additional { (nav_additional.unwrap()) }
+                            #nav_additional class="region" { (nav_additional.unwrap()) }
                         }
                         @if breadcrumb.is_some() {
-                            #breadcrumb { (breadcrumb.unwrap()) }
+                            #breadcrumb class="region" { (breadcrumb.unwrap()) }
                         }
                         @if content.is_some() {
-                            #content { (content.unwrap()) }
+                            #content class="region" { (content.unwrap()) }
                         }
                         @if sidebar_first.is_some() {
-                            #sidebar_first { (sidebar_first.unwrap()) }
+                            #sidebar_first class="region" { (sidebar_first.unwrap()) }
                         }
                         @if sidebar_second.is_some() {
-                            #sidebar_second { (sidebar_second.unwrap()) }
+                            #sidebar_second class="region" { (sidebar_second.unwrap()) }
                         }
                         @if footer.is_some() {
-                            #footer { (footer.unwrap()) }
+                            #footer class="region" { (footer.unwrap()) }
                         }
                     }
                 }
@@ -104,7 +99,7 @@ impl ThemeTrait for Bootsier {
     }
 
     fn after_prepare_body(&self, page: &mut Page) {
-        page.alter_favicon(Some(Favicon::new().with_icon("/theme/favicon.ico")))
+        page.alter_favicon(Some(Favicon::new().with_icon("/base/favicon.ico")))
             .alter_context(ContextOp::AddStyleSheet(
                 StyleSheet::at("/bootsier/css/bootstrap.min.css")
                     .with_version("5.1.3")
@@ -114,20 +109,8 @@ impl ThemeTrait for Bootsier {
                 JavaScript::at("/bootsier/js/bootstrap.bundle.min.js")
                     .with_version("5.1.3")
                     .with_weight(-99),
-            ));
+            ))
-
+            .alter_context(ContextOp::AddAssetsForBase);
-        if let Some(true) = page.context().get_param::<bool>(PARAM_INCLUDE_FLEX) {
-            page.alter_context(ContextOp::AddStyleSheet(
-                StyleSheet::at("/theme/css/flex.css").with_version("0.0.0"),
-            ));
-        }
-        if let Some(true) = page.context().get_param::<bool>(PARAM_INCLUDE_ICONS) {
-            page.alter_context(ContextOp::AddStyleSheet(
-                StyleSheet::at("/theme/icons/bootstrap-icons.css").with_version("1.8.2"),
-            ));
-        }
-
-        JQuery.enable_jquery(page.context());
     }
 
     fn render_component(&self, component: &dyn ComponentTrait, cx: &mut Context) -> Option<Markup> {

pagetop-bulmix/Cargo.toml

@@ -15,7 +15,6 @@ license = "Apache-2.0 OR MIT"
 
 [dependencies]
 pagetop = { version = "0.0", path = "../pagetop" }
-pagetop-jquery = { version = "0.0", path = "../pagetop-jquery" }
 static-files = "0.2.3"
 
 [build-dependencies]

pagetop-bulmix/src/lib.rs

@@ -1,5 +1,4 @@
 use pagetop::prelude::*;
-use pagetop_jquery::JQuery;
 
 new_handle!(THEME_BULMIX);
 
@@ -16,13 +15,6 @@ impl ModuleTrait for Bulmix {
         Some(&Bulmix)
     }
 
-    #[rustfmt::skip]
-    fn dependencies(&self) -> Vec<ModuleRef> {
-        vec![
-            &pagetop_jquery::JQuery,
-        ]
-    }
-
     fn configure_service(&self, scfg: &mut service::web::ServiceConfig) {
         static_files_service!(scfg, "/bulmix", bulmix);
     }
@@ -30,25 +22,13 @@ impl ModuleTrait for Bulmix {
 
 impl ThemeTrait for Bulmix {
     fn after_prepare_body(&self, page: &mut Page) {
-        page.alter_favicon(Some(Favicon::new().with_icon("/theme/favicon.ico")))
+        page.alter_favicon(Some(Favicon::new().with_icon("/base/favicon.ico")))
             .alter_context(ContextOp::AddStyleSheet(
                 StyleSheet::at("/bulmix/css/bulma.min.css")
                     .with_version("0.9.4")
                     .with_weight(-99),
-            ));
+            ))
-
+            .alter_context(ContextOp::AddAssetsForBase);
-        if let Some(true) = page.context().get_param::<bool>(PARAM_INCLUDE_FLEX) {
-            page.alter_context(ContextOp::AddStyleSheet(
-                StyleSheet::at("/theme/css/flex.css").with_version("0.0.0"),
-            ));
-        }
-        if let Some(true) = page.context().get_param::<bool>(PARAM_INCLUDE_ICONS) {
-            page.alter_context(ContextOp::AddStyleSheet(
-                StyleSheet::at("/theme/icons/bootstrap-icons.css").with_version("1.8.2"),
-            ));
-        }
-
-        JQuery.enable_jquery(page.context());
     }
 
     #[rustfmt::skip]

pagetop-homedemo/static/css/styles.css

@@ -69,8 +69,8 @@ body.default-homepage [class$="-col-image"] {
 		text-align: left;
 	}
 }
-/* LG - Applies >= 1024px */
+/* LG - Applies >= 992px */
-@media screen and (min-width: 64em) {
+@media screen and (min-width: 62em) {
 	#hello-world .hello-col-text {
 		padding-top: 2rem;
 		padding-left: 10%;

pagetop-user/src/lib.rs

@@ -51,7 +51,7 @@ fn form_login() -> Form {
     Form::new()
         .with_id("user-login")
         .with_element(
-            form_element::Input::textfield()
+            form::Input::textfield()
                 .with_name("name")
                 .with_label(L10n::t("username", &LOCALES_USER))
                 .with_help_text(
@@ -61,13 +61,10 @@ fn form_login() -> Form {
                 .with_autofocus(true),
         )
         .with_element(
-            form_element::Input::password()
+            form::Input::password()
                 .with_name("pass")
                 .with_label(L10n::t("password", &LOCALES_USER))
                 .with_help_text(L10n::t("password_help", &LOCALES_USER)),
         )
-        .with_element(form_element::Button::submit(L10n::t(
+        .with_element(form::Button::submit(L10n::t("login", &LOCALES_USER)))
-            "login",
-            &LOCALES_USER,
-        )))
 }

pagetop/build.rs

@@ -1,7 +1,7 @@
 use pagetop_build::StaticFilesBundle;
 
 fn main() -> std::io::Result<()> {
-    StaticFilesBundle::from_dir("./static/theme")
+    StaticFilesBundle::from_dir("./static/base")
-        .with_name("theme")
+        .with_name("base")
         .build()
 }

pagetop/src/base/component.rs

@@ -1,6 +1,43 @@
+use crate::core::component::{Context, ContextOp};
+use crate::html::{JavaScript, StyleSheet};
+
 // Context parameters.
-pub const PARAM_INCLUDE_FLEX: &str = "theme.include.flex";
+pub const PARAM_INCLUDE_ICONS: &str = "base.include.icon";
-pub const PARAM_INCLUDE_ICONS: &str = "theme.include.icons";
+pub const PARAM_INCLUDE_FLEX_ASSETS: &str = "base.include.flex";
+pub const PARAM_INCLUDE_MENU_ASSETS: &str = "base.include.menu";
+
+pub(crate) fn add_assets_for_base(cx: &mut Context) {
+    cx.alter(ContextOp::AddStyleSheet(
+        StyleSheet::at("/base/css/root.css").with_version("0.0.1"),
+    ));
+
+    if let Some(true) = cx.get_param::<bool>(PARAM_INCLUDE_ICONS) {
+        cx.alter(ContextOp::AddStyleSheet(
+            StyleSheet::at("/base/css/icons.min.css").with_version("1.11.1"),
+        ));
+    }
+
+    if let Some(true) = cx.get_param::<bool>(PARAM_INCLUDE_FLEX_ASSETS) {
+        cx.alter(ContextOp::AddStyleSheet(
+            StyleSheet::at("/base/css/flex.css").with_version("0.0.1"),
+        ));
+    }
+
+    if let Some(true) = cx.get_param::<bool>(PARAM_INCLUDE_MENU_ASSETS) {
+        cx.alter(ContextOp::AddStyleSheet(
+            StyleSheet::at("/base/css/menu.css").with_version("0.0.1"),
+        ))
+        .alter(ContextOp::AddJavaScript(
+            JavaScript::at("/base/js/menu.js").with_version("0.0.1"),
+        ));
+    }
+
+    cx.alter(ContextOp::AddStyleSheet(
+        StyleSheet::at("/base/css/styles.css").with_version("0.0.1"),
+    ));
+}
+
+// By default, 1 pixel = 0.0625em.
 
 #[rustfmt::skip]
 #[derive(Default)]
@@ -9,7 +46,7 @@ pub enum BreakPoint {
     None,  /* Does not apply */
     SM,    /* @media screen and (max-width: 35.5em) - Applies <= 568px  */
     MD,    /* @media screen and (max-width: 48em)   - Applies <= 768px  */
-    LG,    /* @media screen and (max-width: 64em)   - Applies <= 1024px */
+    LG,    /* @media screen and (max-width: 62em)   - Applies <= 992px */
     XL,    /* @media screen and (max-width: 80em)   - Applies <= 1280px */
     X2L,   /* @media screen and (max-width: 120em)  - Applies <= 1920px */
     X3L,   /* @media screen and (max-width: 160em)  - Applies <= 2560px */
@@ -58,5 +95,8 @@ pub use site_branding::{SiteBranding, COMPONENT_BRANDING};
 mod powered_by;
 pub use powered_by::{PoweredBy, PoweredByLogo, COMPONENT_POWEREDBY};
 
-pub mod form_element;
+pub mod menu;
-pub use form_element::{Form, FormMethod, COMPONENT_FORM};
+pub use menu::{Menu, COMPONENT_MENU};
+
+pub mod form;
+pub use form::{Form, FormMethod, COMPONENT_FORM};

pagetop/src/base/component/flex/container.rs

@@ -9,8 +9,8 @@ actions_for_component!(Container);
 pub struct Container {
     weight         : Weight,
     renderable     : Renderable,
-    id             : IdentifierValue,
+    id             : OptionId,
-    classes        : Classes,
+    classes        : OptionClasses,
     items          : TypedComponents<flex::Item>,
     direction      : flex::Direction,
     wrap_align     : flex::WrapAlign,
@@ -46,7 +46,7 @@ impl ComponentTrait for Container {
     }
 
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
-        cx.set_param::<bool>(PARAM_INCLUDE_FLEX, true);
+        cx.set_param::<bool>(PARAM_INCLUDE_FLEX_ASSETS, true);
 
         let gap = match self.gap() {
             flex::Gap::Default => None,
@@ -81,7 +81,7 @@ impl Container {
     }
 
     #[fn_builder]
-    pub fn alter_id(&mut self, id: &str) -> &mut Self {
+    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
         self.id.alter_value(id);
         self
     }
@@ -151,7 +151,7 @@ impl Container {
 
     // Container GETTERS.
 
-    pub fn classes(&self) -> &Classes {
+    pub fn classes(&self) -> &OptionClasses {
         &self.classes
     }
 

pagetop/src/base/component/flex/item.rs

@@ -9,9 +9,9 @@ actions_for_component!(Item);
 pub struct Item {
     weight       : Weight,
     renderable   : Renderable,
-    id           : IdentifierValue,
+    id           : OptionId,
-    item_classes : Classes,
+    item_classes : OptionClasses,
-    inner_classes: Classes,
+    inner_classes: OptionClasses,
     item_grow    : flex::ItemGrow,
     item_shrink  : flex::ItemShrink,
     item_size    : flex::ItemSize,
@@ -82,7 +82,7 @@ impl Item {
     }
 
     #[fn_builder]
-    pub fn alter_id(&mut self, id: &str) -> &mut Self {
+    pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
         self.id.alter_value(id);
         self
     }
@@ -162,11 +162,11 @@ impl Item {
 
     // Item GETTERS.
 
-    pub fn item_classes(&self) -> &Classes {
+    pub fn item_classes(&self) -> &OptionClasses {
         &self.item_classes
     }
 
-    pub fn inner_classes(&self) -> &Classes {
+    pub fn inner_classes(&self) -> &OptionClasses {
         &self.inner_classes
     }
 

pagetop/src/base/component/image.rs

@@ -81,7 +81,7 @@ impl Image {
 
     pub fn pagetop() -> Self {
         Image::default()
-            .with_source("/theme/pagetop-logo.svg")
+            .with_source("/base/pagetop-logo.svg")
             .with_classes(ClassesOp::SetDefault, IMG_FIXED)
             .with_size(ImageSize::Size(64, 64))
     }

pagetop/src/base/component/menu/menu_main.rs

@@ -42,7 +42,7 @@ impl ComponentTrait for Menu {
     }
 
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
-        cx.set_param::<bool>(PARAM_INCLUDE_MENU, true);
+        cx.set_param::<bool>(PARAM_INCLUDE_MENU_ASSETS, true);
         cx.set_param::<bool>(PARAM_INCLUDE_ICONS, true);
 
         PrepareMarkup::With(html! {

pagetop/src/base/component/powered_by.rs

@@ -54,7 +54,7 @@ impl ComponentTrait for PoweredBy {
                 let logo_txt = L10n::t("pagetop_logo", &LOCALES_PAGETOP);
                 html! {
                     span class="pagetop-logo" aria-label=[logo_txt.into_string(cx)] {
-                        img src="/theme/pagetop-logo.svg" alt=[logo_txt.into_string(cx)] {}
+                        img src="/base/pagetop-logo.svg" alt=[logo_txt.into_string(cx)] {}
                     }
                 }
             }

pagetop/src/base/theme/inception.rs

@@ -2,9 +2,7 @@ use crate::prelude::*;
 
 new_handle!(THEME_INCEPTION);
 
-static_files!(theme);
+static_files!(base);
-
-const VERSION_INCEPTION: &str = "0.0.0";
 
 pub struct InceptionTheme;
 
@@ -22,34 +20,18 @@ impl ModuleTrait for InceptionTheme {
     }
 
     fn configure_service(&self, scfg: &mut service::web::ServiceConfig) {
-        static_files_service!(scfg, "/theme", theme);
+        static_files_service!(scfg, "/base", base);
     }
 }
 
 impl ThemeTrait for InceptionTheme {
     fn after_prepare_body(&self, page: &mut Page) {
-        page.alter_favicon(Some(Favicon::new().with_icon("/theme/favicon.ico")))
+        page.alter_favicon(Some(Favicon::new().with_icon("/base/favicon.ico")))
             .alter_context(ContextOp::AddStyleSheet(
-                StyleSheet::at("/theme/css/normalize.min.css")
+                StyleSheet::at("/base/css/normalize.min.css")
                     .with_version("8.0.1")
                     .with_weight(-99),
             ))
-            .alter_context(ContextOp::AddStyleSheet(
+            .alter_context(ContextOp::AddAssetsForBase);
-                StyleSheet::at("/theme/css/root.css").with_version(VERSION_INCEPTION),
-            ));
-
-        if let Some(true) = page.context().get_param::<bool>(PARAM_INCLUDE_FLEX) {
-            page.alter_context(ContextOp::AddStyleSheet(
-                StyleSheet::at("/theme/css/flex.css").with_version(VERSION_INCEPTION),
-            ));
-        }
-        if let Some(true) = page.context().get_param::<bool>(PARAM_INCLUDE_ICONS) {
-            page.alter_context(ContextOp::AddStyleSheet(
-                StyleSheet::at("/theme/icons/bootstrap-icons.css").with_version("1.8.2"),
-            ));
-        }
-        page.alter_context(ContextOp::AddStyleSheet(
-            StyleSheet::at("/theme/css/styles.css").with_version(VERSION_INCEPTION),
-        ));
     }
 }

pagetop/src/core/component/context.rs

@@ -1,3 +1,4 @@
+use crate::base::component::add_assets_for_base;
 use crate::core::theme::all::{theme_by_single_name, THEME};
 use crate::core::theme::ThemeRef;
 use crate::html::{html, Assets, HeadScript, HeadStyles, JavaScript, Markup, StyleSheet};
@@ -23,6 +24,8 @@ pub enum ContextOp {
     // Scripts in head.
     AddHeadScript(HeadScript),
     RemoveHeadScript(&'static str),
+    // Add assets to properly use the base components.
+    AddAssetsForBase,
 }
 
 #[rustfmt::skip]
@@ -63,6 +66,7 @@ impl Context {
             ContextOp::Theme(theme_name) => {
                 self.theme = theme_by_single_name(theme_name).unwrap_or(*THEME);
             }
+
             // Stylesheets.
             ContextOp::AddStyleSheet(css)     => { self.stylesheet.add(css);     }
             ContextOp::RemoveStyleSheet(path) => { self.stylesheet.remove(path); }
@@ -75,6 +79,9 @@ impl Context {
             // Scripts in head.
             ContextOp::AddHeadScript(script)  => { self.headscript.add(script);  }
             ContextOp::RemoveHeadScript(path) => { self.headscript.remove(path); }
+
+            // Add assets to properly use the base components.
+            ContextOp::AddAssetsForBase => { add_assets_for_base(self); }
         }
         self
     }

pagetop/src/core/theme/definition.rs

@@ -28,7 +28,7 @@ pub trait ThemeTrait: ModuleTrait + Send + Sync {
             body class=[page.body_classes().get()] {
                 @for (region, _) in self.regions().iter() {
                     @if let Some(content) = page.prepare_region(region) {
-                        #(region) { (content) }
+                        #(region) class="region" { (content) }
                     }
                 }
             }
@@ -37,7 +37,7 @@ pub trait ThemeTrait: ModuleTrait + Send + Sync {
 
     fn after_prepare_body(&self, page: &mut Page) {
         if page.favicon().is_none() {
-            page.alter_favicon(Some(Favicon::new().with_icon("/theme/favicon.ico")));
+            page.alter_favicon(Some(Favicon::new().with_icon("/base/favicon.ico")));
         }
     }
 

pagetop/static/base/css/flex.css

@@ -279,8 +279,8 @@
 		margin-left: 0;
 	}
 }
-/* LG - Applies <= 1024px */
+/* LG - Applies <= 992px */
-@media screen and (max-width: 64em) {
+@media screen and (max-width: 62em) {
 	.flex-row.bp-lg {
 		flex-direction: row;
 	}