Add left to right slide in transition on main content rerender (#container)

This commit is contained in:
Peter Stockings
2023-08-14 22:57:47 +10:00
parent aeb46bd073
commit ae460815d7
8 changed files with 74 additions and 23 deletions

View File

@@ -13,7 +13,8 @@
<select class="bg-gray-50 border border-gray-300 hidden" data-te-select-filter="true"
data-te-select-init="" data-te-select-size="lg" hx-get="{{ url_for('dashboard') }}"
hx-include="[name='min_date'],[name='max_date'],[name='exercise_id']" hx-push-url="true"
hx-target="#container" id="dashboard-people-multi-select" multiple="" name="person_id">
hx-target="#container" id="dashboard-people-multi-select"
hx-swap="innerHTML transition:true" multiple="" name="person_id">
{% for p in people %}
<option value="{{ p['PersonId'] }}">{{
p['Name']
@@ -34,7 +35,8 @@
<select class="bg-gray-50 border border-gray-300 hidden" data-te-select-filter="true"
data-te-select-init="" data-te-select-size="lg" hx-get="{{ url_for('dashboard') }}"
hx-include="[name='min_date'],[name='max_date'],[name='person_id']" hx-push-url="true"
hx-target="#container" id="dashboard-exercise-multi-select" multiple="" name="exercise_id">
hx-target="#container" hx-swap="innerHTML transition:true"
id="dashboard-exercise-multi-select" multiple="" name="exercise_id">
{% for e in exercises %}
<option value="{{ e['ExerciseId'] }}">{{
e['Name']
@@ -61,8 +63,8 @@
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full"
hx-get="{{ url_for('dashboard') }}"
hx-include="[name='min_date'],[name='max_date'],[name='person_id'],[name='exercise_id']"
hx-push-url="true" hx-target="#container" hx-trigger="change" name="min_date" type="date"
value="{{ min_date }}">
hx-push-url="true" hx-target="#container" hx-swap="innerHTML transition:true" hx-trigger="change"
name="min_date" type="date" value="{{ min_date }}">
</div>
</div>
<div class="w-full lg:w-1/4 sm:w-full px-3 mb-6 md:mb-0"><label
@@ -78,8 +80,9 @@
clip-rule="evenodd" fill-rule="evenodd"></path>
</svg></div><input
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full"
hx-get="{{ url_for('dashboard') }}" hx-push-url="true" hx-target="#container" hx-trigger="change"
name="max_date" type="date" value="{{ max_date }}">
hx-get="{{ url_for('dashboard') }}" hx-push-url="true" hx-target="#container"
hx-swap="innerHTML transition:true" hx-trigger="change" name="max_date" type="date"
value="{{ max_date }}">
</div>
</div>
</div>
@@ -107,7 +110,7 @@
</div>
<div class="flex-shrink-0">
<a hx-get="{{ url_for('get_calendar' ,person_id=p['PersonId']) }}" hx-push-url="true"
hx-target="#container"
hx-target="#container" hx-swap="innerHTML transition:true"
class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg p-2 cursor-pointer">View
workouts</a>
</div>