style edit form

Author: digitaltom

app/assets/stylesheets/feature.css

@@ -273,6 +273,10 @@
   left: 0.75rem;
 }
 
+.edit-ui .left-label {
+  width: 5rem;
+}
+
 #feature-show-title-ui {
   padding-top: 0.2rem;
   gap: 0.5rem;

app/views/maps/modals/feature/_edit_ui.haml

@@ -22,70 +22,73 @@
   .feature-edit-section.hidden{ 'data-edit-section': "style" }
     .feature-section-card.pt-2
       #point-size-ui.edit-ui.edit-point
-        %label{ for: "point-size"} Size:
+        %label.left-label{ for: "point-size"} Size:
         %input.slider#point-size{ type: "range", min: "1", max: "75", value: "1", 'data-action': "input->feature--edit#addUndo input->feature--edit#updatePointSize  change->feature--edit#saveFeature" }
         %span#point-size-val.text-muted.small
 
       #point-scaling-ui.edit-ui.edit-point
-        %label.edit-polygon.edit-line{ for: "point-scaling"} Point scaling:
+        %label.left-label.edit-polygon.edit-line{ for: "point-scaling"} Point scaling:
         %input#point-scaling{type: "checkbox", data: { action: "input->feature--edit#addUndo input->feature--edit#updatePointScaling change->feature--edit#saveFeature"} }
         %label{ for: "point-scaling"} Scaled with zoom
 
       #line-width-ui.edit-ui.edit-line
-        %label{ for: "line-width"} Width:
+        %label.left-label{ for: "line-width"} Width:
         %input.slider#line-width{ type: "range", min: "1", max: "15", value: "1", 'data-action': "input->feature--edit#addUndo input->feature--edit#updateLineWidth change->feature--edit#saveFeature" }
         %span#line-width-val.text-muted.small
 
       #outline-width-ui.edit-ui.edit-polygon
-        %label{ for: "outline-width"} Line width:
+        %label.left-label{ for: "outline-width"} Line width:
         %input.slider#outline-width{ type: "range", min: "0", max: "15", value: "1", 'data-action': "input->feature--edit#addUndo input->feature--edit#updateOutLineWidth change->feature--edit#saveFeature" }
         %span#outline-width-val.text-muted.small
 
       #stroke-color-ui.edit-ui.edit-line.edit-polygon.edit-point
-        %label.edit-polygon.edit-line{ for: "stroke-color"} Line color:
-        %label.edit-point{ for: "stroke-color"} Border color:
+        %label.left-label.edit-polygon.edit-line{ for: "stroke-color"} Line color:
+        %label.left-label.edit-point{ for: "stroke-color"} Border color:
         %input.form-control#stroke-color{ type: "color", 'data-action': "input->feature--edit#addUndo input->feature--edit#updateStrokeColor change->feature--edit#saveFeature" }
         %div.edit-polygon.edit-point
           %input#stroke-color-transparent{type: "checkbox", data: { action: "input->feature--edit#addUndo input->feature--edit#updateStrokeColorTransparent change->feature--edit#saveFeature"} }
           %label{ for: "stroke-color-transparent"}transparent
 
       #fill-color-ui.edit-ui.edit-polygon.edit-point
-        %label{ for: "fill-color"} Fill color:
+        %label.left-label{ for: "fill-color"} Fill color:
         %input.form-control#fill-color{ type: "color", 'data-action': "input->feature--edit#addUndo input->feature--edit#updateFillColor change->feature--edit#saveFeature" }
         %div
           %input#fill-color-transparent{type: "checkbox", value: 'transparent', data: { action: "input->feature--edit#addUndo input->feature--edit#updateFillColorTransparent change->feature--edit#saveFeature"} }
           %label{ for: "fill-color-transparent"}transparent
 
       #opacity-ui.edit-ui.edit-polygon
-        %label{ for: "opacity"} Opacity:
+        %label.left-label{ for: "opacity"} Opacity:
         %input.slider#opacity{ type: "range", min: "1", max: "10", value: "7", 'data-action': "input->feature--edit#addUndo input->feature--edit#updateOpacity change->feature--edit#saveFeature" }
         %span#opacity-val.text-muted.small
 
       #marker-symbol-ui.edit-ui.edit-point
-        %label{ for: "marker-symbol"} Symbol:
+        %label.left-label{ for: "marker-symbol"} Symbol:
         %span#emoji
         %input.form-control#marker-symbol{ type: "hidden", inputmode: 'emoji' }
-        #marker-symbol-select.btn.btn-blue.ps-1.pe-2{ 'data-action': "click->feature--edit#openEmojiPicker" }
+        #marker-symbol-select.btn.btn-secondary.ps-1.pe-2{ 'data-action': "click->feature--edit#openEmojiPicker" }
           %i.bi.bi-pencil-square.ms-1#no-emoji
 
       #marker-image-ui.edit-ui.edit-point
-        %label{ for: "marker-image"} Image:
+        %label.left-label{ for: "marker-image"} Image:
         .feature-image
         - if @user
-          %label.btn.btn-blue.p-1.ps-2.pe-2{for: 'marker-image'}
+          %label.btn.btn-secondary.p-1.ps-2.pe-2{for: 'marker-image'}
             %i.bi.bi-upload
           %input.form-control#marker-image.hidden{ type: "file", 'data-action': "input->feature--edit#addUndo change->feature--edit#updateMarkerImage" }
         - else
           %i.bi.bi-info-circle
             Please log in to upload images
 
       #fill-extrusion-height-ui.edit-ui.edit-line.edit-polygon
-        %label{ for: "fill-extrusion-height"} Height:
+        %label.left-label{ for: "fill-extrusion-height"} Height:
         %input.slider#fill-extrusion-height{ type: "range", min: "0", max: "500", value: "0", 'data-action': "input->feature--edit#addUndo input->feature--edit#updateFillExtrusionHeight change->feature--edit#saveFeature" }
         %span#fill-extrusion-height-val.text-muted.small
 
       #show-km-markers-ui.edit-ui.edit-line
-        %label.edit-line{ for: "show-km-markers"} Show km markers:
+        %label.left-label.edit-line{ for: "show-km-markers"} 
+          Distance
+          %br 
+          markers:
         %input#show-km-markers{type: "checkbox", data: { action: "input->feature--edit#addUndo input->feature--edit#updateShowKmMarkers change->feature--edit#saveFeature"} }
 
   .feature-edit-section.hidden{ 'data-edit-section': "advanced" }