fix(): better dashboard responsiveness

kestra-io · Sep 27, 2023 · f58c719 · f58c719
1 parent f0ab544
commit f58c719
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/ui/src/components/home/HomeSummaryPie.vue b/ui/src/components/home/HomeSummaryPie.vue
@@ -40,7 +40,10 @@
         },
         computed: {
             count() {
-                return this.data ? Object.values(this.data.executionCounts).reduce((a, b) => a + b, 0) : 0;
+                var data = this.data
+                data.executionCounts.SUCCESS = 30000;
+                data.executionCounts.WARNING = 3;
+                return this.data ? Object.values(data.executionCounts).reduce((a, b) => a + b, 0) : 0;
             }
         }
     };

diff --git a/ui/src/components/home/HomeSummaryStatusLabel.vue b/ui/src/components/home/HomeSummaryStatusLabel.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="list">
         <template v-for="[status, count] of sorted">
-            <div v-if="count > 0" :key="status" class="d-flex w-100 justify-content-between mb-2">
-                <div class="me-4 icon">
+            <div v-if="count > 0" :key="status" class="d-flex justify-content-around gap flex-wrap">
+                <div class="gap mb-2 icon">
                     <status :label="false" :status="status" />
                 </div>
 
@@ -15,7 +15,7 @@
                     </div>
                 </div>
 
-                <div class="big-number">
+                <div class="big-number text-break">
                     {{ count }}
                 </div>
             </div>
@@ -84,11 +84,15 @@
 
             .big-number {
                 vertical-align: middle;
-                font-size: 150%;
                 font-weight: bold;
             }
         }
     }
 
+    .gap {
+        column-gap: calc(var(--spacer) * 1.5);
+        row-gap: calc(var(--spacer) / 2);
+    }
+
 </style>