Merge pull request #1349 from umap-project/toggle-attribution

Hide attribution on small screen and add a small ? to display it

umap/static/umap/js/umap.controls.js

@@ -1131,34 +1131,39 @@ L.U.AttributionControl = L.Control.Attribution.extend({
 
   _update: function () {
     L.Control.Attribution.prototype._update.call(this)
+    // Use our how container, so we can hide/show on small screens
+    const credits = this._container.innerHTML
+    this._container.innerHTML = ''
+    const container = L.DomUtil.add('div', 'attribution-container', this._container, credits)
     if (this._map.options.shortCredit) {
       L.DomUtil.add(
         'span',
         '',
-        this._container,
+        container,
         ` — ${L.Util.toHTML(this._map.options.shortCredit)}`
       )
     }
     if (this._map.options.captionMenus) {
-      const link = L.DomUtil.add('a', '', this._container, ` — ${L._('About')}`)
+      const link = L.DomUtil.add('a', '', container, ` — ${L._('About')}`)
       L.DomEvent.on(link, 'click', L.DomEvent.stop)
         .on(link, 'click', this._map.displayCaption, this._map)
         .on(link, 'dblclick', L.DomEvent.stop)
     }
     if (window.top === window.self && this._map.options.captionMenus) {
       // We are not in iframe mode
-      const home = L.DomUtil.add('a', '', this._container, ` — ${L._('Home')}`)
+      const home = L.DomUtil.add('a', '', container, ` — ${L._('Home')}`)
       home.href = '/'
     }
     if (this._map.options.captionMenus) {
       const poweredBy = L.DomUtil.add(
         'a',
         '',
-        this._container,
+        container,
         ` — ${L._('Powered by uMap')}`
       )
       poweredBy.href = 'https://github.com/umap-project/umap/'
     }
+    L.DomUtil.create('a', 'attribution-toggle', this._container)
   },
 })
 

umap/static/umap/map.css

@@ -147,7 +147,14 @@ a.umap-control-less {
     margin-bottom: 5px!important;
     padding: 0.5rem;
 }
-
+.attribution-toggle {
+    display: none;
+    width: 24px;
+    height: 24px;
+    vertical-align: middle;
+    background-image: url('./img/16.svg');
+    background-position: 0px 0px;
+}
 
 
 
@@ -1542,6 +1549,23 @@ a.add-datalayer:hover,
     .umap-popup-large .umap-popup-content {
         width: 300px;
     }
+
+    .attribution-toggle {
+        display: inline-block;
+    }
+    .attribution-container {
+        display: none;
+    }
+    .leaflet-control-attribution:active .attribution-container,
+    .leaflet-control-attribution:hover .attribution-container {
+        display: inline;
+        background-color: #fff;
+    }
+    .leaflet-control-attribution:hover .attribution-toggle {
+        display: none;
+    }
+
+
 }
 
 /* ****** */