diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index ecffa00..1f32f9b 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -87,14 +87,16 @@ input[type=submit] { .application-menu a.active, .application-menu a:hover, .application-menu a:hover:focus-visible, -input[type=submit]:hover { +input[type=submit]:hover, +input[type=submit]:hover:focus-visible { background-color: #009ade; border-color: #009ade; color: white; cursor: pointer; fill: white; } -.application-menu a:focus-visible { +.application-menu a:focus-visible, +input[type=submit]:focus-visible { background-color: #f3f3f3; } .application-menu a.active:focus-visible { @@ -148,35 +150,22 @@ input[type=submit]:hover { opacity: 1; } -form { +form table { + border-spacing: 0.8rem; margin: 0 auto; - display: table; - border-spacing: 0.8em; } -.form-row { - display: table-row; -} -.form-label, .form-field { - display: table-cell; - vertical-align: middle; -} -.form-label { +form tr td:first-child { font-size: 0.9em; padding-right: 0.25em; text-align: right; } -.form-label.required { +form td.required { font-weight: bold; } -.form-label.error { +form td.error { color: #ff1f5b; } -.form-actions { - caption-side: bottom; - display: table-caption; -} form input[type=submit] { - display: block; float: none; font-size: 0.9em; margin: 0 auto; diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 64ad301..f42b2e3 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -3,27 +3,32 @@ module ApplicationHelper (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 + @template.content_tag :tr 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? + label_class = @template.class_names(required: options[:required], + error: @object&.errors[method].present?) - @template.content_tag(:div, label_text, class: label_class) + - @template.content_tag(:div, super, class: "form-field") + @template.content_tag(:td, label_text, class: label_class) + + @template.content_tag(:td, super) end end RUBY_EVAL end def submit(value, options = {}) - @template.content_tag :div, super, class: "form-actions" + @template.content_tag :tr do + @template.content_tag :td, super, colspan: 2 + end + end + + def table_form_for(&block) + @template.content_tag(:table) { yield(self) } end end def tabular_form_for(record, options = {}, &block) options.merge! builder: TabularFormBuilder - form_for(record, **options, &block) + form_for(record, **options, &-> (f) { f.table_form_for(&block) }) end def image_link_to(name, image = nil, options = nil, html_options = nil)