fix: compressed switch checkbox (#505)

Author: lukasvinclav

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

@@ -6,27 +6,53 @@
     {% for field in line %}
         <div class="flex group {% if adminform.model_admin.compressed_fields %} field-row{% endif %}{% if not line.fields|length == 1 and not adminform.model_admin.compressed_fields %} lg:max-w-xs flex-grow{% endif %}{% if field.errors %} errors {% endif %}{% if not forloop.parentloop.last %} {% if adminform.model_admin.compressed_fields %}mb-3{% else %}mb-6{% endif %}{% else %} pb-3{% endif %} {% if adminform.model_admin.compressed_fields %}flex-col lg:flex-row lg:gap-2 {% else %}flex-col{% endif %}">
             {% if field.is_checkbox %}
-                <div class="flex flex-row">
-                    {{ field.field }}
-
-                    <div class="flex flex-col">
-                        {{ field.label_tag }}
-
-                        {% if field.field.help_text %}
-                            <div class="ml-2 -mt-1">
-                                {% include "unfold/helpers/help_text.html" with help_text=field.field.help_text %}
-                            </div>
-                        {% endif %}
-
-                        {% if field.errors %}
-                            <span class="mt-1 text-red-600 text-sm dark:text-red-500">
-                                {{ field.errors }}
-                            </span>
-                        {% endif %}
+                {% if adminform.model_admin.compressed_fields %}
+                    <div class="flex flex-row gap-4">
+                        <div class="font-medium h-5 flex items-start -ml-2 min-w-32 w-32 lg:min-w-48 lg:w-48">
+                            {{ field.label_tag }}
+                        </div>
+
+                        <div class="flex-grow">
+                            <div class="flex flex-col lg:flex-row">
+                                {{ field.field }}
+
+                                {% if field.field.help_text %}
+                                    <div class="lg:-mt-2 lg:ml-2">
+                                        {% include "unfold/helpers/help_text.html" with help_text=field.field.help_text %}
+                                    </div>
+                                {% endif %}
+                                </div>
+
+                            {% if field.errors %}
+                                <span class="mt-1 text-red-600 text-sm dark:text-red-500">
+                                    {{ field.errors }}
+                                </span>
+                            {% endif %}
+                        </div>
                     </div>
-                </div>
+                {% else %}
+                    <div class="flex flex-row">
+                        {{ field.field }}
+
+                        <div class="flex flex-col">
+                            {{ field.label_tag }}
+
+                            {% if field.field.help_text %}
+                                <div class="ml-2 -mt-1">
+                                    {% include "unfold/helpers/help_text.html" with help_text=field.field.help_text %}
+                                </div>
+                            {% endif %}
+
+                            {% if field.errors %}
+                                <span class="mt-1 text-red-600 text-sm dark:text-red-500">
+                                    {{ field.errors }}
+                                </span>
+                            {% endif %}
+                        </div>
+                    </div>
+                {% endif %}
             {% else %}
-                <div class="{% if adminform.model_admin.compressed_fields %} min-w-48 mt-2 w-48{% endif %}">
+                <div class="{% if adminform.model_admin.compressed_fields %} min-w-48 lg:mt-2 w-48{% endif %}">
                     {{ field.label_tag }}
                 </div>
 

src/unfold/templates/unfold/helpers/fieldset_row.html

@@ -227,6 +227,7 @@
     "rounded-full",
     "transition-all",
     "w-8",
+    "min-w-8",
     "after:absolute",
     "after:bg-white",
     "after:content-['']",