feat: paginación de noticias (app.py + templates)

This commit is contained in:
jlimolina 2025-10-08 18:53:10 +02:00
parent db6fa3d2c3
commit 8109dbf274
3 changed files with 233 additions and 104 deletions

View file

@ -3,27 +3,28 @@
<li class="noticia-item">
{% if noticia.imagen_url %}
<div class="noticia-imagen">
<a href="{{ noticia.url }}" target="_blank" rel="noopener noreferrer"><img src="{{ noticia.imagen_url }}" alt="Imagen para {{ noticia.titulo }}" loading="lazy"></a>
<a href="{{ noticia.url }}" target="_blank" rel="noopener noreferrer">
<img src="{{ noticia.imagen_url }}" alt="Imagen para {{ noticia.titulo }}" loading="lazy">
</a>
</div>
{% endif %}
<div class="noticia-texto">
<h3><a href="{{ noticia.url }}" target="_blank" rel="noopener noreferrer">{{ noticia.titulo }}</a></h3>
<div class="noticia-meta">
<span><i class="far fa-calendar-alt"></i> {{ noticia.fecha.strftime('%d-%m-%Y %H:%M') if noticia.fecha else 'N/D' }}</span>
<span><i class="far fa-calendar-alt"></i>
{{ noticia.fecha.strftime('%d-%m-%Y %H:%M') if noticia.fecha else 'N/D' }}
</span>
{% if noticia.fuente_nombre %}
| <span><i class="fas fa-newspaper"></i> <strong>{{ noticia.fuente_nombre }}</strong></span>
{% endif %}
{% if noticia.categoria %}
| <span><i class="fas fa-tag"></i> {{ noticia.categoria }}</span>
{% endif %}
{% if noticia.pais %}
| <span><i class="fas fa-globe-americas"></i> {{ noticia.pais }}</span>
{% endif %}
</div>
<div class="resumen-container">
<div class="resumen-corto">
{{ noticia.resumen | safe_html | truncate(280, True) }}
@ -31,11 +32,11 @@
<div class="resumen-completo" style="display: none;">
{{ noticia.resumen | safe_html }}
</div>
{% if noticia.resumen|length > 280 %}
{% if noticia.resumen and noticia.resumen|length > 280 %}
<button class="ver-mas-btn">Ver más</button>
{% endif %}
</div>
</div>
</div>
</li>
{% else %}
<li class="text-center p-4">
@ -43,3 +44,50 @@
</li>
{% endfor %}
</ul>
{# Resumen y paginación #}
{% if total_results and total_results > 0 %}
<div style="text-align:center; margin-top: 10px; color: var(--text-color-light);">
{% set start_i = (page - 1) * per_page + 1 %}
{% set end_i = (page - 1) * per_page + (noticias|length) %}
Mostrando {{ start_i }}{{ end_i }} de {{ total_results }}
</div>
{% endif %}
{% if total_pages and total_pages > 1 %}
<nav class="pagination" aria-label="Paginación de noticias" style="margin-top: 15px;">
{% set current = page %}
{# Anterior #}
{% if current > 1 %}
<a href="#" class="page-link" data-page="{{ current - 1 }}">&laquo; Anterior</a>
{% endif %}
{# Ventana de páginas (máx 5 alrededor) #}
{% set start = 1 if current - 2 < 1 else current - 2 %}
{% set end = total_pages if current + 2 > total_pages else current + 2 %}
{% if start > 1 %}
<a href="#" class="page-link" data-page="1">1</a>
{% if start > 2 %}<span class="page-link"></span>{% endif %}
{% endif %}
{% for p in range(start, end + 1) %}
{% if p == current %}
<span class="page-link active">{{ p }}</span>
{% else %}
<a href="#" class="page-link" data-page="{{ p }}">{{ p }}</a>
{% endif %}
{% endfor %}
{% if end < total_pages %}
{% if end < total_pages - 1 %}<span class="page-link"></span>{% endif %}
<a href="#" class="page-link" data-page="{{ total_pages }}">{{ total_pages }}</a>
{% endif %}
{# Siguiente #}
{% if current < total_pages %}
<a href="#" class="page-link" data-page="{{ current + 1 }}">Siguiente &raquo;</a>
{% endif %}
</nav>
{% endif %}