NAS-130391 / 24.10 / New MINI enclosure page mobile scaling / layout (#…

…10411) * NAS-129910: Enclosure various improvements * NAS-129910: Fix enclosure page styles * NAS-130391: New MINI enclosure page mobile scaling / layout * Merge branch master into NAS-130391 * Merge branch master into NAS-130391 * NAS-130391: PR update --------- Co-authored-by: Boris Vasilenko <[email protected]>
truenas · Aug 9, 2024 · c03c259 · c03c259
1 parent d3d818c
commit c03c259
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 22 deletions.
diff --git a/.../system/enclosure/components/pages/mini-page/mini-enclosure/mini-enclosure.component.scss b/.../system/enclosure/components/pages/mini-page/mini-enclosure/mini-enclosure.component.scss
@@ -1,5 +1,8 @@
+@import 'scss-imports/cssvars';
+
 :host {
   display: flex;
+  flex-wrap: wrap;
   gap: 12px;
   justify-content: space-evenly;
 }
@@ -8,6 +11,14 @@
   padding-top: 20px;
   position: relative;
 
+  @media (max-width: $breakpoint-xs) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    padding-bottom: 15px;
+    padding-top: 0;
+  }
+
   .slot-number {
     background-color: var(--primary);
     border-radius: 50%;
@@ -19,32 +30,50 @@
   }
 
   .slot {
-    margin-bottom: 16px;
     white-space: nowrap;
+
+    @media (min-width: $breakpoint-xs) {
+      margin-bottom: 16px;
+    }
   }
 
   &.mini-3e {
-    padding-top: 55px;
+    @media (min-width: $breakpoint-xs) {
+      padding-top: 55px;
+    }
   }
 
   &.mini-3x {
-    padding-top: 28px;
+    @media (min-width: $breakpoint-xs) {
+      padding-top: 28px;
 
-    .slot:nth-last-child(2) {
-      margin-bottom: 1px;
+      .slot:nth-last-child(2) {
+        margin-bottom: 5px;
+      }
     }
   }
 
   &.mini-3xl {
-    padding-top: 50px;
+    @media (min-width: $breakpoint-xs) {
+      padding-top: 50px;
+
 
-    .slot:nth-child(4) {
-      margin-bottom: 44px;
+      .slot:nth-child(4) {
+        margin-bottom: 44px;
+      }
+
+      .slot:last-child {
+        position: absolute;
+        top: 5px;
+      }
     }
 
-    .slot:last-child {
-      position: absolute;
-      top: 5px;
+    @media (max-width: $breakpoint-xs) {
+      order: 0;
+
+      .slot:last-child {
+        order: -1;
+      }
     }
   }
 }
@@ -53,36 +82,63 @@
   padding-top: 20px;
   position: relative;
 
+  @media (max-width: $breakpoint-xs) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    padding-top: 15px;
+  }
+
   .slot {
-    margin-bottom: 11.5px;
+    @media (min-width: $breakpoint-xs) {
+      margin-bottom: 11.5px;
+    }
   }
 
   &.mini-3e {
-    padding-top: 55px;
+    @media (min-width: $breakpoint-xs) {
+      padding-top: 55px;
+    }
   }
 
   &.mini-3x {
-    padding-top: 28px;
+    @media (min-width: $breakpoint-xs) {
+      padding-top: 28px;
 
-    .slot:nth-last-child(2) {
-      margin-bottom: -2px;
+      .slot:nth-last-child(2) {
+        margin-bottom: 0;
+      }
     }
   }
 
   &.mini-3xl {
-    padding-top: 50px;
+    @media (min-width: $breakpoint-xs) {
+      padding-top: 50px;
 
-    .slot:nth-child(4) {
-      margin-bottom: 38px;
+      .slot:nth-child(4) {
+        margin-bottom: 38px;
+      }
+
+      .slot:last-child {
+        position: absolute;
+        top: 5px;
+      }
     }
 
-    .slot:last-child {
-      position: absolute;
-      top: 5px;
+    @media (max-width: $breakpoint-xs) {
+      order: 0;
+
+      .slot:last-child {
+        order: -1;
+      }
     }
   }
 }
 
 .enclosure {
   min-width: 300px;
+
+  @media (max-width: $breakpoint-xs) {
+    min-width: 75vw;
+  }
 }
diff --git a/src/app/pages/system/enclosure/components/pages/mini-page/mini-page.component.scss b/src/app/pages/system/enclosure/components/pages/mini-page/mini-page.component.scss
@@ -7,6 +7,7 @@
   .card .container {
     background-color: var(--contrast-darker);
     display: flex;
+    flex-wrap: wrap;
     gap: 26px;
     padding: 24px 28px 56px;