Replace exercise select in workout modal with tailwind elements select component(still need to change it for edit exercise in modal)

This commit is contained in:
Peter Stockings
2023-03-20 22:29:32 +11:00
parent e94f530c54
commit c71cd0d7b2

View File

@@ -87,22 +87,22 @@
Exercise
</label>
<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="exercise_id">
{% for e in workout['Exercises'] %}
<option value="{{ e['ExerciseId'] }}">{{
e['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 class="w-full">
<select id="workout-exercise-select" data-te-select-init
data-te-select-filter="true" name="exercise_id"
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">
{% for e in workout['Exercises'] %}
<option value="{{ e['ExerciseId'] }}">{{
e['Name']
}}</option>
{% endfor %}
</select>
</div>
<script>
te.Select.getOrCreateInstance(document.querySelector("#workout-exercise-select"));
</script>
</div>
</div>
@@ -112,7 +112,7 @@
Reps
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-2 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-city" type="number" name="repetitions">
</div>
@@ -122,7 +122,7 @@
Weight
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-2 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-zip" type="number" name="weight" step="any">
</div>
</div>