Merge pull request #1292 from umap-project/panel-portrait

Better distinguish panel behaviour in portrait vs landscape modes
This commit is contained in:
Yohan Boniface 2023-09-01 17:28:58 +02:00 committed by GitHub
commit d4c0bc0854
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 15 deletions

View file

@ -436,7 +436,6 @@ i.info {
background-image: url('./img/16-white.svg'); background-image: url('./img/16-white.svg');
} }
.with-transition { .with-transition {
/*transition: top .7s, right .7s, left .7s, width .7s, visibility .7s;*/
transition: all .7s; transition: all .7s;
} }
@ -583,11 +582,8 @@ input[type=hidden].blur + .button {
overflow-x: hidden; overflow-x: hidden;
} }
#umap-ui-container { #umap-ui-container {
width: 400px;
position: absolute; position: absolute;
top: 0;
bottom: 0; bottom: 0;
right: -400px;
padding: 0 10px; padding: 0 10px;
border-left: 1px solid #ddd; border-left: 1px solid #ddd;
overflow-x: auto; overflow-x: auto;
@ -612,15 +608,9 @@ input[type=hidden].blur + .button {
padding-right: 0; padding-right: 0;
transition: all .7s; transition: all .7s;
} }
.umap-edit-enabled #umap-ui-container {
top: 46px;
}
.umap-caption-bar-enabled #umap-ui-container { .umap-caption-bar-enabled #umap-ui-container {
bottom: 46px; bottom: 46px;
} }
.umap-ui #umap-ui-container {
right: 0;
}
.leaflet-top, .leaflet-top,
.leaflet-right { .leaflet-right {
transition: all .7s; transition: all .7s;
@ -821,15 +811,29 @@ input[type=hidden].blur + .button {
/* *********** */ /* *********** */
/* Mobile */ /* Mobile */
/* *********** */ /* *********** */
@media all and (orientation:portrait) { @media all and (orientation:landscape) {
.umap-edit-enabled #umap-ui-container {
top: 46px;
}
#umap-ui-container {
width: 400px;
right: -400px;
top: 0;
}
.umap-ui #umap-ui-container { .umap-ui #umap-ui-container {
right: 0;
}
}
@media all and (orientation:portrait) {
#umap-ui-container {
height: 50%; height: 50%;
max-height: 400px; max-height: 400px;
width: 100%; width: 100%;
top: inherit!important;
bottom: 0; bottom: 0;
right: -100%;
}
.umap-ui #umap-ui-container {
right: 0; right: 0;
left: 0;
} }
.umap-ui .leaflet-right { .umap-ui .leaflet-right {
right: 0; right: 0;

View file

@ -64,8 +64,6 @@ L.U.UI = L.Evented.extend({
}, },
closePanel: function () { closePanel: function () {
this._panel.innerHTML = ''
this.resetPanelClassName()
L.DomUtil.removeClass(this.parent, 'umap-ui') L.DomUtil.removeClass(this.parent, 'umap-ui')
this.fire('panel:closed') this.fire('panel:closed')
}, },