feat: form inputs with errors

unfoldadmin · Oct 30, 2022 · b4e4a23 · b4e4a23
1 parent d94f9b2
commit b4e4a23
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 18 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,4 @@
 __pycache__
 venv
 node_modules
-dist/
+dist/
diff --git a/src/unfold/static/unfold/css/styles.css b/src/unfold/static/unfold/css/styles.css
diff --git a/src/unfold/templates/admin/edit_inline/tabular.html b/src/unfold/templates/admin/edit_inline/tabular.html
@@ -116,7 +116,7 @@ <h2 class="bg-gray-100 font-semibold mb-6 px-4 py-3 rounded-md text-gray-900 tex
                                                                     {{ field.field }}
 
                                                                     {% if field.field.errors|length > 0 %}
-                                                                        <div class="mt-1 ext-sm text-red-600">
+                                                                        <div class="mt-1 text-red-600 text-sm">
                                                                             {% for error in field.field.errors %}
                                                                                 {{ error }}
                                                                             {% endfor %}

diff --git a/src/unfold/templates/admin/includes/fieldset.html b/src/unfold/templates/admin/includes/fieldset.html
@@ -13,7 +13,7 @@ <h2 class="bg-gray-100 font-semibold mb-6 px-4 py-3 rounded-md text-gray-900 tex
 
     <div class="aligned border mb-8 rounded-md pt-3 px-3 shadow-sm">
         {% for line in fieldset %}
-            <div class="block {% if line.fields|length_is:'1' and line.errors %} errors{% endif %}{% if not line.has_visible_field %} hidden{% endif %}{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}">
+            <div class="block {% if line.fields|length_is:'1' and line.errors %} group errors{% endif %}{% if not line.has_visible_field %} hidden{% endif %}{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}">
                 {% for field in line %}
                     <div class="flex {% if not forloop.parentloop.last %} mb-6 {% else %} mb-3{% endif %} {% if row %}flex-row items-center{% else %}flex-col{% endif %}" {% if not line.fields|length_is:'1' %} class="fieldBox{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% if not field.is_readonly and field.errors %} errors{% endif %}{% if field.field.is_hidden %} hidden{% endif %}"{% elif field.is_checkbox %} class="checkbox-row"{% endif %}>
                         {% if not line.fields|length_is:'1' and not field.is_readonly %}

diff --git a/src/unfold/templates/unfold/helpers/actions_row.html b/src/unfold/templates/unfold/helpers/actions_row.html
@@ -17,4 +17,3 @@
         </ul>
     </div>
 {% endif %}
-
diff --git a/src/unfold/widgets.py b/src/unfold/widgets.py
@@ -36,6 +36,8 @@
     "focus:ring-primary-300",
     "focus:border-primary-600",
     "focus:outline-none",
+    "group-[.errors]:border-red-600",
+    "group-[.errors]:focus:ring-red-200",
 ]
 
 INPUT_CLASSES = [*BASE_INPUT_CLASSES, "max-w-2xl"]

diff --git a/styles.css b/styles.css
@@ -107,10 +107,6 @@ select:after {
   display: none;
 }
 
-.block.errors input {
-  @apply border-red-600;
-}
-
 /*******************************************************
  Table
  *******************************************************/
@@ -474,17 +470,21 @@ fieldset.collapsed .collapse-toggle {
 /*******************************************************
  Errors
  *******************************************************/
-.errorlist li {
-  @apply bg-red-100 text-red-600 p-3 rounded-md text-sm;
-}
+/*.errorlist li {*/
+/*  @apply bg-red-100 text-red-600 p-3 rounded-md text-sm;*/
+/*}*/
 
-fieldset > .errorlist li {
-  @apply mb-3;
-}
+/*fieldset > .errorlist li {*/
+/*  @apply mb-3;*/
+/*}*/
 
-td > .errorlist li {
-  @apply mt-3 mx-3;
-}
+/*td > .errorlist li {*/
+/*  @apply mt-3 mx-3;*/
+/*}*/
+
+/*.block.errors input {*/
+/*  @apply border-red-600;*/
+/*}*/
 
 /*******************************************************
  Misc