Merge pull request #22 from CUAHSI:layout

Improve mdAndDown breakpoints
CUAHSI · Sep 3, 2024 · 7c8bead · 7c8bead
2 parents 3a52816 + c4c5d50
commit 7c8bead
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 25 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -13,7 +13,7 @@
       <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
       <SnackBar />
       <TheBottomSheet />
-      <TheFooter />
+      <TheFooter v-if="!mdAndDown" />
     </v-main>
   </v-app>
 </template>
@@ -28,6 +28,9 @@ import TheFooter from './components/TheFooter.vue'
 import { ref } from 'vue'
 import { useAlertStore } from './stores/alerts'
 import TheBottomSheet from "@/components/TheBottomSheet.vue";
+import { useDisplay } from 'vuetify'
+
+const { mdAndDown } = useDisplay()
 
 const alertStore = useAlertStore()
 

diff --git a/frontend/src/components/TheFooter.vue b/frontend/src/components/TheFooter.vue
@@ -5,14 +5,12 @@
         {{ new Date().getFullYear() }} — <strong>hydroprocess_db</strong>
       </div>
       <v-spacer></v-spacer>
-      <a href="https://cuahsi.org" class="logo" target="_blank">
-        <v-card height="10vh">
-          <v-card-text>
-            <div class="text-body-1">Powered by</div>
-            <v-img :src="imgUrl" cover width="8rem"></v-img>
-          </v-card-text>
-        </v-card>
-      </a>
+      <v-card href="https://cuahsi.org" class="mx-auto" rel="noopener" target="_blank" subtitle="Powered by" min-width="
+        16rem">
+        <template v-slot:append>
+          <v-img :src="imgUrl" cover width="8rem"></v-img>
+        </template>
+      </v-card>
     </div>
   </v-footer>
 </template>
@@ -24,11 +22,11 @@ import imgUrl from '@/assets/logo.png'
 
 <style lang="scss" scoped>
 .logo {
-  height: 10%;
+  height: 10vh;
   cursor: pointer;
 
   img {
-    height: 10%;
+    height: 10vh;
   }
 }
 </style>
diff --git a/frontend/src/components/TheLeafletMap.vue b/frontend/src/components/TheLeafletMap.vue
@@ -97,6 +97,6 @@ async function mapClick() {
 <style scoped>
 #mapContainer {
     width: 100%;
-    height: 80vh;
+    height: 100%;
 }
 </style>
diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
@@ -1,26 +1,39 @@
 <template>
-    <v-btn @click="toggleFilterDrawer" color="secondary" location="left" style="z-index: 9999"
-        :style="{ transform: translateFilter(), position: 'absolute' }"
-        :icon="showFilterDrawer ? mdiChevronLeft : mdiChevronRight" size="x-small">
-    </v-btn>
-    <v-btn @click="toggleDataDrawer" color="secondary" location="right" style="z-index: 9999"
-        :style="{ transform: translateData(), position: 'absolute' }"
-        :icon="showDataDrawer ? mdiChevronRight : mdiChevronLeft" size="x-small">
-    </v-btn>
     <v-overlay :model-value="!mapStore.mapLoaded" class="align-center justify-center">
         <v-progress-circular indeterminate :size="128"></v-progress-circular>
     </v-overlay>
-    <v-container fluid>
-        <v-row fill-height>
-            <v-col v-if="showFilterDrawer" :cols="mdAndDown ? 12 : 3" :order="mdAndDown ? '' : 'first'">
+    <v-container v-if="!mdAndDown" fluid>
+        <v-row fill-height style="height: 87vh">
+            <v-btn @click="toggleFilterDrawer" color="secondary" location="left" style="z-index: 9999"
+                :style="{ transform: translateFilter(), position: 'absolute' }"
+                :icon="showFilterDrawer ? mdiChevronLeft : mdiChevronRight" size="x-small">
+            </v-btn>
+            <v-btn @click="toggleDataDrawer" color="secondary" location="right" style="z-index: 9999"
+                :style="{ transform: translateData(), position: 'absolute' }"
+                :icon="showDataDrawer ? mdiChevronRight : mdiChevronLeft" size="x-small">
+            </v-btn>
+            <v-col v-if="showFilterDrawer" :cols="3">
                 <FilterDrawer />
             </v-col>
             <v-divider vertical></v-divider>
-            <v-col :cols="mdAndDown ? 12 : getCols" :order="mdAndDown ? 'first' : ''">
+            <v-col :cols="getCols">
                 <TheLeafletMap />
             </v-col>
             <v-divider vertical></v-divider>
-            <v-col v-if="showDataDrawer" :cols="mdAndDown ? 12 : 2" order="last">
+            <v-col v-if="showDataDrawer" cols="2">
+                <DataViewDrawer />
+            </v-col>
+        </v-row>
+    </v-container>
+    <v-container v-else>
+        <v-row style="height: 40vh">
+            <TheLeafletMap />
+        </v-row>
+        <v-row style="height: 50vh">
+            <v-col>
+                <FilterDrawer />
+            </v-col>
+            <v-col>
                 <DataViewDrawer />
             </v-col>
         </v-row>