tune ui

Author: jasl

test/dummy/app/assets/stylesheets/application.scss

@@ -64,3 +64,7 @@ body {
     margin-top: 0;
   }
 }
+
+.field {
+  flex: 1;
+}

test/dummy/app/views/_form_core/fields/_date_range_field.html.erb

@@ -4,9 +4,19 @@
   <%= f.label field.name, field.label, class: 'label' %>
   <div class="control">
     <%= f.fields_for field.name do |ff| %>
-      <%= ff.date_field :start, field.start_options.merge(class: 'input', id: "#{field.id}_start", required: field.required) %>
-      ~
-      <%= ff.date_field :finish, field.finish_options.merge(class: 'input', id: "#{field.id}_finish", required: field.required) %>
+      <div class="field has-addons">
+        <p class="control is-expanded">
+          <%= ff.date_field :start, class: 'input', id: "#{field.id}_start", required: field.required, **field.start_options %>
+        </p>
+        <p class="control">
+          <a class="button is-static">
+            ~
+          </a>
+        </p>
+        <p class="control is-expanded">
+          <%= ff.date_field :finish, class: 'input', id: "#{field.id}_finish", required: field.required, **field.finish_options %>
+        </p>
+      </div>
     <% end %>
   </div>
   <% if field.hint.present? %>

test/dummy/app/views/_form_core/fields/_datetime_range_field.html.erb

@@ -4,9 +4,19 @@
   <%= f.label field.name, field.label, class: 'label' %>
   <div class="control">
     <%= f.fields_for field.name do |ff| %>
-      <%= ff.datetime_field :start, field.start_options.merge(class: 'input', id: "#{field.id}_start", required: field.required) %>
-      ~
-      <%= ff.datetime_field :finish, field.finish_options.merge(class: 'input', id: "#{field.id}_finish", required: field.required) %>
+      <div class="field has-addons">
+        <p class="control is-expanded">
+          <%= ff.datetime_field :start, class: 'input', id: "#{field.id}_start", required: field.required, **field.start_options %>
+        </p>
+        <p class="control">
+          <a class="button is-static">
+            ~
+          </a>
+        </p>
+        <p class="control is-expanded">
+          <%= ff.datetime_field :finish, class: 'input', id: "#{field.id}_finish", required: field.required, **field.finish_options %>
+        </p>
+      </div>
     <% end %>
   </div>
   <% if field.hint.present? %>

test/dummy/app/views/_form_core/fields/_integer_range_field.html.erb

@@ -4,9 +4,19 @@
   <%= f.label field.name, field.label, class: 'label' %>
   <div class="control">
     <%= f.fields_for field.name do |ff| %>
-      <%= ff.number_field :start, class: 'input', id: "#{field.id}_start", required: field.required, **field.start_options %>
-      ~
-      <%= ff.number_field :finish, class: 'input', id: "#{field.id}_finish", required: field.required, **field.finish_options %>
+      <div class="field has-addons">
+        <p class="control is-expanded">
+          <%= ff.number_field :start, class: 'input', id: "#{field.id}_start", required: field.required, **field.start_options %>
+        </p>
+        <p class="control">
+          <a class="button is-static">
+            ~
+          </a>
+        </p>
+        <p class="control is-expanded">
+          <%= ff.number_field :finish, class: 'input', id: "#{field.id}_finish", required: field.required, **field.finish_options %>
+        </p>
+      </div>
     <% end %>
   </div>
   <% if field.hint.present? %>