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]
#[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: 62em) - Applies <= 992px */
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 */
None, /* Does not apply. Rest initially assume 1 pixel = 0.0625em */
SM, /* PageTop default applies to <= 568px - @media screen and (max-width: 35.5em) */
MD, /* PageTop default applies to <= 768px - @media screen and (max-width: 48em) */
LG, /* PageTop default applies to <= 992px - @media screen and (max-width: 62em) */
XL, /* PageTop default applies to <= 1280px - @media screen and (max-width: 80em) */
X2L, /* PageTop default applies to <= 1440px - @media screen and (max-width: 90em) */
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]
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(),
BreakPoint::None => "pt-bp__no".to_string(),
BreakPoint::SM => "pt-bp__sm".to_string(),
BreakPoint::MD => "pt-bp__md".to_string(),
BreakPoint::LG => "pt-bp__lg".to_string(),
BreakPoint::XL => "pt-bp__xl".to_string(),
BreakPoint::X2L => "pt-bp__x2l".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;
}
.pt-flex__row,
.pt-flex__col.bp-no {
.pt-flex__col.pt-bp__no {
flex-direction: column;
}
.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;
}
.pt-flex__col,
.pt-flex__row.bp-no {
.pt-flex__row.pt-bp__no {
flex-direction: row;
}
.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;
}
@ -241,19 +241,19 @@
/* SM - Applies <= 568px */
@media screen and (max-width: 35.5em) {
.pt-flex__row.bp-sm {
.pt-flex__row.pt-bp__sm {
flex-direction: row;
}
.pt-flex__row.pt-flex__reverse.bp-sm {
.pt-flex__row.pt-flex__reverse.pt-bp__sm {
flex-direction: row-reverse;
}
.pt-flex__col.bp-sm {
.pt-flex__col.pt-bp__sm {
flex-direction: column;
}
.pt-flex__col.pt-flex__reverse.bp-sm {
.pt-flex__col.pt-flex__reverse.pt-bp__sm {
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;
max-width: 100%;
margin-left: 0;
@ -261,19 +261,19 @@
}
/* MD - Applies <= 768px */
@media screen and (max-width: 48em) {
.pt-flex__row.bp-md {
.pt-flex__row.pt-bp__md {
flex-direction: row;
}
.pt-flex__row.pt-flex__reverse.bp-md {
.pt-flex__row.pt-flex__reverse.pt-bp__md {
flex-direction: row-reverse;
}
.pt-flex__col.bp-md {
.pt-flex__col.pt-bp__md {
flex-direction: column;
}
.pt-flex__col.pt-flex__reverse.bp-md {
.pt-flex__col.pt-flex__reverse.pt-bp__md {
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;
max-width: 100%;
margin-left: 0;
@ -281,19 +281,19 @@
}
/* LG - Applies <= 992px */
@media screen and (max-width: 62em) {
.pt-flex__row.bp-lg {
.pt-flex__row.pt-bp__lg {
flex-direction: row;
}
.pt-flex__row.pt-flex__reverse.bp-lg {
.pt-flex__row.pt-flex__reverse.pt-bp__lg {
flex-direction: row-reverse;
}
.pt-flex__col.bp-lg {
.pt-flex__col.pt-bp__lg {
flex-direction: column;
}
.pt-flex__col.pt-flex__reverse.bp-lg {
.pt-flex__col.pt-flex__reverse.pt-bp__lg {
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;
max-width: 100%;
margin-left: 0;
@ -301,59 +301,79 @@
}
/* XL - Applies <= 1280px */
@media screen and (max-width: 80em) {
.pt-flex__row.bp-xl {
.pt-flex__row.pt-bp__xl {
flex-direction: row;
}
.pt-flex__row.pt-flex__reverse.bp-xl {
.pt-flex__row.pt-flex__reverse.pt-bp__xl {
flex-direction: row-reverse;
}
.pt-flex__col.bp-xl {
.pt-flex__col.pt-bp__xl {
flex-direction: column;
}
.pt-flex__col.pt-flex__reverse.bp-xl {
.pt-flex__col.pt-flex__reverse.pt-bp__xl {
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;
max-width: 100%;
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) {
.pt-flex__row.bp-x2l {
.pt-flex__row.pt-bp__x3l {
flex-direction: row;
}
.pt-flex__row.pt-flex__reverse.bp-x2l {
.pt-flex__row.pt-flex__reverse.pt-bp__x3l {
flex-direction: row-reverse;
}
.pt-flex__col.bp-x2l {
.pt-flex__col.pt-bp__x3l {
flex-direction: column;
}
.pt-flex__col.pt-flex__reverse.bp-x2l {
.pt-flex__col.pt-flex__reverse.pt-bp__x3l {
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;
max-width: 100%;
margin-left: 0;
}
}
/* X3L - Applies <= 2560px */
@media screen and (max-width: 160em) {
.pt-flex__row.bp-x3l {
/* X2K - Applies <= 2560px */
@media screen and (max-width: 120em) {
.pt-flex__row.pt-bp__x2k {
flex-direction: row;
}
.pt-flex__row.pt-flex__reverse.bp-x3l {
.pt-flex__row.pt-flex__reverse.pt-bp__x2k {
flex-direction: row-reverse;
}
.pt-flex__col.bp-x3l {
.pt-flex__col.pt-bp__x2k {
flex-direction: column;
}
.pt-flex__col.pt-flex__reverse.bp-x3l {
.pt-flex__col.pt-flex__reverse.pt-bp__x2k {
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;
max-width: 100%;
margin-left: 0;