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

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

Browse Source 
This reverts commit ae460815d7.
This commit is contained in:
Peter Stockings
2023-08-15 15:34:29 +10:00
parent ae460815d7
commit d3df532570
8 changed files with 23 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
templates/base.html
View File

@@ -51,46 +51,6 @@
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>';
</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>
<body>
@@ -143,7 +103,6 @@
<div class="flex-1 px-3 bg-white divide-y space-y-1">
<div class="space-y-2 pt-2">
<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"
_="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"
@@ -162,7 +121,6 @@
</ul>
<div class="space-y-2 pt-2">
<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"
_="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"
@@ -181,7 +139,7 @@
</aside>
<div class="h-full w-full bg-gray-50 relative overflow-y-auto lg:ml-64">
<main id="main">
<div class="pt-6 px-4 slide-it" id="container">
<div class="pt-6 px-4" id="container">
{% block content %}
{% endblock %}
</div>

14
templates/calendar.html
View File

@@ -4,15 +4,14 @@
<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-swap="innerHTML transition:true" id="refreshViewElement"></a>
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-swap="innerHTML transition:true" hx-vals='{"date": "{{ previous_date }}"}'
hx-include="[name='view']" hx-push-url="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;">
@@ -21,8 +20,7 @@
</svg>
</button>
<button hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-swap="innerHTML transition:true" hx-vals='{"date": "{{ next_date }}"}' hx-include="[name='view']"
hx-push-url="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;">
@@ -45,7 +43,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-swap="innerHTML transition:true" hx-vals='{"date": "{{ selected_date }}"}' hx-push-url="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>
@@ -140,8 +138,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-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">{{
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>

17
templates/dashboard.html
View File

@@ -13,8 +13,7 @@
<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"
hx-swap="innerHTML transition:true" multiple="" name="person_id">
hx-target="#container" id="dashboard-people-multi-select" multiple="" name="person_id">
{% for p in people %}
<option value="{{ p['PersonId'] }}">{{
p['Name']
@@ -35,8 +34,7 @@
<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" hx-swap="innerHTML transition:true"
id="dashboard-exercise-multi-select" multiple="" name="exercise_id">
hx-target="#container" id="dashboard-exercise-multi-select" multiple="" name="exercise_id">
{% for e in exercises %}
<option value="{{ e['ExerciseId'] }}">{{
e['Name']
@@ -63,8 +61,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-swap="innerHTML transition:true" hx-trigger="change"
name="min_date" type="date" value="{{ min_date }}">
hx-push-url="true" hx-target="#container" 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
@@ -80,9 +78,8 @@
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-swap="innerHTML transition:true" hx-trigger="change" name="max_date" type="date"
value="{{ max_date }}">
hx-get="{{ url_for('dashboard') }}" hx-push-url="true" hx-target="#container" hx-trigger="change"
name="max_date" type="date" value="{{ max_date }}">
</div>
</div>
</div>
@@ -110,7 +107,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-swap="innerHTML transition:true"
hx-target="#container"
class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg p-2 cursor-pointer">View
workouts</a>
</div>

1
templates/partials/people_link.html
View File

@@ -1,7 +1,6 @@
{% for p in people %}
<li>
<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"
_="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"

6
templates/partials/tags.html
View File

@@ -6,8 +6,7 @@
data-te-ripple-color="dark">
<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"] }}"}' {% endif%} hx-target="#container"
hx-swap="innerHTML transition:true" hx-push-url="true">{{
hx-vals='{"filter": "{{ t["TagFilter"] }}"}' {% endif%} hx-target="#container" hx-push-url="true">{{
t['TagName'] }}</span>
@@ -15,8 +14,7 @@
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-vals='{"filter": "{{ t["TagFilter"] }}", "person_id": "{{ person_id }}"}' {% else %}
hx-vals='{"filter": "{{ t["TagFilter"] }}"}' {% endif%} hx-target="#container"
hx-swap="innerHTML transition:true" hx-push-url="true" _="on htmx:confirm(issueRequest)
hx-vals='{"filter": "{{ t["TagFilter"] }}"}' {% endif%} hx-target="#container" hx-push-url="true" _="on htmx:confirm(issueRequest)
halt the event
call Swal.fire({title: 'Confirm', text:'Are you sure you want to delete {{ t['TagName'] }} tag?'})
if result.isConfirmed issueRequest()">

2
templates/partials/topset.html
View File

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

3
templates/partials/workout_tags_list.html
View File

@@ -2,8 +2,7 @@
<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"
hx-get="{{ url_for('goto_tag') }}" hx-vals='{"filter": "{{ tag.tag_filter }}", "person_id": "{{ tag.person_id }}"}'
hx-target="#container" hx-swap="innerHTML transition:true" hx-push-url="true"
_='on click trigger closeModalWithoutRefresh'>{{
hx-target="#container" hx-push-url="true" _='on click trigger closeModalWithoutRefresh'>{{
tag.tag_name }}
</span>
{% endfor%}

10
templates/person.html
View File

@@ -2,7 +2,7 @@
{% block content %}
<a hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}" hx-swap="innerHTML transition:true"
<a hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
hx-include="[name='exercise_id'],[name='min_date'],[name='max_date']" hx-target="#container"
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
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-target="#container" hx-push-url="true" hx-swap="innerHTML transition:true">
hx-target="#container" hx-push-url="true">
{% for e in person['Exercises'] %}
<option value="{{ e['ExerciseId'] }}">{{
e['ExerciseName']
@@ -77,7 +77,7 @@
name="min_date" value="{{ min_date }}"
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-target="#container" hx-swap="innerHTML transition:true" hx-push-url="true" hx-trigger="change">
hx-target="#container" hx-push-url="true" hx-trigger="change">
</div>
</div>
<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 }}"
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-target="#container" hx-swap="innerHTML transition:true" hx-push-url="true" hx-trigger="change">
hx-target="#container" hx-push-url="true" hx-trigger="change">
</div>
</div>
<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
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-target="#container" hx-swap="innerHTML transition:true" hx-push-url="true">
hx-target="#container" hx-push-url="true">
<option value="repetitions">Repetitions</option>
<option value="weight">Weigh</option>
<option value="estimated1rm">Estimated 1RM</option>