Use Tailwind styles for datatable

opensafely-core · Sep 11, 2024 · 559dc97 · 559dc97
1 parent 001dcfd
commit 559dc97
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 104 deletions.
diff --git a/airlock/templates/file_browser/file_content/csv.html b/airlock/templates/file_browser/file_content/csv.html
@@ -24,9 +24,11 @@
             <tr>
               {% for header in headers %}
                 <th>
-                  <div class="flex flex-row gap-2">
+                  <div class="flex flex-row gap-2 items-center">
                     {{ header }}
-                    {% comment %} <span class="sort-icon">{% datatable_sort_icon %}</span> {% endcomment %}
+                    <span class="sort-icon h-4 w-4 [&_img]:h-4 [&_img]:w-4">
+                      {% datatable_sort_icon %}
+                    </span>
                   </dir>
                 </th>
               {% endfor %}

diff --git a/assets/src/datatable.css b/assets/src/datatable.css
@@ -1,122 +1,42 @@
 [data-datatable] {
-  @apply min-w-full divide-y divide-slate-300;
-
-  & thead {
-    @apply bg-slate-200;
-  }
-
-  & th {
-    color: var(--color-slate-900);
-    font-size: 0.875rem;
-    font-weight: 600;
-    line-height: 1.25rem;
-    text-align: left;
-    white-space: nowrap;
-    width: auto !important;
-
-    & button {
-      padding: 0.5rem;
-      position: relative;
-      text-align: left;
-      width: 100%;
-    }
-
-    &:has(input) {
-      padding: 0.5rem;
-    }
-
-    & input.datatable-input {
-      display: block;
-      width: 100%;
-      border-radius: 0.375rem;
-      border-color: var(--color-slate-300);
-      font-weight: 400;
-      box-shadow:
-        0 0 rgba(0, 0, 0, 0),
-        0 0 rgba(0, 0, 0, 0),
-        0 1px 2px 0 rgba(0, 0, 0, 0.05);
-
-      @media (min-width: 640px) {
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-      }
-
-      &:focus {
-        border-color: var(--color-oxford-500);
-        outline-color: var(--color-oxford-500);
-        outline-offset: -1px;
-      }
-    }
-
+  .datatable-sorter {
     & .datatable-icon--descending,
     & .datatable-icon--ascending {
-      display: none;
+      @apply hidden;
     }
 
     & .datatable-icon--no-sort {
-      display: block;
+      @apply block;
     }
-
-    &.datatable-ascending {
-      & .datatable-icon--no-sort,
-      & .datatable-icon--descending {
-        display: none;
-      }
-
-      & .datatable-icon--ascending {
-        display: block;
-      }
+  }
+  .datatable-ascending {
+    & .datatable-icon--no-sort,
+    & .datatable-icon--descending {
+      @apply hidden;
     }
 
-    &.datatable-descending {
-      & .datatable-icon--no-sort,
-      & .datatable-icon--ascending {
-        display: none;
-      }
-
-      & .datatable-icon--descending {
-        display: block;
-      }
+    & .datatable-icon--ascending {
+      @apply block;
     }
   }
 
-  & tbody > tr ~ tr {
-    background-color: var(--color-white);
-  }
-
-  & tbody > tr ~ tr:not(:last-child) {
-    border-block: 1px solid var(--color-slate-200);
-  }
-
-  & tr:nth-child(even) {
-    background-color: var(--color-slate-50);
-  }
+  .datatable-descending {
+    & .datatable-icon--no-sort,
+    & .datatable-icon--ascending {
+      @apply hidden;
+    }
 
-  & td {
-    color: var(--color-slate-700);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    padding: 0.5rem;
+    & .datatable-icon--descending {
+      @apply block;
+    }
   }
 
   & a {
-    color: var(--color-oxford-600);
-    font-weight: 600;
-    text-decoration: underline #69afff;
-    text-underline-offset: 2px;
-    transition-duration: 200ms;
-    transition-property: color, background-color, border-color,
-      text-decoration-color;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    @apply text-oxford-600 font-semibold underline decoration-oxford-300 underline-offset-2 duration-200 transition-colors ease-in-out focus:bg-bn-sun-300;
 
     &:hover,
     &:focus {
-      color: var(--color-oxford-800);
-      text-decoration-color: transparent;
-    }
-
-    &:focus {
-      background-color: var(--color-bn-sun-300);
+      @apply text-oxford-800 decoration-transparent;
     }
   }
 }
diff --git a/assets/src/datatable.js b/assets/src/datatable.js
@@ -27,7 +27,13 @@ datatableEls?.forEach((table) => {
 
   let dataTable = new DataTable(table, {
     classes: {
-      table: "datatable-table min-w-full divide-y divide-slate-300",
+      sorter: "datatable-sorter p-2 relative text-left w-full",
+      table: `
+        datatable-table min-w-full divide-y divide-slate-300
+        [&_th]:bg-slate-200 [&_th]:text-slate-900 [&_th]:text-sm [&_th]:font-semibold [&_th]:leading-5 [&_th]:text-left [&_th]:whitespace-nowrap [&_th]:w-auto
+        [&_td]:text-slate-700 [&_td]:text-sm [&_td]:p-2
+        [&_tr]:border-t [&_tr]:border-slate-200 first:[&_tr]:border-t-0 [&_tr]:bg-white even:[&_tr]:bg-slate-50
+      `,
       top: "hidden",
     },
     paging,
@@ -51,7 +57,7 @@ datatableEls?.forEach((table) => {
                         nodeName: "INPUT",
                         attributes: {
                           class:
-                            "datatable-input block w-full border-slate-300 font-normal shadow-sm rounded-md sm:text-sm sm:leading-5 focus:border-oxford-500 focus:outline-oxford-500 focus:-outline-offset-1",
+                            "datatable-input block w-full border-slate-300 font-normal shadow-sm rounded-md mb-1 sm:text-sm sm:leading-5 focus:border-oxford-500 focus:outline-oxford-500 focus:-outline-offset-1",
                           "data-columns": `[${index}]`,
                           // @ts-ignore
                           placeholder: `Filter ${_data.headings[index].text