platypush/platypush
platypush
/
platypush
2
2
Fork 4
Code Issues 32 Pull Requests 1 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>

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

@ -12,141 +12,185 @@ $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;
box-sizing: border-box; box-sizing: border-box;
@if $i < 12 {
width: (4.66666666667%*$i) + (4% * if($i > 1, $i - 1, 0));
margin-left: 4%;
} @else {
width: 100%;
margin-left: 0;
}
&:first-child {
margin-left: 0;
}
}
.col-no-margin-#{$i} {
float: left;
box-sizing: border-box;
width: ((math.div(100%, 12))*$i);
margin: 0;
}
@if $i < 12 { @if $i < 12 {
.col-offset-#{$i}:first-child { width: (4.66666666667%*$i) + (4% * if($i > 1, $i - 1, 0));
margin-left: (8.66666666667%*$i) !important; margin-left: 4%;
} } @else {
.col-offset-#{$i}:not(first-child) { width: 100%;
margin-left: 4% + (8.66666666667%*$i) !important; margin-left: 0;
}
} }
&:first-child {
margin-left: 0;
}
}
.col-no-margin-#{$i} {
float: left;
box-sizing: border-box;
width: ((math.div(100%, 12))*$i);
margin: 0;
}
@if $i < 12 {
.col-offset-#{$i}:first-child {
margin-left: (8.66666666667%*$i) !important;
}
.col-offset-#{$i}:not(first-child) {
margin-left: 4% + (8.66666666667%*$i) !important;
}
}
} }
@media screen and (max-width: calc(#{$tablet} - 1px)) { @media screen and (max-width: calc(#{$tablet} - 1px)) {
@for $i from 1 through 12 { @for $i from 1 through 12 {
.col-s-#{$i} { .col-s-#{$i} {
float: left; float: left;
box-sizing: border-box; box-sizing: border-box;
@if $i < 12 { @if $i < 12 {
width: (4.66666666667%*$i) + (4% * if($i > 1, $i - 1, 0)); width: (4.66666666667%*$i) + (4% * if($i > 1, $i - 1, 0));
margin-left: 4%; margin-left: 4%;
} @else { } @else {
width: 100%; width: 100%;
margin-left: 0; margin-left: 0;
} }
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;
} }
}
@if $i < 12 {
.col-offset-s-#{$i} {
margin-left: (8.66666666667%*$i);
}
}
.col-no-margin-s-#{$i} {
float: left;
box-sizing: border-box;
width: (math.div(100%, 12)*$i);
}
} }
.s-hidden { @if $i < 12 {
display: none !important; .col-offset-s-#{$i} {
margin-left: (8.66666666667%*$i);
}
} }
.s-visible { .col-no-margin-s-#{$i} {
display: block !important; float: left;
box-sizing: border-box;
width: (math.div(100%, 12)*$i);
} }
} }
@each $size, $width in $widths { .s-hidden {
@media screen and (min-width: $width) { display: none !important;
@for $i from 1 through 12 { }
.col-#{$size}-#{$i} {
float: left;
box-sizing: border-box;
@if $i < 12 { .s-visible {
width: #{(4.66666666667%*$i) + (4% * if($i > 1, $i - 1, 0))}; display: block !important;
margin-left: 4%; }
} @else {
width: 100%;
margin-left: 0;
}
&:first-child {
margin-left: 0;
}
}
@if $i < 12 {
.col-offset-#{$size}-#{$i} {
margin-left: #{(8.66666666667%*$i)};
}
}
.col-no-margin-#{$size}-#{$i} {
float: left;
box-sizing: border-box;
width: (math.div(100%, 12)*$i);
}
}
.#{$size}-hidden {
display: none !important;
}
.#{$size}-visible {
display: block !important;
}
}
} }
@mixin from($device) { @mixin from($device) {
@media screen and (min-width: $device) { @media screen and (min-width: $device) {
@content; @content;
} }
} }
@mixin until($device) { @mixin until($device) {
@media screen and (max-width: calc(#{$device} - 1px)) { @media screen and (max-width: calc(#{$device} - 1px)) {
@content; @content;
} }
} }
@mixin between($from, $until) { @mixin between($from, $until) {
@media screen and (min-width: $from) and (max-width: calc(#{$until} - 1px)) { @media screen and (min-width: $from) and (max-width: calc(#{$until} - 1px)) {
@content; @content;
}
}
@each $size, $width in $widths {
@media screen and (min-width: $width) {
@for $i from 1 through 12 {
.col-#{$size}-#{$i} {
float: left;
box-sizing: border-box;
@if $i < 12 {
width: #{(4.66666666667%*$i) + (4% * if($i > 1, $i - 1, 0))};
margin-left: 4%;
} @else {
width: 100%;
margin-left: 0;
}
&:first-child {
margin-left: 0;
}
}
@if $i < 12 {
.col-offset-#{$size}-#{$i} {
margin-left: #{(8.66666666667%*$i)};
}
}
.col-no-margin-#{$size}-#{$i} {
float: left;
box-sizing: border-box;
width: (math.div(100%, 12)*$i);
}
} }
.#{$size}-hidden {
display: none !important;
}
.#{$size}-visible {
display: block !important;
}
}
}
@each $name, $range in $width-ranges {
.#{$name} {
&.from {
@include until(nth($range, 1)) {
display: none;
}
}
&.until {
@include from(nth($range, 2)) {
display: none;
}
}
&.only {
@include until(nth($range, 1)) {
display: none;
}
@include from(nth($range, 2)) {
display: none;
}
}
}
}
.mobile {
@include from($tablet) {
display: none;
}
}
.fullhd {
@include until($fullhd) {
display: none;
}
} }
.vertical-center { .vertical-center {
@ -182,3 +226,4 @@ $widths: (
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }