Merge pull request #1859 from umap-project/fix-max-height-panel-responsive

fix: panel condensed height should never be bigger than screen

umap/static/umap/css/panel.css

@@ -12,6 +12,8 @@
     cursor: initial;
     border-radius: 5px;
     border: 1px solid var(--color-lightGray);
+    bottom: calc(var(--current-footer-height) + var(--panel-bottom));
+    box-sizing: border-box;
 }
 .panel.dark {
     border: 1px solid #222;
@@ -25,16 +27,9 @@
     visibility: visible;
     right: var(--panel-gutter);
     left: var(--panel-gutter);
-    top: var(--header-height);
     height: initial;
     max-height: initial;
 }
-.umap-caption-bar-enabled .panel {
-    bottom: calc(var(--footer-height) + var(--panel-bottom));
-}
-.panel {
-    box-sizing: border-box;
-}
 .panel .umap-popup-content img {
     /* See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847 */
     max-width: 99% !important;
@@ -86,13 +81,13 @@
 }
 @media all and (orientation:landscape) {
     .panel {
-        top: 0;
+        top: var(--current-header-height);
         margin-top: var(--panel-gutter);
         width: var(--panel-width);
         max-width: calc(100% - var(--panel-gutter) * 2 - var(--control-size))
     }
     .panel.condensed {
-        max-height: 500px;
+        max-height: calc(min(500px, 100% - var(--current-header-height) - var(--current-footer-height) - var(--panel-gutter) * 2));
         bottom: initial;
     }
     .panel.right {
@@ -109,16 +104,13 @@
         right: calc(var(--panel-gutter) * 2 + var(--control-size));
         visibility: visible;
     }
-    .umap-edit-enabled .panel {
-        top: var(--header-height);
-    }
 }
 @media all and (orientation:portrait) {
     .panel {
         height: 50%;
         max-height: 400px;
         width: 100%;
-        bottom: 0;
+        bottom: var(--current-footer-height);
         right: -100%;
     }
     .panel.left {
@@ -130,16 +122,11 @@
         visibility: visible;
     }
     .panel.expanded {
-        height: 100%;
-        max-height: 100%;
+        height: calc(100% - var(--current-footer-height));
+        max-height: calc(100% - var(--current-footer-height));
     }
     .umap-caption-bar-enabled .panel {
-        bottom: var(--footer-height);
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
-    .umap-caption-bar-enabled .panel.expanded {
-        height: calc(100% - var(--footer-height));
-        max-height: calc(100% - var(--footer-height));
-    }
 }

umap/static/umap/map.css

@@ -17,6 +17,24 @@
 }
 
 
+/* *********** */
+/* Structure   */
+/* *********** */
+
+.umap-edit-enabled {
+    --current-header-height: var(--header-height);
+}
+.umap-caption-bar-enabled {
+    --current-footer-height: var(--footer-height);
+}
+.leaflet-top {
+    top: var(--current-header-height);
+}
+.leaflet-bottom {
+    bottom: var(--current-footer-height);
+}
+
+
 /* *********** */
 /* Controls    */
 /* *********** */
@@ -617,9 +635,6 @@ ul.photon-autocomplete {
 .umap-edit-enabled .umap-main-edit-toolbox {
     top: 0;
 }
-.umap-edit-enabled .umap-caption-bar {
-    display: none;
-}
 .umap-caption-bar h3,
 .umap-main-edit-toolbox h3 {
     display: inline;
@@ -642,12 +657,9 @@ ul.photon-autocomplete {
     padding-left: 20px;
     display: inline-block; /* Prevents underline on hover. */
 }
-.umap-edit-enabled .leaflet-top {
-    top: 46px;
-}
 .umap-caption-bar-enabled .umap-caption-bar {
     display: block;
-    height: 46px;
+    height: var(--header-height);
     background-color: #fff;
     width: 100%;
     position: absolute;
@@ -656,15 +668,12 @@ ul.photon-autocomplete {
     right: 0;
     padding: 0 0 0 5px;
     text-align: left;
-    line-height: 46px;
+    line-height: 100%;
     cursor: auto;
     border-top: 1px solid var(--color-lightGray);
     opacity: 0.93;
     z-index: 1000;
 }
-.umap-caption-bar-enabled .leaflet-bottom {
-    bottom: 46px;
-}
 .umap-help {
     font-style: italic;
 }

umap/static/umap/vars.css

@@ -25,7 +25,9 @@
     --panel-header-height: 36px;
     --panel-width: 400px;
     --header-height: 46px;
+    --current-header-height: 0px;
     --footer-height: 46px;
+    --current-footer-height: 0px;
     --control-size: 36px;
 }
 .dark {