updated info pages to be reactive

HIRO-MicroDataCenters-BV · Jul 18, 2024 · f9b95d9 · f9b95d9
1 parent 3fa6524
commit f9b95d9
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 29 deletions.
diff --git a/src/views/AgricultureView.vue b/src/views/AgricultureView.vue
@@ -5,6 +5,7 @@ import {
   agricultureGraph,
 } from '@/constants/agriculture-page';
 import AppFlowChart from '@/components/AppFlowChart.vue';
+import AppCardSelector from '@/components/AppCardSelector.vue';
 </script>
 
 <template>
@@ -21,6 +22,7 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
     <AppFlowChart
       :nodes="agricultureGraph.nodes"
       :edges="agricultureGraph.edges"
+      class="agriculture-view__flow-chart"
     />
     <section class="card-section">
       <AppCard
@@ -31,6 +33,10 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
         :cube-variant="card.type"
       />
     </section>
+    <AppCardSelector
+      class="agriculture-view__card-selector"
+      :cards="agricultureCards"
+    />
   </div>
 </template>
 
@@ -41,15 +47,35 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
   height: 100%;
   align-items: center;
   justify-content: space-between;
+  flex-direction: column;
+
+  @media (--breakpoint-desktop) {
+    flex-direction: row;
+    gap: 20px;
+  }
+}
+
+.agriculture-view__flow-chart {
+  min-height: 400px;
 }
 
 .card-section {
-  display: flex;
-  flex-direction: column;
-  gap: 100px;
-  width: fit-content;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
+  display: none;
+
+  @media (--breakpoint-desktop) {
+    display: flex;
+    flex-direction: column;
+    gap: 100px;
+    width: fit-content;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.agriculture-view__card-selector {
+  @media (--breakpoint-desktop) {
+    display: none;
+  }
 }
 </style>
diff --git a/src/views/CityView.vue b/src/views/CityView.vue
@@ -2,6 +2,7 @@
 import AppCard from '@/components/AppCard.vue';
 import { cityCards, cityGraph } from '@/constants/city-page';
 import AppFlowChart from '@/components/AppFlowChart.vue';
+import AppCardSelector from '@/components/AppCardSelector.vue';
 </script>
 
 <template>
@@ -18,6 +19,7 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
     <AppFlowChart
       :nodes="cityGraph.nodes"
       :edges="cityGraph.edges"
+      class="city-view__flow-chart"
     />
     <section class="card-section">
       <AppCard
@@ -28,6 +30,10 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
         :cube-variant="card.type"
       />
     </section>
+    <AppCardSelector
+      class="city-view__card-selector"
+      :cards="cityCards"
+    />
   </div>
 </template>
 
@@ -38,15 +44,35 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
   height: 100%;
   align-items: center;
   justify-content: space-between;
+  flex-direction: column;
+
+  @media (--breakpoint-desktop) {
+    flex-direction: row;
+    gap: 20px;
+  }
+}
+
+.city-view__flow-chart {
+  min-height: 400px;
 }
 
 .card-section {
-  display: flex;
-  flex-direction: column;
-  gap: 100px;
-  width: fit-content;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
+  display: none;
+
+  @media (--breakpoint-desktop) {
+    display: flex;
+    flex-direction: column;
+    gap: 100px;
+    width: fit-content;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.city-view__card-selector {
+  @media (--breakpoint-desktop) {
+    display: none;
+  }
 }
 </style>
diff --git a/src/views/EnergyGridView.vue b/src/views/EnergyGridView.vue
@@ -2,6 +2,7 @@
 import AppCard from '@/components/AppCard.vue';
 import { energyGridCards, energyGridGraph } from '@/constants/energy-grid-page';
 import AppFlowChart from '@/components/AppFlowChart.vue';
+import AppCardSelector from '@/components/AppCardSelector.vue';
 </script>
 
 <template>
@@ -18,6 +19,7 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
     <AppFlowChart
       :nodes="energyGridGraph.nodes"
       :edges="energyGridGraph.edges"
+      class="energy-grid-view__flow-chart"
     />
     <section class="card-section">
       <AppCard
@@ -28,6 +30,10 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
         :cube-variant="card.type"
       />
     </section>
+    <AppCardSelector
+      class="energy-grid-view__card-selector"
+      :cards="energyGridCards"
+    />
   </div>
 </template>
 
@@ -38,15 +44,35 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
   height: 100%;
   align-items: center;
   justify-content: space-between;
+  flex-direction: column;
+
+  @media (--breakpoint-desktop) {
+    flex-direction: row;
+    gap: 20px;
+  }
+}
+
+.energy-grid-view__flow-chart {
+  min-height: 400px;
 }
 
 .card-section {
-  display: flex;
-  flex-direction: column;
-  gap: 100px;
-  width: fit-content;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
+  display: none;
+
+  @media (--breakpoint-desktop) {
+    display: flex;
+    flex-direction: column;
+    gap: 100px;
+    width: fit-content;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.energy-grid-view__card-selector {
+  @media (--breakpoint-desktop) {
+    display: block;
+  }
 }
 </style>
diff --git a/src/views/HealthView.vue b/src/views/HealthView.vue
@@ -2,6 +2,7 @@
 import AppCard from '@/components/AppCard.vue';
 import { healthCards, healthGraph } from '@/constants/health-page';
 import AppFlowChart from '@/components/AppFlowChart.vue';
+import AppCardSelector from '@/components/AppCardSelector.vue';
 </script>
 
 <template>
@@ -18,6 +19,7 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
     <AppFlowChart
       :nodes="healthGraph.nodes"
       :edges="healthGraph.edges"
+      class="health-view__flow-chart"
     />
     <section class="card-section">
       <AppCard
@@ -28,25 +30,49 @@ import AppFlowChart from '@/components/AppFlowChart.vue';
         :cube-variant="card.type"
       />
     </section>
+    <AppCardSelector
+      class="health-view__card-selector"
+      :cards="healthCards"
+    />
   </div>
 </template>
 
 <style scoped>
 .health-view {
   display: flex;
-  gap: 20px;
+  gap: 40px;
   height: 100%;
   align-items: center;
   justify-content: space-between;
+  flex-direction: column;
+
+  @media (--breakpoint-desktop) {
+    flex-direction: row;
+    gap: 20px;
+  }
+}
+
+.health-view__flow-chart {
+  min-height: 400px;
 }
 
 .card-section {
-  display: flex;
-  flex-direction: column;
-  gap: 100px;
-  width: fit-content;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
+  display: none;
+
+  @media (--breakpoint-desktop) {
+    display: flex;
+    flex-direction: column;
+    gap: 100px;
+    width: fit-content;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.health-view__card-selector {
+  @media (--breakpoint-desktop) {
+    display: none;
+  }
 }
 </style>
diff --git a/src/views/home-view/HomeViewDesktop.vue b/src/views/home-view/HomeViewDesktop.vue
@@ -89,6 +89,7 @@ const { industry, energyGrid, city, agriculture, health } = customerCards;
   }
 
   @media (--breakpoint-desktop) {
+    gap: 1rem;
     flex-direction: row;
   }
 }
-Original file line number
+Diff line change
@@ Expand Up @@
       }
       @media (--breakpoint-desktop) {
+        gap: 1rem;
         flex-direction: row;
       }
     }
@@ Expand Down @@