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

🚧 Extend breakpoints definition

Browse source
This commit is contained in:
Manuel Cillero 2023-10-19 20:56:59 +02:00
parent b172108ec0
commit dbe1ec03ac
2 changed files with 73 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

32
pagetop/src/base/component.rs
View file

@ -49,32 +49,32 @@ pub(crate) fn add_assets_for_base(cx: &mut Context) {
)); ));
} }
// By default, 1 pixel = 0.0625em.
#[rustfmt::skip] #[rustfmt::skip]
#[derive(Default)] #[derive(Default)]
pub enum BreakPoint { pub enum BreakPoint {
#[default] #[default]
None, /* Does not apply */ None, /* Does not apply. Rest initially assume 1 pixel = 0.0625em */
SM, /* @media screen and (max-width: 35.5em) - Applies <= 568px */ SM, /* PageTop default applies to <= 568px - @media screen and (max-width: 35.5em) */
MD, /* @media screen and (max-width: 48em) - Applies <= 768px */ MD, /* PageTop default applies to <= 768px - @media screen and (max-width: 48em) */
LG, /* @media screen and (max-width: 62em) - Applies <= 992px */ LG, /* PageTop default applies to <= 992px - @media screen and (max-width: 62em) */
XL, /* @media screen and (max-width: 80em) - Applies <= 1280px */ XL, /* PageTop default applies to <= 1280px - @media screen and (max-width: 80em) */
X2L, /* @media screen and (max-width: 120em) - Applies <= 1920px */ X2L, /* PageTop default applies to <= 1440px - @media screen and (max-width: 90em) */
X3L, /* @media screen and (max-width: 160em) - Applies <= 2560px */ X3L, /* PageTop default applies to <= 1920px - @media screen and (max-width: 120em) */
X2K, /* PageTop default applies to <= 2560px - @media screen and (max-width: 160em) */
} }
#[rustfmt::skip] #[rustfmt::skip]
impl ToString for BreakPoint { impl ToString for BreakPoint {
fn to_string(&self) -> String { fn to_string(&self) -> String {
match self { match self {
BreakPoint::None => "bp-no".to_string(), BreakPoint::None => "pt-bp__no".to_string(),
BreakPoint::SM => "bp-sm".to_string(), BreakPoint::SM => "pt-bp__sm".to_string(),
BreakPoint::MD => "bp-md".to_string(), BreakPoint::MD => "pt-bp__md".to_string(),
BreakPoint::LG => "bp-lg".to_string(), BreakPoint::LG => "pt-bp__lg".to_string(),
BreakPoint::XL => "bp-xl".to_string(), BreakPoint::XL => "pt-bp__xl".to_string(),
BreakPoint::X2L => "bp-x2l".to_string(), BreakPoint::X2L => "pt-bp__x2l".to_string(),
BreakPoint::X3L => "bp-x3l".to_string(), BreakPoint::X3L => "pt-bp__x3l".to_string(),
BreakPoint::X2K => "pt-bp__x2k".to_string(),
} }
} }
} }

94
pagetop/static/base/css/flex.css
View file

@ -10,19 +10,19 @@
padding: 0 !important; padding: 0 !important;
} }
.pt-flex__row, .pt-flex__row,
.pt-flex__col.bp-no { .pt-flex__col.pt-bp__no {
flex-direction: column; flex-direction: column;
} }
.pt-flex__row.pt-flex__reverse, .pt-flex__row.pt-flex__reverse,
.pt-flex__col.pt-flex__reverse.bp-no { .pt-flex__col.pt-flex__reverse.pt-bp__no {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.pt-flex__col, .pt-flex__col,
.pt-flex__row.bp-no { .pt-flex__row.pt-bp__no {
flex-direction: row; flex-direction: row;
} }
.pt-flex__col.pt-flex__reverse, .pt-flex__col.pt-flex__reverse,
.pt-flex__row.pt-flex__reverse.bp-no { .pt-flex__row.pt-flex__reverse.pt-bp__no {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
@ -241,19 +241,19 @@
/* SM - Applies <= 568px */ /* SM - Applies <= 568px */
@media screen and (max-width: 35.5em) { @media screen and (max-width: 35.5em) {
.pt-flex__row.bp-sm { .pt-flex__row.pt-bp__sm {
flex-direction: row; flex-direction: row;
} }
.pt-flex__row.pt-flex__reverse.bp-sm { .pt-flex__row.pt-flex__reverse.pt-bp__sm {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.pt-flex__col.bp-sm { .pt-flex__col.pt-bp__sm {
flex-direction: column; flex-direction: column;
} }
.pt-flex__col.pt-flex__reverse.bp-sm { .pt-flex__col.pt-flex__reverse.pt-bp__sm {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.pt-flex__col.bp-sm .pt-flex__item { .pt-flex__col.pt-bp__sm .pt-flex__item {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;
@ -261,19 +261,19 @@
} }
/* MD - Applies <= 768px */ /* MD - Applies <= 768px */
@media screen and (max-width: 48em) { @media screen and (max-width: 48em) {
.pt-flex__row.bp-md { .pt-flex__row.pt-bp__md {
flex-direction: row; flex-direction: row;
} }
.pt-flex__row.pt-flex__reverse.bp-md { .pt-flex__row.pt-flex__reverse.pt-bp__md {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.pt-flex__col.bp-md { .pt-flex__col.pt-bp__md {
flex-direction: column; flex-direction: column;
} }
.pt-flex__col.pt-flex__reverse.bp-md { .pt-flex__col.pt-flex__reverse.pt-bp__md {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.pt-flex__col.bp-md .pt-flex__item { .pt-flex__col.pt-bp__md .pt-flex__item {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;
@ -281,19 +281,19 @@
} }
/* LG - Applies <= 992px */ /* LG - Applies <= 992px */
@media screen and (max-width: 62em) { @media screen and (max-width: 62em) {
.pt-flex__row.bp-lg { .pt-flex__row.pt-bp__lg {
flex-direction: row; flex-direction: row;
} }
.pt-flex__row.pt-flex__reverse.bp-lg { .pt-flex__row.pt-flex__reverse.pt-bp__lg {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.pt-flex__col.bp-lg { .pt-flex__col.pt-bp__lg {
flex-direction: column; flex-direction: column;
} }
.pt-flex__col.pt-flex__reverse.bp-lg { .pt-flex__col.pt-flex__reverse.pt-bp__lg {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.pt-flex__col.bp-lg .pt-flex__item { .pt-flex__col.pt-bp__lg .pt-flex__item {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;
@ -301,59 +301,79 @@
} }
/* XL - Applies <= 1280px */ /* XL - Applies <= 1280px */
@media screen and (max-width: 80em) { @media screen and (max-width: 80em) {
.pt-flex__row.bp-xl { .pt-flex__row.pt-bp__xl {
flex-direction: row; flex-direction: row;
} }
.pt-flex__row.pt-flex__reverse.bp-xl { .pt-flex__row.pt-flex__reverse.pt-bp__xl {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.pt-flex__col.bp-xl { .pt-flex__col.pt-bp__xl {
flex-direction: column; flex-direction: column;
} }
.pt-flex__col.pt-flex__reverse.bp-xl { .pt-flex__col.pt-flex__reverse.pt-bp__xl {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.pt-flex__col.bp-xl .pt-flex__item { .pt-flex__col.pt-bp__xl .pt-flex__item {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;
} }
} }
/* X2L - Applies <= 1920px */ /* X2L - Applies <= 1440px */
@media screen and (max-width: 90em) {
.pt-flex__row.pt-bp__x2l {
flex-direction: row;
}
.pt-flex__row.pt-flex__reverse.pt-bp__x2l {
flex-direction: row-reverse;
}
.pt-flex__col.pt-bp__x2l {
flex-direction: column;
}
.pt-flex__col.pt-flex__reverse.pt-bp__x2l {
flex-direction: column-reverse;
}
.pt-flex__col.pt-bp__x2l .pt-flex__item {
flex: 1 1 auto;
max-width: 100%;
margin-left: 0;
}
}
/* X3L - Applies <= 1920px */
@media screen and (max-width: 120em) { @media screen and (max-width: 120em) {
.pt-flex__row.bp-x2l { .pt-flex__row.pt-bp__x3l {
flex-direction: row; flex-direction: row;
} }
.pt-flex__row.pt-flex__reverse.bp-x2l { .pt-flex__row.pt-flex__reverse.pt-bp__x3l {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.pt-flex__col.bp-x2l { .pt-flex__col.pt-bp__x3l {
flex-direction: column; flex-direction: column;
} }
.pt-flex__col.pt-flex__reverse.bp-x2l { .pt-flex__col.pt-flex__reverse.pt-bp__x3l {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.pt-flex__col.bp-x2l .pt-flex__item { .pt-flex__col.pt-bp__x3l .pt-flex__item {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;
} }
} }
/* X3L - Applies <= 2560px */ /* X2K - Applies <= 2560px */
@media screen and (max-width: 160em) { @media screen and (max-width: 120em) {
.pt-flex__row.bp-x3l { .pt-flex__row.pt-bp__x2k {
flex-direction: row; flex-direction: row;
} }
.pt-flex__row.pt-flex__reverse.bp-x3l { .pt-flex__row.pt-flex__reverse.pt-bp__x2k {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.pt-flex__col.bp-x3l { .pt-flex__col.pt-bp__x2k {
flex-direction: column; flex-direction: column;
} }
.pt-flex__col.pt-flex__reverse.bp-x3l { .pt-flex__col.pt-flex__reverse.pt-bp__x2k {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.pt-flex__col.bp-x3l .pt-flex__item { .pt-flex__col.pt-bp__x2k .pt-flex__item {
flex: 1 1 auto; flex: 1 1 auto;
max-width: 100%; max-width: 100%;
margin-left: 0; margin-left: 0;