Skip to content

Commit aea0ef0

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
1 parent a2e4287 commit aea0ef0

File tree

3 files changed

+41
-28
lines changed

3 files changed

+41
-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: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2991,6 +2991,18 @@ lizmap-mouse-position > div.coords-unit > select{
29912991
z-index: 1;
29922992
}
29932993

2994+
#tabdigitization {
2995+
padding-top: 5px;
2996+
}
2997+
2998+
#edition-geomtool-container,
2999+
#edition-geomtool-restart-drawing,
3000+
lizmap-paste-geom > button,
3001+
lizmap-paste-stored-geom > button {
3002+
margin-left: 5px;
3003+
}
3004+
3005+
29943006
.edition-tabs .nav-pills a {
29953007
color: black;
29963008
}
@@ -3124,6 +3136,7 @@ lizmap-mouse-position > div.coords-unit > select{
31243136
margin-bottom: 5px;
31253137
}
31263138

3139+
31273140
#edition-point-coord-form-group h3{
31283141
color: black;
31293142
padding-left: 5%;
@@ -3663,14 +3676,14 @@ lizmap-fullscreen button svg {
36633676
margin: auto;
36643677
}
36653678

3666-
lizmap-paste-geom {
3667-
display: inline-block;
3679+
lizmap-paste-geom,
3680+
lizmap-paste-stored-geom {
3681+
display: contents;
36683682
}
36693683

36703684
lizmap-paste-geom svg {
3671-
width: 24px;
3672-
height: 24px;
3673-
display: inline-block;
3685+
width: 20px;
3686+
height: 20px;
36743687
vertical-align: text-top;
36753688
}
36763689

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1050,12 +1050,12 @@ 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;
1056+
border-left: 1px solid var(--color-contrasted-elements);
1057+
border-right: 1px solid var(--color-contrasted-elements);
1058+
border-bottom: 1px solid var(--color-contrasted-elements);
10591059
}
10601060

10611061
#edition div.tab-pane.attribute-layer-child-content,

0 commit comments

Comments
 (0)