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

@@ -51,6 +51,46 @@
let config = { responsive: true, displayModeBar: false }; let config = { responsive: true, displayModeBar: false };
let hovertemplate = '<i>Estimated 1RM</i>: <b>%{y}kg</b><br><i>Topset</i>:<b>%{text}</b><br><i>Date</i>: <b>%{x}</b>'; let hovertemplate = '<i>Estimated 1RM</i>: <b>%{y}kg</b><br><i>Topset</i>:<b>%{text}</b><br><i>Date</i>: <b>%{x}</b>';
</script> </script>
<style>
@keyframes fade-in {
from {
opacity: 0;
}
}
@keyframes fade-out {
to {
opacity: 0;
}
}
@keyframes slide-from-right {
from {
transform: translateX(90px);
}
}
@keyframes slide-to-left {
to {
transform: translateX(-90px);
}
}
.slide-it {
view-transition-name: slide-it;
}
::view-transition-old(slide-it) {
animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(slide-it) {
animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
</style>
</head> </head>
<body> <body>
@@ -103,6 +143,7 @@
<div class="flex-1 px-3 bg-white divide-y space-y-1"> <div class="flex-1 px-3 bg-white divide-y space-y-1">
<div class="space-y-2 pt-2"> <div class="space-y-2 pt-2">
<a hx-get="{{ url_for('dashboard') }}" hx-push-url="true" hx-target="#container" <a hx-get="{{ url_for('dashboard') }}" hx-push-url="true" hx-target="#container"
hx-swap="innerHTML transition:true"
class="text-base text-gray-900 font-normal rounded-lg flex items-center p-2 hover:bg-gray-100 group cursor-pointer {{ is_selected_page(url_for('dashboard')) }} page-link" class="text-base text-gray-900 font-normal rounded-lg flex items-center p-2 hover:bg-gray-100 group cursor-pointer {{ is_selected_page(url_for('dashboard')) }} page-link"
_="on click add .hidden to #sidebar then remove .ml-64 from #main then go to the top of the body"> _="on click add .hidden to #sidebar then remove .ml-64 from #main then go to the top of the body">
<svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75" <svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
@@ -121,6 +162,7 @@
</ul> </ul>
<div class="space-y-2 pt-2"> <div class="space-y-2 pt-2">
<a hx-get="{{ url_for('settings') }}" hx-push-url="true" hx-target="#container" <a hx-get="{{ url_for('settings') }}" hx-push-url="true" hx-target="#container"
hx-swap="innerHTML transition:true"
class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2 cursor-pointer {{ is_selected_page(url_for('settings')) }} page-link" class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2 cursor-pointer {{ is_selected_page(url_for('settings')) }} page-link"
_="on click add .hidden to #sidebar then remove .ml-64 from #main then go to the top of the body"> _="on click add .hidden to #sidebar then remove .ml-64 from #main then go to the top of the body">
<svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75" <svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
@@ -139,7 +181,7 @@
</aside> </aside>
<div class="h-full w-full bg-gray-50 relative overflow-y-auto lg:ml-64"> <div class="h-full w-full bg-gray-50 relative overflow-y-auto lg:ml-64">
<main id="main"> <main id="main">
<div class="pt-6 px-4" id="container"> <div class="pt-6 px-4 slide-it" id="container">
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</div> </div>

View File

@@ -4,14 +4,15 @@
<a hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container" <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" 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 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 items-center justify-between pt-2 pb-2">
<div class="flex"> <div class="flex">
<div class="flex ml-6"> <div class="flex ml-6">
<button hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container" <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" <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="" stroke="currentColor" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke:currentColor;"> style="--darkreader-inline-stroke:currentColor;">
@@ -20,7 +21,8 @@
</svg> </svg>
</button> </button>
<button hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container" <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" <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="" stroke="currentColor" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke:currentColor;"> style="--darkreader-inline-stroke:currentColor;">
@@ -43,7 +45,7 @@
<div class="mr-4"> <div class="mr-4">
<select id="workout-view-picker" data-te-select-init data-te-select-size="lg" name="view" <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-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="month" {% if selected_view=='month' %}selected{% endif %}>Month</option>
<option value="year" {% if selected_view=='year' %}selected{% endif %}>Year</option> <option value="year" {% if selected_view=='year' %}selected{% endif %}>Year</option>
<option value="all">All</option> <option value="all">All</option>
@@ -138,8 +140,8 @@
<div> <div>
<div class="bg-grey-lighter font-semibold text-center cursor-pointer" <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-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" hx-swap="innerHTML transition:true" hx-vals='{"date": "{{ first_day_of_month }}", "view": "month"}'
_="on click go to the top of the body">{{ hx-push-url="true" _="on click go to the top of the body">{{
first_day_of_month | strftime('%B %Y') }} first_day_of_month | strftime('%B %Y') }}
</div> </div>
<div> <div>

View File

@@ -13,7 +13,8 @@
<select class="bg-gray-50 border border-gray-300 hidden" data-te-select-filter="true" <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') }}" 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-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 %} {% for p in people %}
<option value="{{ p['PersonId'] }}">{{ <option value="{{ p['PersonId'] }}">{{
p['Name'] p['Name']
@@ -34,7 +35,8 @@
<select class="bg-gray-50 border border-gray-300 hidden" data-te-select-filter="true" <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') }}" 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-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 %} {% for e in exercises %}
<option value="{{ e['ExerciseId'] }}">{{ <option value="{{ e['ExerciseId'] }}">{{
e['Name'] 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" 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-get="{{ url_for('dashboard') }}"
hx-include="[name='min_date'],[name='max_date'],[name='person_id'],[name='exercise_id']" 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" hx-push-url="true" hx-target="#container" hx-swap="innerHTML transition:true" hx-trigger="change"
value="{{ min_date }}"> name="min_date" type="date" value="{{ min_date }}">
</div> </div>
</div> </div>
<div class="w-full lg:w-1/4 sm:w-full px-3 mb-6 md:mb-0"><label <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> clip-rule="evenodd" fill-rule="evenodd"></path>
</svg></div><input </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" 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" hx-get="{{ url_for('dashboard') }}" hx-push-url="true" hx-target="#container"
name="max_date" type="date" value="{{ max_date }}"> hx-swap="innerHTML transition:true" hx-trigger="change" name="max_date" type="date"
value="{{ max_date }}">
</div> </div>
</div> </div>
</div> </div>
@@ -107,7 +110,7 @@
</div> </div>
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<a hx-get="{{ url_for('get_calendar' ,person_id=p['PersonId']) }}" hx-push-url="true" <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 class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg p-2 cursor-pointer">View
workouts</a> workouts</a>
</div> </div>

View File

@@ -1,6 +1,7 @@
{% for p in people %} {% for p in people %}
<li> <li>
<a hx-get="{{ url_for('get_calendar' ,person_id=p['PersonId']) }}" hx-push-url="true" hx-target="#container" <a hx-get="{{ url_for('get_calendar' ,person_id=p['PersonId']) }}" hx-push-url="true" hx-target="#container"
hx-swap="innerHTML transition:true"
class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 group cursor-pointer page-link" class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 group cursor-pointer page-link"
_="on click add .hidden to #sidebar then remove .ml-64 from #main then go to the top of the body"> _="on click add .hidden to #sidebar then remove .ml-64 from #main then go to the top of the body">
<svg class="w-6 h-6 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75" <svg class="w-6 h-6 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75"

View File

@@ -6,7 +6,8 @@
data-te-ripple-color="dark"> data-te-ripple-color="dark">
<span hx-get="{{ url_for('goto_tag') }}" {% if person_id %} <span hx-get="{{ url_for('goto_tag') }}" {% if person_id %}
hx-vals='{"filter": "{{ t["TagFilter"] }}", "person_id": "{{ person_id }}"}' {% else %} hx-vals='{"filter": "{{ t["TagFilter"] }}", "person_id": "{{ person_id }}"}' {% else %}
hx-vals='{"filter": "{{ t["TagFilter"] }}"}' {% endif%} hx-target="#container" hx-push-url="true">{{ hx-vals='{"filter": "{{ t["TagFilter"] }}"}' {% endif%} hx-target="#container"
hx-swap="innerHTML transition:true" hx-push-url="true">{{
t['TagName'] }}</span> t['TagName'] }}</span>
@@ -14,7 +15,8 @@
class="float-right w-4 cursor-pointer pl-[8px] text-[16px] text-[#afafaf] opacity-[.53] transition-all duration-200 ease-in-out hover:text-[#8b8b8b] dark:text-neutral-400 dark:hover:text-neutral-100" class="float-right w-4 cursor-pointer pl-[8px] text-[16px] text-[#afafaf] opacity-[.53] transition-all duration-200 ease-in-out hover:text-[#8b8b8b] dark:text-neutral-400 dark:hover:text-neutral-100"
hx-get="{{ url_for('delete_tag', tag_id=t['TagId']) }}" {% if person_id %} hx-get="{{ url_for('delete_tag', tag_id=t['TagId']) }}" {% if person_id %}
hx-vals='{"filter": "{{ t["TagFilter"] }}", "person_id": "{{ person_id }}"}' {% else %} hx-vals='{"filter": "{{ t["TagFilter"] }}", "person_id": "{{ person_id }}"}' {% else %}
hx-vals='{"filter": "{{ t["TagFilter"] }}"}' {% endif%} hx-target="#container" hx-push-url="true" _="on htmx:confirm(issueRequest) hx-vals='{"filter": "{{ t["TagFilter"] }}"}' {% endif%} hx-target="#container"
hx-swap="innerHTML transition:true" hx-push-url="true" _="on htmx:confirm(issueRequest)
halt the event halt the event
call Swal.fire({title: 'Confirm', text:'Are you sure you want to delete {{ t['TagName'] }} tag?'}) call Swal.fire({title: 'Confirm', text:'Are you sure you want to delete {{ t['TagName'] }} tag?'})
if result.isConfirmed issueRequest()"> if result.isConfirmed issueRequest()">

View File

@@ -3,7 +3,7 @@
{% if is_edit|default(false, true) == false %} {% if is_edit|default(false, true) == false %}
<span class="cursor-pointer" hx-get="{{ url_for('goto_tag') }}" <span class="cursor-pointer" hx-get="{{ url_for('goto_tag') }}"
hx-vals='{"filter": "?exercise_id={{ exercise_id }}", "person_id" : "{{ person_id }}" }' hx-vals='{"filter": "?exercise_id={{ exercise_id }}", "person_id" : "{{ person_id }}" }'
hx-target="#container" hx-swap="innerHTML" hx-push-url="true" hx-target="#container" hx-swap="innerHTML transition:true" hx-swap="innerHTML" hx-push-url="true"
_='on click trigger closeModalWithoutRefresh'>{{ exercise_name _='on click trigger closeModalWithoutRefresh'>{{ exercise_name
}}</span> }}</span>
{% else %} {% else %}

View File

@@ -2,7 +2,8 @@
<span <span
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded text-pink-600 bg-pink-200 uppercase last:mr-0 mr-1 max-h-fit cursor-pointer" class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded text-pink-600 bg-pink-200 uppercase last:mr-0 mr-1 max-h-fit cursor-pointer"
hx-get="{{ url_for('goto_tag') }}" hx-vals='{"filter": "{{ tag.tag_filter }}", "person_id": "{{ tag.person_id }}"}' hx-get="{{ url_for('goto_tag') }}" hx-vals='{"filter": "{{ tag.tag_filter }}", "person_id": "{{ tag.person_id }}"}'
hx-target="#container" hx-push-url="true" _='on click trigger closeModalWithoutRefresh'>{{ hx-target="#container" hx-swap="innerHTML transition:true" hx-push-url="true"
_='on click trigger closeModalWithoutRefresh'>{{
tag.tag_name }} tag.tag_name }}
</span> </span>
{% endfor%} {% endfor%}

View File

@@ -2,7 +2,7 @@
{% block content %} {% block content %}
<a hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}" <a hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}" hx-swap="innerHTML transition:true"
hx-include="[name='exercise_id'],[name='min_date'],[name='max_date']" hx-target="#container" hx-include="[name='exercise_id'],[name='min_date'],[name='max_date']" hx-target="#container"
hx-trigger="refreshView" id="refreshViewElement"></a> hx-trigger="refreshView" id="refreshViewElement"></a>
@@ -47,7 +47,7 @@
data-te-select-size="lg" name="exercise_id" class="bg-gray-50 border border-gray-300 " multiple data-te-select-size="lg" name="exercise_id" class="bg-gray-50 border border-gray-300 " multiple
hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}" hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']" hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']"
hx-target="#container" hx-push-url="true"> hx-target="#container" hx-push-url="true" hx-swap="innerHTML transition:true">
{% for e in person['Exercises'] %} {% for e in person['Exercises'] %}
<option value="{{ e['ExerciseId'] }}">{{ <option value="{{ e['ExerciseId'] }}">{{
e['ExerciseName'] e['ExerciseName']
@@ -77,7 +77,7 @@
name="min_date" value="{{ min_date }}" name="min_date" value="{{ min_date }}"
hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}" hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']" hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']"
hx-target="#container" hx-push-url="true" hx-trigger="change"> hx-target="#container" hx-swap="innerHTML transition:true" hx-push-url="true" hx-trigger="change">
</div> </div>
</div> </div>
<div class="w-full md:w-1/4 px-3 mb-6 md:mb-0"> <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
@@ -98,7 +98,7 @@
name="max_date" value="{{ max_date }}" name="max_date" value="{{ max_date }}"
hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}" hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']" hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']"
hx-target="#container" hx-push-url="true" hx-trigger="change"> hx-target="#container" hx-swap="innerHTML transition:true" hx-push-url="true" hx-trigger="change">
</div> </div>
</div> </div>
<div class="w-full md:w-1/4 px-3 mb-6 md:mb-0"> <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
@@ -110,7 +110,7 @@
data-te-select-size="lg" name="graph_axis" class="bg-gray-50 border border-gray-300 " multiple data-te-select-size="lg" name="graph_axis" class="bg-gray-50 border border-gray-300 " multiple
hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}" hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']" hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']"
hx-target="#container" hx-push-url="true"> hx-target="#container" hx-swap="innerHTML transition:true" hx-push-url="true">
<option value="repetitions">Repetitions</option> <option value="repetitions">Repetitions</option>
<option value="weight">Weigh</option> <option value="weight">Weigh</option>
<option value="estimated1rm">Estimated 1RM</option> <option value="estimated1rm">Estimated 1RM</option>