From 1c04cc96e94b3af236f86455104807a3734a65f4 Mon Sep 17 00:00:00 2001
From: Konrad Mohrfeldt <km@roko.li>
Date: Fri, 7 Jun 2024 16:49:33 +0200
Subject: [PATCH] refactor: improve usability of show order filter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Some users didn’t really know that they can re-order the order filter,
because they didn’t realize that the drag handle is a drag handle :).
---
 src/Pages/MyShows.vue          | 1 +
 src/components/OrderFilter.vue | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Pages/MyShows.vue b/src/Pages/MyShows.vue
index 56553eb3..f2732f84 100644
--- a/src/Pages/MyShows.vue
+++ b/src/Pages/MyShows.vue
@@ -73,6 +73,7 @@
           <OrderFilter
             v-model="order"
             translate-base="showFilter.order.choices"
+            class="-tw-mx-1"
             :choices="[
               'id',
               'slug',
diff --git a/src/components/OrderFilter.vue b/src/components/OrderFilter.vue
index ee521826..c8df62c8 100644
--- a/src/components/OrderFilter.vue
+++ b/src/components/OrderFilter.vue
@@ -6,12 +6,12 @@
     <li
       v-for="(sortOrders, sortField) in normalizedChoices"
       :key="sortField"
-      class="tw-flex tw-gap-3 tw-items-center tw-transition-opacity group-hover:tw-opacity-100"
+      class="tw-flex tw-gap-3 tw-items-center tw-transition-opacity group-hover:tw-opacity-100 tw-px-1"
       :class="{ 'tw-opacity-50': !selectedFieldNames.includes(sortField) }"
     >
       <button
         type="button"
-        class="btn tw-cursor-grab tw-p-1 -tw-ml-1"
+        class="btn btn-default tw-cursor-grab tw-p-1"
         :class="{ 'tw-invisible': !selectedFieldNames.includes(sortField) }"
         tabindex="-1"
         data-drag-handle
-- 
GitLab