Merge pull request #1859 from umap-project/fix-max-height-panel-responsive
Some checks failed
Test & Docs / tests (postgresql, 3.10) (push) Has been cancelled
Test & Docs / tests (postgresql, 3.12) (push) Has been cancelled
Test & Docs / lint (push) Has been cancelled
Test & Docs / docs (push) Has been cancelled

fix: panel condensed height should never be bigger than screen
This commit is contained in:
Yohan Boniface 2024-05-25 09:21:04 +02:00 committed by GitHub
commit 2b4a9738a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 29 additions and 31 deletions

View file

@ -12,6 +12,8 @@
cursor: initial; cursor: initial;
border-radius: 5px; border-radius: 5px;
border: 1px solid var(--color-lightGray); border: 1px solid var(--color-lightGray);
bottom: calc(var(--current-footer-height) + var(--panel-bottom));
box-sizing: border-box;
} }
.panel.dark { .panel.dark {
border: 1px solid #222; border: 1px solid #222;
@ -25,16 +27,9 @@
visibility: visible; visibility: visible;
right: var(--panel-gutter); right: var(--panel-gutter);
left: var(--panel-gutter); left: var(--panel-gutter);
top: var(--header-height);
height: initial; height: initial;
max-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 { .panel .umap-popup-content img {
/* See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847 */ /* See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847 */
max-width: 99% !important; max-width: 99% !important;
@ -86,13 +81,13 @@
} }
@media all and (orientation:landscape) { @media all and (orientation:landscape) {
.panel { .panel {
top: 0; top: var(--current-header-height);
margin-top: var(--panel-gutter); margin-top: var(--panel-gutter);
width: var(--panel-width); width: var(--panel-width);
max-width: calc(100% - var(--panel-gutter) * 2 - var(--control-size)) max-width: calc(100% - var(--panel-gutter) * 2 - var(--control-size))
} }
.panel.condensed { .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; bottom: initial;
} }
.panel.right { .panel.right {
@ -109,16 +104,13 @@
right: calc(var(--panel-gutter) * 2 + var(--control-size)); right: calc(var(--panel-gutter) * 2 + var(--control-size));
visibility: visible; visibility: visible;
} }
.umap-edit-enabled .panel {
top: var(--header-height);
}
} }
@media all and (orientation:portrait) { @media all and (orientation:portrait) {
.panel { .panel {
height: 50%; height: 50%;
max-height: 400px; max-height: 400px;
width: 100%; width: 100%;
bottom: 0; bottom: var(--current-footer-height);
right: -100%; right: -100%;
} }
.panel.left { .panel.left {
@ -130,16 +122,11 @@
visibility: visible; visibility: visible;
} }
.panel.expanded { .panel.expanded {
height: 100%; height: calc(100% - var(--current-footer-height));
max-height: 100%; max-height: calc(100% - var(--current-footer-height));
} }
.umap-caption-bar-enabled .panel { .umap-caption-bar-enabled .panel {
bottom: var(--footer-height);
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-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 */ /* Controls */
/* *********** */ /* *********** */
@ -617,9 +635,6 @@ ul.photon-autocomplete {
.umap-edit-enabled .umap-main-edit-toolbox { .umap-edit-enabled .umap-main-edit-toolbox {
top: 0; top: 0;
} }
.umap-edit-enabled .umap-caption-bar {
display: none;
}
.umap-caption-bar h3, .umap-caption-bar h3,
.umap-main-edit-toolbox h3 { .umap-main-edit-toolbox h3 {
display: inline; display: inline;
@ -642,12 +657,9 @@ ul.photon-autocomplete {
padding-left: 20px; padding-left: 20px;
display: inline-block; /* Prevents underline on hover. */ display: inline-block; /* Prevents underline on hover. */
} }
.umap-edit-enabled .leaflet-top {
top: 46px;
}
.umap-caption-bar-enabled .umap-caption-bar { .umap-caption-bar-enabled .umap-caption-bar {
display: block; display: block;
height: 46px; height: var(--header-height);
background-color: #fff; background-color: #fff;
width: 100%; width: 100%;
position: absolute; position: absolute;
@ -656,15 +668,12 @@ ul.photon-autocomplete {
right: 0; right: 0;
padding: 0 0 0 5px; padding: 0 0 0 5px;
text-align: left; text-align: left;
line-height: 46px; line-height: 100%;
cursor: auto; cursor: auto;
border-top: 1px solid var(--color-lightGray); border-top: 1px solid var(--color-lightGray);
opacity: 0.93; opacity: 0.93;
z-index: 1000; z-index: 1000;
} }
.umap-caption-bar-enabled .leaflet-bottom {
bottom: 46px;
}
.umap-help { .umap-help {
font-style: italic; font-style: italic;
} }

View file

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