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

🚧 Working on flex layout

Browse source
This commit is contained in:
Manuel Cillero 2024-03-28 11:13:22 +01:00
parent 0f65711d0e
commit 625d16c0f2
10 changed files with 329 additions and 320 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/pagetop-admin/src/summary.rs
View file

@ -154,10 +154,10 @@ pub async fn summary(request: HttpRequest) -> ResultPage<Markup, ErrorPage> {
.with_title(L10n::n("Admin"))
.with_component_in("top-menu", side_menu)
.with_component(
Container::new()
.add_item(Flex::with(Html::with(html! { p { "Columna 1"} })))
.add_item(Flex::with(top_menu))
.add_item(Flex::with(Html::with(html! { p { "Columna 3"} }))),
flex::Container::new()
.add_item(flex::Item::with(Html::with(html! { p { "Columna 1"} })))
.add_item(flex::Item::with(top_menu))
.add_item(flex::Item::with(Html::with(html! { p { "Columna 3"} }))),
)
.render()
}

40
packages/pagetop-bootsier/src/lib.rs
View file

@ -45,10 +45,10 @@ impl ThemeTrait for Bootsier {
fn prepare_body(&self, page: &mut Page) -> Markup {
let skip_to_id = concat_string!("#", page.skip_to().get().unwrap_or("content".to_owned()));
Container::body()
.with_id(page.body_id().get().unwrap_or("".to_string()))
.with_classes(ClassesOp::Add, page.body_classes().get().unwrap_or("".to_string()))
.add_item(Flex::bundle()
flex::Container::body()
.with_id(page.body_id().get().unwrap_or_default())
.with_classes(ClassesOp::Add, page.body_classes().get().unwrap_or_default())
.add_item(flex::Item::bundle()
.add_component(Html::with(html! {
@if let Some(skip) = L10n::l("skip_to_content").using(page.context().langid()) {
div class="skip__to_content" {
@ -58,23 +58,23 @@ impl ThemeTrait for Bootsier {
}))
.add_component(
match page.context().layout() {
"admin" => Container::new().add_item(
Flex::new()
.add_component(Region::named("top-menu"))
.add_component(Region::named("side-menu"))
.add_component(Region::named("content")),
"admin" => flex::Container::new().add_item(
flex::Item::new()
.add_component(flex::Region::named("top-menu"))
.add_component(flex::Region::named("side-menu"))
.add_component(flex::Region::named("content")),
),
_ => Container::new().add_item(
Flex::new()
.add_component(Region::named("header"))
.add_component(Region::named("nav_branding"))
.add_component(Region::named("nav_main"))
.add_component(Region::named("nav_additional"))
.add_component(Region::named("breadcrumb"))
.add_component(Region::named("content"))
.add_component(Region::named("sidebar_first"))
.add_component(Region::named("sidebar_second"))
.add_component(Region::named("footer")),
_ => flex::Container::new().add_item(
flex::Item::new()
.add_component(flex::Region::named("header"))
.add_component(flex::Region::named("nav_branding"))
.add_component(flex::Region::named("nav_main"))
.add_component(flex::Region::named("nav_additional"))
.add_component(flex::Region::named("breadcrumb"))
.add_component(flex::Region::named("content"))
.add_component(flex::Region::named("sidebar_first"))
.add_component(flex::Region::named("sidebar_second"))
.add_component(flex::Region::named("footer")),
),
}
)

4
packages/pagetop-user/src/lib.rs
View file

@ -33,9 +33,9 @@ async fn login(request: HttpRequest) -> ResultPage<Markup, ErrorPage> {
Page::new(request)
.with_title(L10n::n("Identificación del usuario"))
.with_component(
Container::new()
flex::Container::new()
.with_id("welcome")
.add_item(Flex::with(form_login())),
.add_item(flex::Item::with(form_login())),
)
.render()
}

5
src/base/component.rs
View file

@ -157,12 +157,11 @@ impl ToString for FontSize {
// *************************************************************************************************
pub mod flex;
mod basic;
pub use basic::*;
mod layout;
pub use layout::*;
mod error403;
pub use error403::Error403;

182
src/base/component/layout.rs → src/base/component/flex.rs
View file

@ -1,8 +1,8 @@
mod container;
pub use container::Container;
mod flex;
pub use flex::Flex;
mod item;
pub use item::Item;
mod region;
pub use region::Region;
@ -12,7 +12,7 @@ use crate::prelude::*;
// *************************************************************************************************
#[derive(AutoDefault)]
pub enum FlexDirection {
pub enum Direction {
#[default]
Default,
Row(BreakPoint),
@ -22,22 +22,22 @@ pub enum FlexDirection {
}
#[rustfmt::skip]
impl ToString for FlexDirection {
impl ToString for Direction {
fn to_string(&self) -> String {
match self {
FlexDirection::Default => concat_string!(
Direction::Default => concat_string!(
"flex__row ", BreakPoint::default().to_string()
),
FlexDirection::Row(breakpoint) => concat_string!(
Direction::Row(breakpoint) => concat_string!(
"flex__row ", breakpoint.to_string()
),
FlexDirection::RowReverse(breakpoint) => concat_string!(
Direction::RowReverse(breakpoint) => concat_string!(
"flex__row flex__reverse ", breakpoint.to_string()
),
FlexDirection::Column(breakpoint) => concat_string!(
Direction::Column(breakpoint) => concat_string!(
"flex__col ", breakpoint.to_string()
),
FlexDirection::ColumnReverse(breakpoint) => concat_string!(
Direction::ColumnReverse(breakpoint) => concat_string!(
"flex__col flex__reverse ", breakpoint.to_string()
),
}
@ -47,7 +47,7 @@ impl ToString for FlexDirection {
// *************************************************************************************************
#[derive(AutoDefault)]
pub enum FlexWrap {
pub enum Wrap {
#[default]
Default,
NoWrap,
@ -56,13 +56,13 @@ pub enum FlexWrap {
}
#[rustfmt::skip]
impl ToString for FlexWrap {
impl ToString for Wrap {
fn to_string(&self) -> String {
match self {
FlexWrap::Default => "".to_owned(),
FlexWrap::NoWrap => "flex__nowrap".to_owned(),
FlexWrap::Wrap(a) => concat_string!("flex__wrap ", a.to_string()),
FlexWrap::WrapReverse(a) => concat_string!("flex__wrap-reverse ", a.to_string()),
Wrap::Default => "".to_owned(),
Wrap::NoWrap => "flex__nowrap".to_owned(),
Wrap::Wrap(a) => concat_string!("flex__wrap ", a.to_string()),
Wrap::WrapReverse(a) => concat_string!("flex__wrap-reverse ", a.to_string()),
}
}
}
@ -99,7 +99,7 @@ impl ToString for ContentAlign {
// *************************************************************************************************
#[derive(AutoDefault)]
pub enum FlexJustify {
pub enum Justify {
#[default]
Default,
Start,
@ -111,16 +111,16 @@ pub enum FlexJustify {
}
#[rustfmt::skip]
impl ToString for FlexJustify {
impl ToString for Justify {
fn to_string(&self) -> String {
String::from(match self {
FlexJustify::Default => "",
FlexJustify::Start => "flex__justify-start",
FlexJustify::End => "flex__justify-end",
FlexJustify::Center => "flex__justify-center",
FlexJustify::SpaceBetween => "flex__justify-space-between",
FlexJustify::SpaceAround => "flex__justify-space-around",
FlexJustify::SpaceEvenly => "flex__justify-space-evenly",
Justify::Default => "",
Justify::Start => "flex__justify-start",
Justify::End => "flex__justify-end",
Justify::Center => "flex__justify-center",
Justify::SpaceBetween => "flex__justify-space-between",
Justify::SpaceAround => "flex__justify-space-around",
Justify::SpaceEvenly => "flex__justify-space-evenly",
})
}
}
@ -128,7 +128,7 @@ impl ToString for FlexJustify {
// *************************************************************************************************
#[derive(AutoDefault)]
pub enum FlexAlign {
pub enum Align {
#[default]
Default,
Start,
@ -139,15 +139,15 @@ pub enum FlexAlign {
}
#[rustfmt::skip]
impl ToString for FlexAlign {
impl ToString for Align {
fn to_string(&self) -> String {
String::from(match self {
FlexAlign::Default => "",
FlexAlign::Start => "flex__start",
FlexAlign::End => "flex__end",
FlexAlign::Center => "flex__center",
FlexAlign::Stretch => "flex__stretch",
FlexAlign::Baseline => "flex__baseline",
Align::Default => "",
Align::Start => "flex__start",
Align::End => "flex__end",
Align::Center => "flex__center",
Align::Stretch => "flex__stretch",
Align::Baseline => "flex__baseline",
})
}
}
@ -155,7 +155,7 @@ impl ToString for FlexAlign {
// *************************************************************************************************
#[derive(AutoDefault)]
pub enum FlexGap {
pub enum Gap {
#[default]
Default,
Row(unit::Value),
@ -165,14 +165,14 @@ pub enum FlexGap {
}
#[rustfmt::skip]
impl ToString for FlexGap {
impl ToString for Gap {
fn to_string(&self) -> String {
match self {
FlexGap::Default => "".to_owned(),
FlexGap::Row(r) => concat_string!("row-gap: ", r.to_string(), ";"),
FlexGap::Column(c) => concat_string!("column-gap: ", c.to_string(), ";"),
FlexGap::Distinct(r, c) => concat_string!("gap: ", r.to_string(), " ", c.to_string(), ";"),
FlexGap::Both(v) => concat_string!("gap: ", v.to_string(), ";"),
Gap::Default => "".to_owned(),
Gap::Row(r) => concat_string!("row-gap: ", r.to_string(), ";"),
Gap::Column(c) => concat_string!("column-gap: ", c.to_string(), ";"),
Gap::Distinct(r, c) => concat_string!("gap: ", r.to_string(), " ", c.to_string(), ";"),
Gap::Both(v) => concat_string!("gap: ", v.to_string(), ";"),
}
}
}
@ -180,7 +180,7 @@ impl ToString for FlexGap {
// *************************************************************************************************
#[derive(AutoDefault)]
pub enum FlexGrow {
pub enum Grow {
#[default]
Default,
Is1,
@ -194,19 +194,19 @@ pub enum FlexGrow {
Is9,
}
impl ToString for FlexGrow {
impl ToString for Grow {
fn to_string(&self) -> String {
String::from(match self {
FlexGrow::Default => "",
FlexGrow::Is1 => "flex__grow-1",
FlexGrow::Is2 => "flex__grow-2",
FlexGrow::Is3 => "flex__grow-3",
FlexGrow::Is4 => "flex__grow-4",
FlexGrow::Is5 => "flex__grow-5",
FlexGrow::Is6 => "flex__grow-6",
FlexGrow::Is7 => "flex__grow-7",
FlexGrow::Is8 => "flex__grow-8",
FlexGrow::Is9 => "flex__grow-9",
Grow::Default => "",
Grow::Is1 => "flex__grow-1",
Grow::Is2 => "flex__grow-2",
Grow::Is3 => "flex__grow-3",
Grow::Is4 => "flex__grow-4",
Grow::Is5 => "flex__grow-5",
Grow::Is6 => "flex__grow-6",
Grow::Is7 => "flex__grow-7",
Grow::Is8 => "flex__grow-8",
Grow::Is9 => "flex__grow-9",
})
}
}
@ -214,7 +214,7 @@ impl ToString for FlexGrow {
// *************************************************************************************************
#[derive(AutoDefault)]
pub enum FlexShrink {
pub enum Shrink {
#[default]
Default,
Is1,
@ -228,19 +228,19 @@ pub enum FlexShrink {
Is9,
}
impl ToString for FlexShrink {
impl ToString for Shrink {
fn to_string(&self) -> String {
String::from(match self {
FlexShrink::Default => "",
FlexShrink::Is1 => "flex__shrink-1",
FlexShrink::Is2 => "flex__shrink-2",
FlexShrink::Is3 => "flex__shrink-3",
FlexShrink::Is4 => "flex__shrink-4",
FlexShrink::Is5 => "flex__shrink-5",
FlexShrink::Is6 => "flex__shrink-6",
FlexShrink::Is7 => "flex__shrink-7",
FlexShrink::Is8 => "flex__shrink-8",
FlexShrink::Is9 => "flex__shrink-9",
Shrink::Default => "",
Shrink::Is1 => "flex__shrink-1",
Shrink::Is2 => "flex__shrink-2",
Shrink::Is3 => "flex__shrink-3",
Shrink::Is4 => "flex__shrink-4",
Shrink::Is5 => "flex__shrink-5",
Shrink::Is6 => "flex__shrink-6",
Shrink::Is7 => "flex__shrink-7",
Shrink::Is8 => "flex__shrink-8",
Shrink::Is9 => "flex__shrink-9",
})
}
}
@ -248,7 +248,7 @@ impl ToString for FlexShrink {
// *************************************************************************************************
#[derive(AutoDefault)]
pub enum FlexSize {
pub enum Size {
#[default]
Default,
Percent10,
@ -264,21 +264,21 @@ pub enum FlexSize {
Percent90,
}
impl ToString for FlexSize {
impl ToString for Size {
fn to_string(&self) -> String {
String::from(match self {
FlexSize::Default => "",
FlexSize::Percent10 => "flex__size-10",
FlexSize::Percent20 => "flex__size-20",
FlexSize::Percent25 => "flex__size-25",
FlexSize::Percent33 => "flex__size-33",
FlexSize::Percent40 => "flex__size-40",
FlexSize::Percent50 => "flex__size-50",
FlexSize::Percent60 => "flex__size-60",
FlexSize::Percent66 => "flex__size-66",
FlexSize::Percent75 => "flex__size-75",
FlexSize::Percent80 => "flex__size-80",
FlexSize::Percent90 => "flex__size-90",
Size::Default => "",
Size::Percent10 => "flex__size-10",
Size::Percent20 => "flex__size-20",
Size::Percent25 => "flex__size-25",
Size::Percent33 => "flex__size-33",
Size::Percent40 => "flex__size-40",
Size::Percent50 => "flex__size-50",
Size::Percent60 => "flex__size-60",
Size::Percent66 => "flex__size-66",
Size::Percent75 => "flex__size-75",
Size::Percent80 => "flex__size-80",
Size::Percent90 => "flex__size-90",
})
}
}
@ -286,7 +286,7 @@ impl ToString for FlexSize {
// *************************************************************************************************
#[derive(AutoDefault)]
pub enum FlexOffset {
pub enum Offset {
#[default]
Default,
Offset10,
@ -302,21 +302,21 @@ pub enum FlexOffset {
Offset90,
}
impl ToString for FlexOffset {
impl ToString for Offset {
fn to_string(&self) -> String {
String::from(match self {
FlexOffset::Default => "",
FlexOffset::Offset10 => "flex__offset-10",
FlexOffset::Offset20 => "flex__offset-20",
FlexOffset::Offset25 => "flex__offset-25",
FlexOffset::Offset33 => "flex__offset-33",
FlexOffset::Offset40 => "flex__offset-40",
FlexOffset::Offset50 => "flex__offset-50",
FlexOffset::Offset60 => "flex__offset-60",
FlexOffset::Offset66 => "flex__offset-66",
FlexOffset::Offset75 => "flex__offset-75",
FlexOffset::Offset80 => "flex__offset-80",
FlexOffset::Offset90 => "flex__offset-90",
Offset::Default => "",
Offset::Offset10 => "flex__offset-10",
Offset::Offset20 => "flex__offset-20",
Offset::Offset25 => "flex__offset-25",
Offset::Offset33 => "flex__offset-33",
Offset::Offset40 => "flex__offset-40",
Offset::Offset50 => "flex__offset-50",
Offset::Offset60 => "flex__offset-60",
Offset::Offset66 => "flex__offset-66",
Offset::Offset75 => "flex__offset-75",
Offset::Offset80 => "flex__offset-80",
Offset::Offset90 => "flex__offset-90",
})
}
}

36
src/base/component/layout/container.rs → src/base/component/flex/container.rs
View file

@ -20,11 +20,11 @@ pub struct Container {
renderable : Renderable,
classes : OptionClasses,
container_type: ContainerType,
direction : FlexDirection,
flex_wrap : FlexWrap,
flex_justify : FlexJustify,
flex_align : FlexAlign,
flex_gap : FlexGap,
direction : flex::Direction,
flex_wrap : flex::Wrap,
flex_justify : flex::Justify,
flex_align : flex::Align,
flex_gap : flex::Gap,
items : MixedComponents,
}
@ -68,7 +68,7 @@ impl ComponentTrait for Container {
}
let gap = match self.gap() {
FlexGap::Default => None,
flex::Gap::Default => None,
_ => Some(self.gap().to_string()),
};
match self.container_type() {
@ -175,43 +175,43 @@ impl Container {
}
#[fn_builder]
pub fn alter_direction(&mut self, direction: FlexDirection) -> &mut Self {
pub fn alter_direction(&mut self, direction: flex::Direction) -> &mut Self {
self.direction = direction;
self
}
#[fn_builder]
pub fn alter_wrap(&mut self, wrap: FlexWrap) -> &mut Self {
pub fn alter_wrap(&mut self, wrap: flex::Wrap) -> &mut Self {
self.flex_wrap = wrap;
self
}
#[fn_builder]
pub fn alter_justify(&mut self, justify: FlexJustify) -> &mut Self {
pub fn alter_justify(&mut self, justify: flex::Justify) -> &mut Self {
self.flex_justify = justify;
self
}
#[fn_builder]
pub fn alter_align(&mut self, align: FlexAlign) -> &mut Self {
pub fn alter_align(&mut self, align: flex::Align) -> &mut Self {
self.flex_align = align;
self
}
#[fn_builder]
pub fn alter_gap(&mut self, gap: FlexGap) -> &mut Self {
pub fn alter_gap(&mut self, gap: flex::Gap) -> &mut Self {
self.flex_gap = gap;
self
}
#[fn_builder]
pub fn alter_items(&mut self, op: TypedOp<Flex>) -> &mut Self {
pub fn alter_items(&mut self, op: TypedOp<flex::Item>) -> &mut Self {
self.items.alter_typed(op);
self
}
#[rustfmt::skip]
pub fn add_item(mut self, item: Flex) -> Self {
pub fn add_item(mut self, item: flex::Item) -> Self {
self.items.alter_value(AnyOp::Add(AnyComponent::with(item)));
self
}
@ -222,23 +222,23 @@ impl Container {
&self.container_type
}
pub fn direction(&self) -> &FlexDirection {
pub fn direction(&self) -> &flex::Direction {
&self.direction
}
pub fn wrap(&self) -> &FlexWrap {
pub fn wrap(&self) -> &flex::Wrap {
&self.flex_wrap
}
pub fn justify(&self) -> &FlexJustify {
pub fn justify(&self) -> &flex::Justify {
&self.flex_justify
}
pub fn align(&self) -> &FlexAlign {
pub fn align(&self) -> &flex::Align {
&self.flex_align
}
pub fn gap(&self) -> &FlexGap {
pub fn gap(&self) -> &flex::Gap {
&self.flex_gap
}

56
src/base/component/layout/flex.rs → src/base/component/flex/item.rs
View file

@ -10,23 +10,23 @@ pub enum ItemType {
#[rustfmt::skip]
#[derive(AutoDefault, ComponentClasses)]
pub struct Flex {
id : OptionId,
weight : Weight,
renderable : Renderable,
classes : OptionClasses,
item_type : ItemType,
flex_grow : FlexGrow,
flex_shrink : FlexShrink,
flex_size : FlexSize,
flex_offset : FlexOffset,
flex_align : FlexAlign,
mixed : MixedComponents,
pub struct Item {
id : OptionId,
weight : Weight,
renderable : Renderable,
classes : OptionClasses,
item_type : ItemType,
flex_grow : flex::Grow,
flex_shrink: flex::Shrink,
flex_size : flex::Size,
flex_offset: flex::Offset,
flex_align : flex::Align,
mixed : MixedComponents,
}
impl ComponentTrait for Flex {
impl ComponentTrait for Item {
fn new() -> Self {
Flex::default()
Item::default()
}
fn id(&self) -> Option<String> {
@ -86,23 +86,23 @@ impl ComponentTrait for Flex {
}
}
impl Flex {
impl Item {
pub fn wrapper() -> Self {
Flex {
Item {
item_type: ItemType::Wrapper,
..Default::default()
}
}
pub fn bundle() -> Self {
Flex {
Item {
item_type: ItemType::Bundle,
..Default::default()
}
}
pub fn with(component: impl ComponentTrait) -> Self {
Flex::default().add_component(component)
Item::default().add_component(component)
}
// Item BUILDER.
@ -126,13 +126,13 @@ impl Flex {
}
#[fn_builder]
pub fn alter_grow(&mut self, grow: FlexGrow) -> &mut Self {
pub fn alter_grow(&mut self, grow: flex::Grow) -> &mut Self {
self.flex_grow = grow;
self
}
#[fn_builder]
pub fn alter_shrink(&mut self, shrink: FlexShrink) -> &mut Self {
pub fn alter_shrink(&mut self, shrink: flex::Shrink) -> &mut Self {
self.flex_shrink = shrink;
self
}
@ -140,19 +140,19 @@ impl Flex {
#[fn_builder]
// Ensures the item occupies the exact specified width, neither growing nor shrinking,
// regardless of the available space in the container or the size of other items.
pub fn alter_size(&mut self, size: FlexSize) -> &mut Self {
pub fn alter_size(&mut self, size: flex::Size) -> &mut Self {
self.flex_size = size;
self
}
#[fn_builder]
pub fn alter_offset(&mut self, offset: FlexOffset) -> &mut Self {
pub fn alter_offset(&mut self, offset: flex::Offset) -> &mut Self {
self.flex_offset = offset;
self
}
#[fn_builder]
pub fn alter_align(&mut self, align: FlexAlign) -> &mut Self {
pub fn alter_align(&mut self, align: flex::Align) -> &mut Self {
self.flex_align = align;
self
}
@ -175,23 +175,23 @@ impl Flex {
&self.item_type
}
pub fn grow(&self) -> &FlexGrow {
pub fn grow(&self) -> &flex::Grow {
&self.flex_grow
}
pub fn shrink(&self) -> &FlexShrink {
pub fn shrink(&self) -> &flex::Shrink {
&self.flex_shrink
}
pub fn size(&self) -> &FlexSize {
pub fn size(&self) -> &flex::Size {
&self.flex_size
}
pub fn offset(&self) -> &FlexOffset {
pub fn offset(&self) -> &flex::Offset {
&self.flex_offset
}
pub fn align(&self) -> &FlexAlign {
pub fn align(&self) -> &flex::Align {
&self.flex_align
}

0
src/base/component/layout/region.rs → src/base/component/flex/region.rs
View file

284
src/base/package/welcome.rs
View file

@ -47,74 +47,78 @@ fn home(request: HttpRequest, lang: &'static LanguageIdentifier) -> ResultPage<M
.render()
}
fn hello_world() -> Container {
Container::header()
fn hello_world() -> flex::Container {
flex::Container::header()
.with_classes(ClassesOp::Add, "hello-world")
.with_justify(FlexJustify::Center)
.with_justify(flex::Justify::Center)
.add_item(
Flex::new().with_size(FlexSize::Percent90).add_component(
Container::new()
.with_direction(FlexDirection::Column(BreakPoint::MD))
.add_item(
Flex::new()
.with_classes(ClassesOp::Add, "hello-col-text")
.with_size(FlexSize::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,
flex::Item::new()
.with_size(flex::Size::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::Size::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",
),
),
))
.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")
.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_item(
Flex::with(Image::with("/base/images/header.svg"))
.with_classes(ClassesOp::Add, "hello-col-image")
.with_size(FlexSize::Percent60),
),
),
)
.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::Size::Percent60),
),
),
)
}
fn welcome() -> Container {
Container::section()
fn welcome() -> flex::Container {
flex::Container::section()
.with_id("welcome-page")
.with_classes(ClassesOp::Add, "welcome")
.with_justify(FlexJustify::Center)
.with_justify(flex::Justify::Center)
.add_item(
Flex::new()
.with_size(FlexSize::Percent80)
flex::Item::new()
.with_size(flex::Size::Percent80)
.add_component(Heading::h2(L10n::l("welcome_page")))
.add_component(
Heading::h3(L10n::l("welcome_subtitle").with_arg(
@ -133,98 +137,104 @@ fn welcome() -> Container {
)
}
fn about_pagetop() -> Container {
Container::new()
fn about_pagetop() -> flex::Container {
flex::Container::new()
.with_classes(ClassesOp::Add, "pagetop")
.with_justify(FlexJustify::Center)
.with_justify(flex::Justify::Center)
.add_item(
Flex::new().with_size(FlexSize::Percent90).add_component(
Container::new()
.with_direction(FlexDirection::Column(BreakPoint::SM))
.add_item(
Flex::with(Image::with("/base/images/about.svg"))
.with_classes(ClassesOp::Add, "pagetop-col-image")
.with_size(FlexSize::Percent40),
)
.add_item(
Flex::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"))),
),
),
flex::Item::new()
.with_size(flex::Size::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::Size::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 promo_pagetop() -> Container {
Container::new()
fn promo_pagetop() -> flex::Container {
flex::Container::new()
.with_classes(ClassesOp::Add, "promo")
.with_justify(FlexJustify::Center)
.with_justify(flex::Justify::Center)
.add_item(
Flex::new().with_size(FlexSize::Percent75).add_component(
Container::new()
.with_direction(FlexDirection::Column(BreakPoint::MD))
.add_item(
Flex::new()
.with_classes(ClassesOp::Add, "promo-col-text")
.with_size(FlexSize::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::with(Image::with("/base/images/pagetop.png"))
.with_classes(ClassesOp::Add, "promo-col-image")
.with_size(FlexSize::Percent50),
),
),
flex::Item::new()
.with_size(flex::Size::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::Size::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::Size::Percent50),
),
),
)
}
fn reporting_issues() -> Container {
Container::new()
fn reporting_issues() -> flex::Container {
flex::Container::new()
.with_classes(ClassesOp::Add, "issues")
.with_justify(FlexJustify::Center)
.with_justify(flex::Justify::Center)
.add_item(
Flex::new().with_size(FlexSize::Percent90).add_component(
Container::new()
.with_direction(FlexDirection::Column(BreakPoint::MD))
.add_item(
Flex::with(Image::with("/base/images/issues.jpg"))
.with_classes(ClassesOp::Add, "issues-col-image"),
)
.add_item(
Flex::new()
.with_classes(ClassesOp::Add, "issues-col-text")
.with_size(FlexSize::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,
flex::Item::new()
.with_size(flex::Size::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::Size::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,
),
),
),
)),
),
),
)),
),
),
)
}

34
src/core/theme/definition.rs
View file

@ -28,10 +28,10 @@ pub trait ThemeTrait: PackageTrait + Send + Sync {
fn prepare_body(&self, page: &mut Page) -> Markup {
let skip_to_id = concat_string!("#", page.skip_to().get().unwrap_or("content".to_owned()));
Container::body()
flex::Container::body()
.with_id(page.body_id().get().unwrap_or_default())
.with_classes(ClassesOp::Add, page.body_classes().get().unwrap_or_default())
.add_item(Flex::bundle()
.add_item(flex::Item::bundle()
.add_component(Html::with(html! {
@if let Some(skip) = L10n::l("skip_to_content").using(page.context().langid()) {
div class="skip__to_content" {
@ -39,35 +39,35 @@ pub trait ThemeTrait: PackageTrait + Send + Sync {
}
}
}))
.add_component(Container::new()
.add_component(flex::Container::new()
.with_id("body__wrapper")
.with_direction(FlexDirection::Column(BreakPoint::None))
.with_align(FlexAlign::Center)
.add_item(Flex::with(Region::named("header")).with_id("header"))
.add_item(Flex::with(Region::named("pagetop")).with_id("pagetop"))
.with_direction(flex::Direction::Column(BreakPoint::None))
.with_align(flex::Align::Center)
.add_item(flex::Item::with(flex::Region::named("header")).with_id("header"))
.add_item(flex::Item::with(flex::Region::named("pagetop")).with_id("pagetop"))
.add_item(
Flex::with(
Container::new()
.with_direction(FlexDirection::Row(BreakPoint::None))
flex::Item::with(
flex::Container::new()
.with_direction(flex::Direction::Row(BreakPoint::None))
.add_item(
Flex::with(Region::named("sidebar_left"))
flex::Item::with(flex::Region::named("sidebar_left"))
.with_id("sidebar_left")
.with_grow(FlexGrow::Is1),
.with_grow(flex::Grow::Is1),
)
.add_item(
Flex::with(Region::named("content"))
flex::Item::with(flex::Region::named("content"))
.with_id("content")
.with_grow(FlexGrow::Is3),
.with_grow(flex::Grow::Is3),
)
.add_item(
Flex::with(Region::named("sidebar_right"))
flex::Item::with(flex::Region::named("sidebar_right"))
.with_id("sidebar_right")
.with_grow(FlexGrow::Is1),
.with_grow(flex::Grow::Is1),
),
)
.with_id("flex__wrapper"),
)
.add_item(Flex::with(Region::named("footer")).with_id("footer")),
.add_item(flex::Item::with(flex::Region::named("footer")).with_id("footer")),
)
)
.render(page.context())