#672 set height for MediaMap and add conditional rendering

Author: andrewtavis

frontend/components/media/MediaMap.vue

@@ -10,7 +10,8 @@ import MapLibreGlDirections from "@maplibre/maplibre-gl-directions";
 import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 
-const props = defineProps<{ markerColors: string[]; isHidden: boolean }>();
+const i18n = useI18n();
+const props = defineProps<{ markerColors: string[] }>();
 
 function isWebglSupported() {
   if (window.WebGLRenderingContext) {
@@ -30,8 +31,8 @@ function isWebglSupported() {
 }
 
 onMounted(() => {
-  if (!isWebglSupported() && !props.isHidden) {
-    alert("Your browser does not support MapLibre GL");
+  if (!isWebglSupported()) {
+    alert(i18n.t("components.media-map.maplibre-gl-alert"));
   } else {
     const map = new maplibregl.Map({
       container: "map",

frontend/i18n/en-US.json

@@ -230,6 +230,7 @@
   "components.landing-tech-banner.open-source-tagline": "Trust through Transparency",
   "components.landing-tech-banner.open-source-text": "We're dedicated to working in the open to build trust with our partner organizations and fellow activists. Building the place for activism the world over takes a lot of effort, so please come join us!",
   "components.logo-activist.aria-label": "The activist logo that links to the home page",
+  "components.media-map.maplibre-gl-alert": "Your browser does not support our mapping service MapLibre GL, so we won't be able to display maps.",
   "components.meta-tag-stars.label": "stars",
   "components.meta-tag.supporters_lower": "supporters",
   "components.modal-command-palette.jump-to": "Jump to",

frontend/pages/events/[id]/about.vue

@@ -58,7 +58,7 @@
     </HeaderAppPage>
     <div class="pt-3 pb-6 space-y-6 lg:pt-4">
       <div
-        class="pb-6 grid grid-cols-1 grid-rows-2 space-y-6 lg:grid-cols-3 lg:grid-rows-1 lg:pb-0 lg:space-y-0"
+        class="lg:grid space-y-6 lg:grid-cols-3 lg:grid-rows-1 lg:space-y-0"
         :class="{
           'lg:space-x-6 lg:mr-6': !textExpanded,
         }"
@@ -73,9 +73,12 @@
           :event="event"
         />
         <MediaMap
-          v-if="event.inPersonLocation"
+          v-if="
+            (event.inPersonLocation && !textExpanded) ||
+            (event.inPersonLocation && isUnderLargeBP)
+          "
+          class="w-full h-[17.5rem]"
           :markerColors="event.type === 'learn' ? ['#2176AE'] : ['#BA3D3B']"
-          :isHidden="textExpanded"
         />
       </div>
       <CardGetInvolved
@@ -99,6 +102,21 @@ const expandReduceText = () => {
   textExpanded.value = !textExpanded.value;
 };
 
+const isUnderLargeBP = ref(false);
+
+const checkUnderLargeBP = () => {
+  isUnderLargeBP.value = window.innerWidth < 1024;
+};
+
+const handleResize = () => {
+  checkUnderLargeBP();
+};
+
+onMounted(() => {
+  window.addEventListener("resize", handleResize);
+  handleResize(); // initial check
+});
+
 const event: Event = {
   name: "Brandenburg Gate Climate Demo",
   tagline: "There is no Planet B",