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

Remove js used to open/close workout list accordion for each user, also animate icon on open/close

Browse Source
This commit is contained in:
Peter Stockings
2023-10-20 19:54:14 +11:00
parent c7974190ce
commit 996e47d2b4
2 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
templates/users_and_workouts_wrapper.html
View File

@@ -2,12 +2,4 @@
{{ render_partial('workouts_list.html', user=u, workouts=u.workouts, bikes=bikes) }}
{% endfor %}
<script>
document.querySelectorAll('.accordion-button').forEach(header => {
header.addEventListener('click', () => {
header.parentElement.parentElement.querySelector('div.collapse').classList.toggle('hidden');
});
});
</script>
{{ render_partial('users.html', users=users, bikes=bikes) }}

15
templates/workouts_list.html
View File

@@ -48,7 +48,10 @@
<h2 class="mb-0">
<button
class="accordion-button group relative flex w-full items-center rounded-t-[15px] border-0 bg-white py-4 px-5 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-white [&:not([data-te-collapse-collapsed])]:text-primary [&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-800 dark:[&:not([data-te-collapse-collapsed])]:text-primary-400 dark:[&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(75,85,99)]"
type="button">
type="button" _="on click
toggle .hidden on #workouts-list-accordion-{{ user.id }}
then toggle .hidden on #workouts-list-accordion-{{ user.id }}-open-icon
then toggle .hidden on #workouts-list-accordion-{{ user.id }}-close-icon">
<div>
<h2 class="text-lg font-medium text-gray-900">View {{ user.workouts_count }} workouts</h2>
@@ -56,13 +59,19 @@
<span
class="ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="h-6 w-6">
stroke="currentColor" class="h-6 w-6" id="workouts-list-accordion-{{ user.id }}-open-icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="h-6 w-6 hidden" id="workouts-list-accordion-{{ user.id }}-close-icon">
<path stroke-linecap="round" stroke-linejoin="round"
transform="translate(12,12) scale(1,-1) translate(-12,-12)" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
</svg>
</span>
</button>
</h2>
<div class="!visible collapse p-4 hidden">
<div class="!visible collapse p-4 hidden" id="workouts-list-accordion-{{ user.id }}">
{{ render_partial('partials/calendar.html', calendar_month=user.calendar_month, user_id = user.id) }}
<div id="workouts-list-wrapper-for-user-{{ user.id }}" class="mt-5 pl-2">{{