Merge pull request #104 from earthrise-media/mobile-tooltip-update

Fix mobile tooltip position
earthrise-media · Dec 1, 2023 · 058dd81 · 058dd81
2 parents 7ae4bdf + eb42e6f
commit 058dd81
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 4 deletions.
diff --git a/vacs-map-app/src/App.vue b/vacs-map-app/src/App.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
 import { RouterView } from 'vue-router'
 import { useCropYieldsStore } from '@/stores/cropYields'
 import { useCropInformationStore } from '@/stores/cropInformation'
@@ -17,22 +17,35 @@ const cropInformationStore = useCropInformationStore()
 const gridStore = useGridStore()
 const filtersStore = useFiltersStore()
 
+const documentHeight = () => {
+  const doc = document.documentElement
+  doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
+}
+
 onMounted(() => {
   gridStore.load()
   cropYieldsStore.load()
   cropInformationStore.load()
 
   // initialize so pages load
   filtersStore.selectedCrop = filtersStore.availableCrops[0]
+
+  window.addEventListener('resize', documentHeight)
+  documentHeight
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize')
 })
 </script>
 
 <style scoped>
 main {
   display: flex;
   flex-direction: column;
-  height: 100vh;
   width: 100vw;
+  height: 100vh;
+  height: var(--doc-height);
   overflow: hidden;
 }
 </style>
diff --git a/vacs-map-app/src/LandingPage.vue b/vacs-map-app/src/LandingPage.vue
@@ -144,6 +144,7 @@ const openModal = () => {
   display: flex;
   flex-direction: row;
   height: 100vh;
+  height: var(--doc-height);
   width: 100vw;
   background: var(--black);
   justify-content: space-between;
@@ -155,6 +156,7 @@ video {
   height: 100vh;
   min-width: 100vw;
   height: 100vh;
+  height: var(--doc-height);
 }
 
 .overlay {
@@ -163,6 +165,7 @@ video {
   left: 0;
   width: 100vw;
   height: 100vh;
+  height: var(--doc-height);
 
   display: flex;
   flex-direction: column;

diff --git a/vacs-map-app/src/assets/base.css b/vacs-map-app/src/assets/base.css
@@ -18,8 +18,10 @@
   --font-family-header: PPeiko-heavy;
   --font-family-h2: PPeiko-medium;
   --font-family-body: 'Work Sans';
-
   --shadow: 0px 0px 20px 0px rgba(255, 254, 254, 0.1);
+
+
+  --doc-height: 100%
 }
 
 *,

diff --git a/vacs-map-app/src/components/TooltipWrapper.vue b/vacs-map-app/src/components/TooltipWrapper.vue
@@ -126,4 +126,15 @@ const setPosition = (px, py) => {
 .top.left {
   transform: translateX(-100%) translateY(-100%);
 }
+
+@media only screen and (max-width: 720px) {
+  .tooltip {
+    top: unset !important;
+    bottom: 8rem !important;
+    left: 1rem !important;
+    transform: unset !important;
+  }
+}
 </style>
+
+
diff --git a/vacs-map-app/src/components/layouts/LayoutOpen.vue b/vacs-map-app/src/components/layouts/LayoutOpen.vue
@@ -8,7 +8,9 @@
 
 <style scoped>
 .layout-open {
-  min-height: 100vh;
+  height: 100vh;
+  max-height: var(--doc-height);
+  min-height: var(--doc-height);
   width: 100vw;
 }
 </style>
diff --git a/vacs-map-app/src/components/layouts/LayoutOverview.vue b/vacs-map-app/src/components/layouts/LayoutOverview.vue
@@ -25,6 +25,8 @@ const topic = computed(() => topicUrlOptions.find(({ label }) => label === topic
 <style scoped>
 .layout-overview {
   height: 100vh;
+  max-height: var(--doc-height);
+  min-height: var(--doc-height);
   width: 100vw;
   display: flex;
   flex-direction: column;