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 @@ -

<%= t :sign_in %>

- -<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> -
- <%= f.label t(:email) -%> - <%= f.email_field :email, size: 32, autofocus: true, autocomplete: "email" %> -
- -
- <%= f.label t(:password) -%> - <%= f.password_field :password, size: 32, autocomplete: "current-password" %> -
+<%= tabular_form_for resource, as: resource_name, url: session_path(resource_name) do |f| %> + <%= f.email_field :email, required: true, size: 32, autofocus: true, autocomplete: "email" %> + <%= f.password_field :password, required: true, size: 32, autocomplete: "current-password" %> <% if devise_mapping.rememberable? %> -
- <%= f.label t(:remember_me) -%> - <%= f.check_box :remember_me %> -
+ <%= f.check_box :remember_me %> <% end %> -
- <%= f.submit t(:sign_in) %> -
+ <%= f.submit t(:sign_in) %> <% end %> <%= render "users/shared/links" %>