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

fix #844
This commit is contained in:
Yohan Boniface 2023-09-27 10:30:57 +02:00
parent 4e3a22dc11
commit ff27cdd04a
2 changed files with 33 additions and 5 deletions

View file

@ -1130,34 +1130,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)
},
})

View file

@ -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,22 @@ 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;
}
.leaflet-control-attribution:hover .attribution-toggle {
display: none;
}
}
/* ****** */