jeff/umap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: use CSS vars for panel

Browse source
This commit is contained in:
Yohan Boniface 2024-03-15 21:41:11 +01:00
parent 211a86f27c
commit 573a33df5a
4 changed files with 52 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
umap/static/umap/css/panel.css
View file

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

2
umap/static/umap/js/modules/panel.js
View file

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

44
umap/static/umap/map.css
View file

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

8
umap/static/umap/vars.css
View file

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