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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

14
templates/calendar.html
View File

@@ -4,14 +4,15 @@
<a hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-vals='{"date": "{{ selected_date }}", "view": "{{ selected_view }}"}' hx-trigger="refreshView"
id="refreshViewElement"></a>
hx-swap="innerHTML transition:true" id="refreshViewElement"></a>
<div class="flex flex-grow flex-col bg-white sm:rounded shadow overflow-hidden">
<div class="flex items-center justify-between pt-2 pb-2">
<div class="flex">
<div class="flex ml-6">
<button hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-vals='{"date": "{{ previous_date }}"}' hx-include="[name='view']" hx-push-url="true">
hx-swap="innerHTML transition:true" hx-vals='{"date": "{{ previous_date }}"}'
hx-include="[name='view']" hx-push-url="true">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke:currentColor;">
@@ -20,7 +21,8 @@
</svg>
</button>
<button hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-vals='{"date": "{{ next_date }}"}' hx-include="[name='view']" hx-push-url="true">
hx-swap="innerHTML transition:true" hx-vals='{"date": "{{ next_date }}"}' hx-include="[name='view']"
hx-push-url="true">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke:currentColor;">
@@ -43,7 +45,7 @@
<div class="mr-4">
<select id="workout-view-picker" data-te-select-init data-te-select-size="lg" name="view"
hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-vals='{"date": "{{ selected_date }}"}' hx-push-url="true">
hx-swap="innerHTML transition:true" hx-vals='{"date": "{{ selected_date }}"}' hx-push-url="true">
<option value="month" {% if selected_view=='month' %}selected{% endif %}>Month</option>
<option value="year" {% if selected_view=='year' %}selected{% endif %}>Year</option>
<option value="all">All</option>
@@ -138,8 +140,8 @@
<div>
<div class="bg-grey-lighter font-semibold text-center cursor-pointer"
hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-vals='{"date": "{{ first_day_of_month }}", "view": "month"}' hx-push-url="true"
_="on click go to the top of the body">{{
hx-swap="innerHTML transition:true" hx-vals='{"date": "{{ first_day_of_month }}", "view": "month"}'
hx-push-url="true" _="on click go to the top of the body">{{
first_day_of_month | strftime('%B %Y') }}
</div>
<div>