HOSTSD-307 - Fixing server table layout (#112)

* updating layout for server table - css only * adjusting layout for server table, fixing loading spinner styles for btn
bcgov · Mar 11, 2024 · 5b466e7 · 5b466e7
1 parent 5c755d8
commit 5b466e7
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 44 deletions.
diff --git a/src/dashboard/src/components/charts/allocationTable/AllocationTable.module.scss b/src/dashboard/src/components/charts/allocationTable/AllocationTable.module.scss
@@ -147,7 +147,7 @@
 }
 
 .info {
-    width: 72%;
+    width: 100%;
 
     a {
         width: 24%;
@@ -163,32 +163,33 @@
     }
 
     p {
-        width: 21%;
+        width: 25%;
+        min-width: 180px;
         @include ellipsis;
 
         &:first-of-type {
-            width: 34.5%;
+            width: 18%;
             margin-left: 10px;
         }
 
-        &:last-child {
+        &:nth-child(3), &:nth-child(4) {
             width: unset;
         }
     }
 }
 
-.barChart {
-    width: 28%;
-}
-
 .bar {
     height: 13px;
-    width: 100%;
+    width: 28%;
     border-radius: 10px;
     margin-top: 12px;
     background-color: $medium-gray;
     overflow: hidden;
 
+    @media (max-width: $desktop) {
+        width: 21%;
+    }
+
     .percentage {
         height: 13px;
         width: 60%;
@@ -207,36 +208,29 @@
 
 .hasTenant {
     .sortDropdown {
-        &:first-child {
-            width: 15%;
-        }
+        width: 15%;
 
-        &:nth-child(2) {
-            width: 15%;
+        &:nth-child(4), &:last-of-type {
+            p {
+               margin: 0 auto; 
+            }
         }
     }
 
     .info {
-        a {
-            width: 20%;
-        }
-
         p {
-            width: 20%;
+            width: 15%;
+            min-width: unset;
 
             &.centered {
                 text-align: center;
             }
-
-            &:first-of-type {
-                width: 21%;
-            }
-
-            &:last-child {
-                width: 15%;
-            }
         }
     }
+
+    .bar {
+        width: 25%;
+    }
 }
 
 .link {

diff --git a/src/dashboard/src/components/charts/allocationTable/TableRow.tsx b/src/dashboard/src/components/charts/allocationTable/TableRow.tsx
@@ -57,8 +57,6 @@ export const TableRow: React.FC<TableRowProps> = ({
         <p className={styles.centered} title={availableValue}>
           {availableValue}
         </p>
-      </div>
-      <div className={styles.barChart}>
         <div className={styles.bar}>
           {/* Applying width as an inline style */}
           <div className={styles.percentage} style={{ width: `${percentageUsed}%` }} />

diff --git a/src/dashboard/src/components/spinner/Spinner.module.scss b/src/dashboard/src/components/spinner/Spinner.module.scss
@@ -1,23 +1,25 @@
 @import '@/styles/utils.scss';
 
 .spinner {
-  display: inline-block;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba($chart-gray, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: absolute;
-  // width: 80px;
-  // height: 80px;
-}
 
-.spinner div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  // width: 64px;
-  // height: 64px;
-  margin: 8px;
-  border: 8px solid $white;
-  border-radius: 50%;
-  animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: $white transparent transparent transparent;
+  >div {
+    width: 20px;
+    height: 20px;
+    border: 2px solid $bc-blue;
+    border-color: $bc-blue transparent transparent transparent;
+    border-radius: 50%;
+    position: absolute;
+    animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  }
 }
 
 .spinner div:nth-child(1) {