diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 011c869..eb3ba78 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -115,16 +115,31 @@ a:not(:hover) { opacity: 1; } -.field + .field, .field + .actions { - margin-top: 0.8em; +form { + margin: 0 auto; + display: table; + border-spacing: 0.8em; } -form label { - display: inline-block; - font-weight: bold; +.form-row { + display: table-row; +} +.form-label, .form-field { + display: table-cell; +} +.form-label { font-size: 0.9em; padding-right: 0.25em; text-align: right; - width: 50%; +} +.form-label.required { + font-weight: bold; +} +.form-label.error { + color: #ff1f5b; +} +.form-actions { + caption-side: bottom; + display: table-caption; } form input[type=submit] { display: block; diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index de6be79..9dacfca 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -1,2 +1,28 @@ module ApplicationHelper + class TabularFormBuilder < ActionView::Helpers::FormBuilder + (field_helpers - [:label]).each do |selector| + class_eval <<-RUBY_EVAL, __FILE__, __LINE__ + 1 + def #{selector}(method, options = {}) + @template.content_tag :div, class: "form-row" do + label_text = label(method, options.delete(:label)) + label_class = ["form-label"] + label_class << "required" if options[:required] + label_class << "error" if @object&.errors[method].present? + + @template.content_tag(:div, label_text, class: label_class) + + @template.content_tag(:div, super, class: "form-field") + end + end + RUBY_EVAL + end + + def submit(value, options = {}) + @template.content_tag :div, super, class: "form-actions" + end + end + + def tabular_form_for(record, options = {}, &block) + options.merge! builder: TabularFormBuilder + form_for(record, **options, &block) + end end diff --git a/app/views/users/sessions/new.html.erb b/app/views/users/sessions/new.html.erb index 1ef2d35..4f6b051 100644 --- a/app/views/users/sessions/new.html.erb +++ b/app/views/users/sessions/new.html.erb @@ -1,26 +1,12 @@ -