Merge pull request #782 from umap-project/improve-popup-layout

Improve popup and panel layout

umap/static/umap/base.css

@@ -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 {

umap/static/umap/js/umap.features.js

@@ -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

umap/static/umap/js/umap.js

@@ -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'

umap/static/umap/js/umap.layer.js

@@ -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',

umap/static/umap/js/umap.popup.js

@@ -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),

umap/static/umap/map.css

@@ -881,6 +881,7 @@ a.add-datalayer:hover,
 }
 .umap-caption {
     background-position: -170px -52px;
+    padding: 0 10px;
 }
 
 /* ********************************* */
@@ -1286,12 +1287,14 @@ 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;
+    padding: 0 10px;
 }
 .leaflet-popup-content h3 {
     margin-bottom: 0;
@@ -1308,16 +1311,13 @@ a.add-datalayer:hover,
 .leaflet-contextmenu-icon {
     display: none;
 }
-.umap-popup-content img {
-    max-width: 300px !important;
-}
 .umap-popup-large iframe,
 .umap-popup-large img {
     /* See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847 */
     max-width: 500px !important;
 }
-#umap-ui-container .umap-popup-content img {
+.umap-popup-content img {
-    max-width: 400px !important;
+    max-width: 100%;
 }
 .umap-georss-link .popup-title {
     text-align: center;