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

🚧 [minimal] Replace grid system by flexbox

Browse source
This commit is contained in:
Manuel Cillero 2023-09-21 19:01:19 +02:00
parent 4b9b36ed6e
commit 156429beb0
13 changed files with 962 additions and 466 deletions
Download patch file Download diff file Expand all files Collapse all files

6
pagetop-admin/src/summary.rs
View file

@ -57,9 +57,9 @@ pub async fn summary(request: service::HttpRequest) -> ResultPage<Markup, FatalE
.with_in("top-menu", top_menu)
.with_in(
"content",
grid::Row::new()
.with_column(grid::Column::new().with_component(side_menu))
.with_column(grid::Column::new().with_component(Html::with(html! {
flex::Container::new()
.with_item(flex::Item::new().with_component(side_menu))
.with_item(flex::Item::new().with_component(Html::with(html! {
p { "Columna 2"}
}))),
)

27
pagetop-bulmix/src/lib.rs
View file

@ -87,33 +87,6 @@ impl ThemeTrait for Bulmix {
},
);
}
grid::COMPONENT_GRID_COLUMN => {
let col = component_as_mut::<grid::Column>(component);
col.alter_classes(ClassesOp::SetDefault, "column");
col.alter_classes(
ClassesOp::AddDefault,
match col.size() {
grid::ColumnSize::Default => "",
grid::ColumnSize::Is1of12 => "is-1",
grid::ColumnSize::Is2of12 => "is-2",
grid::ColumnSize::Is3of12 => "is-3",
grid::ColumnSize::Is4of12 => "is-4",
grid::ColumnSize::Is5of12 => "is-5",
grid::ColumnSize::Is6of12 => "is-6",
grid::ColumnSize::Is7of12 => "is-7",
grid::ColumnSize::Is8of12 => "is-8",
grid::ColumnSize::Is9of12 => "is-9",
grid::ColumnSize::Is10of12 => "is-10",
grid::ColumnSize::Is11of12 => "is-11",
grid::ColumnSize::IsFull => "is-12",
}
);
col.alter_classes(ClassesOp::AddDefault, "content");
}
grid::COMPONENT_GRID_ROW => {
let row = component_as_mut::<grid::Row>(component);
row.alter_classes(ClassesOp::SetDefault, "columns");
}
_ => {}
}
}

72
pagetop-homedemo/src/lib.rs
View file

@ -1,5 +1,7 @@
use pagetop::prelude::*;
use pagetop_minimal::component::*;
use pagetop_minimal::BreakPoint;
new_handle!(MODULE_HOMEDEMO);
@ -49,11 +51,12 @@ async fn demo(request: service::HttpRequest) -> ResultPage<Markup, FatalError> {
fn hello_world() -> Container {
Container::header().with_id("hello-world").with_component(
grid::Row::new()
.with_column(
grid::Column::new()
.with_classes(ClassesOp::Add, "hello-col-text")
.with_size(grid::ColumnSize::Is5of12)
flex::Container::new()
.with_direction(flex::Direction::Column(BreakPoint::MD))
.with_item(
flex::Item::new()
.with_inner_classes(ClassesOp::Add, "hello-col-text")
.with_size(flex::ItemSize::Percent40)
.with_component(
Heading::h1(L10n::t("page_title", &LOCALES_HOMEDEMO))
.with_display(HeadingDisplay::Medium),
@ -92,9 +95,10 @@ fn hello_world() -> Container {
.with_classes(ClassesOp::Add, "welcome-link"),
),
)
.with_column(
grid::Column::new()
.with_classes(ClassesOp::Add, "hello-col-image")
.with_item(
flex::Item::new()
.with_inner_classes(ClassesOp::Add, "hello-col-image")
.with_size(flex::ItemSize::Percent60)
.with_component(Image::with("/homedemo/images/header.svg")),
),
)
@ -124,16 +128,17 @@ fn welcome() -> Container {
fn about_pagetop() -> Container {
Container::new().with_id("pagetop").with_component(
grid::Row::new()
.with_column(
grid::Column::new()
.with_classes(ClassesOp::Add, "pagetop-col-image")
.with_size(grid::ColumnSize::Is5of12)
flex::Container::new()
.with_direction(flex::Direction::Column(BreakPoint::SM))
.with_item(
flex::Item::new()
.with_inner_classes(ClassesOp::Add, "pagetop-col-image")
.with_size(flex::ItemSize::Percent40)
.with_component(Image::with("/homedemo/images/about.svg")),
)
.with_column(
grid::Column::new()
.with_classes(ClassesOp::Add, "pagetop-col-text")
.with_item(
flex::Item::new()
.with_inner_classes(ClassesOp::Add, "pagetop-col-text")
.with_component(Heading::h2(L10n::t("pagetop_title", &LOCALES_HOMEDEMO)))
.with_component(
Paragraph::with(L10n::t("pagetop_text1", &LOCALES_HOMEDEMO))
@ -150,10 +155,12 @@ fn about_pagetop() -> Container {
fn promo_pagetop() -> Container {
Container::new().with_id("promo").with_component(
grid::Row::new()
.with_column(
grid::Column::new()
.with_classes(ClassesOp::Add, "promo-col-text")
flex::Container::new()
.with_direction(flex::Direction::Column(BreakPoint::MD))
.with_item(
flex::Item::new()
.with_inner_classes(ClassesOp::Add, "promo-col-text")
.with_size(flex::ItemSize::Percent60)
.with_component(Heading::h2(L10n::t(
"pagetop_promo_title",
&LOCALES_HOMEDEMO,
@ -171,10 +178,10 @@ fn promo_pagetop() -> Container {
.with_display(ParagraphDisplay::Small),
),
)
.with_column(
grid::Column::new()
.with_classes(ClassesOp::Add, "promo-col-image")
.with_size(grid::ColumnSize::Is6of12)
.with_item(
flex::Item::new()
.with_inner_classes(ClassesOp::Add, "promo-col-image")
.with_size(flex::ItemSize::Percent40)
.with_component(Image::with("/homedemo/images/pagetop.png")),
),
)
@ -182,16 +189,17 @@ fn promo_pagetop() -> Container {
fn reporting_issues() -> Container {
Container::new().with_id("reporting").with_component(
grid::Row::new()
.with_column(
grid::Column::new()
.with_classes(ClassesOp::Add, "reporting-col-image")
flex::Container::new()
.with_direction(flex::Direction::Column(BreakPoint::MD))
.with_item(
flex::Item::new()
.with_inner_classes(ClassesOp::Add, "reporting-col-image")
.with_component(Image::with("/homedemo/images/support.jpg")),
)
.with_column(
grid::Column::new()
.with_classes(ClassesOp::Add, "reporting-col-text")
.with_size(grid::ColumnSize::Is6of12)
.with_item(
flex::Item::new()
.with_inner_classes(ClassesOp::Add, "reporting-col-text")
.with_size(flex::ItemSize::Percent50)
.with_component(Heading::h2(L10n::t(
"report_problems_title",
&LOCALES_HOMEDEMO,

44
pagetop-homedemo/static/css/styles.css
View file

@ -33,6 +33,9 @@ body.default-homepage [class$="-col-image"] {
display: inline-block;
vertical-align: middle;
}
#hello-world .hello-col-image {
padding-top: 3em;
}
#welcome > div.container {
padding: 2rem 1rem;
@ -53,25 +56,21 @@ body.default-homepage [class$="-col-image"] {
border-radius: 40px;
}
/* Responsiveness */
@media (min-width: 768px) {
/* BREAKPOINTS */
/* MD - Applies <= 768px */
@media screen and (min-width: 48em) {
body.default-homepage [class$="-col-image"] {
padding-top: 5%;
}
#hello-world .hello-col-text {
#reporting .reporting-col-text {
padding-left: 1rem;
padding-right: 1rem;
}
#hello-world .hello-col-image {
padding-top: 3rem;
text-align: left;
}
}
@media (min-width: 992px) {
body.default-homepage [class$="-col-image"] {
padding-top: 1rem;
}
/* LG - Applies >= 1024px */
@media screen and (min-width: 64em) {
#hello-world .hello-col-text {
padding-top: 2rem;
padding-left: 10%;
@ -86,18 +85,25 @@ body.default-homepage [class$="-col-image"] {
padding: 2rem 8rem;
}
#pagetop .pagetop-col-text {
padding-left: 2rem;
text-align: left;
}
#promo .promo-col-text {
padding-top: 1rem;
padding-right: 0;
text-align: right;
}
}
/* XL - Applies >= 1280px */
@media screen and (min-width: 80em) {
body.default-homepage [class$="-col-image"] {
padding-top: 1rem;
}
#reporting .reporting-col-text {
padding-left: 1rem;
#hello-world .hello-col-text {
padding-top: 4rem;
}
#pagetop .pagetop-col-text {
padding-top: 3rem;
padding-left: 3rem;
text-align: left;
}
}

1
pagetop-minimal/src/component.rs
View file

@ -2,7 +2,6 @@ mod container;
pub use container::{Container, ContainerType, COMPONENT_CONTAINER};
pub mod flex;
pub mod grid;
mod icon;
pub use icon::{Icon, COMPONENT_ICON};

321
pagetop-minimal/src/component/flex.rs
View file

@ -2,3 +2,324 @@ mod container;
pub use container::{Container, COMPONENT_FLEX_CONTAINER};
mod item;
pub use item::{Item, COMPONENT_FLEX_ITEM};
use pagetop::concat_string;
use pagetop::html::unit;
use crate::BreakPoint;
// *************************************************************************************************
#[derive(Default)]
pub enum Direction {
#[default]
Default,
Row(BreakPoint),
RowReverse(BreakPoint),
Column(BreakPoint),
ColumnReverse(BreakPoint),
}
#[rustfmt::skip]
impl ToString for Direction {
fn to_string(&self) -> String {
match self {
Direction::Default => {
concat_string!("flex-container flex-row ", BreakPoint::default().to_string())
}
Direction::Row(breakpoint) => {
concat_string!("flex-container flex-row ", breakpoint.to_string())
}
Direction::RowReverse(breakpoint) => {
concat_string!("flex-container flex-row flex-reverse ", breakpoint.to_string())
}
Direction::Column(breakpoint) => {
concat_string!("flex-container flex-col ", breakpoint.to_string())
}
Direction::ColumnReverse(breakpoint) => {
concat_string!("flex-container flex-col flex-reverse ", breakpoint.to_string())
}
}
}
}
// *************************************************************************************************
#[derive(Default)]
pub enum WrapAlign {
#[default]
Default,
NoWrap,
Wrap(ContentAlign),
WrapReverse(ContentAlign),
}
#[rustfmt::skip]
impl ToString for WrapAlign {
fn to_string(&self) -> String {
match self {
WrapAlign::Default => "".to_string(),
WrapAlign::NoWrap => "flex-nowrap".to_string(),
WrapAlign::Wrap(a) => concat_string!("flex-wrap ", a.to_string()),
WrapAlign::WrapReverse(a) => concat_string!("flex-wrap-reverse ", a.to_string()),
}
}
}
// *************************************************************************************************
#[derive(Default)]
pub enum ContentAlign {
#[default]
Default,
Start,
End,
Center,
Stretch,
SpaceBetween,
SpaceAround,
}
#[rustfmt::skip]
impl ToString for ContentAlign {
fn to_string(&self) -> String {
match self {
ContentAlign::Default => "".to_string(),
ContentAlign::Start => "flex-align-start".to_string(),
ContentAlign::End => "flex-align-end".to_string(),
ContentAlign::Center => "flex-align-center".to_string(),
ContentAlign::Stretch => "flex-align-stretch".to_string(),
ContentAlign::SpaceBetween => "flex-align-space-between".to_string(),
ContentAlign::SpaceAround => "flex-align-space-around".to_string(),
}
}
}
// *************************************************************************************************
#[derive(Default)]
pub enum ContentJustify {
#[default]
Default,
Start,
End,
Center,
SpaceBetween,
SpaceAround,
SpaceEvenly,
}
#[rustfmt::skip]
impl ToString for ContentJustify {
fn to_string(&self) -> String {
match self {
ContentJustify::Default => "".to_string(),
ContentJustify::Start => "flex-justify-start".to_string(),
ContentJustify::End => "flex-justify-end".to_string(),
ContentJustify::Center => "flex-justify-center".to_string(),
ContentJustify::SpaceBetween => "flex-justify-space-between".to_string(),
ContentJustify::SpaceAround => "flex-justify-space-around".to_string(),
ContentJustify::SpaceEvenly => "flex-justify-space-evenly".to_string(),
}
}
}
// *************************************************************************************************
#[derive(Default)]
pub enum ItemAlign {
#[default]
Default,
Top,
Bottom,
Middle,
Stretch,
Baseline,
}
#[rustfmt::skip]
impl ToString for ItemAlign {
fn to_string(&self) -> String {
match self {
ItemAlign::Default => "".to_string(),
ItemAlign::Top => "flex-item-top".to_string(),
ItemAlign::Bottom => "flex-item-bottom".to_string(),
ItemAlign::Middle => "flex-item-middle".to_string(),
ItemAlign::Stretch => "flex-item-stretch".to_string(),
ItemAlign::Baseline => "flex-item-baseline".to_string(),
}
}
}
// *************************************************************************************************
#[derive(Default)]
pub enum Gap {
#[default]
Default,
Row(unit::Value),
Column(unit::Value),
Distinct(unit::Value, unit::Value),
Both(unit::Value),
}
#[rustfmt::skip]
impl ToString for Gap {
fn to_string(&self) -> String {
match self {
Gap::Default => "".to_string(),
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(), ";"),
}
}
}
// *************************************************************************************************
#[derive(Default)]
pub enum ItemGrow {
#[default]
Default,
Is1,
Is2,
Is3,
Is4,
Is5,
Is6,
Is7,
Is8,
Is9,
}
#[rustfmt::skip]
impl ToString for ItemGrow {
fn to_string(&self) -> String {
match self {
ItemGrow::Default => "".to_string(),
ItemGrow::Is1 => "flex-grow-1".to_string(),
ItemGrow::Is2 => "flex-grow-2".to_string(),
ItemGrow::Is3 => "flex-grow-3".to_string(),
ItemGrow::Is4 => "flex-grow-4".to_string(),
ItemGrow::Is5 => "flex-grow-5".to_string(),
ItemGrow::Is6 => "flex-grow-6".to_string(),
ItemGrow::Is7 => "flex-grow-7".to_string(),
ItemGrow::Is8 => "flex-grow-8".to_string(),
ItemGrow::Is9 => "flex-grow-9".to_string(),
}
}
}
// *************************************************************************************************
#[derive(Default)]
pub enum ItemShrink {
#[default]
Default,
Is1,
Is2,
Is3,
Is4,
Is5,
Is6,
Is7,
Is8,
Is9,
}
#[rustfmt::skip]
impl ToString for ItemShrink {
fn to_string(&self) -> String {
match self {
ItemShrink::Default => "".to_string(),
ItemShrink::Is1 => "flex-shrink-1".to_string(),
ItemShrink::Is2 => "flex-shrink-2".to_string(),
ItemShrink::Is3 => "flex-shrink-3".to_string(),
ItemShrink::Is4 => "flex-shrink-4".to_string(),
ItemShrink::Is5 => "flex-shrink-5".to_string(),
ItemShrink::Is6 => "flex-shrink-6".to_string(),
ItemShrink::Is7 => "flex-shrink-7".to_string(),
ItemShrink::Is8 => "flex-shrink-8".to_string(),
ItemShrink::Is9 => "flex-shrink-9".to_string(),
}
}
}
// *************************************************************************************************
#[derive(Default)]
pub enum ItemSize {
#[default]
Default,
Percent10,
Percent20,
Percent25,
Percent33,
Percent40,
Percent50,
Percent60,
Percent66,
Percent75,
Percent80,
Percent90,
}
#[rustfmt::skip]
impl ToString for ItemSize {
fn to_string(&self) -> String {
match self {
ItemSize::Default => "".to_string(),
ItemSize::Percent10 => "flex-width-10".to_string(),
ItemSize::Percent20 => "flex-width-20".to_string(),
ItemSize::Percent25 => "flex-width-25".to_string(),
ItemSize::Percent33 => "flex-width-33".to_string(),
ItemSize::Percent40 => "flex-width-40".to_string(),
ItemSize::Percent50 => "flex-width-50".to_string(),
ItemSize::Percent60 => "flex-width-60".to_string(),
ItemSize::Percent66 => "flex-width-66".to_string(),
ItemSize::Percent75 => "flex-width-75".to_string(),
ItemSize::Percent80 => "flex-width-80".to_string(),
ItemSize::Percent90 => "flex-width-90".to_string(),
}
}
}
// *************************************************************************************************
#[derive(Default)]
pub enum ItemOffset {
#[default]
Default,
Offset10,
Offset20,
Offset25,
Offset33,
Offset40,
Offset50,
Offset60,
Offset66,
Offset75,
Offset80,
Offset90,
}
#[rustfmt::skip]
impl ToString for ItemOffset {
fn to_string(&self) -> String {
match self {
ItemOffset::Default => "".to_string(),
ItemOffset::Offset10 => "flex-offset-10".to_string(),
ItemOffset::Offset20 => "flex-offset-20".to_string(),
ItemOffset::Offset25 => "flex-offset-25".to_string(),
ItemOffset::Offset33 => "flex-offset-33".to_string(),
ItemOffset::Offset40 => "flex-offset-40".to_string(),
ItemOffset::Offset50 => "flex-offset-50".to_string(),
ItemOffset::Offset60 => "flex-offset-60".to_string(),
ItemOffset::Offset66 => "flex-offset-66".to_string(),
ItemOffset::Offset75 => "flex-offset-75".to_string(),
ItemOffset::Offset80 => "flex-offset-80".to_string(),
ItemOffset::Offset90 => "flex-offset-90".to_string(),
}
}
}

94
pagetop-minimal/src/component/flex/container.rs
View file

@ -9,17 +9,22 @@ actions_for_component!(Container);
#[rustfmt::skip]
#[derive(Default)]
pub struct Container {
weight : Weight,
renderable: Renderable,
id : IdentifierValue,
classes : Classes,
items : TypedComponents<flex::Item>,
template : String,
weight : Weight,
renderable : Renderable,
id : IdentifierValue,
classes : Classes,
items : TypedComponents<flex::Item>,
direction : flex::Direction,
wrap_align : flex::WrapAlign,
content_justify: flex::ContentJustify,
items_align : flex::ItemAlign,
gap : flex::Gap,
}
impl ComponentTrait for Container {
fn new() -> Self {
Container::default().with_classes(ClassesOp::SetDefault, "flex")
Container::default()
.with_classes(ClassesOp::SetDefault, flex::Direction::Default.to_string())
}
fn handle(&self) -> Handle {
@ -43,8 +48,15 @@ impl ComponentTrait for Container {
}
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
cx.set_param::<bool>(crate::PARAM_MINIMAL_FLEX, true);
let gap = match self.gap() {
flex::Gap::Default => None,
_ => Some(self.gap().to_string()),
};
PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] {
div id=[self.id()] class=[self.classes().get()] style=[gap] {
(self.items().prepare(cx))
}
})
@ -77,7 +89,7 @@ impl Container {
}
#[fn_builder]
pub fn alter_classes(&mut self, op: ClassesOp, classes: &str) -> &mut Self {
pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
self.classes.alter_value(op, classes);
self
}
@ -94,8 +106,48 @@ impl Container {
}
#[fn_builder]
pub fn alter_template(&mut self, template: &str) -> &mut Self {
self.template = template.to_owned();
pub fn alter_direction(&mut self, direction: flex::Direction) -> &mut Self {
self.classes.alter_value(
ClassesOp::Replace(self.direction.to_string()),
direction.to_string(),
);
self.direction = direction;
self
}
#[fn_builder]
pub fn alter_wrap_align(&mut self, wrap: flex::WrapAlign) -> &mut Self {
self.classes.alter_value(
ClassesOp::Replace(self.wrap_align.to_string()),
wrap.to_string(),
);
self.wrap_align = wrap;
self
}
#[fn_builder]
pub fn alter_content_justify(&mut self, justify: flex::ContentJustify) -> &mut Self {
self.classes.alter_value(
ClassesOp::Replace(self.content_justify.to_string()),
justify.to_string(),
);
self.content_justify = justify;
self
}
#[fn_builder]
pub fn alter_items_align(&mut self, align: flex::ItemAlign) -> &mut Self {
self.classes.alter_value(
ClassesOp::Replace(self.items_align.to_string()),
align.to_string(),
);
self.items_align = align;
self
}
#[fn_builder]
pub fn alter_gap(&mut self, gap: flex::Gap) -> &mut Self {
self.gap = gap;
self
}
@ -109,7 +161,23 @@ impl Container {
&self.items
}
pub fn template(&self) -> &str {
self.template.as_str()
pub fn direction(&self) -> &flex::Direction {
&self.direction
}
pub fn wrap_align(&self) -> &flex::WrapAlign {
&self.wrap_align
}
pub fn content_justify(&self) -> &flex::ContentJustify {
&self.content_justify
}
pub fn items_align(&self) -> &flex::ItemAlign {
&self.items_align
}
pub fn gap(&self) -> &flex::Gap {
&self.gap
}
}

178
pagetop-minimal/src/component/flex/item.rs
View file

@ -1,56 +1,32 @@
use pagetop::prelude::*;
use crate::component::flex;
new_handle!(COMPONENT_FLEX_ITEM);
actions_for_component!(Item);
const SIZE_DEFAULT: &str = "col";
const SIZE_1_OF_12: &str = "col-md-1";
const SIZE_2_OF_12: &str = "col-md-2";
const SIZE_3_OF_12: &str = "col-md-3";
const SIZE_4_OF_12: &str = "col-md-4";
const SIZE_5_OF_12: &str = "col-md-5";
const SIZE_6_OF_12: &str = "col-md-6";
const SIZE_7_OF_12: &str = "col-md-7";
const SIZE_8_OF_12: &str = "col-md-8";
const SIZE_9_OF_12: &str = "col-md-9";
const SIZE_10_OF_12: &str = "col-md-10";
const SIZE_11_OF_12: &str = "col-md-11";
const SIZE_12_OF_12: &str = "col-md-12";
#[derive(Default)]
pub enum ItemSize {
#[default]
Default,
Is1of12,
Is2of12,
Is3of12,
Is4of12,
Is5of12,
Is6of12,
Is7of12,
Is8of12,
Is9of12,
Is10of12,
Is11of12,
IsFull,
}
#[rustfmt::skip]
#[derive(Default)]
pub struct Item {
weight : Weight,
renderable: Renderable,
id : IdentifierValue,
classes : Classes,
size : ItemSize,
stuff : ArcComponents,
template : String,
weight : Weight,
renderable : Renderable,
id : IdentifierValue,
item_classes : Classes,
inner_classes: Classes,
item_grow : flex::ItemGrow,
item_shrink : flex::ItemShrink,
item_size : flex::ItemSize,
item_offset : flex::ItemOffset,
item_align : flex::ItemAlign,
stuff : ArcComponents,
}
impl ComponentTrait for Item {
fn new() -> Self {
Item::default().with_classes(ClassesOp::SetDefault, SIZE_DEFAULT)
Item::default()
.with_item_classes(ClassesOp::SetDefault, "flex-item")
.with_inner_classes(ClassesOp::SetDefault, "flex-item-inner")
}
fn handle(&self) -> Handle {
@ -74,9 +50,15 @@ impl ComponentTrait for Item {
}
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
let order = match self.weight() {
0 => None,
_ => Some(concat_string!("order: ", self.weight().to_string(), ";")),
};
PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] {
(self.components().prepare(cx))
div id=[self.id()] class=[self.item_classes().get()] style=[order] {
div class=[self.inner_classes().get()] {
(self.components().prepare(cx))
}
}
})
}
@ -108,30 +90,64 @@ impl Item {
}
#[fn_builder]
pub fn alter_classes(&mut self, op: ClassesOp, classes: &str) -> &mut Self {
self.classes.alter_value(op, classes);
pub fn alter_item_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
self.item_classes.alter_value(op, classes);
self
}
#[rustfmt::skip]
#[fn_builder]
pub fn alter_size(&mut self, size: ItemSize) -> &mut Self {
match size {
ItemSize::Default => self.alter_classes(ClassesOp::SetDefault, SIZE_DEFAULT),
ItemSize::Is1of12 => self.alter_classes(ClassesOp::SetDefault, SIZE_1_OF_12),
ItemSize::Is2of12 => self.alter_classes(ClassesOp::SetDefault, SIZE_2_OF_12),
ItemSize::Is3of12 => self.alter_classes(ClassesOp::SetDefault, SIZE_3_OF_12),
ItemSize::Is4of12 => self.alter_classes(ClassesOp::SetDefault, SIZE_4_OF_12),
ItemSize::Is5of12 => self.alter_classes(ClassesOp::SetDefault, SIZE_5_OF_12),
ItemSize::Is6of12 => self.alter_classes(ClassesOp::SetDefault, SIZE_6_OF_12),
ItemSize::Is7of12 => self.alter_classes(ClassesOp::SetDefault, SIZE_7_OF_12),
ItemSize::Is8of12 => self.alter_classes(ClassesOp::SetDefault, SIZE_8_OF_12),
ItemSize::Is9of12 => self.alter_classes(ClassesOp::SetDefault, SIZE_9_OF_12),
ItemSize::Is10of12 => self.alter_classes(ClassesOp::SetDefault, SIZE_10_OF_12),
ItemSize::Is11of12 => self.alter_classes(ClassesOp::SetDefault, SIZE_11_OF_12),
ItemSize::IsFull => self.alter_classes(ClassesOp::SetDefault, SIZE_12_OF_12),
};
self.size = size;
pub fn alter_inner_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
self.inner_classes.alter_value(op, classes);
self
}
#[fn_builder]
pub fn alter_grow(&mut self, grow: flex::ItemGrow) -> &mut Self {
self.item_classes.alter_value(
ClassesOp::Replace(self.item_grow.to_string()),
grow.to_string(),
);
self.item_grow = grow;
self
}
#[fn_builder]
pub fn alter_shrink(&mut self, shrink: flex::ItemShrink) -> &mut Self {
self.item_classes.alter_value(
ClassesOp::Replace(self.item_shrink.to_string()),
shrink.to_string(),
);
self.item_shrink = shrink;
self
}
#[fn_builder]
pub fn alter_size(&mut self, size: flex::ItemSize) -> &mut Self {
self.item_classes.alter_value(
ClassesOp::Replace(self.item_size.to_string()),
size.to_string(),
);
self.item_size = size;
self
}
#[fn_builder]
pub fn alter_offset(&mut self, offset: flex::ItemOffset) -> &mut Self {
self.item_classes.alter_value(
ClassesOp::Replace(self.item_offset.to_string()),
offset.to_string(),
);
self.item_offset = offset;
self
}
#[fn_builder]
pub fn alter_align(&mut self, align: flex::ItemAlign) -> &mut Self {
self.item_classes.alter_value(
ClassesOp::Replace(self.item_align.to_string()),
align.to_string(),
);
self.item_align = align;
self
}
@ -146,27 +162,37 @@ impl Item {
self
}
#[fn_builder]
pub fn alter_template(&mut self, template: &str) -> &mut Self {
self.template = template.to_owned();
self
}
// Item GETTERS.
pub fn classes(&self) -> &Classes {
&self.classes
pub fn item_classes(&self) -> &Classes {
&self.item_classes
}
pub fn size(&self) -> &ItemSize {
&self.size
pub fn inner_classes(&self) -> &Classes {
&self.inner_classes
}
pub fn grow(&self) -> &flex::ItemGrow {
&self.item_grow
}
pub fn shrink(&self) -> &flex::ItemShrink {
&self.item_shrink
}
pub fn size(&self) -> &flex::ItemSize {
&self.item_size
}
pub fn offset(&self) -> &flex::ItemOffset {
&self.item_offset
}
pub fn align(&self) -> &flex::ItemAlign {
&self.item_align
}
pub fn components(&self) -> &ArcComponents {
&self.stuff
}
pub fn template(&self) -> &str {
self.template.as_str()
}
}

4
pagetop-minimal/src/component/grid.rs
View file

@ -1,4 +0,0 @@
mod row;
pub use row::{Row, COMPONENT_GRID_ROW};
mod column;
pub use column::{Column, ColumnSize, COMPONENT_GRID_COLUMN};

175
pagetop-minimal/src/component/grid/column.rs
View file

@ -1,175 +0,0 @@
use pagetop::prelude::*;
new_handle!(COMPONENT_GRID_COLUMN);
actions_for_component!(Column);
const SIZE_DEFAULT: &str = "col";
const SIZE_1_OF_12: &str = "col-md-1";
const SIZE_2_OF_12: &str = "col-md-2";
const SIZE_3_OF_12: &str = "col-md-3";
const SIZE_4_OF_12: &str = "col-md-4";
const SIZE_5_OF_12: &str = "col-md-5";
const SIZE_6_OF_12: &str = "col-md-6";
const SIZE_7_OF_12: &str = "col-md-7";
const SIZE_8_OF_12: &str = "col-md-8";
const SIZE_9_OF_12: &str = "col-md-9";
const SIZE_10_OF_12: &str = "col-md-10";
const SIZE_11_OF_12: &str = "col-md-11";
const SIZE_12_OF_12: &str = "col-md-12";
#[derive(Default)]
pub enum ColumnSize {
#[default]
Default,
Is1of12,
Is2of12,
Is3of12,
Is4of12,
Is5of12,
Is6of12,
Is7of12,
Is8of12,
Is9of12,
Is10of12,
Is11of12,
IsFull,
}
#[rustfmt::skip]
#[derive(Default)]
pub struct Column {
weight : Weight,
renderable: Renderable,
id : IdentifierValue,
classes : Classes,
size : ColumnSize,
stuff : ArcComponents,
template : String,
}
impl ComponentTrait for Column {
fn new() -> Self {
Column::default().with_classes(ClassesOp::SetDefault, SIZE_DEFAULT)
}
fn handle(&self) -> Handle {
COMPONENT_GRID_COLUMN
}
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 before_prepare_component(&mut self, cx: &mut Context) {
run_actions_before_prepare_column(self, cx);
}
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] {
(self.components().prepare(cx))
}
})
}
fn after_prepare_component(&mut self, cx: &mut Context) {
run_actions_after_prepare_column(self, cx);
}
}
impl Column {
// Column BUILDER.
#[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_id(&mut self, id: &str) -> &mut Self {
self.id.alter_value(id);
self
}
#[fn_builder]
pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
self.classes.alter_value(op, classes);
self
}
#[rustfmt::skip]
#[fn_builder]
pub fn alter_size(&mut self, size: ColumnSize) -> &mut Self {
self.alter_classes(
ClassesOp::SetDefault,
match size {
ColumnSize::Default => SIZE_DEFAULT,
ColumnSize::Is1of12 => SIZE_1_OF_12,
ColumnSize::Is2of12 => SIZE_2_OF_12,
ColumnSize::Is3of12 => SIZE_3_OF_12,
ColumnSize::Is4of12 => SIZE_4_OF_12,
ColumnSize::Is5of12 => SIZE_5_OF_12,
ColumnSize::Is6of12 => SIZE_6_OF_12,
ColumnSize::Is7of12 => SIZE_7_OF_12,
ColumnSize::Is8of12 => SIZE_8_OF_12,
ColumnSize::Is9of12 => SIZE_9_OF_12,
ColumnSize::Is10of12 => SIZE_10_OF_12,
ColumnSize::Is11of12 => SIZE_11_OF_12,
ColumnSize::IsFull => SIZE_12_OF_12,
}
);
self.size = size;
self
}
pub fn with_component(mut self, component: impl ComponentTrait) -> Self {
self.stuff.alter(ArcOp::Add(ArcComponent::with(component)));
self
}
#[fn_builder]
pub fn alter_components(&mut self, op: ArcOp) -> &mut Self {
self.stuff.alter(op);
self
}
#[fn_builder]
pub fn alter_template(&mut self, template: &str) -> &mut Self {
self.template = template.to_owned();
self
}
// Column GETTERS.
pub fn classes(&self) -> &Classes {
&self.classes
}
pub fn size(&self) -> &ColumnSize {
&self.size
}
pub fn components(&self) -> &ArcComponents {
&self.stuff
}
pub fn template(&self) -> &str {
self.template.as_str()
}
}

115
pagetop-minimal/src/component/grid/row.rs
View file

@ -1,115 +0,0 @@
use pagetop::prelude::*;
use crate::component::grid;
new_handle!(COMPONENT_GRID_ROW);
actions_for_component!(Row);
#[rustfmt::skip]
#[derive(Default)]
pub struct Row {
weight : Weight,
renderable: Renderable,
id : IdentifierValue,
classes : Classes,
cols : TypedComponents<grid::Column>,
template : String,
}
impl ComponentTrait for Row {
fn new() -> Self {
Row::default().with_classes(ClassesOp::SetDefault, "row")
}
fn handle(&self) -> Handle {
COMPONENT_GRID_ROW
}
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 before_prepare_component(&mut self, cx: &mut Context) {
run_actions_before_prepare_row(self, cx);
}
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] {
(self.columns().prepare(cx))
}
})
}
fn after_prepare_component(&mut self, cx: &mut Context) {
run_actions_after_prepare_row(self, cx);
}
}
impl Row {
// Row BUILDER.
#[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_id(&mut self, id: &str) -> &mut Self {
self.id.alter_value(id);
self
}
#[fn_builder]
pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
self.classes.alter_value(op, classes);
self
}
pub fn with_column(mut self, column: grid::Column) -> Self {
self.cols.alter(TypedOp::Add(TypedComponent::with(column)));
self
}
#[fn_builder]
pub fn alter_columns(&mut self, op: TypedOp<grid::Column>) -> &mut Self {
self.cols.alter(op);
self
}
#[fn_builder]
pub fn alter_template(&mut self, template: &str) -> &mut Self {
self.template = template.to_owned();
self
}
// Row GETTERS.
pub fn classes(&self) -> &Classes {
&self.classes
}
pub fn columns(&self) -> &TypedComponents<grid::Column> {
&self.cols
}
pub fn template(&self) -> &str {
self.template.as_str()
}
}

30
pagetop-minimal/src/lib.rs
View file

@ -12,7 +12,35 @@ static_files!(minimal);
const VERSION_MINIMAL: &str = env!("CARGO_PKG_VERSION");
// Context parameter.
const PARAM_MINIMAL_ASSETS: &str = "minimal.assets";
const PARAM_MINIMAL_FLEX: &str = "minimal.flex";
#[rustfmt::skip]
#[derive(Default)]
pub enum BreakPoint {
#[default]
None, /* Does not apply */
SM, /* @media screen and (max-width: 35.5em) - Applies <= 568px */
MD, /* @media screen and (max-width: 48em) - Applies <= 768px */
LG, /* @media screen and (max-width: 64em) - Applies <= 1024px */
XL, /* @media screen and (max-width: 80em) - Applies <= 1280px */
X2L, /* @media screen and (max-width: 120em) - Applies <= 1920px */
X3L, /* @media screen and (max-width: 160em) - Applies <= 2560px */
}
#[rustfmt::skip]
impl ToString for BreakPoint {
fn to_string(&self) -> String {
match self {
BreakPoint::None => "bp-no".to_string(),
BreakPoint::SM => "bp-sm".to_string(),
BreakPoint::MD => "bp-md".to_string(),
BreakPoint::LG => "bp-lg".to_string(),
BreakPoint::XL => "bp-xl".to_string(),
BreakPoint::X2L => "bp-x2l".to_string(),
BreakPoint::X3L => "bp-x3l".to_string(),
}
}
}
pub struct Minimal;

361
pagetop-minimal/static/css/flex.css Normal file
View file

@ -0,0 +1,361 @@
/* CONTAINERS */
.flex-container {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
position: relative;
max-width: 100%;
width: 100%;
padding: 0;
}
.flex-row,
.flex-col.bp-no {
flex-direction: column;
}
.flex-row.flex-reverse,
.flex-col.flex-reverse.bp-no {
flex-direction: column-reverse;
}
.flex-col,
.flex.row.bp-no {
flex-direction: row;
}
.flex-col.flex-reverse,
.flex-row.flex-reverse.bp-no {
flex-direction: row-reverse;
}
.flex-container.flex-wrap {
flex-wrap: wrap;
align-content: flex-start;
}
.flex-container.flex-wrap-reverse {
flex-wrap: wrap-reverse;
align-content: flex-start;
}
.flex-container.flex-align-end {
align-content: flex-end;
}
.flex-container.flex-align-center {
align-content: center;
}
.flex-container.flex-align-stretch {
align-content: stretch;
}
.flex-container.flex-align-space-between {
align-content: space-between;
}
.flex-container.flex-align-space-around {
align-content: space-around;
}
.flex-container.flex-justify-end {
justify-content: flex-end;
}
.flex-container.flex-justify-center {
justify-content: center;
}
.flex-container.flex-justify-space-between {
justify-content: space-between;
}
.flex-container.flex-justify-space-around {
justify-content: space-around;
}
.flex-container.flex-justify-space-evenly {
justify-content: space-evenly;
}
.flex-container.flex-item-bottom {
align-items: flex-end;
}
.flex-container.flex-item-middle {
align-items: center;
}
.flex-container.flex-item-stretch {
align-items: stretch;
}
.flex-container.flex-item-baseline {
align-items: baseline;
}
/* ITEMS */
.flex-item {
padding: 0 !important;
}
.flex-item.flex-grow-1 {
flex-grow: 1;
}
.flex-item.flex-grow-2 {
flex-grow: 2;
}
.flex-item.flex-grow-3 {
flex-grow: 3;
}
.flex-item.flex-grow-4 {
flex-grow: 4;
}
.flex-item.flex-grow-5 {
flex-grow: 5;
}
.flex-item.flex-grow-6 {
flex-grow: 6;
}
.flex-item.flex-grow-7 {
flex-grow: 7;
}
.flex-item.flex-grow-8 {
flex-grow: 8;
}
.flex-item.flex-grow-9 {
flex-grow: 9;
}
.flex-item.flex-shrink-1 {
flex-shrink: 1;
}
.flex-item.flex-shrink-2 {
flex-shrink: 2;
}
.flex-item.flex-shrink-3 {
flex-shrink: 3;
}
.flex-item.flex-shrink-4 {
flex-shrink: 4;
}
.flex-item.flex-shrink-5 {
flex-shrink: 5;
}
.flex-item.flex-shrink-6 {
flex-shrink: 6;
}
.flex-item.flex-shrink-7 {
flex-shrink: 7;
}
.flex-item.flex-shrink-8 {
flex-shrink: 8;
}
.flex-item.flex-shrink-9 {
flex-shrink: 9;
}
.flex-item.flex-width-10 {
flex: 0 0 10%;
max-width: 10%;
}
.flex-item.flex-width-20 {
flex: 0 0 20%;
max-width: 20%;
}
.flex-item.flex-width-25 {
flex: 0 0 25%;
max-width: 25%;
}
.flex-item.flex-width-33 {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
.flex-item.flex-width-40 {
flex: 0 0 40%;
max-width: 40%;
}
.flex-item.flex-width-50 {
flex: 0 0 60%;
max-width: 50%;
}
.flex-item.flex-width-60 {
flex: 0 0 60%;
max-width: 60%;
}
.flex-item.flex-width-66 {
flex: 0 0 66.6666%;
max-width: 66.6666%;
}
.flex-item.flex-width-75 {
flex: 0 0 75%;
max-width: 75%;
}
.flex-item.flex-width-80 {
flex: 0 0 80%;
max-width: 80%;
}
.flex-item.flex-width-90 {
flex: 0 0 90%;
max-width: 90%;
}
.flex-item.flex-offset-10 {
margin-left: 10%;
}
.flex-item.flex-offset-20 {
margin-left: 20%;
}
.flex-item.flex-offset-25 {
margin-left: 25%;
}
.flex-item.flex-offset-33 {
margin-left: 33.3333%;
}
.flex-item.flex-offset-40 {
margin-left: 40%;
}
.flex-item.flex-offset-50 {
margin-left: 50%;
}
.flex-item.flex-offset-60 {
margin-left: 60%;
}
.flex-item.flex-offset-66 {
margin-left: 66.6666%;
}
.flex-item.flex-offset-75 {
margin-left: 75%;
}
.flex-item.flex-offset-80 {
margin-left: 80%;
}
.flex-item.flex-offset-90 {
margin-left: 90%;
}
.flex-item.flex-item-top {
align-self: flex-start;
}
.flex-item.flex-item-bottom {
align-self: flex-end;
}
.flex-item.flex-item-middle {
align-self: center;
}
.flex-item.flex-item-stretch {
align-self: stretch;
}
.flex-item.flex-item-baseline {
align-self: baseline;
}
/* BREAKPOINTS */
/* SM - Applies <= 568px */
@media screen and (max-width: 35.5em) {
.flex-row.bp-sm {
flex-direction: row;
}
.flex-row.flex-reverse.bp-sm {
flex-direction: row-reverse;
}
.flex-col.bp-sm {
flex-direction: column;
}
.flex-col.flex-reverse.bp-sm {
flex-direction: column-reverse;
}
.flex-col.bp-sm .flex-item {
flex: 1 1 auto;
max-width: 100%;
margin-left: 0;
}
}
/* MD - Applies <= 768px */
@media screen and (max-width: 48em) {
.flex-row.bp-md {
flex-direction: row;
}
.flex-row.flex-reverse.bp-md {
flex-direction: row-reverse;
}
.flex-col.bp-md {
flex-direction: column;
}
.flex-col.flex-reverse.bp-md {
flex-direction: column-reverse;
}
.flex-col.bp-md .flex-item {
flex: 1 1 auto;
max-width: 100%;
margin-left: 0;
}
}
/* LG - Applies <= 1024px */
@media screen and (max-width: 64em) {
.flex-row.bp-lg {
flex-direction: row;
}
.flex-row.flex-reverse.bp-lg {
flex-direction: row-reverse;
}
.flex-col.bp-lg {
flex-direction: column;
}
.flex-col.flex-reverse.bp-lg {
flex-direction: column-reverse;
}
.flex-col.bp-lg .flex-item {
flex: 1 1 auto;
max-width: 100%;
margin-left: 0;
}
}
/* XL - Applies <= 1280px */
@media screen and (max-width: 80em) {
.flex-row.bp-xl {
flex-direction: row;
}
.flex-row.flex-reverse.bp-xl {
flex-direction: row-reverse;
}
.flex-col.bp-xl {
flex-direction: column;
}
.flex-col.flex-reverse.bp-xl {
flex-direction: column-reverse;
}
.flex-col.bp-xl .flex-item {
flex: 1 1 auto;
max-width: 100%;
margin-left: 0;
}
}
/* X2L - Applies <= 1920px */
@media screen and (max-width: 120em) {
.flex-row.bp-x2l {
flex-direction: row;
}
.flex-row.flex-reverse.bp-x2l {
flex-direction: row-reverse;
}
.flex-col.bp-x2l {
flex-direction: column;
}
.flex-col.flex-reverse.bp-x2l {
flex-direction: column-reverse;
}
.flex-col.bp-x2l .flex-item {
flex: 1 1 auto;
max-width: 100%;
margin-left: 0;
}
}
/* X3L - Applies <= 2560px */
@media screen and (max-width: 160em) {
.flex-row.bp-x3l {
flex-direction: row;
}
.flex-row.flex-reverse.bp-x3l {
flex-direction: row-reverse;
}
.flex-col.bp-x3l {
flex-direction: column;
}
.flex-col.flex-reverse.bp-x3l {
flex-direction: column-reverse;
}
.flex-col.bp-x3l .flex-item {
flex: 1 1 auto;
max-width: 100%;
margin-left: 0;
}
}