fix: alpine not loaded x-cloak (#40)

unfoldadmin · Jan 10, 2023 · 7e7921f · 7e7921f
1 parent b796519
commit 7e7921f
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/src/unfold/static/unfold/css/styles.css b/src/unfold/static/unfold/css/styles.css
diff --git a/src/unfold/templates/unfold/helpers/actions_row.html b/src/unfold/templates/unfold/helpers/actions_row.html
@@ -2,7 +2,7 @@
     <div class="group leading-none relative" x-data="{ openActionsId{{ instance.pk }}: false }">
         <span class="cursor-pointer material-symbols-outlined md-18 text-gray-400 transition-colors group-hover:text-primary-600 dark:text-gray-400" @click="openActionsId{{ instance.pk }} = !openActionsId{{ instance.pk }}">more_horiz</span>
 
-        <nav class="absolute bg-white border flex flex-col leading-none py-1 right-0 rounded-md shadow-lg text-gray-500 text-sm z-50 w-48 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" x-show="openActionsId{{ instance.pk }}" @click.outside="openActionsId{{ instance.pk }} = false">
+        <nav class="absolute bg-white border flex flex-col leading-none py-1 right-0 rounded-md shadow-lg text-gray-500 text-sm z-50 w-48 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" x-cloak x-show="openActionsId{{ instance.pk }}" @click.outside="openActionsId{{ instance.pk }} = false">
             {% for action in actions %}
                 <a href="{{ action.path }}" class="mx-1 px-3 py-2 rounded-md whitespace-nowrap hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-200"{% for attr_name, attr_value in action.attrs.items %} {{ attr_name }}="{{ attr_value }}"{% endfor %}>
                     {{ action.title }}

diff --git a/src/unfold/templates/unfold/helpers/userlinks.html b/src/unfold/templates/unfold/helpers/userlinks.html
@@ -2,11 +2,11 @@
 
 <div class="flex items-center ml-auto">
     <div class="flex group items-center relative" x-data="{ openUserLinks: false }">
-        <div  @click="openUserLinks = !openUserLinks">
+        <div @click="openUserLinks = !openUserLinks">
             {% include 'unfold/helpers/avatar.html' with initials=request.user.get_initials|default:'<i class="material-symbols-outlined text-gray-400">person</i>' image=request.user.get_photo %}
         </div>
 
-        <nav class="absolute bg-white border flex flex-col leading-none overflow-hidden py-1 right-0 rounded shadow-lg text-sm text-gray-500 top-10 w-52 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" x-show="openUserLinks" @click.outside="openUserLinks = false">
+        <nav class="absolute bg-white border flex flex-col leading-none overflow-hidden py-1 right-0 rounded shadow-lg text-sm text-gray-500 top-10 w-52 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" x-cloak x-show="openUserLinks" @click.outside="openUserLinks = false">
             <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 %}

diff --git a/styles.css b/styles.css
@@ -23,6 +23,10 @@ html {
   column-fill: auto;
 }
 
+[x-cloak] {
+  @apply !hidden;
+}
+
 @layer utilities {
   .border-spacing-none {
     border-spacing: 0;