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

Change sidebar link behaviour so it doesnt scroll to top of screen until content has loaded and add in loading spinner for person list in sidebar

Browse Source
This commit is contained in:
Peter Stockings
2024-04-11 17:57:24 +10:00
parent 497a96be60
commit 0e5de89e81
2 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
templates/base.html
View File

@@ -69,7 +69,8 @@
<div class="space-y-2 pt-2">
<a hx-get="{{ url_for('dashboard') }}" hx-push-url="true" hx-target="#container"
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
on htmx:afterRequest go to the top of the body">
<svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
@@ -78,13 +79,27 @@
<span class="ml-3">Dashboard</span>
</a>
</div>
<ul class="space-y-2 pb-2" hx-get="{{ url_for('get_person_list') }}"
hx-trigger="load, updatedPeople from:body">
<ul class="space-y-2 pb-2 relative" hx-get="{{ url_for('get_person_list') }}"
hx-trigger="load, updatedPeople from:body" hx-indicator="#person_loader">
<!-- Overlay with Animated Spinner -->
<div id="person_loader"
class="loading-indicator inset-0 flex justify-center items-center opacity-35 p-4">
<svg class="animate-spin h-16 w-16 text-white opacity-100"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
<circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="10"
stroke-linecap="round" class="opacity-20"></circle>
<path d="M50,5 A45,45 0 0,1 95,50" stroke="currentColor" stroke-width="10"
stroke-linecap="round" class="opacity-75"></path>
</svg>
</div>
</ul>
<div class="space-y-2 pt-2">
<a hx-get="{{ url_for('settings') }}" hx-push-url="true" hx-target="#container"
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
on htmx:afterRequest go to the top of the body">
<svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;">

3
templates/partials/people_link.html
View File

@@ -2,7 +2,8 @@
<li>
<a hx-get="{{ url_for('get_calendar' ,person_id=p['PersonId']) }}" hx-push-url="true" hx-target="#container"
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
on htmx:afterRequest 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"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd">