diff --git a/pagetop/src/base/component/icon.rs b/pagetop/src/base/component/icon.rs index c8f95fa2..00c7ec24 100644 --- a/pagetop/src/base/component/icon.rs +++ b/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()] {}; } } diff --git a/pagetop/src/base/module/demopage.rs b/pagetop/src/base/module/demopage.rs index b02f8603..f7940dfe 100644 --- a/pagetop/src/base/module/demopage.rs +++ b/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_column(grid::Column::new() - .with_classes(ClassesOp::Add, "welcome-col-image") - .with_size(grid::ColumnSize::Is5of12) - .with_component(Image::image("/theme/images/demo-visiting.svg")) - ) - .with_column(grid::Column::new() - .with_classes(ClassesOp::Add, "welcome-col-text") - .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_classes(ClassesOp::Add, "welcome-col-text") + .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")) })) } 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")) ) ) diff --git a/pagetop/static/theme/images/demo-visiting.svg b/pagetop/static/theme/images/demo-about.svg similarity index 100% rename from pagetop/static/theme/images/demo-visiting.svg rename to pagetop/static/theme/images/demo-about.svg diff --git a/pagetop/static/theme/images/demo-welcome.jpg b/pagetop/static/theme/images/demo-welcome.jpg new file mode 100644 index 00000000..612bba08 Binary files /dev/null and b/pagetop/static/theme/images/demo-welcome.jpg differ diff --git a/pagetop/static/theme/module/demopage/styles.css b/pagetop/static/theme/module/demopage/styles.css index 956f49e7..08b28b02 100644 --- a/pagetop/static/theme/module/demopage/styles.css +++ b/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 { - text-align: center; - padding-left: 0; + #welcome > div.container { + padding: 3rem 1rem; } -} \ No newline at end of file +}