feat: django-modeltranslation admin tabs support (#244)

Author: lukasvinclav

README.md

@@ -653,7 +653,21 @@ class ExampleAdmin(ModelAdmin, ImportExportModelAdmin):
 
 ### django-modeltranslation
 
-By default Unfold does not contain any specific implementation for django-modeltranslation and the application is partially supported. Basic behavior is supported except of tab navigation provided by django-modeltranslation. At the moment there are no plans in supporting this behavior.
+By default, Unfold supports django-modeltranslation and `TabbedTranslationAdmin` admin class for the tabbed navigation is implemented with custom styling as well.
+
+```python
+from django.contrib import admin
+
+from modeltranslation.admin import TabbedTranslationAdmin
+from unfold.admin import ModelAdmin
+
+from .models import MyModel
+
+
+@admin.register(MyModel)
+class MyModelAdmin(ModelAdmin, TabbedTranslationAdmin):
+    pass
+```
 
 For django-modeltranslation fields for spefic languages, it is possible to define custom flags which will appear as a suffix in field's label. It is recommended to use emojis as suffix.
 

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

@@ -586,3 +586,26 @@ trix-toolbar[id^="trix-toolbar-"] {
 .trix-active {
   @apply text-primary-600;
 }
+
+/*******************************************************
+ django-modeltranslation
+ *******************************************************/
+.ui-tabs {
+  @apply flex flex-col;
+}
+
+.ui-tabs.ui-widget .ui-tabs-nav {
+  @apply bg-gray-100 border-0 flex gap-2 m-0 mb-4 mr-auto p-1 rounded text-sm dark:bg-white/[.04] after:hidden;
+}
+
+.ui-tabs.ui-widget .ui-tabs-nav li {
+  @apply border-0 top-0;
+}
+
+.ui-tabs.ui-widget .ui-tabs-nav li a {
+  @apply bg-transparent border-0 flex flex-row font-medium items-center m-0 px-2.5 py-1 rounded text-gray-400 text-sm hover:bg-gray-700/[.04] hover:text-gray-700 dark:hover:bg-white/[.04] dark:hover:text-white;
+}
+
+.ui-tabs.ui-widget .ui-tabs-nav li.ui-tabs-active a {
+  @apply flex flex-row font-medium items-center px-2.5 py-1 rounded  bg-white shadow-sm text-gray-700 hover:bg-white dark:bg-gray-900 dark:hover:bg-gray-900 dark:text-white;
+}

src/unfold/styles.css

@@ -15,7 +15,7 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro
 
     <div class="aligned border border-gray-200 mb-8 rounded-md pt-3 px-3 shadow-sm dark:border-gray-800">
         {% for line in fieldset %}
-            <div class="block {% if not line.fields|length_is:'1' %}flex flex-row flex-wrap gap-x-8 {% else %}block {% 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="form-row block {% if not line.fields|length_is:'1' %}flex flex-row flex-wrap gap-x-8{% 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 group {% if field.errors %}errors {% endif %}{% if not line.fields|length_is:1 %}lg:max-w-xs w-full {% endif %}{% if not forloop.parentloop.last %} mb-6 {% else %} mb-3{% endif %} {% if row %}flex-row items-center{% else %}flex-col{% endif %}">
                         {% if field.is_checkbox %}