fix: tabular inline stripes / delete link (#1190)

Author: lukasvinclav

src/unfold/static/admin/js/inlines.js

@@ -96,12 +96,23 @@
         .removeClass(options.emptyCssClass)
         .addClass(options.formCssClass)
         .attr("id", options.prefix + "-" + nextIndex);
+
       addInlineDeleteButton(row);
       row.find("*").each(function () {
         updateElementIndex(this, options.prefix, totalForms.val());
       });
+
       // Insert the new form when it has been fully edited.
-      row.insertBefore($(template));
+      // !CHANGED from original
+      if ($(template).parent().is("tbody")) {
+        row
+          .wrap('<tbody class="template"></tbody>')
+          .parent()
+          .insertBefore($(template).parent());
+      } else {
+        row.insertBefore($(template));
+      }
+
       // Update number of total forms.
       $(totalForms).val(parseInt(totalForms.val(), 10) + 1);
       nextIndex += 1;
@@ -183,7 +194,13 @@
       if (prevRow.length && prevRow.hasClass("row-form-errors")) {
         prevRow.remove();
       }
-      row.remove();
+
+      // !CHANGED from original
+      if (deleteButton.parent().parent().parent().parent().is("tbody")) {
+        row.parent().remove();
+      } else {
+        row.remove();
+      }
       nextIndex -= 1;
       // Pass the deleted form to the post-delete callback, if provided.
       if (options.removed) {
@@ -245,8 +262,11 @@
     }
 
     // Create the delete buttons for all unsaved inlines:
+    // !CHANGED from original, added parent() and used find() instead of filter()
     $this
-      .filter(
+      .parent()
+      .parent()
+      .find(
         "." +
           options.formCssClass +
           ":not(.has_original):not(." +

src/unfold/static/unfold/css/styles.css

@@ -264,12 +264,13 @@ table tr.selected th {
   @apply hidden;
 }
 
+.tabular-table tbody.has_original,
 .tabular-table .template tr {
   @apply border-t border-base-200 dark:border-base-800;
 }
 
 .add-row {
-  @apply align-middle bg-base-50 px-3 py-5 font-normal text-right dark:bg-white/[.02];
+  @apply align-middle bg-white px-3 py-5 font-normal text-right dark:bg-base-900;
 }
 
 [data-inline-type="stacked"] .add-row {

src/unfold/styles.css

@@ -18,9 +18,8 @@ <h2 id="{{ inline_admin_formset.formset.prefix }}-heading" class="bg-base-100 bo
             {% if inline_admin_formset.is_collapsible %}</summary>{% endif %}
 
             {{ inline_admin_formset.formset.non_form_errors }}
-
             <div class="border border-base-200 mb-6 overflow-x-auto rounded shadow-sm dark:border-base-800" data-simplebar data-simplebar-auto-hide="false">
-                <table class="tabular-table w-full" {% if inline_admin_formset.opts.ordering_field %}data-ordering-field="{{ inline_admin_formset.opts.ordering_field }}" x-on:end="sortRecords" x-sort.ghost{% endif %}>
+                <table class="tabular-table w-full [&>tbody:nth-child(odd)]:bg-base-50 [&>tbody:nth-child(odd)]:dark:bg-white/[.02]" {% if inline_admin_formset.opts.ordering_field %}data-ordering-field="{{ inline_admin_formset.opts.ordering_field }}" x-on:end="sortRecords" x-sort.ghost{% endif %}>
                     {% include "unfold/helpers/edit_inline/tabular_heading.html" %}
 
                     {% for inline_admin_form in inline_admin_formset %}

src/unfold/templates/admin/edit_inline/tabular.html

@@ -12,14 +12,16 @@
     {% if field.is_readonly %}
         {% include "unfold/helpers/field_readonly_value.html" with tabular=1 %}
     {% else %}
-        {{ field.field }}
+        <div class="flex flex-col">
+            {{ field.field }}
 
-        {% if field.field.errors|length > 0 %}
-            <div class="mt-1 text-red-600 text-sm dark:text-red-500">
-                {% for error in field.field.errors %}
-                    {{ error }}
-                {% endfor %}
-            </div>
-        {% endif %}
+            {% if field.field.errors|length > 0 %}
+                <div class="mt-1 text-red-600 text-sm dark:text-red-500">
+                    {% for error in field.field.errors %}
+                        {{ error }}
+                    {% endfor %}
+                </div>
+            {% endif %}
+        </div>
     {% endif %}
 </div>