🚧 Review content layout with flex components
This commit is contained in:
parent
e8364a40ee
commit
dfbe807a61
11 changed files with 353 additions and 441 deletions
|
|
@ -47,168 +47,194 @@ fn home(request: HttpRequest, lang: &'static LanguageIdentifier) -> ResultPage<M
|
|||
.render()
|
||||
}
|
||||
|
||||
fn hello_world() -> Wrapper {
|
||||
Wrapper::header()
|
||||
fn hello_world() -> flex::Container {
|
||||
flex::Container::header()
|
||||
.with_classes(ClassesOp::Add, "hello-world")
|
||||
.add_component(
|
||||
flex::Container::new()
|
||||
.with_direction(flex::Direction::Column(BreakPoint::MD))
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_classes(ClassesOp::Add, "hello-col-text")
|
||||
.with_size(flex::ItemSize::Percent40)
|
||||
.add_component(
|
||||
Heading::h1(L10n::l("welcome_title")).with_size(HeadingSize::Medium),
|
||||
)
|
||||
.add_component(
|
||||
Paragraph::fluent(L10n::l("welcome_intro").with_arg(
|
||||
"app",
|
||||
format!(
|
||||
"<span class=\"app-name\">{}</span>",
|
||||
&config::SETTINGS.app.name,
|
||||
.with_content_justify(flex::ContentJustify::Center)
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_size(flex::ItemSize::Percent90)
|
||||
.add_component(
|
||||
flex::Container::new()
|
||||
.with_direction(flex::Direction::Column(BreakPoint::MD))
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_classes(ClassesOp::Add, "hello-col-text")
|
||||
.with_size(flex::ItemSize::Percent40)
|
||||
.add_component(
|
||||
Heading::h1(L10n::l("welcome_title"))
|
||||
.with_size(HeadingSize::Medium),
|
||||
)
|
||||
.add_component(
|
||||
Paragraph::fluent(L10n::l("welcome_intro").with_arg(
|
||||
"app",
|
||||
format!(
|
||||
"<span class=\"app-name\">{}</span>",
|
||||
&config::SETTINGS.app.name,
|
||||
),
|
||||
))
|
||||
.with_font_size(FontSize::Medium),
|
||||
)
|
||||
.add_component(Paragraph::fluent(
|
||||
L10n::l("welcome_powered").with_arg(
|
||||
"pagetop",
|
||||
format!(
|
||||
"<a href=\"{}\" target=\"_blank\">{}</a>",
|
||||
"https://pagetop.cillero.es", "PageTop",
|
||||
),
|
||||
),
|
||||
))
|
||||
.add_component(
|
||||
Button::anchor(
|
||||
"https://github.com/manuelcillero/pagetop",
|
||||
L10n::l("welcome_code"),
|
||||
)
|
||||
.with_target(ButtonTarget::Blank)
|
||||
.with_left_icon(Some(Icon::with("git")))
|
||||
.with_classes(ClassesOp::Add, "code-link")
|
||||
.with_font_size(FontSize::Medium),
|
||||
)
|
||||
.add_component(
|
||||
Button::anchor("#welcome-page", L10n::l("welcome"))
|
||||
.with_style(StyleBase::Link)
|
||||
.with_left_icon(Some(Icon::with("arrow-down-circle-fill")))
|
||||
.with_classes(ClassesOp::Add, "welcome-link")
|
||||
.with_font_size(FontSize::Medium),
|
||||
),
|
||||
))
|
||||
.with_font_size(FontSize::Medium),
|
||||
)
|
||||
.add_component(Paragraph::fluent(L10n::l("welcome_powered").with_arg(
|
||||
"pagetop",
|
||||
format!(
|
||||
"<a href=\"{}\" target=\"_blank\">{}</a>",
|
||||
"https://pagetop.cillero.es", "PageTop",
|
||||
),
|
||||
)))
|
||||
.add_component(
|
||||
Button::anchor(
|
||||
"https://github.com/manuelcillero/pagetop",
|
||||
L10n::l("welcome_code"),
|
||||
)
|
||||
.with_target(ButtonTarget::Blank)
|
||||
.with_left_icon(Some(Icon::with("git")))
|
||||
.with_classes(ClassesOp::Add, "code-link")
|
||||
.with_font_size(FontSize::Medium),
|
||||
)
|
||||
.add_component(
|
||||
Button::anchor("#welcome-page", L10n::l("welcome"))
|
||||
.with_style(StyleBase::Link)
|
||||
.with_left_icon(Some(Icon::with("arrow-down-circle-fill")))
|
||||
.with_classes(ClassesOp::Add, "welcome-link")
|
||||
.with_font_size(FontSize::Medium),
|
||||
.add_item(
|
||||
flex::Item::with(Image::with("/base/images/header.svg"))
|
||||
.with_classes(ClassesOp::Add, "hello-col-image")
|
||||
.with_size(flex::ItemSize::Percent60),
|
||||
),
|
||||
)
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_classes(ClassesOp::Add, "hello-col-image")
|
||||
.with_size(flex::ItemSize::Percent60)
|
||||
.add_component(Image::with("/base/images/header.svg")),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
fn welcome() -> Wrapper {
|
||||
Wrapper::section()
|
||||
fn welcome() -> flex::Container {
|
||||
flex::Container::section()
|
||||
.with_id("welcome-page")
|
||||
.with_classes(ClassesOp::Add, "welcome")
|
||||
.add_component(Heading::h2(L10n::l("welcome_page")))
|
||||
.add_component(
|
||||
Heading::h3(L10n::l("welcome_subtitle").with_arg(
|
||||
"app",
|
||||
format!(
|
||||
"<span class=\"app-name\">{}</span>",
|
||||
&config::SETTINGS.app.name
|
||||
),
|
||||
))
|
||||
.with_size(HeadingSize::Subtitle),
|
||||
)
|
||||
.add_component(Paragraph::fluent(L10n::l("welcome_text1")).with_font_size(FontSize::Medium))
|
||||
.add_component(Paragraph::fluent(L10n::l("welcome_text2")))
|
||||
}
|
||||
|
||||
fn about_pagetop() -> Wrapper {
|
||||
Wrapper::new()
|
||||
.with_classes(ClassesOp::Add, "pagetop")
|
||||
.add_component(
|
||||
flex::Container::new()
|
||||
.with_direction(flex::Direction::Column(BreakPoint::SM))
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_classes(ClassesOp::Add, "pagetop-col-image")
|
||||
.with_size(flex::ItemSize::Percent40)
|
||||
.add_component(Image::with("/base/images/about.svg")),
|
||||
)
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_classes(ClassesOp::Add, "pagetop-col-text")
|
||||
.add_component(Heading::h2(L10n::l("welcome_pagetop_title")))
|
||||
.add_component(
|
||||
Paragraph::fluent(L10n::l("welcome_pagetop_text1"))
|
||||
.with_font_size(FontSize::Medium),
|
||||
)
|
||||
.add_component(Paragraph::fluent(L10n::l("welcome_pagetop_text2")))
|
||||
.add_component(Paragraph::fluent(L10n::l("welcome_pagetop_text3"))),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
fn promo_pagetop() -> Wrapper {
|
||||
Wrapper::new()
|
||||
.with_classes(ClassesOp::Add, "promo")
|
||||
.add_component(
|
||||
flex::Container::new()
|
||||
.with_direction(flex::Direction::Column(BreakPoint::MD))
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_classes(ClassesOp::Add, "promo-col-text")
|
||||
.with_size(flex::ItemSize::Percent50)
|
||||
.add_component(Heading::h2(L10n::l("welcome_promo_title")))
|
||||
.add_component(
|
||||
Paragraph::fluent(L10n::l("welcome_promo_text1").with_arg(
|
||||
"pagetop",
|
||||
format!(
|
||||
"<a href=\"{}\" target=\"_blank\">{}</a>",
|
||||
"https://crates.io/crates/pagetop", "PageTop",
|
||||
),
|
||||
))
|
||||
.with_font_size(FontSize::Medium),
|
||||
.with_content_justify(flex::ContentJustify::Center)
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_size(flex::ItemSize::Percent80)
|
||||
.add_component(Heading::h2(L10n::l("welcome_page")))
|
||||
.add_component(
|
||||
Heading::h3(L10n::l("welcome_subtitle").with_arg(
|
||||
"app",
|
||||
format!(
|
||||
"<span class=\"app-name\">{}</span>",
|
||||
&config::SETTINGS.app.name
|
||||
),
|
||||
))
|
||||
.with_size(HeadingSize::Subtitle),
|
||||
)
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_classes(ClassesOp::Add, "promo-col-image")
|
||||
.with_size(flex::ItemSize::Percent50)
|
||||
.add_component(Image::with("/base/images/pagetop.png")),
|
||||
.add_component(
|
||||
Paragraph::fluent(L10n::l("welcome_text1")).with_font_size(FontSize::Medium),
|
||||
)
|
||||
.add_component(Paragraph::fluent(L10n::l("welcome_text2"))),
|
||||
)
|
||||
}
|
||||
|
||||
fn about_pagetop() -> flex::Container {
|
||||
flex::Container::new()
|
||||
.with_classes(ClassesOp::Add, "pagetop")
|
||||
.with_content_justify(flex::ContentJustify::Center)
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_size(flex::ItemSize::Percent90)
|
||||
.add_component(
|
||||
flex::Container::new()
|
||||
.with_direction(flex::Direction::Column(BreakPoint::SM))
|
||||
.add_item(
|
||||
flex::Item::with(Image::with("/base/images/about.svg"))
|
||||
.with_classes(ClassesOp::Add, "pagetop-col-image")
|
||||
.with_size(flex::ItemSize::Percent40),
|
||||
)
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_classes(ClassesOp::Add, "pagetop-col-text")
|
||||
.add_component(Heading::h2(L10n::l("welcome_pagetop_title")))
|
||||
.add_component(
|
||||
Paragraph::fluent(L10n::l("welcome_pagetop_text1"))
|
||||
.with_font_size(FontSize::Medium),
|
||||
)
|
||||
.add_component(Paragraph::fluent(L10n::l("welcome_pagetop_text2")))
|
||||
.add_component(Paragraph::fluent(L10n::l("welcome_pagetop_text3"))),
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
fn reporting_issues() -> Wrapper {
|
||||
Wrapper::new()
|
||||
.with_classes(ClassesOp::Add, "issues")
|
||||
.add_component(
|
||||
flex::Container::new()
|
||||
.with_direction(flex::Direction::Column(BreakPoint::MD))
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_classes(ClassesOp::Add, "issues-col-image")
|
||||
.add_component(Image::with("/base/images/issues.jpg")),
|
||||
)
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_classes(ClassesOp::Add, "issues-col-text")
|
||||
.with_size(flex::ItemSize::Percent50)
|
||||
.add_component(Heading::h2(L10n::l("welcome_issues_title")))
|
||||
.add_component(
|
||||
Paragraph::fluent(L10n::l("welcome_issues_text1"))
|
||||
.with_font_size(FontSize::Medium),
|
||||
)
|
||||
.add_component(Paragraph::fluent(
|
||||
L10n::l("welcome_issues_text2").with_arg(
|
||||
"app",
|
||||
format!(
|
||||
"<span class=\"app-name\">{}</span>",
|
||||
&config::SETTINGS.app.name,
|
||||
fn promo_pagetop() -> flex::Container {
|
||||
flex::Container::new()
|
||||
.with_classes(ClassesOp::Add, "promo")
|
||||
.with_content_justify(flex::ContentJustify::Center)
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_size(flex::ItemSize::Percent75)
|
||||
.add_component(
|
||||
flex::Container::new()
|
||||
.with_direction(flex::Direction::Column(BreakPoint::MD))
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_classes(ClassesOp::Add, "promo-col-text")
|
||||
.with_size(flex::ItemSize::Percent50)
|
||||
.add_component(Heading::h2(L10n::l("welcome_promo_title")))
|
||||
.add_component(
|
||||
Paragraph::fluent(L10n::l("welcome_promo_text1").with_arg(
|
||||
"pagetop",
|
||||
format!(
|
||||
"<a href=\"{}\" target=\"_blank\">{}</a>",
|
||||
"https://crates.io/crates/pagetop", "PageTop",
|
||||
),
|
||||
))
|
||||
.with_font_size(FontSize::Medium),
|
||||
),
|
||||
),
|
||||
)),
|
||||
)
|
||||
.add_item(
|
||||
flex::Item::with(Image::with("/base/images/pagetop.png"))
|
||||
.with_classes(ClassesOp::Add, "promo-col-image")
|
||||
.with_size(flex::ItemSize::Percent50),
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
fn reporting_issues() -> flex::Container {
|
||||
flex::Container::new()
|
||||
.with_classes(ClassesOp::Add, "issues")
|
||||
.with_content_justify(flex::ContentJustify::Center)
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_size(flex::ItemSize::Percent90)
|
||||
.add_component(
|
||||
flex::Container::new()
|
||||
.with_direction(flex::Direction::Column(BreakPoint::MD))
|
||||
.add_item(
|
||||
flex::Item::with(Image::with("/base/images/issues.jpg"))
|
||||
.with_classes(ClassesOp::Add, "issues-col-image"),
|
||||
)
|
||||
.add_item(
|
||||
flex::Item::new()
|
||||
.with_classes(ClassesOp::Add, "issues-col-text")
|
||||
.with_size(flex::ItemSize::Percent50)
|
||||
.add_component(Heading::h2(L10n::l("welcome_issues_title")))
|
||||
.add_component(
|
||||
Paragraph::fluent(L10n::l("welcome_issues_text1"))
|
||||
.with_font_size(FontSize::Medium),
|
||||
)
|
||||
.add_component(Paragraph::fluent(
|
||||
L10n::l("welcome_issues_text2").with_arg(
|
||||
"app",
|
||||
format!(
|
||||
"<span class=\"app-name\">{}</span>",
|
||||
&config::SETTINGS.app.name,
|
||||
),
|
||||
),
|
||||
)),
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue