Improve popup and panel layout
This commit is contained in:
parent
87ae7d08ae
commit
8b28536bbb
6 changed files with 25 additions and 7 deletions
|
@ -500,6 +500,17 @@ i.info {
|
||||||
.umap-edit-actions li:hover {
|
.umap-edit-actions li:hover {
|
||||||
background-color: #353c3e;
|
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 {
|
.umap-form-iconfield {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -589,7 +600,7 @@ input[type=hidden].blur + .button {
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: -400px;
|
right: -400px;
|
||||||
padding: 0 20px;
|
padding: 0 10px;
|
||||||
border-left: 1px solid #ddd;
|
border-left: 1px solid #ddd;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
z-index: 1010;
|
z-index: 1010;
|
||||||
|
@ -645,10 +656,10 @@ input[type=hidden].blur + .button {
|
||||||
}
|
}
|
||||||
#umap-ui-container .body {
|
#umap-ui-container .body {
|
||||||
clear: both;
|
clear: both;
|
||||||
height: calc(100% - 46px); /* Minus size of toolbox */
|
height: calc(100% - 54px); /* Minus size of toolbox */
|
||||||
}
|
}
|
||||||
#umap-ui-container .toolbox {
|
#umap-ui-container .toolbox {
|
||||||
padding: 5px 0;
|
padding: 5px 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
#umap-ui-container .toolbox li {
|
#umap-ui-container .toolbox li {
|
||||||
|
|
|
@ -85,7 +85,7 @@ L.U.FeatureMixin = {
|
||||||
|
|
||||||
edit: function(e) {
|
edit: function(e) {
|
||||||
if(!this.map.editEnabled || this.isReadOnly()) return;
|
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'], {
|
var builder = new L.U.FormBuilder(this, ['datalayer'], {
|
||||||
callback: function () {this.edit(e);} // removeLayer step will close the edit panel, let's reopen it
|
callback: function () {this.edit(e);} // removeLayer step will close the edit panel, let's reopen it
|
||||||
|
|
|
@ -1179,7 +1179,7 @@ L.U.Map.include({
|
||||||
|
|
||||||
edit: function () {
|
edit: function () {
|
||||||
if(!this.editEnabled) return;
|
if(!this.editEnabled) return;
|
||||||
var container = L.DomUtil.create('div'),
|
var container = L.DomUtil.create('div','umap-edit-container'),
|
||||||
metadataFields = [
|
metadataFields = [
|
||||||
'options.name',
|
'options.name',
|
||||||
'options.description'
|
'options.description'
|
||||||
|
|
|
@ -717,7 +717,7 @@ L.U.DataLayer = L.Evented.extend({
|
||||||
|
|
||||||
edit: function () {
|
edit: function () {
|
||||||
if(!this.map.editEnabled || !this.isLoaded()) {return;}
|
if(!this.map.editEnabled || !this.isLoaded()) {return;}
|
||||||
var container = L.DomUtil.create('div'),
|
var container = L.DomUtil.create('div', 'umap-layer-properties-container'),
|
||||||
metadataFields = [
|
metadataFields = [
|
||||||
'options.name',
|
'options.name',
|
||||||
'options.description',
|
'options.description',
|
||||||
|
|
|
@ -107,7 +107,8 @@ L.U.PopupTemplate.Default = L.Class.extend({
|
||||||
|
|
||||||
renderFooter: function () {
|
renderFooter: function () {
|
||||||
if (this.feature.hasPopupFooter()) {
|
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),
|
previousLi = L.DomUtil.create('li', 'previous', footer),
|
||||||
zoomLi = L.DomUtil.create('li', 'zoom', footer),
|
zoomLi = L.DomUtil.create('li', 'zoom', footer),
|
||||||
nextLi = L.DomUtil.create('li', 'next', footer),
|
nextLi = L.DomUtil.create('li', 'next', footer),
|
||||||
|
|
|
@ -881,6 +881,7 @@ a.add-datalayer:hover,
|
||||||
}
|
}
|
||||||
.umap-caption {
|
.umap-caption {
|
||||||
background-position: -170px -52px;
|
background-position: -170px -52px;
|
||||||
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ********************************* */
|
/* ********************************* */
|
||||||
|
@ -1286,12 +1287,15 @@ a.add-datalayer:hover,
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.umap-popup-content iframe {
|
.umap-popup-content iframe {
|
||||||
min-width: 310px;
|
min-width: 310px;
|
||||||
}
|
}
|
||||||
.umap-popup-container {
|
.umap-popup-container {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
.leaflet-popup-content h3 {
|
.leaflet-popup-content h3 {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
@ -1310,6 +1314,7 @@ a.add-datalayer:hover,
|
||||||
}
|
}
|
||||||
.umap-popup-content img {
|
.umap-popup-content img {
|
||||||
max-width: 300px !important;
|
max-width: 300px !important;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
.umap-popup-large iframe,
|
.umap-popup-large iframe,
|
||||||
.umap-popup-large img {
|
.umap-popup-large img {
|
||||||
|
@ -1318,6 +1323,7 @@ a.add-datalayer:hover,
|
||||||
}
|
}
|
||||||
#umap-ui-container .umap-popup-content img {
|
#umap-ui-container .umap-popup-content img {
|
||||||
max-width: 400px !important;
|
max-width: 400px !important;
|
||||||
|
width: 100%
|
||||||
}
|
}
|
||||||
.umap-georss-link .popup-title {
|
.umap-georss-link .popup-title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
Loading…
Reference in a new issue