From 7c655e9a2c80afbc2c37ab9db3be349f6ed45388 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Wed, 29 Mar 2023 21:51:34 +1100
Subject: [PATCH] Change select elements to tailwind element and add padding to
 workout list

---
 templates/users.html         | 10 ++++------
 templates/workouts_list.html | 16 +++++++---------
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/templates/users.html b/templates/users.html
index fc5e9fd..dac0484 100644
--- a/templates/users.html
+++ b/templates/users.html
@@ -17,16 +17,14 @@
             <div class="relative">
                 <select
                     class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
-                    id="grid-state" name="bike_id" required>
+                    id="new-bike-select" data-te-select-init data-te-select-size="lg" name="bike_id" required>
                     {% for b in bikes %}
                     <option value="{{ b.id }}">{{ b.display_name }}</option>
                     {% endfor %}
                 </select>
-                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-                    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
-                    </svg>
-                </div>
+                <script>
+                    te.Select.getOrCreateInstance(document.querySelector("#new-bike-select"));
+                </script>
             </div>
         </div>
 
diff --git a/templates/workouts_list.html b/templates/workouts_list.html
index e5270f0..3ee87d8 100644
--- a/templates/workouts_list.html
+++ b/templates/workouts_list.html
@@ -22,18 +22,16 @@
         <div class="relative">
             <select
                 class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
-                id="grid-state" name="bike_id" required hx-get="{{ url_for('update_users_bike', user_id=user.id) }}"
-                hx-target="#users-container">
+                id="user-{{ user.id }}-bike-select" data-te-select-init data-te-select-size="lg" name="bike_id" required
+                hx-get="{{ url_for('update_users_bike', user_id=user.id) }}" hx-target="#users-container">
                 {% for b in bikes %}
                 <option value="{{ b.id }}" {% if user.bike_id==b.id %} selected {% endif %}>{{ b.display_name }}
                 </option>
                 {% endfor %}
             </select>
-            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                    <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
-                </svg>
-            </div>
+            <script>
+                te.Select.getOrCreateInstance(document.querySelector("#user-{{ user.id }}-bike-select")).setValue({{ user.bike_id | safe }});
+            </script>
         </div>
     </div>
     <button
@@ -60,10 +58,10 @@
             </span>
         </button>
     </h2>
-    <div class="!visible collapse hidden">
+    <div class="!visible collapse p-4 hidden">
         <div>
             {% for w in workouts %}
-            <div class="border border-neutral-200 bg-white dark:border-neutral-600 dark:bg-neutral-800">
+            <div class="border-b-2  border-neutral-200 bg-white dark:border-neutral-600 dark:bg-neutral-800">
                 <h2 class="mb-0">
                     <button
                         class="accordion-button group relative flex w-full items-center rounded-t-[15px] border-0 bg-white py-4 px-5 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-white [&:not([data-te-collapse-collapsed])]:text-primary [&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-800 dark:[&:not([data-te-collapse-collapsed])]:text-primary-400 dark:[&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(75,85,99)]"