Merge pull request #32 from earthrise-media/update-layout

Update layout toward new designs

vacs-map-app/package.json

@@ -18,6 +18,7 @@
     "mapbox-gl": "^3.0.0-rc.2",
     "pinia": "^2.1.7",
     "qs": "^6.11.2",
+    "slugify": "^1.6.6",
     "vue": "^3.3.4",
     "vue-router": "^4.2.5"
   },

vacs-map-app/src/App.vue

@@ -5,7 +5,15 @@
 </template>
 
 <script setup>
+import { onMounted } from 'vue';
 import { RouterView } from 'vue-router';
+import { useCropYieldsStore } from '@/stores/cropYields';
+
+const cropYieldsStore = useCropYieldsStore();
+
+onMounted(() => {
+  cropYieldsStore.load();
+});
 </script>
 
 <style scoped>

vacs-map-app/src/LandingPage.vue

@@ -2,16 +2,11 @@
   <LayoutOpen>
     <div class="map-wrapper-row">
       <div class="callout">
+        <div class="callout-header">
+          What crops have the most potential in a changing climate?
+        </div>
         <div class="callout-content">
-          How does
-          <select v-model="topic" class="topic-picker">
-            <option
-              v-for="t in topicUrlOptions"
-              :key="t.value"
-              :value="t.value"
-            >{{ t.label }}</option>
-          </select>
-          impact decisions about food security?
+The Vision for Adapted Crops and Soils (VACS) aims to foster more resilient food systems, with an initial focus on the African continent. VACS seeks to boost agricultural productivity and nutrition by developing diverse, climate-resilient crop varieties and building healthy soils. Keep reading
         </div>
         <button class="go-to-topic" @click="navigate">
           Find out
@@ -29,11 +24,9 @@ import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import LayoutOpen from '@/components/layouts/LayoutOpen.vue';
 import MapContainerColor from '@/components/MapContainerColor.vue';
-import { topicUrlOptions } from '@/constants/topics';
 
 const router = useRouter();
-const topic = ref(topicUrlOptions[0].value);
-const navigate = () => router.push(topic.value);
+const navigate = () => router.push('/crops');
 </script>
 
 <style scoped>
@@ -56,10 +49,13 @@ const navigate = () => router.push(topic.value);
   align-items: flex-start;
   justify-content: center;
   padding: 0 5rem;
-  font-size: 3em;
   flex-basis: 0;
   flex-grow: 1;
   gap: 2rem;
+}
+
+.callout-header {
+  font-size: 3em;
   line-height: 1.25em;
 }
 

vacs-map-app/src/MapExplorer.vue

@@ -1,13 +1,17 @@
 <template>
-  <main>
-    <div class="top-bar">
-      <select v-model="selectedMap">
-        <option v-for="map in availableMaps" :value="map.id">{{ map.name }}</option>
-      </select>
-      <Filters />
+  <LayoutOverview>
+    <div class="map-wrapper-row">
+      <ExploreSidebar />
+      <div class="map-wrapper">
+        <component :is="selectedMapComponent" />
+        <div class="map-overlay">
+          <select v-model="selectedMap">
+            <option v-for="map in availableMaps" :value="map.id">{{ map.name }}</option>
+          </select>
+        </div>
+      </div>
     </div>
-    <component :is="selectedMapComponent" />
-  </main>
+  </LayoutOverview>
 </template>
 
 <script setup>
@@ -20,8 +24,10 @@ import MapContainerNotFilledTwoLayers from '@/components/MapContainerNotFilledTw
 import MapContainerColorAfricanUnion from '@/components/MapContainerColorAfricanUnion.vue';
 import MapContainerColorSoil from '@/components/MapContainerColorSoil.vue';
 import MapContainerColorSand from '@/components/MapContainerColorSand.vue';
-import Filters from '@/components/Filters.vue';
+import { useFiltersStore } from '@/stores/filters';
 import { useMapExploreStore } from '@/stores/mapExplore';
+import LayoutOverview from './components/layouts/LayoutOverview.vue';
+import ExploreSidebar from './components/ExploreSidebar.vue';
 
 const availableMaps = [
   {
@@ -74,18 +80,23 @@ const selectedMapComponent = computed(() => {
 </script>
 
 <style scoped>
-.top-bar {
-  padding: 0.5rem 2rem;
+.map-wrapper-row {
   display: flex;
   flex-direction: row;
-  gap: 0.5rem;
-  align-items: center;
+  height: 100%;
 }
 
-.overlay {
+.map-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.map-overlay {
   position: absolute;
-  left: 1rem;
-  top: 3rem;
+  top: 5rem;
+  right: 1rem;
 }
 </style>
 

vacs-map-app/src/components/CropCards.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="crop-cards">
+    <div class="crop-card" v-for="crop in filteredCrops" :key="crop">
+      <router-link :to="`/map-explore`" @click="selectedCrop = crop">
+        {{ crop }}
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import slugify from 'slugify';
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useFiltersStore } from '@/stores/filters';
+
+const router = useRouter();
+const filtersStore = useFiltersStore();
+const { availableCrops, selectedCrop } = storeToRefs(filtersStore);
+
+// TODO actually filter
+const filteredCrops = computed(() => availableCrops.value);
+
+</script>
+
+<style scoped>
+.crop-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 1rem;
+}
+
+.crop-card {
+  background: white;
+  border-radius: 10px;
+  height: 10rem;
+}
+</style>

vacs-map-app/src/components/CropFilters.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="crop-filters">
+    crop filters
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+</style>

vacs-map-app/src/components/ExploreSidebar.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="sidebar">
+    <div class="crop-selection">
+      <select v-model="selectedCrop" class="crop-picker">
+        <option
+          v-for="crop in availableCrops"
+          :key="crop"
+          :value="crop"
+        > {{crop}} </option>
+      </select>
+
+      <span> a description of {{ selectedCrop }}</span>
+    </div>
+
+    <div class="crop-fingerprint">
+      crop fingerprint
+    </div>
+
+    <div class="scenarios">
+      <div v-for="scenario in futureScenarios" :key="scenario" class="scenario" :class="{selected: selectedModel === scenario}" @click="selectedModel = scenario">
+        <span>
+          {{ scenario }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useFiltersStore } from '@/stores/filters';
+
+const filtersStore = useFiltersStore();
+const {
+  availableCrops,
+  selectedCrop,
+  availableModels,
+  selectedModel,
+} = storeToRefs(filtersStore);
+
+const futureScenarios = computed(() => availableModels.value.filter(d => d.startsWith('future')));
+</script>
+
+<style scoped>
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-left: var(--page-horizontal-margin);
+  padding-right: 2rem;
+  width: 400px;
+}
+
+.crop-selection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.crop-fingerprint {
+  width: 100%;
+  height: 40%;
+  border: 1px solid white;
+  border-radius: 0.5rem;
+}
+
+.scenarios { 
+  width: 100%;
+  height: 40%;
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.scenario {
+  width: 100%;
+  border: 1px solid gray;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+
+.scenario.selected {
+  cursor: pointer;
+  border-color: white;
+}
+
+</style>

vacs-map-app/src/components/OverviewTop.vue

@@ -2,28 +2,20 @@
   <div class="overview-top">
     <div class="row">
       <div>
-        How does <TopicPicker :value="topic" /> impact decisions about food security?
+        What crops have the most potential in a changing climate?
       </div>
-      <NavigationButton to="/map-explore">Explore the map</NavigationButton>
-    </div>
-    <div class="row">
-      <NavigationButton to="/">Go Back</NavigationButton>
+      <NavigationButton :to="backRoute">Go Back</NavigationButton>
     </div>
   </div>
 </template>
 
 <script setup>
-import { toRefs } from 'vue';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
 import NavigationButton from '@/components/NavigationButton.vue';
-import TopicPicker from '@/components/TopicPicker.vue';
 
-const props = defineProps({
-  topic: {
-    type: String,
-    default: '',
-  },
-});
-const { topic } = toRefs(props);
+const route = useRoute();
+const backRoute = computed(() => route.path === '/map-explore' ? '/crops' : '/');
 </script>
 
 <style scoped>

vacs-map-app/src/components/layouts/LayoutOverview.vue

@@ -35,6 +35,6 @@ const topic = computed(() => topicUrlOptions
 }
 
 .layout-overview-content {
-  margin: 0 var(--page-horizontal-margin);
+  height: 100%;
 }
 </style>

vacs-map-app/src/components/pages/CropDetail.vue

@@ -0,0 +1,18 @@
+<template>
+  <LayoutOverview>
+    {{ slug }}
+  </LayoutOverview>
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router';
+import LayoutOverview from '@/components/layouts/LayoutOverview.vue';
+
+const route = useRoute();
+
+// TODO handle fact that this is a slug (in case of multi-word crop names)
+const { slug } = route.params;
+</script>
+
+<style scoped>
+</style>

vacs-map-app/src/components/pages/CropTypeOverview.vue

@@ -1,12 +1,20 @@
 <template>
-  <LayoutOverview topic-label="crop type">
-    crop type
+  <LayoutOverview>
+    <div class="wrapper">
+      <CropFilters />
+      <CropCards />
+    </div>
   </LayoutOverview>
 </template>
 
 <script setup>
 import LayoutOverview from '@/components/layouts/LayoutOverview.vue';
+import CropCards from '@/components/CropCards.vue';
+import CropFilters from '@/components/CropFilters.vue';
 </script>
 
 <style scoped>
+.wrapper {
+  margin: 0 var(--page-horizontal-margin);
+}
 </style>