feat: adjust metrics page layout

comses · Dec 12, 2024 · f754b12 · f754b12
1 parent fb6a435
commit f754b12
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/frontend/src/components/MetricsSelector.vue b/frontend/src/components/MetricsSelector.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="card">
+    <div class="card-body bg-light py-2 text-gray">
+      <b> Select a metric to view </b>
+    </div>
     <ul class="list-group list-group-flush">
       <!-- Members -->
       <li class="list-group-item">

diff --git a/frontend/src/components/MetricsView.vue b/frontend/src/components/MetricsView.vue
@@ -1,6 +1,13 @@
 <template>
-  <div class="row">
-    <div class="col-sm-12 col-md-3" style="padding-top: 2.5rem">
+  <div class="row my-5">
+    <div class="col">
+      <div class="card">
+        <UserMapView :metrics-data="metricsData" />
+      </div>
+    </div>
+  </div>
+  <div class="row my-5">
+    <div class="col-sm-12 col-md-3">
       <MetricsSelector v-model="selectedChart" />
     </div>
     <div class="col-sm-12 col-md-9">
@@ -32,9 +39,6 @@
       </div>
     </div>
   </div>
-  <div>
-    <UserMapView :metrics-data="metricsData" />
-  </div>
 </template>
 
 <script setup lang="ts">