Improve popup and panel layout

This commit is contained in:
Binnette 2020-04-09 00:08:30 +02:00
parent 87ae7d08ae
commit 8b28536bbb
6 changed files with 25 additions and 7 deletions

View file

@ -500,6 +500,17 @@ i.info {
.umap-edit-actions li:hover {
background-color: #353c3e;
}
.permissions-panel,
.umap-upload,
.umap-share,
.umap-edit-container,
.umap-datalayer-container,
.umap-layer-properties-container,
.umap-footer-container,
.umap-browse-data,
.umap-browse-datalayers {
padding: 0 10px;
}
.umap-form-iconfield {
position: relative;
overflow: hidden;
@ -589,7 +600,7 @@ input[type=hidden].blur + .button {
top: 0;
bottom: 0;
right: -400px;
padding: 0 20px;
padding: 0 10px;
border-left: 1px solid #ddd;
overflow-x: auto;
z-index: 1010;
@ -645,10 +656,10 @@ input[type=hidden].blur + .button {
}
#umap-ui-container .body {
clear: both;
height: calc(100% - 46px); /* Minus size of toolbox */
height: calc(100% - 54px); /* Minus size of toolbox */
}
#umap-ui-container .toolbox {
padding: 5px 0;
padding: 5px 10px;
overflow: hidden;
}
#umap-ui-container .toolbox li {

View file

@ -85,7 +85,7 @@ L.U.FeatureMixin = {
edit: function(e) {
if(!this.map.editEnabled || this.isReadOnly()) return;
var container = L.DomUtil.create('div');
var container = L.DomUtil.create('div', 'umap-datalayer-container');
var builder = new L.U.FormBuilder(this, ['datalayer'], {
callback: function () {this.edit(e);} // removeLayer step will close the edit panel, let's reopen it

View file

@ -1179,7 +1179,7 @@ L.U.Map.include({
edit: function () {
if(!this.editEnabled) return;
var container = L.DomUtil.create('div'),
var container = L.DomUtil.create('div','umap-edit-container'),
metadataFields = [
'options.name',
'options.description'

View file

@ -717,7 +717,7 @@ L.U.DataLayer = L.Evented.extend({
edit: function () {
if(!this.map.editEnabled || !this.isLoaded()) {return;}
var container = L.DomUtil.create('div'),
var container = L.DomUtil.create('div', 'umap-layer-properties-container'),
metadataFields = [
'options.name',
'options.description',

View file

@ -107,7 +107,8 @@ L.U.PopupTemplate.Default = L.Class.extend({
renderFooter: function () {
if (this.feature.hasPopupFooter()) {
var footer = L.DomUtil.create('ul', 'umap-popup-footer', this.container),
var footerContainer = L.DomUtil.create('div', 'umap-footer-container', this.container),
footer = L.DomUtil.create('ul', 'umap-popup-footer', footerContainer),
previousLi = L.DomUtil.create('li', 'previous', footer),
zoomLi = L.DomUtil.create('li', 'zoom', footer),
nextLi = L.DomUtil.create('li', 'next', footer),

View file

@ -881,6 +881,7 @@ a.add-datalayer:hover,
}
.umap-caption {
background-position: -170px -52px;
padding: 0 10px;
}
/* ********************************* */
@ -1286,12 +1287,15 @@ a.add-datalayer:hover,
overflow-x: hidden;
margin-bottom: 4px;
display: flex;
flex-direction: column;
}
.umap-popup-content iframe {
min-width: 310px;
}
.umap-popup-container {
flex-grow: 1;
text-align: justify;
padding: 0 10px;
}
.leaflet-popup-content h3 {
margin-bottom: 0;
@ -1310,6 +1314,7 @@ a.add-datalayer:hover,
}
.umap-popup-content img {
max-width: 300px !important;
width: 100%;
}
.umap-popup-large iframe,
.umap-popup-large img {
@ -1318,6 +1323,7 @@ a.add-datalayer:hover,
}
#umap-ui-container .umap-popup-content img {
max-width: 400px !important;
width: 100%
}
.umap-georss-link .popup-title {
text-align: center;