58 lines
1.5 KiB
Twig
58 lines
1.5 KiB
Twig
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
|
|
|
|
<div class="timeline">
|
|
{% for event in project.timelines %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-marker"></div>
|
|
<div class="timeline-content">
|
|
<p class="text-muted small mb-1">
|
|
{{ event.createdAt|date('d/m/Y H:i') }} par <strong>{{ event.user.username }}</strong><br>
|
|
{% for field, change in event.description %}
|
|
<strong>{{ field }}</strong>
|
|
{% if field=="status" %}
|
|
<span class="text-danger">{{ change.old ?? '' }}</span>
|
|
→
|
|
<span class="text-success">{{ change.new ?? '' }}</span>
|
|
{% endif %}
|
|
|
|
{% if not change.old is defined %}
|
|
= <span>{{ change[0] }}</span>
|
|
{% endif %}
|
|
<br>
|
|
{% endfor %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<style>
|
|
.timeline {
|
|
border-left: 3px solid #dee2e6;
|
|
padding-left: 2rem;
|
|
position: relative;
|
|
font-size: 14px;
|
|
}
|
|
.timeline-item {
|
|
position: relative;
|
|
margin-bottom: 10px;
|
|
margin-left: -23px;
|
|
}
|
|
.timeline-content {
|
|
line-height:14px;
|
|
}
|
|
.timeline-marker {
|
|
position: absolute;
|
|
left: -1.1rem;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 50%;
|
|
background: #0d6efd;
|
|
border: 2px solid #fff;
|
|
box-shadow: 0 0 0 3px #0d6efd44;
|
|
}
|
|
.timeline-content {
|
|
padding-left: 1rem;
|
|
}
|
|
</style>
|