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

🚧 Review content layout with flex components

Browse source
This commit is contained in:
Manuel Cillero 2024-03-17 21:18:36 +01:00
parent e8364a40ee
commit dfbe807a61
11 changed files with 353 additions and 441 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

19
src/base/component.rs
View file

@ -63,14 +63,14 @@ pub(crate) fn add_base_assets(cx: &mut Context) {
#[derive(AutoDefault)] #[derive(AutoDefault)]
pub enum BreakPoint { pub enum BreakPoint {
#[default] #[default]
None, /* Does not apply. Rest initially assume 1 pixel = 0.0625rem */ None, // Does not apply. Rest initially assume 1 pixel = 0.0625rem
SM, /* PageTop default applies to <= 568px - @media screen and (max-width: 35.5rem) */ SM, // @media screen and [ (max-width: 35.5rem) <= 568px < (min-width: 35.5625rem) ]
MD, /* PageTop default applies to <= 768px - @media screen and (max-width: 48rem) */ MD, // @media screen and [ (max-width: 48rem) <= 768px < (min-width: 48.0625rem) ]
LG, /* PageTop default applies to <= 992px - @media screen and (max-width: 62rem) */ LG, // @media screen and [ (max-width: 62rem) <= 992px < (min-width: 62.0625rem) ]
XL, /* PageTop default applies to <= 1280px - @media screen and (max-width: 80rem) */ XL, // @media screen and [ (max-width: 80rem) <= 1280px < (min-width: 80.0625rem) ]
X2L, /* PageTop default applies to <= 1440px - @media screen and (max-width: 90rem) */ X2L, // @media screen and [ (max-width: 90rem) <= 1440px < (min-width: 90.0625rem) ]
X3L, /* PageTop default applies to <= 1920px - @media screen and (max-width: 120rem) */ X3L, // @media screen and [ (max-width: 120rem) <= 1920px < (min-width: 120.0625rem) ]
X2K, /* PageTop default applies to <= 2560px - @media screen and (max-width: 160rem) */ X2K, // @media screen and [ (max-width: 160rem) <= 2560px < (min-width: 160.0625rem) ]
} }
#[rustfmt::skip] #[rustfmt::skip]
@ -175,9 +175,6 @@ pub use error403::Error403;
mod error404; mod error404;
pub use error404::Error404; pub use error404::Error404;
mod wrapper;
pub use wrapper::{Wrapper, WrapperType};
pub mod flex; pub mod flex;
mod icon; mod icon;

42
src/base/component/flex.rs
View file

@ -175,24 +175,6 @@ impl ToString for Gap {
// ************************************************************************************************* // *************************************************************************************************
#[derive(AutoDefault)]
pub enum ItemWide {
#[default]
Auto,
Full,
}
impl ToString for ItemWide {
fn to_string(&self) -> String {
String::from(match self {
ItemWide::Auto => "",
ItemWide::Full => "flex__full",
})
}
}
// *************************************************************************************************
#[derive(AutoDefault)] #[derive(AutoDefault)]
pub enum ItemGrow { pub enum ItemGrow {
#[default] #[default]
@ -276,25 +258,23 @@ pub enum ItemSize {
Percent75, Percent75,
Percent80, Percent80,
Percent90, Percent90,
FullWidth,
} }
impl ToString for ItemSize { impl ToString for ItemSize {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
ItemSize::Default => "", ItemSize::Default => "",
ItemSize::Percent10 => "flex__item-width-10", ItemSize::Percent10 => "flex__item-size-10",
ItemSize::Percent20 => "flex__item-width-20", ItemSize::Percent20 => "flex__item-size-20",
ItemSize::Percent25 => "flex__item-width-25", ItemSize::Percent25 => "flex__item-size-25",
ItemSize::Percent33 => "flex__item-width-33", ItemSize::Percent33 => "flex__item-size-33",
ItemSize::Percent40 => "flex__item-width-40", ItemSize::Percent40 => "flex__item-size-40",
ItemSize::Percent50 => "flex__item-width-50", ItemSize::Percent50 => "flex__item-size-50",
ItemSize::Percent60 => "flex__item-width-60", ItemSize::Percent60 => "flex__item-size-60",
ItemSize::Percent66 => "flex__item-width-66", ItemSize::Percent66 => "flex__item-size-66",
ItemSize::Percent75 => "flex__item-width-75", ItemSize::Percent75 => "flex__item-size-75",
ItemSize::Percent80 => "flex__item-width-80", ItemSize::Percent80 => "flex__item-size-80",
ItemSize::Percent90 => "flex__item-width-90", ItemSize::Percent90 => "flex__item-size-90",
ItemSize::FullWidth => "flex__item-fullwidth",
}) })
} }
} }

104
src/base/component/flex/container.rs
View file

@ -1,5 +1,16 @@
use crate::prelude::*; use crate::prelude::*;
#[derive(AutoDefault)]
pub enum ContainerType {
#[default]
Default,
Header,
Main,
Section,
Article,
Footer,
}
#[rustfmt::skip] #[rustfmt::skip]
#[derive(AutoDefault, ComponentClasses)] #[derive(AutoDefault, ComponentClasses)]
pub struct Container { pub struct Container {
@ -7,12 +18,13 @@ pub struct Container {
weight : Weight, weight : Weight,
renderable : Renderable, renderable : Renderable,
classes : OptionClasses, classes : OptionClasses,
container_type : ContainerType,
direction : flex::Direction, direction : flex::Direction,
wrap_align : flex::WrapAlign, wrap_align : flex::WrapAlign,
content_justify: flex::ContentJustify, content_justify: flex::ContentJustify,
items_align : flex::ItemAlign, items_align : flex::ItemAlign,
gap : flex::Gap, gap : flex::Gap,
items : TypedComponents<flex::Item>, items : MixedComponents,
} }
impl ComponentTrait for Container { impl ComponentTrait for Container {
@ -50,23 +62,85 @@ impl ComponentTrait for Container {
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
let output = self.items().render(cx); let output = self.items().render(cx);
if !output.is_empty() { if output.is_empty() {
let gap = match self.gap() { return PrepareMarkup::None;
flex::Gap::Default => None, }
_ => Some(self.gap().to_string()),
}; let gap = match self.gap() {
PrepareMarkup::With(html! { flex::Gap::Default => None,
_ => Some(self.gap().to_string()),
};
match self.container_type() {
ContainerType::Default => PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] style=[gap] { div id=[self.id()] class=[self.classes().get()] style=[gap] {
(output) (output)
} }
}) }),
} else { ContainerType::Header => PrepareMarkup::With(html! {
PrepareMarkup::None header id=[self.id()] class=[self.classes().get()] style=[gap] {
(output)
}
}),
ContainerType::Main => PrepareMarkup::With(html! {
main id=[self.id()] class=[self.classes().get()] style=[gap] {
(output)
}
}),
ContainerType::Section => PrepareMarkup::With(html! {
section id=[self.id()] class=[self.classes().get()] style=[gap] {
(output)
}
}),
ContainerType::Article => PrepareMarkup::With(html! {
article id=[self.id()] class=[self.classes().get()] style=[gap] {
(output)
}
}),
ContainerType::Footer => PrepareMarkup::With(html! {
footer id=[self.id()] class=[self.classes().get()] style=[gap] {
(output)
}
}),
} }
} }
} }
impl Container { impl Container {
pub fn header() -> Self {
Container {
container_type: ContainerType::Header,
..Default::default()
}
}
pub fn main() -> Self {
Container {
container_type: ContainerType::Main,
..Default::default()
}
}
pub fn section() -> Self {
Container {
container_type: ContainerType::Section,
..Default::default()
}
}
pub fn article() -> Self {
Container {
container_type: ContainerType::Article,
..Default::default()
}
}
pub fn footer() -> Self {
Container {
container_type: ContainerType::Footer,
..Default::default()
}
}
// Container BUILDER. // Container BUILDER.
#[fn_builder] #[fn_builder]
@ -119,18 +193,22 @@ impl Container {
#[fn_builder] #[fn_builder]
pub fn alter_items(&mut self, op: TypedOp<flex::Item>) -> &mut Self { pub fn alter_items(&mut self, op: TypedOp<flex::Item>) -> &mut Self {
self.items.alter_value(op); self.items.alter_typed(op);
self self
} }
#[rustfmt::skip] #[rustfmt::skip]
pub fn add_item(mut self, item: flex::Item) -> Self { pub fn add_item(mut self, item: flex::Item) -> Self {
self.items.alter_value(TypedOp::Add(OneComponent::with(item))); self.items.alter_value(AnyOp::Add(AnyComponent::with(item)));
self self
} }
// Container GETTERS. // Container GETTERS.
pub fn container_type(&self) -> &ContainerType {
&self.container_type
}
pub fn direction(&self) -> &flex::Direction { pub fn direction(&self) -> &flex::Direction {
&self.direction &self.direction
} }
@ -151,7 +229,7 @@ impl Container {
&self.gap &self.gap
} }
pub fn items(&self) -> &TypedComponents<flex::Item> { pub fn items(&self) -> &MixedComponents {
&self.items &self.items
} }
} }

18
src/base/component/flex/item.rs
View file

@ -7,7 +7,6 @@ pub struct Item {
weight : Weight, weight : Weight,
renderable : Renderable, renderable : Renderable,
classes : OptionClasses, classes : OptionClasses,
item_wide : flex::ItemWide,
item_grow : flex::ItemGrow, item_grow : flex::ItemGrow,
item_shrink : flex::ItemShrink, item_shrink : flex::ItemShrink,
item_size : flex::ItemSize, item_size : flex::ItemSize,
@ -38,7 +37,6 @@ impl ComponentTrait for Item {
ClassesOp::Prepend, ClassesOp::Prepend,
[ [
String::from("flex__item"), String::from("flex__item"),
self.wide().to_string(),
self.grow().to_string(), self.grow().to_string(),
self.shrink().to_string(), self.shrink().to_string(),
self.size().to_string(), self.size().to_string(),
@ -74,12 +72,6 @@ impl Item {
Item::default().add_component(component) Item::default().add_component(component)
} }
pub fn full(component: impl ComponentTrait) -> Self {
Item::default()
.with_wide(flex::ItemWide::Full)
.add_component(component)
}
// Item BUILDER. // Item BUILDER.
#[fn_builder] #[fn_builder]
@ -100,12 +92,6 @@ impl Item {
self self
} }
#[fn_builder]
pub fn alter_wide(&mut self, wide: flex::ItemWide) -> &mut Self {
self.item_wide = wide;
self
}
#[fn_builder] #[fn_builder]
pub fn alter_grow(&mut self, grow: flex::ItemGrow) -> &mut Self { pub fn alter_grow(&mut self, grow: flex::ItemGrow) -> &mut Self {
self.item_grow = grow; self.item_grow = grow;
@ -152,10 +138,6 @@ impl Item {
// Item GETTERS. // Item GETTERS.
pub fn wide(&self) -> &flex::ItemWide {
&self.item_wide
}
pub fn grow(&self) -> &flex::ItemGrow { pub fn grow(&self) -> &flex::ItemGrow {
&self.item_grow &self.item_grow
} }

48
src/base/component/layout.rs
View file

@ -23,29 +23,31 @@ impl Layout {
.with_id("body__wrapper") .with_id("body__wrapper")
.with_direction(flex::Direction::Column(BreakPoint::None)) .with_direction(flex::Direction::Column(BreakPoint::None))
.with_items_align(flex::ItemAlign::Center) .with_items_align(flex::ItemAlign::Center)
.add_item(flex::Item::full(Region::named("header")).with_id("header")) .add_item(flex::Item::with(Region::named("header")).with_id("header"))
.add_item(flex::Item::full(Region::named("pagetop")).with_id("pagetop")) .add_item(flex::Item::with(Region::named("pagetop")).with_id("pagetop"))
.add_item(flex::Item::full( .add_item(
flex::Container::new() flex::Item::with(
.with_id("content__wrapper") flex::Container::new()
.with_direction(flex::Direction::Row(BreakPoint::None)) .with_direction(flex::Direction::Row(BreakPoint::None))
.add_item( .add_item(
flex::Item::with(Region::named("sidebar_left")) flex::Item::with(Region::named("sidebar_left"))
.with_id("sidebar_left") .with_id("sidebar_left")
.with_grow(flex::ItemGrow::Is1), .with_grow(flex::ItemGrow::Is1),
) )
.add_item( .add_item(
flex::Item::with(Region::named("content")) flex::Item::with(Region::named("content"))
.with_id("content") .with_id("content")
.with_grow(flex::ItemGrow::Is3), .with_grow(flex::ItemGrow::Is3),
) )
.add_item( .add_item(
flex::Item::with(Region::named("sidebar_right")) flex::Item::with(Region::named("sidebar_right"))
.with_id("sidebar_right") .with_id("sidebar_right")
.with_grow(flex::ItemGrow::Is1), .with_grow(flex::ItemGrow::Is1),
), ),
)) )
.add_item(flex::Item::full(Region::named("footer")).with_id("footer")) .with_id("content__wrapper"),
)
.add_item(flex::Item::with(Region::named("footer")).with_id("footer"))
.render(cx) .render(cx)
} }

148
src/base/component/wrapper.rs
View file

@ -1,148 +0,0 @@
use crate::prelude::*;
#[derive(AutoDefault)]
pub enum WrapperType {
#[default]
Container,
Header,
Footer,
Main,
Section,
}
#[rustfmt::skip]
#[derive(AutoDefault, ComponentClasses)]
pub struct Wrapper {
id : OptionId,
weight : Weight,
renderable : Renderable,
classes : OptionClasses,
wrapper_type: WrapperType,
mixed : MixedComponents,
}
impl ComponentTrait for Wrapper {
fn new() -> Self {
Wrapper::default().with_classes(ClassesOp::Add, "wrapper__container")
}
fn id(&self) -> Option<String> {
self.id.get()
}
fn weight(&self) -> Weight {
self.weight
}
fn is_renderable(&self, cx: &Context) -> bool {
(self.renderable.check)(cx)
}
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
match self.wrapper_type() {
WrapperType::Container => PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] {
div class="wrapper__content" {
(self.components().render(cx))
}
}
}),
WrapperType::Main => PrepareMarkup::With(html! {
main id=[self.id()] class=[self.classes().get()] {
div class="wrapper__content" {
(self.components().render(cx))
}
}
}),
WrapperType::Section => PrepareMarkup::With(html! {
section id=[self.id()] class=[self.classes().get()] {
div class="wrapper__content" {
(self.components().render(cx))
}
}
}),
WrapperType::Header => PrepareMarkup::With(html! {
header id=[self.id()] class=[self.classes().get()] {
div class="wrapper__content" {
(self.components().render(cx))
}
}
}),
WrapperType::Footer => PrepareMarkup::With(html! {
footer id=[self.id()] class=[self.classes().get()] {
div class="wrapper__content" {
(self.components().render(cx))
}
}
}),
}
}
}
impl Wrapper {
pub fn main() -> Self {
let mut c = Wrapper::default().with_classes(ClassesOp::Add, "main__container");
c.wrapper_type = WrapperType::Main;
c
}
pub fn section() -> Self {
let mut c = Wrapper::default().with_classes(ClassesOp::Add, "section__container");
c.wrapper_type = WrapperType::Section;
c
}
pub fn header() -> Self {
let mut c = Wrapper::default().with_classes(ClassesOp::Add, "header__container");
c.wrapper_type = WrapperType::Header;
c
}
pub fn footer() -> Self {
let mut c = Wrapper::default().with_classes(ClassesOp::Add, "footer__container");
c.wrapper_type = WrapperType::Footer;
c
}
// Wrapper BUILDER.
#[fn_builder]
pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
self.id.alter_value(id);
self
}
#[fn_builder]
pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
self.weight = value;
self
}
#[fn_builder]
pub fn alter_renderable(&mut self, check: FnIsRenderable) -> &mut Self {
self.renderable.check = check;
self
}
#[fn_builder]
pub fn alter_components(&mut self, op: MixedOp) -> &mut Self {
self.mixed.alter_value(op);
self
}
#[rustfmt::skip]
pub fn add_component(mut self, component: impl ComponentTrait) -> Self {
self.mixed.alter_value(MixedOp::Add(AnyComponent::with(component)));
self
}
// Wrapper GETTERS.
pub fn wrapper_type(&self) -> &WrapperType {
&self.wrapper_type
}
pub fn components(&self) -> &MixedComponents {
&self.mixed
}
}

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

@ -47,168 +47,194 @@ fn home(request: HttpRequest, lang: &'static LanguageIdentifier) -> ResultPage<M
.render() .render()
} }
fn hello_world() -> Wrapper { fn hello_world() -> flex::Container {
Wrapper::header() flex::Container::header()
.with_classes(ClassesOp::Add, "hello-world") .with_classes(ClassesOp::Add, "hello-world")
.add_component( .with_content_justify(flex::ContentJustify::Center)
flex::Container::new() .add_item(
.with_direction(flex::Direction::Column(BreakPoint::MD)) flex::Item::new()
.add_item( .with_size(flex::ItemSize::Percent90)
flex::Item::new() .add_component(
.with_classes(ClassesOp::Add, "hello-col-text") flex::Container::new()
.with_size(flex::ItemSize::Percent40) .with_direction(flex::Direction::Column(BreakPoint::MD))
.add_component( .add_item(
Heading::h1(L10n::l("welcome_title")).with_size(HeadingSize::Medium), flex::Item::new()
) .with_classes(ClassesOp::Add, "hello-col-text")
.add_component( .with_size(flex::ItemSize::Percent40)
Paragraph::fluent(L10n::l("welcome_intro").with_arg( .add_component(
"app", Heading::h1(L10n::l("welcome_title"))
format!( .with_size(HeadingSize::Medium),
"<span class=\"app-name\">{}</span>", )
&config::SETTINGS.app.name, .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( .add_item(
"pagetop", flex::Item::with(Image::with("/base/images/header.svg"))
format!( .with_classes(ClassesOp::Add, "hello-col-image")
"<a href=\"{}\" target=\"_blank\">{}</a>", .with_size(flex::ItemSize::Percent60),
"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::new()
.with_classes(ClassesOp::Add, "hello-col-image")
.with_size(flex::ItemSize::Percent60)
.add_component(Image::with("/base/images/header.svg")),
), ),
) )
} }
fn welcome() -> Wrapper { fn welcome() -> flex::Container {
Wrapper::section() flex::Container::section()
.with_id("welcome-page") .with_id("welcome-page")
.with_classes(ClassesOp::Add, "welcome") .with_classes(ClassesOp::Add, "welcome")
.add_component(Heading::h2(L10n::l("welcome_page"))) .with_content_justify(flex::ContentJustify::Center)
.add_component( .add_item(
Heading::h3(L10n::l("welcome_subtitle").with_arg( flex::Item::new()
"app", .with_size(flex::ItemSize::Percent80)
format!( .add_component(Heading::h2(L10n::l("welcome_page")))
"<span class=\"app-name\">{}</span>", .add_component(
&config::SETTINGS.app.name Heading::h3(L10n::l("welcome_subtitle").with_arg(
), "app",
)) format!(
.with_size(HeadingSize::Subtitle), "<span class=\"app-name\">{}</span>",
) &config::SETTINGS.app.name
.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_size(HeadingSize::Subtitle),
) )
.add_item( .add_component(
flex::Item::new() Paragraph::fluent(L10n::l("welcome_text1")).with_font_size(FontSize::Medium),
.with_classes(ClassesOp::Add, "promo-col-image") )
.with_size(flex::ItemSize::Percent50) .add_component(Paragraph::fluent(L10n::l("welcome_text2"))),
.add_component(Image::with("/base/images/pagetop.png")), )
}
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 { fn promo_pagetop() -> flex::Container {
Wrapper::new() flex::Container::new()
.with_classes(ClassesOp::Add, "issues") .with_classes(ClassesOp::Add, "promo")
.add_component( .with_content_justify(flex::ContentJustify::Center)
flex::Container::new() .add_item(
.with_direction(flex::Direction::Column(BreakPoint::MD)) flex::Item::new()
.add_item( .with_size(flex::ItemSize::Percent75)
flex::Item::new() .add_component(
.with_classes(ClassesOp::Add, "issues-col-image") flex::Container::new()
.add_component(Image::with("/base/images/issues.jpg")), .with_direction(flex::Direction::Column(BreakPoint::MD))
) .add_item(
.add_item( flex::Item::new()
flex::Item::new() .with_classes(ClassesOp::Add, "promo-col-text")
.with_classes(ClassesOp::Add, "issues-col-text") .with_size(flex::ItemSize::Percent50)
.with_size(flex::ItemSize::Percent50) .add_component(Heading::h2(L10n::l("welcome_promo_title")))
.add_component(Heading::h2(L10n::l("welcome_issues_title"))) .add_component(
.add_component( Paragraph::fluent(L10n::l("welcome_promo_text1").with_arg(
Paragraph::fluent(L10n::l("welcome_issues_text1")) "pagetop",
.with_font_size(FontSize::Medium), format!(
) "<a href=\"{}\" target=\"_blank\">{}</a>",
.add_component(Paragraph::fluent( "https://crates.io/crates/pagetop", "PageTop",
L10n::l("welcome_issues_text2").with_arg( ),
"app", ))
format!( .with_font_size(FontSize::Medium),
"<span class=\"app-name\">{}</span>",
&config::SETTINGS.app.name,
), ),
), )
)), .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,
),
),
)),
),
), ),
) )
} }

40
static/base/css/flex.css
View file

@ -84,10 +84,11 @@
.flex__item { .flex__item {
padding: 0 !important; padding: 0 !important;
}
.flex__item.flex__full {
width: 100%; width: 100%;
} }
[class*="flex__justify-"] .flex__item {
width: auto;
}
.flex__item-grow-1 { .flex__item-grow-1 {
flex-grow: 1; flex-grow: 1;
@ -116,6 +117,9 @@
.flex__item-grow-9 { .flex__item-grow-9 {
flex-grow: 9; flex-grow: 9;
} }
[class*="flex__item-grow-"] {
width: auto;
}
.flex__item-shrink-1 { .flex__item-shrink-1 {
flex-shrink: 1; flex-shrink: 1;
@ -144,54 +148,56 @@
.flex__item-shrink-9 { .flex__item-shrink-9 {
flex-shrink: 9; flex-shrink: 9;
} }
[class*="flex__item-shrink-"] {
width: auto;
}
.flex__item-width-10 { .flex__item-size-10 {
flex: 0 0 10%; flex: 0 0 10%;
max-width: 10%; max-width: 10%;
} }
.flex__item-width-20 { .flex__item-size-20 {
flex: 0 0 20%; flex: 0 0 20%;
max-width: 20%; max-width: 20%;
} }
.flex__item-width-25 { .flex__item-size-25 {
flex: 0 0 25%; flex: 0 0 25%;
max-width: 25%; max-width: 25%;
} }
.flex__item-width-33 { .flex__item-size-33 {
flex: 0 0 33.3333%; flex: 0 0 33.3333%;
max-width: 33.3333%; max-width: 33.3333%;
} }
.flex__item-width-40 { .flex__item-size-40 {
flex: 0 0 40%; flex: 0 0 40%;
max-width: 40%; max-width: 40%;
} }
.flex__item-width-50 { .flex__item-size-50 {
flex: 0 0 60%; flex: 0 0 60%;
max-width: 50%; max-width: 50%;
} }
.flex__item-width-60 { .flex__item-size-60 {
flex: 0 0 60%; flex: 0 0 60%;
max-width: 60%; max-width: 60%;
} }
.flex__item-width-66 { .flex__item-size-66 {
flex: 0 0 66.6666%; flex: 0 0 66.6666%;
max-width: 66.6666%; max-width: 66.6666%;
} }
.flex__item-width-75 { .flex__item-size-75 {
flex: 0 0 75%; flex: 0 0 75%;
max-width: 75%; max-width: 75%;
} }
.flex__item-width-80 { .flex__item-size-80 {
flex: 0 0 80%; flex: 0 0 80%;
max-width: 80%; max-width: 80%;
} }
.flex__item-width-90 { .flex__item-size-90 {
flex: 0 0 90%; flex: 0 0 90%;
max-width: 90%; max-width: 90%;
} }
.flex__item-fullwidth { [class*="flex__item-size-"] {
flex: 0 0 100%; width: auto;
max-width: 100%;
} }
.flex__item-offset-10 { .flex__item-offset-10 {
@ -367,7 +373,7 @@
} }
} }
/* X2K - Applies <= 2560px */ /* X2K - Applies <= 2560px */
@media screen and (max-width: 120rem) { @media screen and (max-width: 160rem) {
.flex__row.bp__x2k { .flex__row.bp__x2k {
flex-direction: row; flex-direction: row;
} }

2
static/base/css/menu.css
View file

@ -243,7 +243,7 @@
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.menu__nav .menu__header .menu__close { .menu__nav .menu__header .menu__close {
font-size: 2.25rem; font-size: 2.25rem;

53
static/base/css/welcome.css
View file

@ -3,43 +3,37 @@
color: inherit; color: inherit;
} }
#welcome .hello-world,
#welcome .welcome, #welcome .welcome,
#welcome .pagetop, #welcome .pagetop,
#welcome .issues { #welcome .issues {
padding: 1.6rem 5%; margin: 3.2rem auto;
}
#welcome .promo {
padding: 0 5% 2rem;
}
#welcome .issues {
padding-top: 0;
} }
#welcome [class$="-col-text"] > .flex__content { #welcome [class$="-col-text"] > .flex__content {
margin: 5% 5% 0; margin: 5%;
text-align: center; text-align: center;
} }
#welcome [class$="-col-image"] > .flex__content { #welcome [class$="-col-image"] > .flex__content {
margin: 1rem 5%; margin: 1rem 5%;
} }
#welcome .welcome { #welcome .welcome > .flex__item {
text-align: center;
margin: 0 5%;
}
#welcome .welcome > .wrapper__content {
padding: 2rem 1rem;
border-radius: 28px; border-radius: 28px;
background: url("/base/images/welcome.jpg") center center no-repeat; background: url("/base/images/welcome.jpg") center center no-repeat;
background-size: auto; background-size: auto;
background-size: cover; background-size: cover;
color: #fff; color: #fff;
} }
#welcome .welcome > .wrapper__content > h2 { #welcome .welcome > .flex__item > .flex__content {
margin: 2rem 1rem;
text-align: center;
color: #fff; color: #fff;
} }
#welcome .welcome > .wrapper__content > h3 { #welcome .welcome > .flex__item > .flex__content > h2 {
color: #fff;
}
#welcome .welcome > .flex__item > .flex__content > h3 {
color: #ccc; color: #ccc;
} }
@ -53,39 +47,34 @@
/* BREAKPOINTS */ /* BREAKPOINTS */
/* MD - Applies >= 768px */ /* MD - Applies > 768px */
@media screen and (min-width: 48rem) { @media screen and (min-width: 48.0625rem) {
#welcome .hello-world {
margin-top: 2rem;
}
#welcome .promo-col-image > .flex__content { #welcome .promo-col-image > .flex__content {
padding: 0; padding: 0;
} }
#welcome .issues {
padding-top: 1.6rem;
}
#welcome .issues-col-text > .flex__content { #welcome .issues-col-text > .flex__content {
text-align: left; text-align: left;
} }
} }
/* LG - Applies >= 992px */ /* LG - Applies > 992px */
@media screen and (min-width: 62rem) { @media screen and (min-width: 62.0625rem) {
#welcome .hello-col-text > .flex__content { #welcome .hello-col-text > .flex__content {
margin-top: 2rem;
text-align: left; text-align: left;
} }
#welcome .promo {
padding: 0 15% 2rem;
}
#welcome .promo-col-text > .flex__content { #welcome .promo-col-text > .flex__content {
margin-right: 0; margin-right: 0;
text-align: right; text-align: right;
} }
} }
/* XL - Applies >= 1280px */ /* XL - Applies > 1280px */
@media screen and (min-width: 80rem) { @media screen and (min-width: 80.0625rem) {
#welcome .hello-col-text > .flex__content { #welcome .hello-col-text > .flex__content {
margin-top: 4rem;
margin-left: 20%; margin-left: 20%;
} }