From c88a9da3e66108aaaa5619d5e720607289fa54ac Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Mon, 16 Oct 2023 01:12:05 +0200
Subject: [PATCH] [UI] Refactored layout classes.

---
 .../webapp/src/components/Media/Controls.vue  |  18 --
 .../backend/http/webapp/src/style/layout.scss | 263 ++++++++++--------
 2 files changed, 154 insertions(+), 127 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/Media/Controls.vue b/platypush/backend/http/webapp/src/components/Media/Controls.vue
index 73748effc..14da13275 100644
--- a/platypush/backend/http/webapp/src/components/Media/Controls.vue
+++ b/platypush/backend/http/webapp/src/components/Media/Controls.vue
@@ -476,22 +476,4 @@ button {
   flex-grow: 1;
   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>
diff --git a/platypush/backend/http/webapp/src/style/layout.scss b/platypush/backend/http/webapp/src/style/layout.scss
index 256e51083..48a39f2a9 100644
--- a/platypush/backend/http/webapp/src/style/layout.scss
+++ b/platypush/backend/http/webapp/src/style/layout.scss
@@ -12,141 +12,185 @@ $widths: (
     xxl:  $fullhd,
 );
 
+$width-ranges: (
+    tablet:     ($tablet, $desktop),
+    desktop:    ($desktop, $widescreen),
+    widescreen: ($widescreen, $fullhd),
+);
+
 @for $i from 1 through 12 {
-    .col-#{$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;
-        }
-    }
-
-    .col-no-margin-#{$i} {
-        float: left;
-        box-sizing: border-box;
-        width: ((math.div(100%, 12))*$i);
-        margin: 0;
-    }
+  .col-#{$i} {
+    float: left;
+    box-sizing: border-box;
 
     @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;
-        }
+      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 {
+    .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)) {
-    @for $i from 1 through 12 {
-        .col-s-#{$i} {
-            float: left;
-            box-sizing: border-box;
+  @for $i from 1 through 12 {
+    .col-s-#{$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;
-            }
+      @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-s-#{$i} {
-                margin-left: (8.66666666667%*$i);
-            }
-        }
-
-        .col-no-margin-s-#{$i} {
-            float: left;
-            box-sizing: border-box;
-            width: (math.div(100%, 12)*$i);
-        }
+      &:first-child {
+        margin-left: 0;
+      }
     }
 
-    .s-hidden {
-        display: none !important;
+    @if $i < 12 {
+      .col-offset-s-#{$i} {
+        margin-left: (8.66666666667%*$i);
+      }
     }
 
-    .s-visible {
-        display: block !important;
+    .col-no-margin-s-#{$i} {
+      float: left;
+      box-sizing: border-box;
+      width: (math.div(100%, 12)*$i);
     }
-}
+  }
 
-@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;
+  .s-hidden {
+    display: none !important;
+  }
 
-                @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;
-        }
-    }
+  .s-visible {
+    display: block !important;
+  }
 }
 
 @mixin from($device) {
-    @media screen and (min-width: $device) {
-        @content;
-    }
+  @media screen and (min-width: $device) {
+    @content;
+  }
 }
 
 @mixin until($device) {
-    @media screen and (max-width: calc(#{$device} - 1px)) {
-        @content;
-    }
+  @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;
+  @media screen and (min-width: $from) and (max-width: calc(#{$until} - 1px)) {
+    @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 {
@@ -182,3 +226,4 @@ $widths: (
   align-items: center;
   justify-content: center;
 }
+