chore: use CSS vars for panel

umap/static/umap/css/panel.css

@@ -3,7 +3,7 @@
     /* as being out of the visible viewport is not enough  */
     visibility: hidden;
     position: absolute;
-    bottom: 10px;
+    bottom: var(--panel-gutter);
     overflow-x: auto;
     z-index: 1010;
     background-color: #fff;
@@ -20,19 +20,20 @@
 .panel.full {
     width: initial;
     right: -100%;
-    z-index: 10000;
+    z-index: 1030;
 }
 .panel.full.on {
     visibility: visible;
-    right: 10px;
+    right: var(--panel-gutter);
-    left: 10px;
+    left: var(--panel-gutter);
+    top: var(--header-height);
+    height: initial;
+    max-height: initial;
 }
 .umap-caption-bar-enabled .panel {
-    bottom: 46px;
+    bottom: var(--footer-height);
 }
 .panel {
-    -moz-box-sizing:border-box;
-    -webkit-box-sizing:border-box;
     box-sizing: border-box;
 }
 .panel .umap-popup-content img {
@@ -43,10 +44,8 @@
     max-height: inherit;
 }
 .panel .body {
-    clear: both;
+    height: calc(100% - var(--panel-header-height)); /* Minus size of toolbox */
-    height: calc(100% - 32px); /* Minus size of toolbox */
+    padding: var(--panel-gutter);
-    padding: 10px;
-    padding-top: 32px;
 }
 .panel .toolbox {
     padding: 5px 10px;
@@ -60,6 +59,7 @@
     background-color: #fff;
     position: sticky;
     top: 0;
+    height: var(--panel-header-height);
 }
 .panel.dark .toolbox {
     background-color: var(--color-darkGray);
@@ -88,30 +88,29 @@
 @media all and (orientation:landscape) {
     .panel {
         top: 0;
-        margin-top: 10px;
+        margin-top: var(--panel-gutter);
-        width: 400px;
+        width: var(--panel-width);
     }
     .panel.condensed {
         max-height: 500px;
         bottom: initial;
     }
     .panel.right {
-        margin-right: 10px;
+        right: calc(0px - var(--panel-width));
-        right: -400px;
     }
     .panel.left {
-        left: -400px;
+        left: calc(0px - var(--panel-width));
     }
     .panel.left.on {
-        left: 60px;
+        left: calc(var(--panel-gutter) * 2 + var(--control-size));
         visibility: visible;
     }
     .panel.right.on {
-        right: 40px;
+        right: calc(var(--panel-gutter) * 2 + var(--control-size));
         visibility: visible;
     }
     .umap-edit-enabled .panel {
-        top: 46px;
+        top: var(--header-height);
     }
 }
 @media all and (orientation:portrait) {
@@ -130,4 +129,7 @@
         left: 0;
         visibility: visible;
     }
+    .panel li.umap-resize-link {
+        display: none;
+    }
 }

umap/static/umap/js/modules/panel.js

@@ -3,7 +3,7 @@ import { translate } from './i18n.js'
 
 export class Panel {
   constructor(map) {
-    this.parent = map._container
+    this.parent = map._controlContainer
     this.map = map
     this.container = DomUtil.create('div', '', this.parent)
     this.mode = 'condensed'

umap/static/umap/map.css

@@ -32,13 +32,13 @@
 }
 .leaflet-control-fullscreen a:hover,
 .leaflet-control-fullscreen a {
-    height: 36px;
+    height: var(--control-size);
-    width: 36px;
+    width: var(--control-size);
     background-size: 36px 68px;
 }
 .leaflet-touch .leaflet-control-fullscreen a {
-    height: 36px;
+    height: var(--control-size);
-    width: 36px;
+    width: var(--control-size);
     background-position: 0px 0px;
 }
 .leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a,
@@ -52,9 +52,9 @@
     background-position: 50% 50%;
     background-repeat: no-repeat;
     display: block;
-    height: 36px;
+    height: var(--control-size);
-    width: 36px;
+    width: var(--control-size);
-    line-height: 36px;
+    line-height: var(--control-size);
     background-image: url('./img/24.svg');
     text-indent: -9999px;
     margin-bottom: 0;
@@ -144,8 +144,8 @@
     color: #fff;
     background-image: none;
     border-radius: 20px;
-    height: 36px;
+    height: var(--control-size);
-    line-height: 36px;
+    line-height: var(--control-size);
     display: block;
 }
 .leaflet-control-toolbar .leaflet-toolbar-icon.dark:hover,
@@ -287,8 +287,8 @@ ul.photon-autocomplete {
 .leaflet-control-toolbar > li > .leaflet-toolbar-icon,
 .umap-toolbar a,
 .umap-toolbar a:hover {
-    height: 36px;
+    height: var(--control-size);
-    width: 36px;
+    width: var(--control-size);
     display: none;
     margin-top: 0;
     vertical-align: top;
@@ -435,8 +435,8 @@ ul.photon-autocomplete {
     clear: both;
 }
 .umap-edit-actions li {
-    height: 36px;
+    height: var(--control-size);
-    line-height: 36px;
+    line-height: var(--control-size);
     cursor: pointer;
     margin-bottom: 5px;
     border-radius: 2px;
@@ -446,8 +446,8 @@ ul.photon-autocomplete {
     background-image: url('./img/24-white.svg');
     background-repeat: no-repeat;
     display: table-cell;
-    width: 36px;
+    width: var(--control-size);
-    height: 36px;
+    height: var(--control-size);
 }
 .umap-edit-actions li span {
     display: table-cell;
@@ -575,7 +575,7 @@ ul.photon-autocomplete {
     background-color: var(--color-darkGray);
     padding: 0 10px;
     text-align: left;
-    line-height: 36px;
+    line-height: var(--control-size);
     cursor: auto;
     border-bottom: 1px solid #222;
     z-index: 1000;
@@ -1503,9 +1503,9 @@ span.popup-icon {
 /* *************************** */
 
 .leaflet-control-zoom a, .leaflet-control-zoom a:hover {
-    height: 36px;
+    height: var(--control-size);
-    width: 36px;
+    width: var(--control-size);
-    line-height: 36px;
+    line-height: var(--control-size);
 }
 .leaflet-container .leaflet-control-zoom {
     margin-left: 10px;
@@ -1596,9 +1596,9 @@ span.popup-icon {
     border-width: 1px;
 }
 .leaflet-touch .leaflet-bar a {
-    width: 36px;
+    width: var(--control-size);
-    height: 36px;
+    height: var(--control-size);
-    line-height: 34px;
+    line-height: var(--control-size);
 }
 /* Links are blue by default  */
 .leaflet-container a {

umap/static/umap/vars.css

@@ -10,4 +10,12 @@
     --button-primary-color: var(--color-darkBlue);
     --button-neutral-background: var(--color-lightGray);
     --button-neutral-color: var(--color-darkGray);
+
+    /* Sizes and spaces */
+    --panel-gutter: 10px;
+    --panel-header-height: 36px;
+    --panel-width: 400px;
+    --header-height: 46px;
+    --footer-height: 46px;
+    --control-size: 36px;
 }