chore: better align icon and title in panels

This commit is contained in:
Yohan Boniface 2024-03-15 18:26:49 +01:00
parent 8279ae8a62
commit cd01e4085f
5 changed files with 13 additions and 6 deletions

View file

@ -84,6 +84,9 @@
.panel.dark .toolbox li:hover {
background-color: #353c3e;
}
.panel h3 {
line-height: 3;
}
@media all and (orientation:landscape) {
.panel {
top: 0;

View file

@ -179,8 +179,11 @@
</g>
<path id="copy" d="m58.25 962.61v3.5h4v4h3.5v-7.5zm-4 4v7.5h7.5v-7.5z" fill="#4d4d4d" style="paint-order:fill markers stroke"/>
<path id="path1" d="m134 964.36-4 4 4.2888 3.9769" fill="none" stroke="#4d4d4d" stroke-width="2"/>
<path id="path2" d="m80 966.4 4-3.0339 4 3" fill="none" stroke="#464646" stroke-width="1.5"/>
<path id="path3" d="m80 970.36 4 3.0743 4-3.0743" fill="none" stroke="#464646" stroke-width="1.5"/>
<path id="path4" d="m84 963.36v10" fill="none" stroke="#464646" stroke-width="1.5"/>
<g id="g1" fill="none" stroke="#464646" stroke-width="1.5">
<path id="path2" d="m80 966.4 4-3.0339 4 3"/>
<path id="path3" d="m80 970.36 4 3.0743 4-3.0743"/>
<path id="path4" d="m84 963.36v10"/>
</g>
<path id="path437" d="m113.38 943.56 0.9072 0.5491c0.1786 0.10817 0.2366 0.34196 0.1294 0.52223-0.0319 0.0535-0.0764 0.0983-0.1294 0.13055l-7.0072 4.2412-7.0071-4.2412c-0.17869-0.10817-0.23664-0.34196-0.12942-0.52222 0.0319-0.0536 0.0763-0.0984 0.12942-0.13056l0.90714-0.5491 6.0999 3.6922zm0 3.578 0.9072 0.5491c0.1786 0.1081 0.2366 0.3419 0.1294 0.5222-0.0319 0.0535-0.0764 0.0983-0.1294 0.1306l-6.6189 4.0061c-0.239 0.1447-0.53753 0.1447-0.77652 0l-6.6188-4.0061c-0.17869-0.1082-0.23664-0.342-0.12942-0.5223 0.0319-0.0536 0.0763-0.0984 0.12942-0.1305l0.90714-0.5491 6.0999 3.6921zm-5.7117-10.575 6.6189 4.0062c0.1786 0.10815 0.2366 0.34196 0.1294 0.52222-0.0319 0.0536-0.0764 0.0984-0.1294 0.13056l-7.0072 4.2412-7.0071-4.2412c-0.17869-0.10815-0.23664-0.34196-0.12942-0.52222 0.0319-0.0536 0.0763-0.0984 0.12942-0.13056l6.6188-4.0062c0.23899-0.14465 0.53752-0.14465 0.77652 0z" fill="#4d4d4d"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View file

@ -10,7 +10,7 @@
<path d="M 16.0401,2.3158 H 2.005 v 14.0351 h 14.0351 z" fill="#ffffff" id="path2351" />
</mask>
</defs>
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="34.194139" inkscape:cx="84.356562" inkscape:cy="155.65533" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" inkscape:snap-grids="true" inkscape:snap-to-guides="true" inkscape:showpageshadow="2" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1">
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="9.0368573" inkscape:cx="95.885104" inkscape:cy="122.00038" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="true" inkscape:window-width="1920" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" inkscape:snap-grids="true" inkscape:snap-to-guides="true" inkscape:showpageshadow="2" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1">
<inkscape:grid type="xygrid" id="grid3004" empspacing="4" visible="true" enabled="true" snapvisiblegridlinesonly="true" originx="0" originy="0" spacingy="1" spacingx="1" units="px" />
<sodipodi:guide orientation="-1,0" position="24,168" id="guide3084" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
<sodipodi:guide orientation="0,1" position="0,120" id="guide3086" inkscape:locked="false" inkscape:label="" inkscape:color="rgb(0,134,229)" />
@ -203,5 +203,6 @@
<path style="fill:none;fill-rule:evenodd;stroke:#464646;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1" d="m 80,970.36218 4,3.07427 4,-3.07427" id="path3" sodipodi:nodetypes="ccc" />
<path style="fill:none;fill-rule:evenodd;stroke:#464646;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1" d="m 84.000003,963.36218 v 10" id="path4" />
</g>
<path d="m 113.37897,943.55658 0.9072,0.5491 c 0.1786,0.10817 0.2366,0.34196 0.1294,0.52223 -0.0319,0.0535 -0.0764,0.0983 -0.1294,0.13055 l -7.00717,4.24121 -7.00708,-4.24121 c -0.17869,-0.10817 -0.23664,-0.34196 -0.12942,-0.52222 0.0319,-0.0536 0.0763,-0.0984 0.12942,-0.13056 l 0.90714,-0.5491 6.09994,3.69219 z m 0,3.57799 0.9072,0.5491 c 0.1786,0.1081 0.2366,0.3419 0.1294,0.5222 -0.0319,0.0535 -0.0764,0.0983 -0.1294,0.1306 l -6.61891,4.0061 c -0.239,0.1447 -0.53753,0.1447 -0.77652,0 l -6.61882,-4.0061 c -0.17869,-0.1082 -0.23664,-0.342 -0.12942,-0.5223 0.0319,-0.0536 0.0763,-0.0984 0.12942,-0.1305 l 0.90714,-0.5491 6.09994,3.6921 z m -5.71171,-10.57501 6.61891,4.00621 c 0.1786,0.10815 0.2366,0.34196 0.1294,0.52222 -0.0319,0.0536 -0.0764,0.0984 -0.1294,0.13056 l -7.00717,4.24119 -7.00708,-4.24119 c -0.17869,-0.10815 -0.23664,-0.34196 -0.12942,-0.52222 0.0319,-0.0536 0.0763,-0.0984 0.12942,-0.13056 l 6.61882,-4.00621 c 0.23899,-0.14465 0.53752,-0.14465 0.77652,0 z" fill="#4d4d4d" id="path437" style="fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:0.178;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 44 KiB

View file

@ -134,7 +134,7 @@ export default class Browser {
// https://github.com/Leaflet/Leaflet/pull/9052
DomEvent.disableClickPropagation(container)
DomUtil.createTitle(container, translate('Browse data'), 'layers')
DomUtil.createTitle(container, translate('Browse data'), 'icon-layers')
const formContainer = DomUtil.create('div', '', container)
this.dataContainer = DomUtil.create('div', '', container)

View file

@ -128,7 +128,7 @@ L.DomUtil.createIcon = (parent, className, title, size = 16) => {
L.DomUtil.createButtonIcon = (parent, className, title, size = 16) => {
return L.DomUtil.element(
'button',
{ className: `icon icon-${size} ${className}`, title: title },
{ className: `icon icon-${size} ${className}`, title: title || '' },
parent
)
}