Better form appearance, with larger paddings

Gemfile.lock

@@ -271,7 +271,7 @@ GEM
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
     public_suffix (3.0.1)
-    puma (3.11.0)
+    puma (3.11.2)
     rack (2.0.3)
     rack-livereload (0.3.16)
       rack
@@ -291,7 +291,7 @@ GEM
       sprockets-rails (>= 2.0.0)
     rails-assets-jquery-sparkline (2.1.3)
     rails-assets-leaflet (1.3.1)
-    rails-assets-leaflet.markercluster (1.2.0)
+    rails-assets-leaflet.markercluster (1.3.0)
       rails-assets-leaflet (>= 1.0.3)
     rails-controller-testing (1.0.2)
       actionpack (~> 5.x, >= 5.0.1)

app/assets/stylesheets/form.sass

@@ -31,10 +31,19 @@ body.mce-content-body
   & > label, .field_with_errors > label
     width: 10em
     margin: 0
-    padding: 0.5em
+    padding: 0.8em
     text-align: right
+  .helper
+    color: #888
+    padding: 0.8em
+    font-style: italic
+    margin-left: 0
   input, textarea, .mce-tinymce, div.tagsinput, .field_with_errors:last-child
     flex-grow: 1
+    &[type=number], &[type=checkbox]
+      flex-grow: unset
+      margin-left: 0
+      margin-right: 0
   select
     margin-left: 0
     margin-right: 0
@@ -83,7 +92,7 @@ input, textarea, select, a.button, .actions > button, .mce-tinymce, div.tagsinpu
   label
     color: #258
     cursor: pointer
-    padding: 0.5em 0
+    padding: 0.8em 0
     display: inline-block
     &:hover
       color: #222

app/assets/stylesheets/tags.sass

@@ -24,19 +24,20 @@ div.tagsinput
   vertical-align: middle
   span.tag
     margin: 0
-    padding: 0.5em
+    padding: 0.75em
     font-size: inherit
     font-family: inherit
-  #event_tag_list_addTag
+  #event_tag_list_addTag, #tag_addTag
     float: none
     text-align: left
-    &:first-child #event_tag_list_tag
+    &:first-child
-      width: 100% !important
+      #event_tag_list_tag, #tag_tag
+        width: 100% !important
   input, .ui-autocomplete-input
-    width: 30% !important
+    width: 8em !important
     border: solid 0.25em transparent !important
+    padding: 0.6em
     font-size: inherit
-    min-width: 8em
     margin-right: 0
     margin-bottom: 0
     &:focus

app/views/pages/filter.haml

@@ -16,7 +16,7 @@
       = label_tag 'near[distance]', t('.near_distance')
       = number_field_tag 'near[distance]', params['near[distance]'],
                          placeholder: t('.near_distance_helper')
-      km
+      %span.helper km
 
     .field.region
       = label_tag :region, t('.region')
@@ -26,18 +26,18 @@
         include_blank: true
 
     .field.tags
-      = label_tag :tag, t('.tag')
+      = label_tag :tag, t('.tag'), for: 'tag_tag'
       = text_field_tag :tag
 
     .field.future
       = label_tag :future, t('.past')
-      = check_box_tag :future, :false
+      = check_box_tag :future
-      = t '.past_helper'
+      %span.helper= t '.past_helper'
 
     .field.iframe
       = label_tag :iframe, t('.iframe')
-      = check_box_tag :iframe, :false
+      = check_box_tag :iframe
-      = t '.iframe_helper'
+      %span.helper= t '.iframe_helper'
 
     .actions
       = button_tag do
@@ -74,17 +74,17 @@
 
 %fieldset
   = form_tag events_url, method: :get do
-    .helper
-      :markdown
-        #{t '.period_year_helper'}
     .field.period_year
       = label_tag 'period[year]', t('.period_year')
       = number_field_tag 'period[year]', params['period[year]'],
                          placeholder: "Ex: #{(Time.zone.today + 7.days).year}"
+      .helper
+        :markdown
+          #{t '.period_year_helper'}
     .field.period_week
       = label_tag 'period[week]', t('.period_week')
       = number_field_tag 'period[week]', params['period[week]'],
-                           placeholder: "Ex: #{(Time.zone.today + 7.days).cweek}"
+                         placeholder: "Ex: #{(Time.zone.today + 7.days).cweek}"
 
     .actions
       = button_tag formaction: digest_url(:markdown) do