From 76fa863bbe8c99b6e2bf0e72e485e45b0035c341 Mon Sep 17 00:00:00 2001
From: mwbernard <mwbernard9@gmail.com>
Date: Tue, 28 Nov 2023 23:27:53 -0800
Subject: [PATCH 1/6] Add mobile for first two pages

---
 vacs-map-app/src/LandingPage.vue              |  2 +
 vacs-map-app/src/assets/base.css              |  1 +
 vacs-map-app/src/assets/img/show-filters.svg  |  6 ++
 vacs-map-app/src/assets/main.css              |  6 ++
 vacs-map-app/src/components/ContentModal.vue  |  9 +++
 vacs-map-app/src/components/CropFilters.vue   | 76 ++++++++++++++++++-
 vacs-map-app/src/components/OverviewTop.vue   |  9 ++-
 vacs-map-app/src/components/RadioList.vue     |  1 -
 vacs-map-app/src/components/RadioSwitch.vue   |  6 ++
 .../src/components/pages/CropTypeOverview.vue | 44 ++++++++++-
 10 files changed, 156 insertions(+), 4 deletions(-)
 create mode 100644 vacs-map-app/src/assets/img/show-filters.svg

diff --git a/vacs-map-app/src/LandingPage.vue b/vacs-map-app/src/LandingPage.vue
index e0673e0..5772246 100644
--- a/vacs-map-app/src/LandingPage.vue
+++ b/vacs-map-app/src/LandingPage.vue
@@ -185,6 +185,8 @@ button:hover {
 
   .callout {
     padding: 1rem;
+    max-width: 90%;
+    width: 95%;
   }
 
   .callout-header {
diff --git a/vacs-map-app/src/assets/base.css b/vacs-map-app/src/assets/base.css
index 1703cff..dc5635e 100644
--- a/vacs-map-app/src/assets/base.css
+++ b/vacs-map-app/src/assets/base.css
@@ -4,6 +4,7 @@
   --black: #17191b;
   --black-90: rgba(25, 27, 30, 0.9);
   --black-80: rgba(25, 27, 30, 0.8);
+  --black-70: rgba(25, 27, 30, 0.7);
   --white: #e1dcd5;
   --white-hover: #a8a39c;
   --white-80: rgba(225, 220, 213, 0.8);
diff --git a/vacs-map-app/src/assets/img/show-filters.svg b/vacs-map-app/src/assets/img/show-filters.svg
new file mode 100644
index 0000000..a1eee08
--- /dev/null
+++ b/vacs-map-app/src/assets/img/show-filters.svg
@@ -0,0 +1,6 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="36" height="36" rx="18" fill="#8CA4CB"/>
+<circle cx="18" cy="11.2998" r="2.5" transform="rotate(90 18 11.2998)" fill="#17191B"/>
+<circle cx="18" cy="18" r="2.5" transform="rotate(90 18 18)" fill="#17191B"/>
+<circle cx="18" cy="24.7002" r="2.5" transform="rotate(90 18 24.7002)" fill="#17191B"/>
+</svg>
diff --git a/vacs-map-app/src/assets/main.css b/vacs-map-app/src/assets/main.css
index a0e6670..ffbd12b 100644
--- a/vacs-map-app/src/assets/main.css
+++ b/vacs-map-app/src/assets/main.css
@@ -11,3 +11,9 @@
 
   --page-horizontal-margin: 3.5rem;
 }
+
+@media only screen and (max-width: 720px) {
+  #app{
+    --page-horizontal-margin: 1rem;
+  }
+}
diff --git a/vacs-map-app/src/components/ContentModal.vue b/vacs-map-app/src/components/ContentModal.vue
index d4f17ec..2545a74 100644
--- a/vacs-map-app/src/components/ContentModal.vue
+++ b/vacs-map-app/src/components/ContentModal.vue
@@ -61,6 +61,7 @@ onClickOutside(contentInnerRef, () => emit('close'))
   border-radius: 4px;
   overflow-y: auto;
   max-width: 50%;
+  max-height: 70%;
   padding: 2.5rem;
 }
 
@@ -76,4 +77,12 @@ onClickOutside(contentInnerRef, () => emit('close'))
   cursor: pointer;
   height: 20px;
 }
+
+
+@media only screen and (max-width: 720px) {
+  .content-modal-inner {
+    max-width: 95%;
+  }  
+}
+
 </style>
diff --git a/vacs-map-app/src/components/CropFilters.vue b/vacs-map-app/src/components/CropFilters.vue
index eff2624..733aa63 100644
--- a/vacs-map-app/src/components/CropFilters.vue
+++ b/vacs-map-app/src/components/CropFilters.vue
@@ -1,8 +1,15 @@
 <template>
   <div class="crop-filters">
+    <div class="filters-header mobile">
+      <span class="header"> Filter crops </span>
+      <img src="@/assets/img/close.svg" alt="" @click="$emit('closeFilters')">
+    </div>
+    
     <div class="left-side">
+      <span class="mobile category-header"> climate scenario </span>
       <RadioSwitch v-model="selectedModel" :options="scenarioOptions" name="selected-scenario" />
 
+      <span class="mobile category-header"> food groups </span>
       <div class="crop-groups">
         <div
           class="crop-group-label"
@@ -27,6 +34,7 @@
       </div>
     </div>
 
+    <span class="mobile category-header"> order by </span>
     <div class="sort-by">
       <RadioList v-model="cropSortOrder" :options="sortOrderOptions" name="sort-order" />
 
@@ -40,7 +48,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useFiltersStore } from '@/stores/filters'
 import { useContentStore } from '@/stores/siteContent'
@@ -50,6 +58,7 @@ import RadioSwitch from '@/components/RadioSwitch.vue'
 const contentStore = useContentStore()
 const { copy } = storeToRefs(contentStore)
 
+defineEmits(['closeFilters'])
 const filtersStore = useFiltersStore()
 const {
   availableModels,
@@ -159,4 +168,69 @@ const scenarioOptions = computed(() => {
 .sort-by select:hover {
   color: var(--ui-blue-hover);
 }
+
+.mobile {
+  display: none;
+}
+
+
+
+@media only screen and (max-width: 720px) {
+  .mobile {
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  .filters-header {
+    width: 100%;
+    display: flex;
+  }
+
+  .filters-header img {
+    margin-left: auto;
+    margin-right: 1rem;
+    width: 1rem;
+    cursor: pointer;
+  }
+
+  .header {
+    font-family: var(--font-family-h2);
+    font-size: 1.25rem;
+  }
+
+  .category-header {
+    text-transform: uppercase;
+    font-size: 0.875rem;
+  }
+  .crop-filters {
+    z-index: 500;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    padding: 2rem var(--page-horizontal-margin);
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: flex-start;
+    background: var(--black);
+    border-radius: 1.875rem 1.875rem 0rem 0rem;
+  }
+
+  .left-side {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .crop-groups {
+    gap: 0.5rem;
+  }
+
+  .sort-by {
+    width: 100%;
+    margin: 0;
+    flex-direction: column-reverse;
+    gap: 0.5rem;
+  }
+}
 </style>
diff --git a/vacs-map-app/src/components/OverviewTop.vue b/vacs-map-app/src/components/OverviewTop.vue
index 82fc439..88de311 100644
--- a/vacs-map-app/src/components/OverviewTop.vue
+++ b/vacs-map-app/src/components/OverviewTop.vue
@@ -6,7 +6,7 @@
         <button @click="copyLink" title="Copy URL">
           <img src="@/assets/img/copy-link.svg" alt="copy-link" />
         </button>
-        <NavigationButton :to="backRoute">Back</NavigationButton>
+        <NavigationButton :to="backRoute" class="back-button">Back</NavigationButton>
       </div>
     </div>
   </div>
@@ -75,4 +75,11 @@ button {
 button:hover {
   background: var(--dark-gray-hover);
 }
+
+
+@media only screen and (max-width: 720px) {
+  .overview-top {
+    font-size: 1rem;
+  }
+}
 </style>
diff --git a/vacs-map-app/src/components/RadioList.vue b/vacs-map-app/src/components/RadioList.vue
index c77df19..a192642 100644
--- a/vacs-map-app/src/components/RadioList.vue
+++ b/vacs-map-app/src/components/RadioList.vue
@@ -51,7 +51,6 @@ const { name, options, modelValue } = toRefs(props)
   padding: 0.25rem 0;
 }
 .option-wrapper {
-  width: 100%;
   display: flex;
 }
 
diff --git a/vacs-map-app/src/components/RadioSwitch.vue b/vacs-map-app/src/components/RadioSwitch.vue
index cd588a2..51bc038 100644
--- a/vacs-map-app/src/components/RadioSwitch.vue
+++ b/vacs-map-app/src/components/RadioSwitch.vue
@@ -85,4 +85,10 @@ label.selected:hover {
 input {
   display: none;
 }
+
+@media only screen and (max-width: 720px) {
+  .switch {
+    width: 100%;
+  }  
+}
 </style>
diff --git a/vacs-map-app/src/components/pages/CropTypeOverview.vue b/vacs-map-app/src/components/pages/CropTypeOverview.vue
index 9a092b4..194d1b7 100644
--- a/vacs-map-app/src/components/pages/CropTypeOverview.vue
+++ b/vacs-map-app/src/components/pages/CropTypeOverview.vue
@@ -1,16 +1,29 @@
 <template>
   <LayoutOverview>
     <div class="wrapper">
-      <CropFilters />
+      <CropFilters class="desktop"/>
       <CropCards />
+      <div class="overlay mobile" :class=" { showFilters }"/>
     </div>
+    <CropFilters 
+        v-if="showFilters" 
+        class="mobile"  
+        @close-filters="() => (showFilters = false)"
+      />
+      <div class="mobile show-filters" @click="() => showFilters = true">
+        <img src="@/assets/img/show-filters.svg" alt="">
+      </div>
   </LayoutOverview>
 </template>
 
 <script setup>
+import { ref } from 'vue';
 import LayoutOverview from '@/components/layouts/LayoutOverview.vue'
 import CropCards from '@/components/CropCards.vue'
 import CropFilters from '@/components/CropFilters.vue'
+
+const showFilters = ref(false);
+
 </script>
 
 <style scoped>
@@ -21,4 +34,33 @@ import CropFilters from '@/components/CropFilters.vue'
   gap: 1rem;
   height: 100%;
 }
+
+.mobile {
+  display: none;
+}
+
+@media only screen and (max-width: 720px) {
+
+  .desktop {
+    display: none;
+  }
+  .mobile {
+    display: flex;
+  }
+
+  .show-filters {
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    cursor: pointer;
+  }
+
+  .overlay.showFilters {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    background: var(--black-70);
+  }
+}
 </style>

From 549647e508ba072c439ab5e4fcdc764eff9249dc Mon Sep 17 00:00:00 2001
From: mwbernard <mwbernard9@gmail.com>
Date: Wed, 29 Nov 2023 00:03:53 -0800
Subject: [PATCH 2/6] Add mobile for explorer page

---
 vacs-map-app/src/MapExplorer.vue              |  17 ++-
 .../components/MobileExploreMapControls.vue   | 115 ++++++++++++++++++
 vacs-map-app/src/components/RadioSwitch.vue   |   1 +
 3 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 vacs-map-app/src/components/MobileExploreMapControls.vue

diff --git a/vacs-map-app/src/MapExplorer.vue b/vacs-map-app/src/MapExplorer.vue
index 880d0cc..260c0b3 100644
--- a/vacs-map-app/src/MapExplorer.vue
+++ b/vacs-map-app/src/MapExplorer.vue
@@ -7,7 +7,7 @@
             <RegionPicker :map="map" :map-ready="mapReady" />
           </template>
         </component>
-        <div class="map-overlay">
+        <div class="map-overlay desktop">
           <div class="overlay-left" ref="overlayLeftRef">
             <ExploreSidebar class="interactive" />
           </div>
@@ -18,6 +18,7 @@
             <span class="layer-selector-message"> Add layer </span>
           </div>
         </div>
+        <MobileExploreMapControls />
       </div>
     </div>
   </LayoutOverview>
@@ -41,6 +42,7 @@ import { useMapExploreStore } from '@/stores/mapExplore'
 import LayoutOverview from './components/layouts/LayoutOverview.vue'
 import ExploreSidebar from './components/ExploreSidebar.vue'
 import RegionPicker from './components/RegionPicker.vue'
+import MobileExploreMapControls from './components/MobileExploreMapControls.vue'
 
 const availableMaps = [
   // {
@@ -210,6 +212,12 @@ select:hover {
 select:hover + .layer-selector-message {
   opacity: 1;
 }
+
+@media only screen and (max-width: 720px) {
+  .desktop {
+    display: none;
+  }
+}
 </style>
 
 <style>
@@ -222,4 +230,11 @@ select:hover + .layer-selector-message {
   height: 12rem;
   padding: 1.5rem;
 }
+
+
+@media only screen and (max-width: 720px) {
+  .region-picker {
+    display: none;
+  }
+}
 </style>
diff --git a/vacs-map-app/src/components/MobileExploreMapControls.vue b/vacs-map-app/src/components/MobileExploreMapControls.vue
new file mode 100644
index 0000000..a126ae4
--- /dev/null
+++ b/vacs-map-app/src/components/MobileExploreMapControls.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="wrapper">
+    <div class="top-row">
+      <div class="row-item">
+        <span class="item-label"> Crop </span>
+        <select v-model="selectedCrop" class="crop-picker">
+          <optgroup v-for="group in availableCropGroups" :key="group" :label="group">
+            <option v-for="crop in getCropsByGroup(group)" :key="crop.id" :value="crop.id">
+              {{ crop.label }}
+            </option>
+          </optgroup>
+        </select>
+      </div>
+      
+      <div class="row-item">
+        <span class="item-label"> Emissions </span>
+        <RadioSwitch v-model="selectedModel" :options="scenarioOptions" name="selected-scenario"/>
+      </div>
+    </div>
+
+    <!-- TODO: add map color legend -->
+  </div>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import { computed } from 'vue';
+import { useFiltersStore } from '@/stores/filters'
+import { useCropInformationStore } from '@/stores/cropInformation'
+import RadioSwitch from '@/components/RadioSwitch.vue';
+
+const cropInformationStore = useCropInformationStore()
+const filtersStore = useFiltersStore()
+const {
+  selectedCrop,
+  availableModels,
+  selectedModel,
+  availableCropGroups
+} = storeToRefs (filtersStore)
+const { data: cropInformation } = storeToRefs(cropInformationStore)
+
+const getCropsByGroup = (group) => {
+  return cropInformation?.value?.filter((crop) => crop.crop_group === group)
+}
+
+const futureScenarios = computed(() => {
+  return availableModels?.value?.filter((d) => d.startsWith('future'))
+})
+
+const scenarioOptions = computed(() => {
+  return futureScenarios?.value?.map((s, i) => {
+    return {
+      value: s,
+      label: i ? 'High' : 'Low'
+    }
+  })
+})
+</script>
+
+<style scoped>
+
+.wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  flex-direction: column;
+  padding: 0 1rem;
+  width: 100%;
+}
+
+.top-row {
+  display: flex;
+  width: 100%;
+  gap: 1rem;
+}
+
+.row-item {
+  flex-grow: 1;
+  gap: 0.25rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.item-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+
+select {
+  font-family: var(--font-family-header);
+  font-size: 0.75rem;
+  appearance: none;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  border: 1px solid var(--gray);
+  background: var(--dark-gray);
+  text-transform: uppercase;
+  color: var(--ui-blue);
+  padding: 0.5rem;
+  padding-right: 2rem;
+
+  background-image: url('../assets/img/select-arrow-blue.svg');
+  background-position: 95% center;
+  background-repeat: no-repeat;
+}
+
+@media only screen and (max-width: 720px) {
+  .wrapper {
+    display: flex;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/vacs-map-app/src/components/RadioSwitch.vue b/vacs-map-app/src/components/RadioSwitch.vue
index 51bc038..7c0d4d8 100644
--- a/vacs-map-app/src/components/RadioSwitch.vue
+++ b/vacs-map-app/src/components/RadioSwitch.vue
@@ -50,6 +50,7 @@ const { name, options, modelValue } = toRefs(props)
   justify-content: space-between;
   border: 1px solid var(--gray);
   border-radius: 100px;
+  background: var(--dark-gray);
 }
 
 label {

From b9513c41c74e5b80e1c616bd59b5abfacfc1c9ac Mon Sep 17 00:00:00 2001
From: mwbernard <mwbernard9@gmail.com>
Date: Wed, 29 Nov 2023 00:12:52 -0800
Subject: [PATCH 3/6] Update back button for mobile

---
 vacs-map-app/src/assets/img/back-arrow.svg      |  3 +++
 .../src/components/NavigationButton.vue         |  9 ++++++++-
 vacs-map-app/src/components/OverviewTop.vue     | 17 ++++++++++++++++-
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 vacs-map-app/src/assets/img/back-arrow.svg

diff --git a/vacs-map-app/src/assets/img/back-arrow.svg b/vacs-map-app/src/assets/img/back-arrow.svg
new file mode 100644
index 0000000..3e735da
--- /dev/null
+++ b/vacs-map-app/src/assets/img/back-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 14" d="M6.77778 1L0.999999 7M0.999999 7L6.77778 13M0.999999 7L13 7" stroke="#17191B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/vacs-map-app/src/components/NavigationButton.vue b/vacs-map-app/src/components/NavigationButton.vue
index 5e6b7fb..0080426 100644
--- a/vacs-map-app/src/components/NavigationButton.vue
+++ b/vacs-map-app/src/components/NavigationButton.vue
@@ -19,7 +19,7 @@ const props = defineProps({
   color: var(--white);
   background: var(--dark-gray);
   font-size: 1rem;
-  padding: 0.5rem;
+  padding: 0.625rem 0.75rem;
   text-decoration: none;
   display: flex;
 }
@@ -27,4 +27,11 @@ const props = defineProps({
 .navigation-button:hover {
   background: var(--dark-gray-hover);
 }
+
+@media only screen and (max-width: 720px) {
+  .navigation-button {
+    background: var(--ui-blue);
+    aspect-ratio: 1/1;
+  }  
+}
 </style>
diff --git a/vacs-map-app/src/components/OverviewTop.vue b/vacs-map-app/src/components/OverviewTop.vue
index 88de311..8f0f9f1 100644
--- a/vacs-map-app/src/components/OverviewTop.vue
+++ b/vacs-map-app/src/components/OverviewTop.vue
@@ -6,7 +6,10 @@
         <button @click="copyLink" title="Copy URL">
           <img src="@/assets/img/copy-link.svg" alt="copy-link" />
         </button>
-        <NavigationButton :to="backRoute" class="back-button">Back</NavigationButton>
+        <NavigationButton :to="backRoute" class="desktop">Back</NavigationButton>
+        <NavigationButton :to="backRoute" class="mobile">
+          <img src="@/assets/img/back-arrow.svg" alt="">
+        </NavigationButton>
       </div>
     </div>
   </div>
@@ -76,8 +79,20 @@ button:hover {
   background: var(--dark-gray-hover);
 }
 
+.mobile {
+  display: none;
+}
+
 
 @media only screen and (max-width: 720px) {
+
+  .desktop {
+    display: none;
+  }
+
+  .mobile {
+    display: flex;
+  }
   .overview-top {
     font-size: 1rem;
   }

From 46d9dbd4e146568603c6d86d48ccbe81934c8f5b Mon Sep 17 00:00:00 2001
From: mwbernard <mwbernard9@gmail.com>
Date: Wed, 29 Nov 2023 00:13:15 -0800
Subject: [PATCH 4/6] Prettier

---
 vacs-map-app/src/LandingPage.vue              |  2 +-
 vacs-map-app/src/MapExplorer.vue              |  1 -
 vacs-map-app/src/assets/main.css              |  2 +-
 vacs-map-app/src/components/ContentModal.vue  |  4 +-
 vacs-map-app/src/components/CropFilters.vue   |  6 +-
 .../src/components/DistributionPlot.vue       |  2 +-
 vacs-map-app/src/components/GridOverlay.vue   | 72 ++++++++-----------
 .../components/MobileExploreMapControls.vue   | 21 ++----
 .../src/components/NavigationButton.vue       |  2 +-
 vacs-map-app/src/components/OverviewTop.vue   |  4 +-
 vacs-map-app/src/components/RadioSwitch.vue   |  2 +-
 .../src/components/pages/CropTypeOverview.vue | 22 +++---
 vacs-map-app/src/stores/mapExplore.js         |  2 +-
 13 files changed, 56 insertions(+), 86 deletions(-)

diff --git a/vacs-map-app/src/LandingPage.vue b/vacs-map-app/src/LandingPage.vue
index 5772246..628ca57 100644
--- a/vacs-map-app/src/LandingPage.vue
+++ b/vacs-map-app/src/LandingPage.vue
@@ -2,7 +2,7 @@
   <LayoutOpen>
     <div class="video-wrapper">
       <video autoplay loop muted>
-        <source src="@/assets/img/homepage-video.mp4" type="video/mp4">
+        <source src="@/assets/img/homepage-video.mp4" type="video/mp4" />
       </video>
     </div>
 
diff --git a/vacs-map-app/src/MapExplorer.vue b/vacs-map-app/src/MapExplorer.vue
index 260c0b3..f423dec 100644
--- a/vacs-map-app/src/MapExplorer.vue
+++ b/vacs-map-app/src/MapExplorer.vue
@@ -231,7 +231,6 @@ select:hover + .layer-selector-message {
   padding: 1.5rem;
 }
 
-
 @media only screen and (max-width: 720px) {
   .region-picker {
     display: none;
diff --git a/vacs-map-app/src/assets/main.css b/vacs-map-app/src/assets/main.css
index ffbd12b..e70fd4d 100644
--- a/vacs-map-app/src/assets/main.css
+++ b/vacs-map-app/src/assets/main.css
@@ -13,7 +13,7 @@
 }
 
 @media only screen and (max-width: 720px) {
-  #app{
+  #app {
     --page-horizontal-margin: 1rem;
   }
 }
diff --git a/vacs-map-app/src/components/ContentModal.vue b/vacs-map-app/src/components/ContentModal.vue
index 2545a74..2edf24d 100644
--- a/vacs-map-app/src/components/ContentModal.vue
+++ b/vacs-map-app/src/components/ContentModal.vue
@@ -78,11 +78,9 @@ onClickOutside(contentInnerRef, () => emit('close'))
   height: 20px;
 }
 
-
 @media only screen and (max-width: 720px) {
   .content-modal-inner {
     max-width: 95%;
-  }  
+  }
 }
-
 </style>
diff --git a/vacs-map-app/src/components/CropFilters.vue b/vacs-map-app/src/components/CropFilters.vue
index 733aa63..5195b20 100644
--- a/vacs-map-app/src/components/CropFilters.vue
+++ b/vacs-map-app/src/components/CropFilters.vue
@@ -2,9 +2,9 @@
   <div class="crop-filters">
     <div class="filters-header mobile">
       <span class="header"> Filter crops </span>
-      <img src="@/assets/img/close.svg" alt="" @click="$emit('closeFilters')">
+      <img src="@/assets/img/close.svg" alt="" @click="$emit('closeFilters')" />
     </div>
-    
+
     <div class="left-side">
       <span class="mobile category-header"> climate scenario </span>
       <RadioSwitch v-model="selectedModel" :options="scenarioOptions" name="selected-scenario" />
@@ -173,8 +173,6 @@ const scenarioOptions = computed(() => {
   display: none;
 }
 
-
-
 @media only screen and (max-width: 720px) {
   .mobile {
     display: flex;
diff --git a/vacs-map-app/src/components/DistributionPlot.vue b/vacs-map-app/src/components/DistributionPlot.vue
index 651c044..466c25f 100644
--- a/vacs-map-app/src/components/DistributionPlot.vue
+++ b/vacs-map-app/src/components/DistributionPlot.vue
@@ -156,7 +156,7 @@ const draw = () => {
 
   //draw hovered
   if (hoveredId.value) {
-    const cell = gridCells?.value.find(d => d.id === hoveredId.value);
+    const cell = gridCells?.value.find((d) => d.id === hoveredId.value)
     context.value.fillStyle = 'white'
     context.value.fillRect(cell.x, 0, 3, height.value)
   }
diff --git a/vacs-map-app/src/components/GridOverlay.vue b/vacs-map-app/src/components/GridOverlay.vue
index ad34278..cb0e072 100644
--- a/vacs-map-app/src/components/GridOverlay.vue
+++ b/vacs-map-app/src/components/GridOverlay.vue
@@ -4,8 +4,8 @@
 import * as d3 from 'd3'
 import { computed, toRefs, watch } from 'vue'
 import { divergingScheme } from '@/utils/colors'
-import { storeToRefs } from 'pinia';
-import { useMapExploreStore } from '../stores/mapExplore';
+import { storeToRefs } from 'pinia'
+import { useMapExploreStore } from '../stores/mapExplore'
 
 const props = defineProps({
   id: {
@@ -84,8 +84,8 @@ const {
   stroke
 } = toRefs(props)
 
-const mapExploreStore = useMapExploreStore();
-const { hoveredId } = storeToRefs(mapExploreStore);
+const mapExploreStore = useMapExploreStore()
+const { hoveredId } = storeToRefs(mapExploreStore)
 
 const addLayer = () => {
   if (!map.value || !mapReady.value || map.value.getLayer(id.value)) return
@@ -99,19 +99,9 @@ const addLayer = () => {
         'circle-stroke-width': fill.value ? 0.2 : 1.5,
         'circle-stroke-color': getCircleStrokeColor(),
         'circle-stroke-opacity': fill.value ? 0 : 0.8,
-        'circle-opacity': [
-          'case',
-          ['boolean', ['feature-state', 'hovered'], false],
-          0.5,
-          1
-        ],
+        'circle-opacity': ['case', ['boolean', ['feature-state', 'hovered'], false], 0.5, 1],
         'circle-color': getCircleFillColor(),
-        'circle-blur': [
-          'case',
-          ['boolean', ['feature-state', 'hovered'], false],
-          0,
-          0.5
-        ],
+        'circle-blur': ['case', ['boolean', ['feature-state', 'hovered'], false], 0, 0.5]
       }
     },
     'settlement-subdivision-label'
@@ -122,23 +112,23 @@ const addLayer = () => {
 
 const addHoverListeners = () => {
   if (!map.value || !mapReady.value || !map.value.getLayer(id.value)) return
-  
+
   map.value.on('mousemove', id.value, (event) => {
-    if (!event?.features?.length) return;
-    const feature = event?.features[0];
+    if (!event?.features?.length) return
+    const feature = event?.features[0]
     if (feature?.id) {
-      if (!feature.properties[colorColumn.value]) return;
-      hoveredId.value = feature.properties.id;
+      if (!feature.properties[colorColumn.value]) return
+      hoveredId.value = feature.properties.id
     }
-  });
+  })
 
   map.value.on('mouseleave', id.value, (event) => {
-    hoveredId.value = null;
-  });
+    hoveredId.value = null
+  })
 }
 
 const updateHoveredFeatureState = (elementId, hovered) => {
-  if (!id) return;
+  if (!id) return
   map.value.setFeatureState(
     {
       source: sourceId.value,
@@ -147,7 +137,7 @@ const updateHoveredFeatureState = (elementId, hovered) => {
     {
       hovered
     }
-  );
+  )
 }
 
 const getCircleColorQuintiles = (quintiles) => {
@@ -266,22 +256,22 @@ const getCircleColorDiverging = (extent, center) => {
   return [
     'case',
     ['!=', ['get', colorColumn.value], null],
+    [
+      'case',
+      ['boolean', ['feature-state', 'hovered'], false],
+      'white',
       [
-        'case',
-        ['boolean', ['feature-state', 'hovered'], false],
-        'white',
-        [
-          'interpolate',
-          ['linear'],
-          ['get', colorColumn.value],
-          min,
-          getColor(0),
-          center,
-          divergingScheme.center,
-          max,
-          getColor(1)
-        ],
-      ],
+        'interpolate',
+        ['linear'],
+        ['get', colorColumn.value],
+        min,
+        getColor(0),
+        center,
+        divergingScheme.center,
+        max,
+        getColor(1)
+      ]
+    ],
     'transparent'
   ]
 }
diff --git a/vacs-map-app/src/components/MobileExploreMapControls.vue b/vacs-map-app/src/components/MobileExploreMapControls.vue
index a126ae4..60f7ae5 100644
--- a/vacs-map-app/src/components/MobileExploreMapControls.vue
+++ b/vacs-map-app/src/components/MobileExploreMapControls.vue
@@ -11,10 +11,10 @@
           </optgroup>
         </select>
       </div>
-      
+
       <div class="row-item">
         <span class="item-label"> Emissions </span>
-        <RadioSwitch v-model="selectedModel" :options="scenarioOptions" name="selected-scenario"/>
+        <RadioSwitch v-model="selectedModel" :options="scenarioOptions" name="selected-scenario" />
       </div>
     </div>
 
@@ -24,19 +24,15 @@
 
 <script setup>
 import { storeToRefs } from 'pinia'
-import { computed } from 'vue';
+import { computed } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { useCropInformationStore } from '@/stores/cropInformation'
-import RadioSwitch from '@/components/RadioSwitch.vue';
+import RadioSwitch from '@/components/RadioSwitch.vue'
 
 const cropInformationStore = useCropInformationStore()
 const filtersStore = useFiltersStore()
-const {
-  selectedCrop,
-  availableModels,
-  selectedModel,
-  availableCropGroups
-} = storeToRefs (filtersStore)
+const { selectedCrop, availableModels, selectedModel, availableCropGroups } =
+  storeToRefs(filtersStore)
 const { data: cropInformation } = storeToRefs(cropInformationStore)
 
 const getCropsByGroup = (group) => {
@@ -58,7 +54,6 @@ const scenarioOptions = computed(() => {
 </script>
 
 <style scoped>
-
 .wrapper {
   position: absolute;
   top: 0;
@@ -87,7 +82,6 @@ const scenarioOptions = computed(() => {
   font-weight: 500;
 }
 
-
 select {
   font-family: var(--font-family-header);
   font-size: 0.75rem;
@@ -111,5 +105,4 @@ select {
     display: flex;
   }
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/vacs-map-app/src/components/NavigationButton.vue b/vacs-map-app/src/components/NavigationButton.vue
index 0080426..40cbbb9 100644
--- a/vacs-map-app/src/components/NavigationButton.vue
+++ b/vacs-map-app/src/components/NavigationButton.vue
@@ -32,6 +32,6 @@ const props = defineProps({
   .navigation-button {
     background: var(--ui-blue);
     aspect-ratio: 1/1;
-  }  
+  }
 }
 </style>
diff --git a/vacs-map-app/src/components/OverviewTop.vue b/vacs-map-app/src/components/OverviewTop.vue
index 8f0f9f1..5be1c4b 100644
--- a/vacs-map-app/src/components/OverviewTop.vue
+++ b/vacs-map-app/src/components/OverviewTop.vue
@@ -8,7 +8,7 @@
         </button>
         <NavigationButton :to="backRoute" class="desktop">Back</NavigationButton>
         <NavigationButton :to="backRoute" class="mobile">
-          <img src="@/assets/img/back-arrow.svg" alt="">
+          <img src="@/assets/img/back-arrow.svg" alt="" />
         </NavigationButton>
       </div>
     </div>
@@ -83,9 +83,7 @@ button:hover {
   display: none;
 }
 
-
 @media only screen and (max-width: 720px) {
-
   .desktop {
     display: none;
   }
diff --git a/vacs-map-app/src/components/RadioSwitch.vue b/vacs-map-app/src/components/RadioSwitch.vue
index 7c0d4d8..01799ff 100644
--- a/vacs-map-app/src/components/RadioSwitch.vue
+++ b/vacs-map-app/src/components/RadioSwitch.vue
@@ -90,6 +90,6 @@ input {
 @media only screen and (max-width: 720px) {
   .switch {
     width: 100%;
-  }  
+  }
 }
 </style>
diff --git a/vacs-map-app/src/components/pages/CropTypeOverview.vue b/vacs-map-app/src/components/pages/CropTypeOverview.vue
index 194d1b7..eab9bf2 100644
--- a/vacs-map-app/src/components/pages/CropTypeOverview.vue
+++ b/vacs-map-app/src/components/pages/CropTypeOverview.vue
@@ -1,29 +1,24 @@
 <template>
   <LayoutOverview>
     <div class="wrapper">
-      <CropFilters class="desktop"/>
+      <CropFilters class="desktop" />
       <CropCards />
-      <div class="overlay mobile" :class=" { showFilters }"/>
+      <div class="overlay mobile" :class="{ showFilters }" />
+    </div>
+    <CropFilters v-if="showFilters" class="mobile" @close-filters="() => (showFilters = false)" />
+    <div class="mobile show-filters" @click="() => (showFilters = true)">
+      <img src="@/assets/img/show-filters.svg" alt="" />
     </div>
-    <CropFilters 
-        v-if="showFilters" 
-        class="mobile"  
-        @close-filters="() => (showFilters = false)"
-      />
-      <div class="mobile show-filters" @click="() => showFilters = true">
-        <img src="@/assets/img/show-filters.svg" alt="">
-      </div>
   </LayoutOverview>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from 'vue'
 import LayoutOverview from '@/components/layouts/LayoutOverview.vue'
 import CropCards from '@/components/CropCards.vue'
 import CropFilters from '@/components/CropFilters.vue'
 
-const showFilters = ref(false);
-
+const showFilters = ref(false)
 </script>
 
 <style scoped>
@@ -40,7 +35,6 @@ const showFilters = ref(false);
 }
 
 @media only screen and (max-width: 720px) {
-
   .desktop {
     display: none;
   }
diff --git a/vacs-map-app/src/stores/mapExplore.js b/vacs-map-app/src/stores/mapExplore.js
index 153556d..3457c49 100644
--- a/vacs-map-app/src/stores/mapExplore.js
+++ b/vacs-map-app/src/stores/mapExplore.js
@@ -5,6 +5,6 @@ export const useMapExploreStore = defineStore('mapExplore', () => {
   const selectedMap = ref('')
   const hoveredId = ref(null)
   const mapPadding = ref(null)
-  
+
   return { selectedMap, mapPadding, hoveredId }
 })

From db2f73d253b510cde420940a6d99fd72990c950e Mon Sep 17 00:00:00 2001
From: mwbernard <mwbernard9@gmail.com>
Date: Wed, 29 Nov 2023 08:03:11 -0800
Subject: [PATCH 5/6] Don't include legend in map padding

---
 vacs-map-app/src/MapExplorer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/vacs-map-app/src/MapExplorer.vue b/vacs-map-app/src/MapExplorer.vue
index 74e4abd..f4587d6 100644
--- a/vacs-map-app/src/MapExplorer.vue
+++ b/vacs-map-app/src/MapExplorer.vue
@@ -8,8 +8,8 @@
           </template>
         </component>
         <div class="map-overlay desktop">
-          <div class="overlay-left" ref="overlayLeftRef">
-            <ExploreSidebar class="interactive" />
+          <div class="overlay-left">
+            <ExploreSidebar class="interactive" ref="overlayLeftRef"/>
             <MapLegend />
           </div>
           <div class="overlay-right">

From 38704835ad8d03fc1c2ab5f1ddcd52ddfb5fdd83 Mon Sep 17 00:00:00 2001
From: mwbernard <mwbernard9@gmail.com>
Date: Wed, 29 Nov 2023 08:04:28 -0800
Subject: [PATCH 6/6] Update nav button layout

---
 vacs-map-app/src/components/NavigationButton.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/vacs-map-app/src/components/NavigationButton.vue b/vacs-map-app/src/components/NavigationButton.vue
index 40cbbb9..a7c31f7 100644
--- a/vacs-map-app/src/components/NavigationButton.vue
+++ b/vacs-map-app/src/components/NavigationButton.vue
@@ -22,6 +22,7 @@ const props = defineProps({
   padding: 0.625rem 0.75rem;
   text-decoration: none;
   display: flex;
+  justify-content: center;
 }
 
 .navigation-button:hover {