peterstockings/workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix flicker caused by custom js select component being loaded

Browse Source
This commit is contained in:
Peter Stockings
2024-04-11 18:12:51 +10:00
parent 0e5de89e81
commit ed1b91f9b7
5 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
static/css/style.css
View File

@@ -98,3 +98,13 @@ tr.htmx-swapping td {
transform: scale(0.9);
}
}
.loading-indicator{
display:none;
}
.htmx-request .loading-indicator{
display:flex;
}
.htmx-request.loading-indicator{
display:flex;
}

3
templates/calendar.html
View File

@@ -45,7 +45,8 @@
<div class="mr-4">
<select name="view" hx-get="{{ url_for('get_calendar', person_id=person_id) }}" hx-target="#container"
hx-vals='{"date": "{{ date }}"}' hx-push-url="true" _="init js(me) tail.select(me, {}) end">
hx-vals='{"date": "{{ date }}"}' hx-push-url="true" _="init js(me) tail.select(me, {}) end"
class="h-10 invisible">
<option value="month" {% if view=='month' %}selected{% endif %}>Month</option>
<option value="year" {% if view=='year' %}selected{% endif %}>Year</option>
<option value="notes">Notes</option>

6
templates/dashboard.html
View File

@@ -18,7 +18,8 @@
<div class="mb-3 w-full"><label
class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="grid-city">People</label>
<select class="bg-gray-50 border border-gray-300 hidden" hx-get="{{ url_for('dashboard') }}"
<select class="bg-gray-50 border border-gray-300 h-10 invisible"
hx-get="{{ url_for('dashboard') }}"
hx-include="[name='min_date'],[name='max_date'],[name='exercise_id']" hx-push-url="true"
hx-target="#container" multiple="" name="person_id" _="init js(me)
tail.select(me, {
@@ -44,7 +45,8 @@
<div class="mb-3 w-full"><label
class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="grid-city">Exercises</label>
<select class="bg-gray-50 border border-gray-300 hidden" hx-get="{{ url_for('dashboard') }}"
<select class="bg-gray-50 border border-gray-300 h-10 invisible"
hx-get="{{ url_for('dashboard') }}"
hx-include="[name='min_date'],[name='max_date'],[name='person_id']" hx-push-url="true"
hx-target="#container" multiple="" name="exercise_id" _="init js(me)
tail.select(me, {

2
templates/notes.html
View File

@@ -15,7 +15,7 @@
<div class="mr-4">
<select name="view" hx-get="{{ url_for('get_calendar', person_id=person_id) }}" hx-target="#container"
x-push-url="true" _="init js(me) tail.select(me, {}) end">
x-push-url="true" _="init js(me) tail.select(me, {}) end" class="h-10 invisible">
<option value="month">Month</option>
<option value="year">Year</option>
<option value="notes" selected>Notes</option>

2
templates/person.html
View File

@@ -25,7 +25,7 @@
<div>
<div>
<select name="view" hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}"
hx-target="#container" hx-push-url="true" _="init js(me) tail.select(me, {}) end">
hx-target="#container" hx-push-url="true" _="init js(me) tail.select(me, {}) end" class="h-10 invisible">
<option value="month">Month</option>
<option value="year">Year</option>
<option value="notes">Notes</option>