Refactor/UI timeline

src/ahc/apps/animals/templates/animals/tabs/_diet.html

@@ -29,7 +29,7 @@ <h4 class="button secondary outline section-header" role="button" tabindex="0">E
 
     <br>
     {% if diet_records %}
-    <section class="timeline" style="grid-template-columns: 1fr;">
+    <section class="timeline timeline--single">
         <ol>
             {% for record in diet_records %}
             <li>

src/ahc/apps/animals/templates/animals/tabs/_medications.html

@@ -17,7 +17,7 @@ <h3>Medications</h3>
 
     <br>
     {% if medication_records %}
-    <section class="timeline" style="grid-template-columns: 1fr;">
+    <section class="timeline timeline--single">
         <ol>
             {% for record in medication_records %}
             <li>

src/ahc/apps/animals/templates/animals/tabs/_notes.html

@@ -13,58 +13,13 @@ <h3>Notes</h3>
                    hx-swap="innerHTML"
                    data-modal-title="New note">Add a note</a>
                 <a role="button" class="secondary outline" href="{% url 'full_timeline_of_notes' pk=animal.id %}">View full timeline</a>
-                {% if available_months %}
-                <select
-                    hx-get="{% url 'animal_tab' pk=animal.id slug='notes' %}"
-                    hx-target="#tab-panels"
-                    hx-swap="innerHTML"
-                    hx-push-url="true"
-                    name="month"
-                    aria-label="Jump to month">
-                    <option value="">— Jump to month —</option>
-                    {% for month in available_months %}
-                    <option value="{{ month|date:'Y-m' }}" {% if scroll_to_month == month|date:"Y-m" %}selected{% endif %}>
-                        {{ month|date:"F Y" }}
-                    </option>
-                    {% endfor %}
-                </select>
-                {% endif %}
+                {% include "animals/tabs/partials/_timeline_month_jump.html" with tab_slug="notes" animal=animal available_months=available_months scroll_to_month=scroll_to_month only %}
             </div>
         </div>
         <span data-scroll-month="{{ scroll_to_month }}" hidden></span>
         {% if other_records %}
         <ol>
-            {% for record in other_records %}
-            {% ifchanged record.date_creation|date:"Y-m" %}
-            <li class="month-start" id="tlmonth-notes-{{ record.date_creation|date:'Y-m' }}" data-month="{{ record.date_creation|date:'M Y' }}"></li>
-            {% endifchanged %}
-            <li>
-                <div>
-                    <time>{{ record.date_creation|date:"Y-m-d" }}</time>
-                    <a href="{% url 'note_edit' pk=record.id %}">{{ record.short_description }}</a>
-                    <small>({{ record.type_of_event }})</small>
-                    <br>
-                    <a role="button" class="secondary outline"
-                       href="{% url 'note_edit' pk=record.id %}"
-                       hx-get="{% url 'note_edit' pk=record.id %}"
-                       hx-target="#modal-body"
-                       hx-swap="innerHTML"
-                       data-modal-title="Edit note">Edit</a>
-                    <a role="button" class="secondary outline" href="{% url 'note_delete' pk=record.id %}">Delete</a>
-                </div>
-            </li>
-            {% endfor %}
-            {% if tl_has_more %}
-            <li class="timeline-load-more" id="timeline-more-notes">
-                <div>
-                    <a role="button" class="secondary outline"
-                       href="{% url 'animal_tab' pk=animal.id slug='notes' %}?before={{ tl_next_before }}&load_more=1"
-                       hx-get="{% url 'animal_tab' pk=animal.id slug='notes' %}?before={{ tl_next_before }}&load_more=1"
-                       hx-target="#timeline-more-notes"
-                       hx-swap="outerHTML">Load older</a>
-                </div>
-            </li>
-            {% endif %}
+            {% include "animals/tabs/partials/_timeline_nodes_notes.html" %}
             <li></li>
         </ol>
         {% else %}
@@ -76,7 +31,7 @@ <h3>Notes</h3>
     {% if "biometrics" in allowed_categories %}
     <h3>Biometrics</h3>
     {% if biometric_records %}
-    <section class="timeline" style="grid-template-columns: 1fr;">
+    <section class="timeline timeline--single">
         <ol>
             {% for record in biometric_records %}
             <li>

src/ahc/apps/animals/templates/animals/tabs/_vet.html

@@ -38,49 +38,13 @@ <h3>Medical visit timeline</h3>
                    hx-swap="innerHTML"
                    data-modal-title="Add vet visit">Add vet visit</a>
                 <a role="button" class="secondary outline" href="{% url 'full_timeline_of_notes' pk=animal.id %}?type_of_event=medical_visit">View all visits</a>
-                {% if available_months %}
-                <select
-                    hx-get="{% url 'animal_tab' pk=animal.id slug='vet' %}"
-                    hx-target="#tab-panels"
-                    hx-swap="innerHTML"
-                    hx-push-url="true"
-                    name="month"
-                    aria-label="Jump to month">
-                    <option value="">— Jump to month —</option>
-                    {% for month in available_months %}
-                    <option value="{{ month|date:'Y-m' }}" {% if scroll_to_month == month|date:"Y-m" %}selected{% endif %}>
-                        {{ month|date:"F Y" }}
-                    </option>
-                    {% endfor %}
-                </select>
-                {% endif %}
+                {% include "animals/tabs/partials/_timeline_month_jump.html" with tab_slug="vet" animal=animal available_months=available_months scroll_to_month=scroll_to_month only %}
             </div>
         </div>
         <span data-scroll-month="{{ scroll_to_month }}" hidden></span>
         {% if vet_records %}
         <ol>
-            {% for record in vet_records %}
-            {% ifchanged record.date_creation|date:"Y-m" %}
-            <li class="month-start" id="tlmonth-vet-{{ record.date_creation|date:'Y-m' }}" data-month="{{ record.date_creation|date:'M Y' }}"></li>
-            {% endifchanged %}
-            <li>
-                <div>
-                    <time>{{ record.date_event_started|date:"Y-m-d" }}</time>
-                    <a href="{% url 'note_edit' pk=record.id %}">{{ record.short_description }}</a>
-                </div>
-            </li>
-            {% endfor %}
-            {% if tl_has_more %}
-            <li class="timeline-load-more" id="timeline-more-vet">
-                <div>
-                    <a role="button" class="secondary outline"
-                       href="{% url 'animal_tab' pk=animal.id slug='vet' %}?before={{ tl_next_before }}&load_more=1"
-                       hx-get="{% url 'animal_tab' pk=animal.id slug='vet' %}?before={{ tl_next_before }}&load_more=1"
-                       hx-target="#timeline-more-vet"
-                       hx-swap="outerHTML">Load older</a>
-                </div>
-            </li>
-            {% endif %}
+            {% include "animals/tabs/partials/_timeline_nodes_vet.html" %}
             <li></li>
         </ol>
         {% else %}

src/ahc/apps/animals/templates/animals/tabs/partials/_timeline_month_jump.html

@@ -0,0 +1,16 @@
+{% if available_months %}
+<select
+    hx-get="{% url 'animal_tab' pk=animal.id slug=tab_slug %}"
+    hx-target="#tab-panels"
+    hx-swap="innerHTML"
+    hx-push-url="true"
+    name="month"
+    aria-label="Jump to month">
+    <option value="">— Jump to month —</option>
+    {% for month in available_months %}
+    <option value="{{ month|date:'Y-m' }}" {% if scroll_to_month == month|date:"Y-m" %}selected{% endif %}>
+        {{ month|date:"F Y" }}
+    </option>
+    {% endfor %}
+</select>
+{% endif %}

src/ahc/apps/animals/templates/animals/tabs/partials/_timeline_nodes_notes.html

@@ -1,6 +1,6 @@
 {% for record in other_records %}
 {% ifchanged record.date_creation|date:"Y-m" %}
-<li class="month-start" id="tlmonth-notes-{{ record.date_creation|date:'Y-m' }}" data-month="{{ record.date_creation|date:'M Y' }}"></li>
+<li class="month-start" id="tlmonth-notes-{{ record.date_creation|date:'Y-m' }}"><span class="month-start__label">{{ record.date_creation|date:"M Y" }}</span></li>
 {% endifchanged %}
 <li>
     <div>
@@ -22,8 +22,8 @@
 <li class="timeline-load-more" id="timeline-more-notes">
     <div>
         <a role="button" class="secondary outline"
-           href="{% url 'animal_tab' pk=animal.id slug='notes' %}?before={{ tl_next_before }}&load_more=1"
-           hx-get="{% url 'animal_tab' pk=animal.id slug='notes' %}?before={{ tl_next_before }}&load_more=1"
+           href="{% url 'animal_tab' pk=animal.id slug='notes' %}?before={{ tl_next_before|urlencode }}&before_id={{ tl_next_before_pk }}&load_more=1"
+           hx-get="{% url 'animal_tab' pk=animal.id slug='notes' %}?before={{ tl_next_before|urlencode }}&before_id={{ tl_next_before_pk }}&load_more=1"
            hx-target="#timeline-more-notes"
            hx-swap="outerHTML">Load older</a>
     </div>

src/ahc/apps/animals/templates/animals/tabs/partials/_timeline_nodes_vet.html

@@ -1,6 +1,6 @@
 {% for record in vet_records %}
 {% ifchanged record.date_creation|date:"Y-m" %}
-<li class="month-start" id="tlmonth-vet-{{ record.date_creation|date:'Y-m' }}" data-month="{{ record.date_creation|date:'M Y' }}"></li>
+<li class="month-start" id="tlmonth-vet-{{ record.date_creation|date:'Y-m' }}"><span class="month-start__label">{{ record.date_creation|date:"M Y" }}</span></li>
 {% endifchanged %}
 <li>
     <div>
@@ -13,8 +13,8 @@
 <li class="timeline-load-more" id="timeline-more-vet">
     <div>
         <a role="button" class="secondary outline"
-           href="{% url 'animal_tab' pk=animal.id slug='vet' %}?before={{ tl_next_before }}&load_more=1"
-           hx-get="{% url 'animal_tab' pk=animal.id slug='vet' %}?before={{ tl_next_before }}&load_more=1"
+           href="{% url 'animal_tab' pk=animal.id slug='vet' %}?before={{ tl_next_before|urlencode }}&before_id={{ tl_next_before_pk }}&load_more=1"
+           hx-get="{% url 'animal_tab' pk=animal.id slug='vet' %}?before={{ tl_next_before|urlencode }}&before_id={{ tl_next_before_pk }}&load_more=1"
            hx-target="#timeline-more-vet"
            hx-swap="outerHTML">Load older</a>
     </div>