From 0fb587efa949e06386b22c61a32061fe26ff2285 Mon Sep 17 00:00:00 2001
From: Michael Kirk <michael.code@endoftheworl.de>
Date: Fri, 19 Jan 2024 12:52:40 -0800
Subject: [PATCH] Hide attribution control after a delay.

According to OSM attribution guidelines:

> You may use a mechanism to fade/collapse the attribution [...]
> automatically after five seconds.

On mobile in particular, the attribution is a dangerous tap target on
small screens. I keep hitting it while trying to geolocate.

We could keep shuffling it around, but there just isn't that much space
for people with small mobile devices.
---
 .../www-app/src/components/BaseMap.vue        | 47 +++++++++----------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/services/frontend/www-app/src/components/BaseMap.vue b/services/frontend/www-app/src/components/BaseMap.vue
index b4398dc2f..4eb784ed9 100644
--- a/services/frontend/www-app/src/components/BaseMap.vue
+++ b/services/frontend/www-app/src/components/BaseMap.vue
@@ -23,12 +23,7 @@
   border-top: none;
 }
 
-.desktop .headway-ctrl-wrapper {
-  background: #fffa;
-  gap: 8px;
-}
-
-.mobile .headway-ctrl-wrapper {
+.headway-ctrl-wrapper {
   float: right;
   gap: 16px;
   margin: 8px;
@@ -44,12 +39,25 @@
   .maplibregl-ctrl {
     margin: 0;
   }
+}
 
-  .maplibregl-ctrl-attrib {
-    background: none;
-    color: black;
+@keyframes hideElement {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    display: none;
+    margin-top: -20px;
   }
 }
+
+.maplibregl-ctrl-attrib {
+  // The attribution becomes a click-hazard next to the geolocation button and takes up a lot of vertical space on mobile.
+  // so we hide it after a delay (this is in line with OSM's attribution guidelines)
+  animation: hideElement 0.2s forwards;
+  animation-delay: 5s;
+}
 </style>
 
 <script lang="ts">
@@ -79,7 +87,6 @@ import { debounce } from 'lodash';
 import Place, { PlaceId } from 'src/models/Place';
 import TripLayerId from 'src/models/TripLayerId';
 import env from 'src/utils/env';
-import { Platform } from 'quasar';
 import WrapperControl from 'src/ui/WrapperControl';
 
 export var map: maplibregl.Map | null = null;
@@ -469,20 +476,12 @@ export default defineComponent({
     });
     map.addControl(nav, 'top-right');
 
-    if (Platform.is.desktop) {
-      let wrapperControl = new WrapperControl();
-      wrapperControl.pushChild(scaleControl);
-      wrapperControl.pushChild(attributionControl);
-      map.addControl(wrapperControl, 'bottom-right');
-      map.addControl(geolocate, 'bottom-right');
-    } else {
-      map.addControl(attributionControl, 'bottom-right');
-
-      let wrapperControl = new WrapperControl();
-      wrapperControl.pushChild(scaleControl);
-      wrapperControl.pushChild(geolocate);
-      map.addControl(wrapperControl, 'bottom-right');
-    }
+    map.addControl(attributionControl, 'bottom-right');
+
+    let wrapperControl = new WrapperControl();
+    wrapperControl.pushChild(scaleControl);
+    wrapperControl.pushChild(geolocate);
+    map.addControl(wrapperControl, 'bottom-right');
 
     map.on('load', () => {
       this.loaded = true;