pietre/rss
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update:español por defecto

Browse source
This commit is contained in:
jlimolina 2025-10-10 19:50:54 +02:00
parent da4c59a0e1
commit 046a5ff369
6 changed files with 381 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

190
templates/_noticias_list.html
View file

@ -1,53 +1,70 @@
<ul class="noticias-list">
{% for noticia in noticias %}
<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>
</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>
{% 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>
{% for noticia in noticias %}
<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>
</div>
{% endif %}
<div class="resumen-container">
<div class="resumen-corto">
{{ noticia.resumen | safe_html | truncate(280, True) }}
</div>
<div class="resumen-completo" style="display: none;">
{{ noticia.resumen | safe_html }}
</div>
{% if noticia.resumen and noticia.resumen|length > 280 %}
<button class="ver-mas-btn">Ver más</button>
{% endif %}
</div>
<div class="noticia-texto">
<h3 style="margin:0 0 6px 0;">
<a href="{{ noticia.url }}" target="_blank" rel="noopener noreferrer">{{ noticia.titulo }}</a>
{% if use_tr %}
<span class="badge" title="Mostrando traducciones por defecto" style="margin-left:8px;">Traducido</span>
{% endif %}
</h3>
<div class="noticia-meta">
<span>
<i class="far fa-calendar-alt"></i>
{% if noticia.fecha %}
{% if noticia.fecha is string %}
{{ noticia.fecha }}
{% else %}
{{ noticia.fecha.strftime('%d-%m-%Y %H:%M') }}
{% endif %}
{% else %}
N/D
{% endif %}
</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">
{% set resumen_txt = noticia.resumen | safe_html %}
<div class="resumen-corto">
{{ resumen_txt | truncate(280, True) }}
</div>
</li>
{% else %}
<li class="text-center p-4">
<i class="fas fa-info-circle"></i> No hay noticias que mostrar con los filtros seleccionados.
</li>
{% endfor %}
<div class="resumen-completo" style="display:none;">
{{ resumen_txt }}
</div>
{% if noticia.resumen and noticia.resumen|length > 280 %}
<button class="ver-mas-btn" type="button">Ver más</button>
{% endif %}
</div>
</div>
</li>
{% else %}
<li class="text-center p-4">
<i class="fas fa-info-circle"></i> No hay noticias que mostrar con los filtros seleccionados.
</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);">
<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 }}
@ -55,39 +72,66 @@
{% 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>
<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 %}
{# 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 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 %}
{% 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 %}
{# Siguiente #}
{% if current < total_pages %}
<a href="#" class="page-link" data-page="{{ current + 1 }}">Siguiente &raquo;</a>
{% endif %}
</nav>
{% endif %}
{# Toggle "Ver más / Ver menos" con delegación; se liga una sola vez #}
<script>
(function () {
if (window.__noticiasToggleBound) return;
window.__noticiasToggleBound = true;
const container = document.getElementById('noticias-container') || document;
container.addEventListener('click', function (e) {
const btn = e.target.closest('.ver-mas-btn');
if (!btn) return;
const wrap = btn.closest('.resumen-container');
if (!wrap) return;
const corto = wrap.querySelector('.resumen-corto');
const completo = wrap.querySelector('.resumen-completo');
if (!corto || !completo) return;
const expanded = completo.style.display === 'block';
completo.style.display = expanded ? 'none' : 'block';
corto.style.display = expanded ? 'block' : 'none';
btn.textContent = expanded ? 'Ver más' : 'Ver menos';
});
})();
</script>

37
templates/base.html
View file

@ -4,13 +4,36 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Agregador de Noticias RSS{% endblock %}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<!-- Estilos mínimos para chapa "Traducido" y (opcional) switch -->
<style>
.badge{
display:inline-block; font-size:.75rem; line-height:1;
padding:.35rem .5rem; border-radius:.5rem;
background: var(--secondary-color, #6c63ff); color:#fff; vertical-align: middle;
margin-left:.4rem;
}
/* Toggle switch opcional (si lo usas en alguna vista) */
.switch { position: relative; display: inline-block; width: 42px; height: 22px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
position: absolute; cursor: pointer; top:0; left:0; right:0; bottom:0;
background:#ccc; transition:.2s; border-radius:999px;
}
.slider:before {
position: absolute; content:""; height:16px; width:16px; left:3px; bottom:3px;
background:#fff; transition:.2s; border-radius:50%;
}
.switch input:checked + .slider { background: var(--secondary-color, #6c63ff); }
.switch input:checked + .slider:before { transform: translateX(20px); }
</style>
</head>
<body>
<div class="container">
@ -18,7 +41,7 @@
<a href="{{ url_for('home') }}" style="text-decoration:none;">
<h1>Noticias</h1>
</a>
<nav class="main-nav">
<a href="{{ url_for('home') }}" class="nav-link">Noticias</a>
<a href="{{ url_for('dashboard') }}" class="nav-link">Dashboard</a>
@ -36,18 +59,19 @@
</ul>
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</div>
<script>
// Toggle "Ver más / Ver menos" en resúmenes
document.addEventListener('click', function(event) {
if (event.target.classList.contains('ver-mas-btn')) {
const container = event.target.closest('.resumen-container');
const corto = container.querySelector('.resumen-corto');
const completo = container.querySelector('.resumen-completo');
if (completo.style.display === 'none') {
if (completo.style.display === 'none' || completo.style.display === '') {
corto.style.display = 'none';
completo.style.display = 'block';
event.target.textContent = 'Ver menos';
@ -61,3 +85,4 @@
</script>
</body>
</html>

68
templates/noticias.html
View file

@ -10,6 +10,14 @@
<input type="hidden" name="page" id="page" value="{{ page or 1 }}">
<input type="hidden" name="per_page" id="per_page" value="{{ per_page or 20 }}">
<!-- Idioma/traducción por defecto -->
<input type="hidden" name="lang" id="lang" value="{{ (lang or 'es') }}">
{% if not use_tr %}
<input type="hidden" name="orig" id="orig" value="1">
{% else %}
<input type="hidden" name="orig" id="orig" value="">
{% endif %}
<div class="filter-main-row">
<div class="filter-search-box">
<label for="q">Buscar por palabra clave</label>
@ -60,7 +68,22 @@
</form>
</div>
<div id="noticias-container">
<!-- Barra de estado de traducción -->
<div class="card" style="margin-top: 16px; padding: 12px;">
{% if use_tr %}
<div class="alert alert-info" style="margin:0;">
Mostrando <strong>traducciones</strong> a <strong>{{ (lang or 'es')|upper }}</strong>.
<a href="#" id="toggle-orig" class="ms-2">Ver originales</a>
</div>
{% else %}
<div class="alert alert-secondary" style="margin:0;">
Mostrando <strong>texto original</strong>.
<a href="#" id="toggle-tr" class="ms-2">Usar traducciones</a>
</div>
{% endif %}
</div>
<div id="noticias-container" style="margin-top:16px;">
{# El parcial incluye la lista + la paginación #}
{% include '_noticias_list.html' %}
</div>
@ -71,6 +94,8 @@ document.addEventListener('DOMContentLoaded', function() {
const continenteSelect = document.getElementById('continente_id');
const paisSelect = document.getElementById('pais_id');
const pageInput = document.getElementById('page');
const origInput = document.getElementById('orig');
const langInput = document.getElementById('lang');
function filtrarPaises() {
const continenteId = continenteSelect.value;
@ -119,13 +144,46 @@ document.addEventListener('DOMContentLoaded', function() {
// Clic en enlaces de paginación (delegación)
document.addEventListener('click', function(e) {
const link = e.target.closest('a.page-link');
if (link && link.dataset.page) {
e.preventDefault();
pageInput.value = link.dataset.page;
cargarNoticias(true);
if (link) {
// soporta data-page o parseo del href
let nextPage = link.dataset.page;
if (!nextPage) {
try {
const u = new URL(link.href);
nextPage = u.searchParams.get('page');
} catch(_) {}
}
if (nextPage) {
e.preventDefault();
pageInput.value = nextPage;
cargarNoticias(true);
}
}
});
// Conmutar traducciones <-> originales manteniendo filtros
const toggleOrig = document.getElementById('toggle-orig');
const toggleTr = document.getElementById('toggle-tr');
if (toggleOrig) {
toggleOrig.addEventListener('click', function(e) {
e.preventDefault();
// orig=1 fuerza originales
origInput.value = '1';
cargarNoticias(false);
});
}
if (toggleTr) {
toggleTr.addEventListener('click', function(e) {
e.preventDefault();
// orig vacío => usar traducciones
origInput.value = '';
// asegúrate de tener lang (por si el back usa default)
if (!langInput.value) langInput.value = 'es';
cargarNoticias(false);
});
}
// Inicializaciones
continenteSelect.addEventListener('change', function() {
filtrarPaises();