Style form error messages

With an icon, and sentence case (upcase_first is similar to humanize, but simpler (https://dev.to/junko911/rails-helper-methods-to-change-the-form-of-strings-1h9c#upcase-first))
This commit is contained in:
David Cook
2023-09-20 12:29:16 +10:00
committed by Rachel Arnould
parent 3b19a19776
commit fee126d6e1
3 changed files with 15 additions and 3 deletions

View File

@@ -38,11 +38,11 @@
= form.fields_for("products", product, index: nil) do |product_form|
%tbody.relaxed{ 'data-record-id': product_form.object.id }
%tr
%td.align-left.header
%td.field.align-left.header
= product_form.hidden_field :id
= product_form.text_field :name, 'aria-label': t('admin.products_page.columns.name')
= error_message_on product, :name
%td.align-right
%td.field
= product_form.text_field :sku, 'aria-label': t('admin.products_page.columns.sku')
= error_message_on product, :sku
%td.align-right

View File

@@ -62,6 +62,7 @@
th,
td {
vertical-align: top;
padding: $padding-tbl-cell;
border: none;

View File

@@ -120,9 +120,20 @@ span.info {
}
// Inline error message
.formError {
display: inline-block;
color: $color-error;
font-style: italic;
font-size: 85%;
// Icon on left, with subsequent lines indented
text-indent: -0.6em;
margin-left: 1.2em;
@extend .icon-remove-sign;
@extend [class^="icon-"];
&:before {
margin-right: 0.3em;
}
}
}