Añade sección de bienvenida en la página de demo

pagetop/src/base/component/icon.rs

@@ -31,13 +31,15 @@ impl ComponentTrait for Icon {
         (self.renderable)(context)
     }
 
-    fn default_render(&self, context: &mut InContext) -> Markup {
+    fn before_render(&mut self, context: &mut InContext) {
         context
             .alter(InContextOp::StyleSheet(AssetsOp::Add(
                 StyleSheet::located("/theme/icons/bootstrap-icons.css")
                     .with_version("1.8.2")
             )));
+    }
 
+    fn default_render(&self, _: &mut InContext) -> Markup {
         html! { i class=[self.classes().get()] {}; }
     }
 

pagetop/src/base/module/demopage.rs

@@ -83,32 +83,23 @@ fn hello_world() -> Container {
 }
 
 fn welcome() -> Container {
-    Container::new()
+    Container::section()
         .with_id("welcome")
-        .with_component(grid::Row::new()
+        .with_classes(ClassesOp::Add, "welcome-col-text")
-            .with_column(grid::Column::new()
+        .with_component(Heading::h2(html! {
-                .with_classes(ClassesOp::Add, "welcome-col-image")
+            (t("welcome_to", &args!["app" => SETTINGS.app.name.as_str()]))
-                .with_size(grid::ColumnSize::Is5of12)
+        }))
-                .with_component(Image::image("/theme/images/demo-visiting.svg"))
+        .with_component(Heading::h3(html! {
-            )
+                (l("welcome_subtitle"))
-            .with_column(grid::Column::new()
+            })
-                .with_classes(ClassesOp::Add, "welcome-col-text")
+            .with_display(HeadingDisplay::Subtitle)
-                .with_component(Heading::h2(html! {
-                    (t("welcome_to", &args!["app" => SETTINGS.app.name.as_str()]))
-                }))
-                .with_component(Heading::h3(html! {
-                        (l("welcome_subtitle"))
-                    })
-                    .with_display(HeadingDisplay::Subtitle)
-                )
-                .with_component(Paragraph::with(html! {
-                        (l("welcome_text1"))
-                    })
-                    .with_display(ParagraphDisplay::Small)
-                )
-                .with_component(Paragraph::with(html! { (l("welcome_text2")) }))
-            )
         )
+        .with_component(Paragraph::with(html! {
+                (l("welcome_text1"))
+            })
+            .with_display(ParagraphDisplay::Small)
+        )
+        .with_component(Paragraph::with(html! { (l("welcome_text2")) }))
 }
 
 fn about_pagetop() -> Container {
@@ -116,11 +107,15 @@ fn about_pagetop() -> Container {
         .with_id("pagetop")
         .with_component(grid::Row::new()
             .with_column(grid::Column::new()
-                .with_size(grid::ColumnSize::Is7of12)
+                .with_classes(ClassesOp::Add, "pagetop-col-image")
+                .with_size(grid::ColumnSize::Is5of12)
+                .with_component(Image::image("/theme/images/demo-about.svg"))
+            )
+            .with_column(grid::Column::new()
+                .with_classes(ClassesOp::Add, "pagetop-col-text")
                 .with_component(Heading::h2(html! {
-                        (l("pagetop_title"))
+                    (l("pagetop_title"))
-                    })
+                }))
-                )
                 .with_component(Paragraph::with(html! {
                         (l("pagetop_text1"))
                     })
@@ -135,9 +130,6 @@ fn about_pagetop() -> Container {
                     })
                 )
             )
-            .with_column(grid::Column::new()
-                .with_component(Image::image("/theme/images/demo-pagetop.svg"))
-            )
         )
 }
 
@@ -146,10 +138,12 @@ fn promo_pagetop() -> Container {
         .with_id("promo")
         .with_component(grid::Row::new()
             .with_column(grid::Column::new()
+                .with_classes(ClassesOp::Add, "promo-col-image")
                 .with_size(grid::ColumnSize::Is5of12)
                 .with_component(Image::image("/theme/images/demo-pagetop.svg"))
             )
             .with_column(grid::Column::new()
+                .with_classes(ClassesOp::Add, "promo-col-text")
                 .with_component(Heading::h2(html! {
                         (l("pagetop_promo_title"))
                     })
@@ -170,6 +164,7 @@ fn reporting_problems() -> Container {
         .with_id("reporting")
         .with_component(grid::Row::new()
             .with_column(grid::Column::new()
+                .with_classes(ClassesOp::Add, "reporting-col-text")
                 .with_size(grid::ColumnSize::Is7of12)
                 .with_component(Heading::h2(html! {
                         (l("report_problems_title"))
@@ -186,6 +181,7 @@ fn reporting_problems() -> Container {
                 )
             )
             .with_column(grid::Column::new()
+                .with_classes(ClassesOp::Add, "reporting-col-image")
                 .with_component(Image::image("/theme/images/demo-pagetop.svg"))
             )
         )

pagetop/static/theme/module/demopage/styles.css

@@ -9,22 +9,64 @@
 	padding-right: 1.5em;
 	border-radius: 1.5em;
 }
+
 #welcome {
-	padding: 1em 5%;
+	padding: 2em 10%;
 }
-#welcome .welcome-col-text {
+#welcome > div.container {
+	padding: 3rem 8rem;
+	border-radius: 28px;
+	background: url("/theme/images/demo-welcome.jpg") center center no-repeat;
+	background-size: auto;
+	background-size: cover;
+	text-align: center;
+	color: #fff;
+}
+#welcome > div.container > h2 {
+	color: #fff;
+}
+#welcome > div.container > h3 {
+	color: #ccc;
+}
+
+#pagetop {
+	padding: 2em 5%;
+}
+#pagetop .pagetop-col-text {
+	padding-top: 2em;
 	padding-left: 5%;
 }
+
+#promo {
+	padding: 4em 5% 2em;
+}
+#promo .promo-col-text {
+	padding-top: 2em;
+	padding-left: 5%;
+}
+
+#reporting {
+	padding: 4em 5%;
+}
+#reporting .reporting-col-text {
+	text-align: center;
+}
+
 /* Responsiveness */
+@media (min-width: 993px) {
+	#reporting .reporting-col-text {
+		padding-right: 3em;
+		text-align: right;
+	}
+}
 @media (max-width: 992px) {
-	#hello-world .hello-col-text {
+	[class$="-col-text"] {
 		text-align: center;
 	}
 	#hello-world .hello-col-image {
 		padding-top: 5%;
 	}
-	#welcome .welcome-col-text {
+	#welcome > div.container {
-		text-align: center;
+		padding: 3rem 1rem;
-		padding-left: 0;
 	}
-}
+}