Karavel/fixin.me
0
0
Fork 0
forked from fixin.me/fixin.me
Code Pull Requests Activity

Fix focus on form submit button

Browse Source
This commit is contained in:
cryptogopher 2023-04-11 00:38:16 +02:00
parent 3cb63a302c
commit b54fcebf8c
2 changed files with 22 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/assets/stylesheets/application.css
View File

@ -87,14 +87,16 @@ input[type=submit] {
.application-menu a.active, .application-menu a.active,
.application-menu a:hover, .application-menu a:hover,
.application-menu a:hover:focus-visible, .application-menu a:hover:focus-visible,
input[type=submit]:hover { input[type=submit]:hover,
input[type=submit]:hover:focus-visible {
background-color: #009ade; background-color: #009ade;
border-color: #009ade; border-color: #009ade;
color: white; color: white;
cursor: pointer; cursor: pointer;
fill: white; fill: white;
} }
.application-menu a:focus-visible { .application-menu a:focus-visible,
input[type=submit]:focus-visible {
background-color: #f3f3f3; background-color: #f3f3f3;
} }
.application-menu a.active:focus-visible { .application-menu a.active:focus-visible {
@ -148,35 +150,22 @@ input[type=submit]:hover {
opacity: 1; opacity: 1;
} }
form { form table {
border-spacing: 0.8rem;
margin: 0 auto; margin: 0 auto;
display: table;
border-spacing: 0.8em;
} }
.form-row { form tr td:first-child {
display: table-row;
}
.form-label, .form-field {
display: table-cell;
vertical-align: middle;
}
.form-label {
font-size: 0.9em; font-size: 0.9em;
padding-right: 0.25em; padding-right: 0.25em;
text-align: right; text-align: right;
} }
.form-label.required { form td.required {
font-weight: bold; font-weight: bold;
} }
.form-label.error { form td.error {
color: #ff1f5b; color: #ff1f5b;
} }
.form-actions {
caption-side: bottom;
display: table-caption;
}
form input[type=submit] { form input[type=submit] {
display: block;
float: none; float: none;
font-size: 0.9em; font-size: 0.9em;
margin: 0 auto; margin: 0 auto;

21
app/helpers/application_helper.rb
View File

@ -3,27 +3,32 @@ module ApplicationHelper
(field_helpers - [:label]).each do |selector| (field_helpers - [:label]).each do |selector|
class_eval <<-RUBY_EVAL, __FILE__, __LINE__ + 1 class_eval <<-RUBY_EVAL, __FILE__, __LINE__ + 1
def #{selector}(method, options = {}) 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_text = label(method, options.delete(:label))
label_class = ["form-label"] label_class = @template.class_names(required: options[:required],
label_class << "required" if options[:required] error: @object&.errors[method].present?)
label_class << "error" if @object&.errors[method].present?
@template.content_tag(:div, label_text, class: label_class) + @template.content_tag(:td, label_text, class: label_class) +
@template.content_tag(:div, super, class: "form-field") @template.content_tag(:td, super)
end end
end end
RUBY_EVAL RUBY_EVAL
end end
def submit(value, options = {}) 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
end end
def tabular_form_for(record, options = {}, &block) def tabular_form_for(record, options = {}, &block)
options.merge! builder: TabularFormBuilder options.merge! builder: TabularFormBuilder
form_for(record, **options, &block) form_for(record, **options, &-> (f) { f.table_form_for(&block) })
end end
def image_link_to(name, image = nil, options = nil, html_options = nil) def image_link_to(name, image = nil, options = nil, html_options = nil)