163 lines
No EOL
4 KiB
HTML
163 lines
No EOL
4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Timeline: {{ conflict.name }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div style="margin-bottom: 2rem;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<h2>
|
|
<a href="{{ url_for('conflicts.index') }}" style="text-decoration: none; color: inherit;">
|
|
<i class="fas fa-arrow-left" style="font-size: 1rem; vertical-align: middle;"></i>
|
|
</a>
|
|
Timeline: {{ conflict.name }}
|
|
</h2>
|
|
<span class="badge" style="font-size: 1rem;">{{ noticias|length }} eventos</span>
|
|
</div>
|
|
<p style="color: #666;">
|
|
Keywords: {{ conflict.keywords }}
|
|
</p>
|
|
</div>
|
|
|
|
{% if not noticias %}
|
|
<div class="card" style="text-align: center; padding: 3rem;">
|
|
<p>No se encontraron noticias recientes con las palabras clave especificadas.</p>
|
|
</div>
|
|
{% else %}
|
|
|
|
<div class="timeline">
|
|
{% for n in noticias %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-date">
|
|
{% if n.fecha %}
|
|
<span class="date-day">{{ n.fecha.strftime('%d') }}</span>
|
|
<span class="date-month">{{ n.fecha.strftime('%b') }}</span>
|
|
<span class="date-year">{{ n.fecha.strftime('%Y') }}</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="timeline-marker"></div>
|
|
<div class="timeline-content card">
|
|
{% if n.imagen_url %}
|
|
<div class="timeline-img">
|
|
<img src="{{ n.imagen_url }}" loading="lazy" onerror="this.style.display='none'">
|
|
</div>
|
|
{% endif %}
|
|
|
|
<h3>
|
|
<a
|
|
href="{{ url_for('noticia.noticia', tr_id=n.tr_id if n.tr_id else None, id=n.id if not n.tr_id else None) }}">
|
|
{{ n.titulo }}
|
|
</a>
|
|
</h3>
|
|
|
|
<div class="noticia-meta">
|
|
{{ n.fuente_nombre }}
|
|
{% if n.pais %}| {{ n.pais }}{% endif %}
|
|
</div>
|
|
|
|
<p>{{ (n.resumen or '') | safe_html | truncate(150) }}</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% endif %}
|
|
|
|
<style>
|
|
/* Timeline Styles */
|
|
.timeline {
|
|
position: relative;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
/* Vertical Line */
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 80px;
|
|
/* Position of line */
|
|
width: 2px;
|
|
background: var(--border-color);
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
margin-bottom: 40px;
|
|
padding-left: 120px;
|
|
/* Space for date and line */
|
|
}
|
|
|
|
.timeline-date {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 60px;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.date-day {
|
|
display: block;
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
.date-month {
|
|
display: block;
|
|
font-size: 0.9rem;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.date-year {
|
|
display: block;
|
|
font-size: 0.8rem;
|
|
color: #888;
|
|
}
|
|
|
|
.timeline-marker {
|
|
position: absolute;
|
|
left: 74px;
|
|
/* On the line (80px - 6px radius) */
|
|
top: 10px;
|
|
width: 14px;
|
|
height: 14px;
|
|
background: var(--paper-color);
|
|
border: 3px solid var(--accent-color);
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.timeline-content {
|
|
position: relative;
|
|
padding: 1.5rem;
|
|
border-left: 4px solid var(--accent-color);
|
|
}
|
|
|
|
.timeline-content h3 {
|
|
font-size: 1.3rem;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.timeline-img img {
|
|
width: 100%;
|
|
height: 150px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Dark Mode Overrides */
|
|
.dark-mode .timeline::before {
|
|
background: #444;
|
|
}
|
|
|
|
.dark-mode .timeline-marker {
|
|
background: #1a1a2e;
|
|
}
|
|
</style>
|
|
{% endblock %} |