Skip to content

Commit 0eb53bd

Browse files
meyerlormeyerlor
committed
fix(edition): fix digitization tab layout overflow and button alignment
Bootstrap 5's .row negative gutters caused form-select/form-control to overflow the fieldset in the digitization coordinate form. Add g-0 (zero gutters), col-auto on labels and col on .controls divs to contain them. Also fix several CSS layout issues in the digitization tab: - Add padding-top to #tabdigitization to give content breathing room - Add margin-left to geomtool buttons to align with the themed fieldset - Fix lizmap-paste-geom button height: use display:contents on the custom element wrapper and size the inner SVG to match the other icon sprites - Remove the three-sided border on #tabdigitization added by the theme (matches existing border:none already applied to #tabform)
1 parent a2e4287 commit 0eb53bd

File tree

3 files changed

+43
-28
lines changed

3 files changed

+43
-28
lines changed

‎lizmap/modules/view/templates/map_edition.tpl‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -72,12 +72,12 @@
7272
<div id="edition-point-coord-form-group" class="jforms-table-group">
7373
<div id="handle-point-coord">
7474
<h3>{@view~edition.point.coord.title@}</h3>
75-
<div class="form-group row mb-3">
76-
<label class="jforms-label form-label" for="edition-point-coord-crs"
75+
<div class="form-group row g-0 mb-2">
76+
<label class="jforms-label form-label col-auto" for="edition-point-coord-crs"
7777
id="edition-point-coord-crs-label">{@view~edition.point.coord.crs.label@}</label>
78-
<div class="controls">
78+
<div class="controls col">
7979
<select name="coord-crs" id="edition-point-coord-crs"
80-
class="jforms-ctrl-menulist form-select">
80+
class="jforms-ctrl-menulist form-select form-select-sm">
8181
<option value="4326" selected="selected"><span>EPSG:4326</span></option>
8282
<option id="edition-point-coord-crs-layer" value="" style="display:none;">
8383
</option>
@@ -86,47 +86,47 @@
8686
</select>
8787
</div>
8888
</div>
89-
<div class="form-group row mb-3">
90-
<label class="jforms-label form-label" for="edition-point-coord-x"
89+
<div class="form-group row g-0 mb-2">
90+
<label class="jforms-label form-label col-auto" for="edition-point-coord-x"
9191
id="edition-point-coord-x-label">{@view~edition.point.coord.x.label@}</label>
92-
<div class="controls">
92+
<div class="controls col">
9393
<input name="coord-x" id="edition-point-coord-x"
9494
class="jforms-ctrl-input form-control form-control-sm" value="" type="text">
9595
</div>
9696
</div>
97-
<div class="form-group row mb-3">
98-
<label class="jforms-label form-label" for="edition-point-coord-y"
97+
<div class="form-group row g-0 mb-2">
98+
<label class="jforms-label form-label col-auto" for="edition-point-coord-y"
9999
id="edition-point-coord-y-label">{@view~edition.point.coord.y.label@}</label>
100-
<div class="controls">
100+
<div class="controls col">
101101
<input name="coord-y" id="edition-point-coord-y"
102102
class="jforms-ctrl-input form-control form-control-sm" value="" type="text">
103103
</div>
104104
</div>
105-
<div class="form-group row mb-3 hidden">
105+
<div class="form-group row g-0 mb-2 hidden">
106106
<label
107-
class="jforms-label form-label">{@view~edition.segment.length.label@}</label>
108-
<div class="controls">
107+
class="jforms-label form-label col-auto">{@view~edition.segment.length.label@}</label>
108+
<div class="controls col">
109109
<label id="edition-segment-length"></label>
110110
</div>
111111
</div>
112-
<div class="form-group row mb-3 hidden">
112+
<div class="form-group row g-0 mb-2 hidden">
113113
<label
114-
class="jforms-label form-label">{@view~edition.segment.angle.label@}</label>
115-
<div class="controls">
114+
class="jforms-label form-label col-auto">{@view~edition.segment.angle.label@}</label>
115+
<div class="controls col">
116116
<label id="edition-segment-angle"></label>
117117
</div>
118118
</div>
119-
<div class="form-group row mb-3">
120-
<div class="controls">
119+
<div class="form-group row g-0 mb-2">
120+
<div class="controls col">
121121
<button name="submit" id="edition-point-coord-add"
122122
class="btn btn-sm">{@view~edition.point.coord.add.label@}</button>
123123
<button name="submit" id="edition-point-coord-submit"
124124
class="btn btn-sm">{@view~edition.point.coord.finalize.label@}</button>
125125
</div>
126126
</div>
127-
<div class="form-group row mb-3" id="edition-point-coord-geolocation-group"
127+
<div class="form-group row g-0 mb-2" id="edition-point-coord-geolocation-group"
128128
style="display:none;">
129-
<div class="controls form-check">
129+
<div class="controls form-check col">
130130
<label class="jforms-label checkbox form-check-label" for="edition-point-coord-geolocation"
131131
id="edition-point-coord-geolocation-label">
132132
<input name="checked" id="edition-point-coord-geolocation"

‎lizmap/www/assets/css/map.css‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2991,6 +2991,23 @@ lizmap-mouse-position > div.coords-unit > select{
29912991
z-index: 1;
29922992
}
29932993

2994+
#edition div.tab-pane,
2995+
div.popup_lizmap_dd div.tab-pane {
2996+
border: none !important;
2997+
}
2998+
2999+
#tabdigitization {
3000+
padding-top: 5px;
3001+
}
3002+
3003+
#edition-geomtool-container,
3004+
#edition-geomtool-restart-drawing,
3005+
lizmap-paste-geom > button,
3006+
lizmap-paste-stored-geom > button {
3007+
margin-left: 5px;
3008+
}
3009+
3010+
29943011
.edition-tabs .nav-pills a {
29953012
color: black;
29963013
}
@@ -3124,6 +3141,7 @@ lizmap-mouse-position > div.coords-unit > select{
31243141
margin-bottom: 5px;
31253142
}
31263143

3144+
31273145
#edition-point-coord-form-group h3{
31283146
color: black;
31293147
padding-left: 5%;
@@ -3663,14 +3681,14 @@ lizmap-fullscreen button svg {
36633681
margin: auto;
36643682
}
36653683

3666-
lizmap-paste-geom {
3667-
display: inline-block;
3684+
lizmap-paste-geom,
3685+
lizmap-paste-stored-geom {
3686+
display: contents;
36683687
}
36693688

36703689
lizmap-paste-geom svg {
3671-
width: 24px;
3672-
height: 24px;
3673-
display: inline-block;
3690+
width: 20px;
3691+
height: 20px;
36743692
vertical-align: text-top;
36753693
}
36763694

‎lizmap/www/themes/default/css/map.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1050,9 +1050,6 @@ div.popup_lizmap_dd .nav-tabs > li.active > a:focus {
10501050

10511051
#edition div.tab-pane,
10521052
div.popup_lizmap_dd div.tab-pane {
1053-
border-left: 1px solid var(--color-contrasted-elements);
1054-
border-right: 1px solid var(--color-contrasted-elements);
1055-
border-bottom: 1px solid var(--color-contrasted-elements);
10561053
padding: 5px;
10571054
padding-bottom: 10px;
10581055
margin-bottom: 5px;

0 commit comments

Comments
 (0)