From 573a33df5afe3e2550e06688bb243d05eb632aa7 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Fri, 15 Mar 2024 21:41:11 +0100 Subject: [PATCH] chore: use CSS vars for panel --- umap/static/umap/css/panel.css | 40 +++++++++++++------------ umap/static/umap/js/modules/panel.js | 2 +- umap/static/umap/map.css | 44 ++++++++++++++-------------- umap/static/umap/vars.css | 8 +++++ 4 files changed, 52 insertions(+), 42 deletions(-) diff --git a/umap/static/umap/css/panel.css b/umap/static/umap/css/panel.css index d3bed4bc..71d17d3e 100644 --- a/umap/static/umap/css/panel.css +++ b/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; - left: 10px; + right: var(--panel-gutter); + 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% - 32px); /* Minus size of toolbox */ - padding: 10px; - padding-top: 32px; + height: calc(100% - var(--panel-header-height)); /* Minus size of toolbox */ + padding: var(--panel-gutter); } .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; - width: 400px; + margin-top: var(--panel-gutter); + width: var(--panel-width); } .panel.condensed { max-height: 500px; bottom: initial; } .panel.right { - margin-right: 10px; - right: -400px; + right: calc(0px - var(--panel-width)); } .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; + } } diff --git a/umap/static/umap/js/modules/panel.js b/umap/static/umap/js/modules/panel.js index d2ea1918..8d95fcda 100644 --- a/umap/static/umap/js/modules/panel.js +++ b/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' diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 00a0da91..3ff54116 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -32,13 +32,13 @@ } .leaflet-control-fullscreen a:hover, .leaflet-control-fullscreen a { - height: 36px; - width: 36px; + height: var(--control-size); + width: var(--control-size); background-size: 36px 68px; } .leaflet-touch .leaflet-control-fullscreen a { - height: 36px; - width: 36px; + height: var(--control-size); + 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; - width: 36px; - line-height: 36px; + height: var(--control-size); + width: var(--control-size); + 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; - line-height: 36px; + height: var(--control-size); + 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; - width: 36px; + height: var(--control-size); + 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; - line-height: 36px; + height: var(--control-size); + 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; - height: 36px; + width: var(--control-size); + 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; - width: 36px; - line-height: 36px; + height: var(--control-size); + width: var(--control-size); + 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; - height: 36px; - line-height: 34px; + width: var(--control-size); + height: var(--control-size); + line-height: var(--control-size); } /* Links are blue by default */ .leaflet-container a { diff --git a/umap/static/umap/vars.css b/umap/static/umap/vars.css index c72a52ac..962c9eef 100644 --- a/umap/static/umap/vars.css +++ b/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; }