diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 66c8849d..78565975 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/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) }, }) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index cef43e39..2f51dc01 100644 --- a/umap/static/umap/map.css +++ b/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; + } + + } /* ****** */