Support RTL using tailwindcss

package.json

@@ -6,7 +6,7 @@
     "tailwind:watch": "tailwindcss -i src/unfold/styles.css -o src/unfold/static/unfold/css/styles.css --watch --minify"
   },
   "dependencies": {
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10"

src/unfold/styles.css

@@ -109,7 +109,7 @@ table tr.selected {
  Datetime
  *******************************************************/
 .datetimeshortcuts {
-  @apply absolute flex flex-row-reverse items-center right-0 text-0 top-px;
+  @apply absolute flex flex-row-reverse items-center right-0 rtl:left-0 text-0 top-px;
 }
 
 .datetimeshortcuts a {
@@ -134,7 +134,7 @@ table tr.selected {
 }
 
 .date-icon:after {
-  @apply border-l h-9 items-center justify-center leading-none material-symbols-outlined py-2 text-base text-center w-9 hover:text-gray-700 dark:border-gray-700;
+  @apply border-l rtl:border-r h-9 items-center justify-center leading-none material-symbols-outlined py-2 text-base text-center w-9 hover:text-gray-700 dark:border-gray-700;
   content: "edit";
 }
 
@@ -147,7 +147,7 @@ table tr.selected {
 }
 
 .clock-icon:after {
-  @apply border-l h-9 items-center justify-center material-symbols-outlined py-2 text-base text-center w-9 hover:text-gray-700 dark:border-gray-700 dark:hover:text-white;
+  @apply border-l rtl:border-r h-9 items-center justify-center material-symbols-outlined py-2 text-base text-center w-9 hover:text-gray-700 dark:border-gray-700 dark:hover:text-white;
   content: "edit";
 }
 

src/unfold/templates/admin/actions.html

@@ -1,4 +1,5 @@
 {% load i18n %}
+{% get_current_language_bidi as is_rtl %}
 
 <div class="actions flex flex-col md:flex-row md:items-center">
     {% block actions %}
@@ -20,7 +21,7 @@
 
             {% block actions-submit %}
                 <button type="submit" class="bg-white border flex items-center h-9.5 ml-3 px-2 rounded shadow-sm text-gray-400 w-9.5 hover:text-gray-700 focus:outline-none dark:bg-gray-900 dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-200" title="{% translate "Run the selected action" %}" name="index" value="{{ action_index|default:0 }}">
-                    <span class="material-symbols-outlined md-18">chevron_right</span>
+                    <span class="material-symbols-outlined md-18">chevron_{% if is_rtl %}left{% else %}right{% endif %}</span>
                 </button>
             {% endblock %}
         </div>

src/unfold/templates/admin/app_list.html

@@ -25,9 +25,9 @@ <h3 class="font-medium my-3 text-gray-900 text-sm dark:text-gray-200">
 
                                             {% if model.admin_url %}
                                                 <a href="{{ model.admin_url }}" id="link-{{ app.app_label }}-{{ model.object_name|lower }}"
-                                                   class="block border border-transparent flex h-11 items-center -mx-3 px-3 py-2 rounded-md transition-all {% if model.admin_url in request.path|urlencode %}bg-gray-100 font-semibold text-primary-500 dark:border dark:border-gray-800 dark:bg-white/[.02]{% else %}text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200{% endif %}">
+                                                   class="border border-transparent flex h-11 items-center -mx-3 px-3 py-2 rounded-md transition-all {% if model.admin_url in request.path|urlencode %}bg-gray-100 font-semibold text-primary-500 dark:border dark:border-gray-800 dark:bg-white/[.02]{% else %}text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200{% endif %}">
                                                     {% if model.icon %}
-                                                        <span class="material-symbols-outlined md-18 mr-3">{{ model.icon }}</span>
+                                                        <span class="material-symbols-outlined md-18 ms-3">{{ model.icon }}</span>
                                                     {% endif %}
 
                                                     <span class="text-sm">

src/unfold/templates/admin/change_list.html

@@ -95,10 +95,10 @@
 
                                     {% block filters %}
                                         {% if cl.has_filters %}
-                                            <a class="{% if cl.has_active_filters %}bg-primary-600 border-primary-600 text-white{% else %}bg-white text-gray-500 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:hover:text-gray-200 dark:text-gray-400{% endif %} border cursor-pointer flex font-medium group items-center px-3 py-2 rounded-md shadow-sm text-sm md:ml-auto md:mt-0" x-on:click="filterOpen = true" x-on:keydown.escape.window="filterOpen = false">
+                                            <a class="{% if cl.has_active_filters %}bg-primary-600 border-primary-600 text-white{% else %}bg-white text-gray-500 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:hover:text-gray-200 dark:text-gray-400{% endif %} border cursor-pointer flex justify-center gap-2 font-medium group px-3 py-2 rounded-md shadow-sm text-sm md:ms-auto md:mt-0" x-on:click="filterOpen = true" x-on:keydown.escape.window="filterOpen = false">
                                                 {% trans "Filters" %}
 
-                                                <span class="material-symbols-outlined md-18 ml-auto -mr-1 pl-4 {% if cl.has_active_filters %}text-white{% else %}text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 dark:text-gray-500{% endif %}">filter_list</span>
+                                                <span class="material-symbols-outlined md-18 {% if cl.has_active_filters %}text-white{% else %}text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 dark:text-gray-500{% endif %}">filter_list</span>
                                             </a>
                                         {% endif %}
                                     {% endblock %}

src/unfold/templates/admin/change_list_results.html

@@ -11,7 +11,7 @@
         <thead class="hidden lg:table-header-group">
             <tr>
                 {% for header in result_headers %}
-                    <th class="align-middle font-medium px-3 py-2 text-left text-gray-400 text-sm {{ header.class_attrib }} {% if "action-toggle" in header.text and forloop.counter == 1 %}w-10{% endif %}" scope="col">
+                    <th class="align-middle font-medium px-3 py-2 text-start text-gray-400 text-sm {{ header.class_attrib }} {% if "action-toggle" in header.text and forloop.counter == 1 %}w-10{% endif %}" scope="col">
                         <div class="flex items-center">
                             <div class="text">
                                 {% if header.sortable %}
@@ -25,7 +25,7 @@
 
                             {% if header.sortable %}
                                 {% if header.sort_priority > 0 %}
-                                    <div class="sortoptions flex items-center ml-2">
+                                    <div class="sortoptions flex items-center ms-2">
                                         <a href="{{ header.url_toggle }}" class="flex items-center leading-none text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 toggle {% if header.ascending %}ascending{% else %}descending{% endif %}" title="{% translate "Toggle sorting" %}">
                                             {% if header.ascending %}
                                                 <span class="block material-symbols-outlined">arrow_circle_down</span>
@@ -34,13 +34,13 @@
                                             {% endif %}
                                         </a>
 
-                                        <a class="sortremove flex items-center leading-none ml-1 text-gray-400 transition-all hover:text-red-700 dark:hover:text-red-500" href="{{ header.url_remove }}" title="{% translate "Remove from sorting" %}">
+                                        <a class="sortremove flex items-center leading-none ms-1 text-gray-400 transition-all hover:text-red-700 dark:hover:text-red-500" href="{{ header.url_remove }}" title="{% translate "Remove from sorting" %}">
                                             <span class="block material-symbols-outlined">cancel</span>
                                         </a>
                                     </div>
 
                                     {% if num_sorted_fields > 1 %}
-                                        <span class="sortpriority font-medium ml-2 text-xs" title="{% blocktranslate with priority_number=header.sort_priority %}Sorting priority: {{ priority_number }}{% endblocktranslate %}">
+                                        <span class="sortpriority font-medium ms-2 text-xs" title="{% blocktranslate with priority_number=header.sort_priority %}Sorting priority: {{ priority_number }}{% endblocktranslate %}">
                                             {{ header.sort_priority }}
                                         </span>
                                     {% endif %}
@@ -56,7 +56,7 @@
             {% for result in results %}
                 {% if result.form and result.form.non_field_errors %}
                     <tr>
-                        <td class="text-left" colspan="{{ result|length }}">
+                        <td class="text-start" colspan="{{ result|length }}">
                             {{ result.form.non_field_errors }}
                         </td>
                     </tr>

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

@@ -109,7 +109,7 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro
                                                 {% with is_last_col=forloop.last %}
                                                     {% for field in line %}
                                                         {% if field.is_readonly or not field.field.is_hidden %}
-                                                            <td{% if field.field.name %} class="field-{{ field.field.name }}{% if field.field.errors|length > 0 %} errors{% endif %}{% if inline_admin_form.original %} p-3 lg:py-3{% else %} py-3{% endif %}{% if field.is_checkbox %} align-middle{% else %} align-top{% endif %} {% if is_last_row and not inline_admin_formset.has_add_permission %}{% if is_last_col %}border-0 {% else %}border-b lg:border-0{% endif %}{% else %}border-b{% endif %} border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left text-sm lg:table-cell dark:border-gray-800"{% endif %} data-label="{{ field.field.label }}">
+                                                            <td{% if field.field.name %} class="field-{{ field.field.name }}{% if field.field.errors|length > 0 %} errors{% endif %}{% if inline_admin_form.original %} p-3 lg:py-3{% else %} py-3{% endif %}{% if field.is_checkbox %} align-middle{% else %} align-top{% endif %} {% if is_last_row and not inline_admin_formset.has_add_permission %}{% if is_last_col %}border-0 {% else %}border-b lg:border-0{% endif %}{% else %}border-b{% endif %} border-gray-200 flex items-center before:capitalize before:content-[attr(data-label)] before:mr-auto rtl:before:ml-auto before:text-gray-500 before:w-72 lg:before:hidden font-normal px-3 text-left rtl:text-right text-sm lg:table-cell dark:border-gray-800"{% endif %} data-label="{{ field.field.label }}">
                                                                 {% if field.is_readonly %}
                                                                     <p class="bg-gray-50 border font-medium max-w-lg px-3 py-2 rounded-md shadow-sm text-gray-500 text-sm truncate whitespace-nowrap dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800">
                                                                         {{ field.contents }}

src/unfold/templates/admin/includes/fieldset.html

@@ -19,7 +19,7 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro
                 {% 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 %}
-                            <div class="flex flex-row items-center">
+                            <div class="flex flex-row items-center gap-2">
                                 {{ field.field }}{{ field.label_tag }}
                             </div>
                         {% else %}

src/unfold/templates/admin/nav_sidebar.html

@@ -4,17 +4,25 @@
     <div @click="sidebarDesktopOpen = !sidebarDesktopOpen"
          hx-get="{% url "admin:toggle_sidebar" %}"
          hx-swap="none"
-         class="block bg-white border cursor-pointer fixed flex h-6 hidden items-center justify-center rounded-full text-gray-500 top-5 -translate-x-1/2 w-6 z-50 xl:flex dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
-         :class="{'ml-6 rotate-180': !sidebarDesktopOpen, 'ml-72': sidebarDesktopOpen}">
-        <span class="material-symbols-outlined md-16">
-            first_page
+         class="xl:flex hidden bg-white border cursor-pointer fixed h-8 w-8 items-center justify-center rounded-full text-gray-500 top-5 -translate-x-1/2 z-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200"
+         :class="{'ms-6': !sidebarDesktopOpen, 'ms-72 rtl:rotate-180': sidebarDesktopOpen}">
+        <span x-show='sidebarDesktopOpen' class="material-symbols-outlined">
+            menu_open
+        </span>
+        <span x-show='!sidebarDesktopOpen' class="material-symbols-outlined">
+            menu
         </span>
     </div>
 
     <div @click="sidebarMobileOpen = !sidebarMobileOpen"
-         class="fixed bottom-0 bg-gray-700 flex cursor-pointer flex items-center left-0 mb-2 ml-2 justify-center px-2 py-1 rounded-full shadow-sm text-xs text-white uppercase z-50 xl:hidden"
-        :class="{'ml-72 -translate-x-1/2': sidebarMobileOpen}">
-        {% trans "Menu" %}
+         class="fixed bottom-0 bg-gray-700 flex cursor-pointer items-center mb-2 ms-2 w-8 justify-center px-2 py-1 rounded-full shadow-sm text-xs text-white uppercase z-50 xl:hidden"
+        :class="{'ms-72 -translate-x-1/2 rtl:rotate-180': sidebarMobileOpen}">
+        <span x-show='sidebarMobileOpen' class="material-symbols-outlined">
+            menu_open
+        </span>
+        <span x-show='!sidebarMobileOpen' class="material-symbols-outlined">
+            menu
+        </span>
     </div>
 
     <div :class="{'xl:block': sidebarDesktopOpen, 'xl:hidden': !sidebarDesktopOpen, 'max-xl:fixed': sidebarMobileOpen, 'hidden': !sidebarMobileOpen }">

src/unfold/templates/admin/search_form.html

@@ -6,7 +6,7 @@
             <div class="bg-white border flex rounded-md overflow-hidden shadow-sm focus-within:ring focus-within:ring-primary-300 focus-within:border-primary-600 dark:bg-gray-900 dark:border-gray-700 dark:focus-within:border-primary-600 dark:focus-within:ring-primary-700 dark:focus-within:ring-opacity-50">
                 <input class="font-medium h-9 px-3 text-gray-500 text-sm w-40 lg:w-60 focus:outline-none dark:bg-gray-900 dark:text-gray-400" type="text" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" placeholder="{% trans 'Type to search' %}" />
 
-                <button type="submit" class="flex items-center ml-auto px-2 focus:outline-none" id="searchbar-submit">
+                <button type="submit" class="flex items-center ms-auto px-2 focus:outline-none" id="searchbar-submit">
                     <span class="material-symbols-outlined md-18 text-gray-400 dark:text-gray-500">search</span>
                 </button>
             </div>

src/unfold/templates/admin/submit_line.html

@@ -1,9 +1,9 @@
 {% load i18n admin_urls %}
 
 <div {% if not is_popup %}id="submit-row"{% endif %} class="relative z-20 {% if not is_popup %} mt-20 lg:mt-8{% endif %}">
-    <div class="{% if not is_popup %}bottom-0 fixed left-0 right-0{% endif %}" {% if not is_popup %}x-bind:class="{'xl:left-0': !sidebarDesktopOpen, 'xl:left-72': sidebarDesktopOpen}"{% endif %}>
+    <div class="{% if not is_popup %}bottom-0 fixed left-0 right-0{% endif %}" {% if not is_popup %}x-bind:class="{'xl:left-0': !sidebarDesktopOpen, 'xl:start-72': sidebarDesktopOpen}"{% endif %}>
         <div class="bg-white dark:bg-gray-900 {% if not is_popup %}border-t px-4 py-4 relative scrollable-top lg:px-12 dark:border-gray-800{% endif %}">
-            <div class="container flex flex-col-reverse gap-3 items-center mx-auto lg:flex-row-reverse">
+            <div class="container flex flex-col-reverse gap-3 items-center mx-auto lg:flex-row-reverse rtl:lg:flex-row">
                 {% block submit-row %}
                     {% if show_save %}
                         <button type="submit" name="_save" class="bg-primary-600 block border border-transparent font-medium px-3 py-2 rounded-md text-sm text-white w-full lg:w-auto">