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

templates/partials/people_link.html

@@ -1,6 +1,7 @@
 {% 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"

templates/partials/tags.html

@@ -6,7 +6,8 @@
         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-push-url="true">{{
+            hx-vals='{"filter": "{{ t["TagFilter"] }}"}' {% endif%} hx-target="#container"
+            hx-swap="innerHTML transition:true" hx-push-url="true">{{
             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"
             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-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
      call Swal.fire({title: 'Confirm', text:'Are you sure you want to delete {{ t['TagName'] }} tag?'})
      if result.isConfirmed issueRequest()">

templates/partials/topset.html

@@ -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" 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
             }}</span>
         {% else %}

templates/partials/workout_tags_list.html

@@ -2,7 +2,8 @@
 <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-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 }}
 </span>
 {% endfor%}