mybuddy/core/templates/timeline/_timeline.html

{% load i18n %}
<h3 class="text-center">
    {% if date_previous %}
        <a class="btn btn-sm btn-default"
           href="?date={{ date_previous|date:"Y-m-d" }}"
           aria-label="{% trans "Previous" %}">
            <i class="icon-2x icon-angle-circled-left" aria-hidden="true"></i>
            <span class="visually-hidden">{% trans "Previous" %}</span>
        </a>
    {% endif %}
    {{ date|date }}
    {% if date_next %}
        <a class="btn btn-sm btn-default"
           href="?date={{ date_next|date:"Y-m-d" }}"
           aria-label="{% trans "Next" %}">
            <i class="icon-2x icon-angle-circled-right" aria-hidden="true"></i>
            <span class="visually-hidden">{% trans "Next" %}</span>
        </a>
    {% endif %}
</h3>
{% if timeline_objects %}
    <ul class="timeline m-auto">
        {% for object in timeline_objects %}
            <li {% cycle "" ' class="timeline-inverted"' %}>
                <div class="timeline-badge {% if object.type == "start" %}bg-success{% elif object.type == "end" %}bg-danger{% else %}bg-info{% endif %}">
                    <i class="icon-{{ object.model_name }}"></i>
                </div>
                <div class="card text-end">
                    <div class="card-body">
                        {{ object.event }}
                        {% for detail in object.details %}
                            <div>
                                <small>{{ detail }}</small>
                            </div>
                        {% endfor %}
                        {% if object.tags %}
                            <div>{% include "core/render_tag_list.html" with tags=object.tags %}</div>
                        {% endif %}
                    </div>
                    <div class="card-footer text-body-secondary">
                        {% blocktrans trimmed with since=object.time|timesince time=object.time|time %}
                            {{ since }} ago ({{ time }})
                        {% endblocktrans %}
                        {% if object.duration %}
                            <div>
                                <small>
                                    {% blocktrans trimmed with duration=object.duration %}
                                        Duration: {{ duration }}
                                    {% endblocktrans %}
                                </small>
                            </div>
                        {% endif %}
                        {% if object.time_since_prev %}
                            <div>
                                <small>
                                    {% blocktrans trimmed with since=object.time_since_prev %}
                                        {{ since }} since previous
                                    {% endblocktrans %}
                                </small>
                            </div>
                        {% endif %}
                        {% if object.edit_link %}
                            <div>
                                <small><a href="{{ object.edit_link }}">{% trans "Edit" %}</a></small>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </li>
        {% endfor %}
    </ul>
    <h3 class="text-center">
        {% if date_previous %}
            <a class="btn btn-sm btn-default"
               href="?date={{ date_previous|date:"Y-m-d" }}"
               aria-label="{% trans "Previous" %}">
                <i class="icon-2x icon-angle-circled-left" aria-hidden="true"></i>
                <span class="visually-hidden">{% trans "Previous" %}</span>
            </a>
        {% endif %}
        {{ date|date }}
        {% if date_next %}
            <a class="btn btn-sm btn-default"
               href="?date={{ date_next|date:"Y-m-d" }}"
               aria-label="{% trans "Next" %}">
                <i class="icon-2x icon-angle-circled-right" aria-hidden="true"></i>
                <span class="visually-hidden">{% trans "Next" %}</span>
            </a>
        {% endif %}
    </h3>
{% else %}
    <div class="text-center">{% trans "No events" %}</div>
{% endif %}