fix: inline collapsible (#870)

Author: lukasvinclav

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

@@ -443,7 +443,7 @@ h3 span:nth-child(3) {
 }
 
 /*******************************************************
- Collapsed
+ Fieldset collapsible
  *******************************************************/
 fieldset.collapsed > div {
   display: none;
@@ -462,6 +462,19 @@ fieldset.collapsed .collapse-toggle {
   @apply inline;
 }
 
+fieldset details > summary {
+  @apply list-none
+}
+
+fieldset details > summary:after {
+  @apply material-symbols-outlined absolute right-3 top-3.5;
+  content: "expand_more";
+}
+
+fieldset details[open] > summary:after {
+  @apply rotate-180;
+}
+
 /*******************************************************
  Calendar
  *******************************************************/

src/unfold/styles.css

@@ -1,15 +1,19 @@
 {% load admin_urls i18n unfold %}
 
 <div class="js-inline-admin-formset inline-group" id="{{ inline_admin_formset.formset.prefix }}-group" data-inline-type="stacked" data-inline-formset="{{ inline_admin_formset.inline_formset_data }}" {% if inline_admin_formset.opts.tab %}x-show="activeTab == '{{ inline_admin_formset.opts.verbose_name|slugify }}'"{% else %}x-show="activeTab == 'general'"{% endif %}>
-    <fieldset class="module {{ inline_admin_formset.classes }}">
-        <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-md text-font-important-light text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-font-important-dark {% if inline_admin_formset.opts.tab %}hidden{% endif %}">
+    <fieldset class="module relative {{ inline_admin_formset.classes }}" aria-labelledby="{{ inline_admin_formset.formset.prefix }}-heading">
+        {% if inline_admin_formset.is_collapsible %}<details><summary>{% endif %}
+
+        <h2 id="{{ inline_admin_formset.formset.prefix }}-heading" class="inline-heading bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-md text-font-important-light text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-font-important-dark {% if inline_admin_formset.opts.tab %}hidden{% endif %} {% if inline_admin_formset.is_collapsible %} cursor-pointer{% endif %}">
             {% if inline_admin_formset.formset.max_num == 1 %}
                 {{ inline_admin_formset.opts.verbose_name|capfirst }}
             {% else %}
                 {{ inline_admin_formset.opts.verbose_name_plural|capfirst }}
             {% endif %}
         </h2>
 
+        {% if inline_admin_formset.is_collapsible %}</summary>{% endif %}
+
         {{ inline_admin_formset.formset.management_form }}
         {% include "unfold/helpers/messages/error.html" with errors=inline_admin_formset.formset.non_form_errors %}
 
@@ -92,5 +96,7 @@ <h3 class="bg-gray-50 border-b border-gray-200 flex font-medium items-center gap
                 </div>
             {% endfor %}
         </div>
+
+        {% if inline_admin_formset.is_collapsible %}</details>{% endif %}
     </fieldset>
 </div>

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

@@ -4,15 +4,19 @@
     <div class="tabular inline-related {% if forloop.last %}last-related{% endif %}">
         {{ inline_admin_formset.formset.management_form }}
 
-        <fieldset class="module {{ inline_admin_formset.classes }} min-w-0">
-            <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-md text-font-important-light text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-font-important-dark {% if inline_admin_formset.opts.tab %}hidden{% endif %}">
+        <fieldset class="module relative {{ inline_admin_formset.classes }} min-w-0" aria-labelledby="{{ inline_admin_formset.formset.prefix }}-heading">
+            {% if inline_admin_formset.is_collapsible %}<details><summary>{% endif %}
+
+            <h2 id="{{ inline_admin_formset.formset.prefix }}-heading" class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 rounded-md text-font-important-light text-sm lg:-mx-4 dark:bg-white/[.02] dark:border dark:border-gray-800 dark:text-font-important-dark {% if inline_admin_formset.opts.tab %}hidden{% endif %} {% if inline_admin_formset.is_collapsible %} cursor-pointer{% endif %}">
                 {% if inline_admin_formset.formset.max_num == 1 %}
                     {{ inline_admin_formset.opts.verbose_name|capfirst }}
                 {% else %}
                     {{ inline_admin_formset.opts.verbose_name_plural|capfirst }}
                 {% endif %}
             </h2>
 
+            {% if inline_admin_formset.is_collapsible %}</summary>{% endif %}
+
             {{ inline_admin_formset.formset.non_form_errors }}
 
             <div class="border border-gray-200 mb-6 overflow-x-auto rounded-md shadow-sm dark:border-gray-800" data-simplebar data-simplebar-auto-hide="false">
@@ -173,6 +177,8 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro
                     {% endfor %}
                 </table>
             </div>
+
+            {% if inline_admin_formset.is_collapsible %}</details>{% endif %}
         </fieldset>
     </div>
 </div>

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

@@ -6,8 +6,6 @@
     </a>
 
     <nav class="absolute bg-white border flex flex-col leading-none py-1 -right-2 rounded shadow-lg top-7 w-52 z-50 dark:bg-gray-800 dark:border-gray-700" x-cloak x-show="openUserLinks" @click.outside="openUserLinks = false">
-        {% include "unfold/helpers/caret.html" %}
-
         <div class="border-b border-gray-100 flex flex-row flex-shrink-0 items-start justify-start mb-1 pb-1 dark:border-gray-700">
             <span class="block mx-1 px-3 py-2 truncate">
                 {% firstof user.get_short_name user.get_username %}

src/unfold/templates/unfold/helpers/account_links.html

@@ -11,8 +11,6 @@
     </a>
 
     <div class="absolute bg-white border flex flex-col leading-none py-1 -right-2 rounded shadow-lg top-7 w-52 z-50 dark:bg-gray-800 dark:border-gray-700" x-cloak x-show="openLanguageLinks" @click.outside="openLanguageLinks = false">
-        {% include "unfold/helpers/caret.html" %}
-
         {% for language in languages %}
             <form action="{% url 'set_language' %}" method="post" class="flex w-full">
                 {% csrf_token %}

src/unfold/templates/unfold/helpers/caret.html

@@ -8,8 +8,6 @@
     </a>
 
     <nav class="absolute bg-white border flex flex-col leading-none py-1 -right-2 rounded shadow-lg top-7 w-40 z-50 dark:bg-gray-800 dark:border-gray-700" x-cloak x-show="openTheme" @click.outside="openTheme = false">
-        {% include "unfold/helpers/caret.html" %}
-
         <a class="cursor-pointer flex flex-row leading-none mx-1 px-3 py-1.5 rounded hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-gray-200"
            x-on:click="adminTheme = 'dark'"
            x-bind:class="adminTheme == 'dark' && 'text-primary-600 dark:text-primary-500 dark:hover:!text-primary-500 hover:!text-primary-600'">