fix: panel condensed height should never be bigger than screen

This commit is contained in:
Yohan Boniface 2024-05-24 18:39:11 +02:00
parent a6a31a19a9
commit c10bc27fed
3 changed files with 29 additions and 31 deletions

View file

@ -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));
}
}

View file

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

View file

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