Fix UFoC from dropdowns

Lucheek-IT · Oct 31, 2023 · aca6ee1 · aca6ee1
1 parent 143e754
commit aca6ee1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/components/NavDropdown.astro b/src/components/NavDropdown.astro
@@ -10,7 +10,7 @@ const { label } = Astro.props;
         <span>{label}</span>
         <svg fill="currentColor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
     </button>
-    <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-10">
+    <div x-cloak x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-10">
         <div class="px-2 py-2 bg-white rounded-md shadow">
             <slot/>
         </div>

diff --git a/src/scripts/initialize-dt.js b/src/scripts/initialize-dt.js
@@ -1,10 +1,12 @@
 import { DataTable, addColumnFilter } from "simple-datatables";
 
-const dt = new DataTable('#cards', {
-    paging: false,
-});
+document.addEventListener('DOMContentLoaded', function(event) {
+    const dt = new DataTable('#cards', {
+        paging: false,
+    });
 
-addColumnFilter(dt);
+    addColumnFilter(dt);
 
-document.querySelector('.datatable-search .datatable-input').setAttribute('aria-label', 'Search');
-document.querySelector('nav.datatable-pagination').setAttribute('aria-label', 'Card Page');
+    document.querySelector('.datatable-search .datatable-input').setAttribute('aria-label', 'Search');
+    document.querySelector('nav.datatable-pagination').setAttribute('aria-label', 'Card Page');
+});