Merge pull request #1292 from umap-project/panel-portrait
Better distinguish panel behaviour in portrait vs landscape modes
This commit is contained in:
commit
d4c0bc0854
2 changed files with 17 additions and 15 deletions
|
@ -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;
|
||||||
|
|
|
@ -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')
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue