platypush/platypush
platypush
/
platypush
2
2
Fork 4
Code Issues 38 Pull Requests Packages Projects 4 Releases Wiki Activity

[UI] Refactored layout classes.

This commit is contained in:
Fabio Manganiello 2023-10-16 01:12:05 +02:00
parent d1afb88b80
commit c88a9da3e6
Signed by: blacklight
GPG Key ID: D90FBA7F76362774
2 changed files with 154 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
platypush/backend/http/webapp/src/components/Media/Controls.vue
View File

@ -476,22 +476,4 @@ button {
flex-grow: 1; flex-grow: 1;
margin: 0 .5em; margin: 0 .5em;
} }
.mobile {
@include from($tablet) {
display: none;
}
}
.tablet {
@media screen and (max-width: $tablet), screen and (min-width: $desktop - 1) {
display: none;
}
}
.desktop {
@include until($desktop) {
display: none;
}
}
</style> </style>

63
platypush/backend/http/webapp/src/style/layout.scss
View File

@ -12,6 +12,12 @@ $widths: (
xxl: $fullhd, xxl: $fullhd,
); );
$width-ranges: (
tablet: ($tablet, $desktop),
desktop: ($desktop, $widescreen),
widescreen: ($widescreen, $fullhd),
);
@for $i from 1 through 12 { @for $i from 1 through 12 {
.col-#{$i} { .col-#{$i} {
float: left; float: left;
@ -88,6 +94,24 @@ $widths: (
} }
} }
@mixin from($device) {
@media screen and (min-width: $device) {
@content;
}
}
@mixin until($device) {
@media screen and (max-width: calc(#{$device} - 1px)) {
@content;
}
}
@mixin between($from, $until) {
@media screen and (min-width: $from) and (max-width: calc(#{$until} - 1px)) {
@content;
}
}
@each $size, $width in $widths { @each $size, $width in $widths {
@media screen and (min-width: $width) { @media screen and (min-width: $width) {
@for $i from 1 through 12 { @for $i from 1 through 12 {
@ -131,21 +155,41 @@ $widths: (
} }
} }
@mixin from($device) { @each $name, $range in $width-ranges {
@media screen and (min-width: $device) { .#{$name} {
@content; &.from {
@include until(nth($range, 1)) {
display: none;
} }
} }
@mixin until($device) { &.until {
@media screen and (max-width: calc(#{$device} - 1px)) { @include from(nth($range, 2)) {
@content; display: none;
} }
} }
@mixin between($from, $until) { &.only {
@media screen and (min-width: $from) and (max-width: calc(#{$until} - 1px)) { @include until(nth($range, 1)) {
@content; display: none;
}
@include from(nth($range, 2)) {
display: none;
}
}
}
}
.mobile {
@include from($tablet) {
display: none;
}
}
.fullhd {
@include until($fullhd) {
display: none;
} }
} }
@ -182,3 +226,4 @@ $widths: (
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }