manuelcillero/pagetop
manuelcillero/pagetop
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Manuel Cillero 2022-07-17 22:22:12 +02:00
parent 3779e191a6
commit 57fd4c2054
5 changed files with 79 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

4
pagetop/src/base/component/icon.rs
View file

@ -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()] {}; }
}

58
pagetop/src/base/module/demopage.rs
View file

@ -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"))
)
)

0
pagetop/static/theme/images/demo-visiting.svg → pagetop/static/theme/images/demo-about.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

Before After
Before After

BIN
pagetop/static/theme/images/demo-welcome.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

56
pagetop/static/theme/module/demopage/styles.css
View file

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