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

añadida pestaña de traducido

Browse source
This commit is contained in:
jlimolina 2025-10-13 01:23:35 +02:00
parent a9c1e16bdd
commit 0bfeb610a9
4 changed files with 179 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

16
app.py
View file

@ -166,20 +166,30 @@ def _build_news_query(args, *, count=False, limit=None, offset=None, lang="es",
SELECT
COALESCE(t.traduccion_id, NULL) AS traduccion_id,
n.fecha,
n.titulo AS titulo_original,
n.resumen AS resumen_original,
t.titulo_trad AS titulo_traducido,
t.resumen_trad AS resumen_traducido,
COALESCE(t.titulo_trad, n.titulo) AS titulo,
COALESCE(t.resumen_trad, n.resumen) AS resumen,
n.url, n.imagen_url, n.fuente_nombre,
c.nombre AS categoria, p.nombre AS pais, co.nombre AS continente,
(t.titulo_trad IS NOT NULL OR t.resumen_trad IS NOT NULL) AS usa_trad
(t.titulo_trad IS NOT NULL OR t.resumen_trad IS NOT NULL) AS tiene_traduccion
"""
else:
select_cols = """
SELECT
NULL::int AS traduccion_id,
n.fecha, n.titulo, n.resumen,
n.fecha,
n.titulo AS titulo_original,
n.resumen AS resumen_original,
NULL::text AS titulo_traducido,
NULL::text AS resumen_traducido,
n.titulo AS titulo,
n.resumen AS resumen,
n.url, n.imagen_url, n.fuente_nombre,
c.nombre AS categoria, p.nombre AS pais, co.nombre AS continente,
FALSE AS usa_trad
FALSE AS tiene_traduccion
"""
order_clause = " ORDER BY n.fecha DESC NULLS LAST"

35
static/style.css
View file

@ -159,4 +159,39 @@ a { color: var(--secondary-color); text-decoration: none; font-weight: 500; } a:
max-height: none;
overflow: visible;
}
/* Pestañas por noticia */
.tabs { width: 100%; }
.tabs-header { display: flex; gap: 8px; margin-bottom: 8px; }
.tab-btn {
background: rgba(255,255,255,0.7);
border: 1px solid var(--border-color);
border-radius: 999px;
padding: 6px 12px;
font-weight: 600;
cursor: pointer;
}
.tab-btn.active {
background: var(--gradiente-principal);
color: #fff !important;
border-color: transparent;
}
.tab-btn[disabled] {
opacity: .45;
cursor: not-allowed;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.badge {
display: inline-block;
margin-left: 8px;
font-size: .75rem;
padding: 2px 8px;
border-radius: 999px;
background: #e8f0ff;
color: var(--secondary-color);
vertical-align: middle;
}
.badge-secondary { background: #f1f3f5; color: #555; }
.mini-link { margin-left: 8px; font-size: .8rem; }
.m0 { margin: 0 0 6px 0; }

182
templates/_noticias_list.html
View file

@ -1,58 +1,91 @@
<ul class="noticias-list">
{% for noticia in noticias %}
<li class="noticia-item">
{% if noticia.imagen_url %}
{% for n in noticias %}
<li class="noticia-item" data-item>
{% if n.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 href="{{ n.url }}" target="_blank" rel="noopener noreferrer">
<img src="{{ n.imagen_url }}" alt="Imagen para {{ n.titulo }}" loading="lazy">
</a>
</div>
{% endif %}
<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 %}
{% if noticia.usa_tr %}
<span class="badge" title="Mostrando traducción">Traducido</span>
{% else %}
<span class="badge" title="Mostrando original">Original</span>
<div class="tabs">
<div class="tabs-header" role="tablist">
<button class="tab-btn {% if use_tr and n.tiene_traduccion %}active{% endif %}" data-tab="trad" {% if not n.tiene_traduccion %}disabled{% endif %}>
Traducido
</button>
<button class="tab-btn {% if not (use_tr and n.tiene_traduccion) %}active{% endif %}" data-tab="orig">
Original
</button>
</div>
<div class="tabs-body">
<div class="tab-panel {% if use_tr and n.tiene_traduccion %}active{% endif %}" data-panel="trad">
<h3 class="m0">
<a href="{{ n.url }}" target="_blank" rel="noopener noreferrer">
{{ n.titulo_traducido or n.titulo }}
</a>
{% if n.tiene_traduccion %}
<span class="badge" title="Mostrando traducción">ES</span>
{% if n.traduccion_id %}
<a class="mini-link" href="{{ url_for('noticia', tr_id=n.traduccion_id) }}">ver detalle</a>
{% endif %}
{% 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><i class="far fa-calendar-alt"></i>
{% if n.fecha %}
{% if n.fecha is string %}{{ n.fecha }}{% else %}{{ n.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 %}
{% if n.fuente_nombre %} | <span><i class="fas fa-newspaper"></i> <strong>{{ n.fuente_nombre }}</strong></span>{% endif %}
{% if n.categoria %} | <span><i class="fas fa-tag"></i> {{ n.categoria }}</span>{% endif %}
{% if n.pais %} | <span><i class="fas fa-globe-americas"></i> {{ n.pais }}</span>{% endif %}
</div>
<div class="resumen-container">
{% set resumen_txt = noticia.resumen | safe_html %}
<div class="resumen clamp">{{ resumen_txt }}</div>
{% if noticia.resumen and noticia.resumen|length > 280 %}
{% set resumen_txt = (n.resumen_traducido or n.resumen) | safe_html %}
<div class="resumen-corto">{{ resumen_txt | truncate(280, True) }}</div>
<div class="resumen-completo" style="display:none;">{{ resumen_txt }}</div>
{% if (n.resumen_traducido or n.resumen) and (n.resumen_traducido or n.resumen)|length > 280 %}
<button class="ver-mas-btn" type="button">Ver más</button>
{% endif %}
</div>
</div>
<div class="tab-panel {% if not (use_tr and n.tiene_traduccion) %}active{% endif %}" data-panel="orig">
<h3 class="m0">
<a href="{{ n.url }}" target="_blank" rel="noopener noreferrer">
{{ n.titulo_original or n.titulo }}
</a>
<span class="badge badge-secondary">ORIG</span>
</h3>
<div class="noticia-meta">
<span><i class="far fa-calendar-alt"></i>
{% if n.fecha %}
{% if n.fecha is string %}{{ n.fecha }}{% else %}{{ n.fecha.strftime('%d-%m-%Y %H:%M') }}{% endif %}
{% else %}N/D{% endif %}
</span>
{% if n.fuente_nombre %} | <span><i class="fas fa-newspaper"></i> <strong>{{ n.fuente_nombre }}</strong></span>{% endif %}
{% if n.categoria %} | <span><i class="fas fa-tag"></i> {{ n.categoria }}</span>{% endif %}
{% if n.pais %} | <span><i class="fas fa-globe-americas"></i> {{ n.pais }}</span>{% endif %}
</div>
<div class="resumen-container">
{% set resumen_orig = (n.resumen_original or n.resumen) | safe_html %}
<div class="resumen-corto">{{ resumen_orig | truncate(280, True) }}</div>
<div class="resumen-completo" style="display:none;">{{ resumen_orig }}</div>
{% if (n.resumen_original or n.resumen) and (n.resumen_original or n.resumen)|length > 280 %}
<button class="ver-mas-btn" type="button">Ver más</button>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</li>
{% else %}
<li class="text-center p-4">
@ -72,62 +105,75 @@
{% if total_pages and total_pages > 1 %}
<nav class="pagination" aria-label="Paginación de noticias" style="margin-top:15px;">
{% set current = page %}
{% if current > 1 %}
<a href="#" class="page-link" data-page="{{ current - 1 }}">&laquo; Anterior</a>
{% endif %}
{% if current > 1 %}<a href="#" class="page-link" data-page="{{ current - 1 }}">&laquo; Anterior</a>{% endif %}
{% 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 %}
{% 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 %}
{% if current < total_pages %}
<a href="#" class="page-link" data-page="{{ current + 1 }}">Siguiente &raquo;</a>
{% endif %}
{% if current < total_pages %}<a href="#" class="page-link" data-page="{{ current + 1 }}">Siguiente &raquo;</a>{% endif %}
</nav>
{% endif %}
<script>
(function () {
if (window.__noticiasToggleBound) return;
window.__noticiasToggleBound = true;
if (window.__noticiasHandlersBound) return;
window.__noticiasHandlersBound = true;
const container = document.getElementById('noticias-container') || document;
const root = document.getElementById('noticias-container') || document;
container.addEventListener('click', function (e) {
const btn = e.target.closest('.ver-mas-btn');
if (!btn) return;
root.addEventListener('click', function(e){
const t = e.target;
const wrap = btn.closest('.resumen-container');
// Ver más / Ver menos
const verMasBtn = t.closest('.ver-mas-btn');
if (verMasBtn) {
const wrap = verMasBtn.closest('.resumen-container');
if (!wrap) return;
const corto = wrap.querySelector('.resumen-corto');
const completo = wrap.querySelector('.resumen-completo');
const expanded = completo.style.display === 'block';
completo.style.display = expanded ? 'none' : 'block';
corto.style.display = expanded ? 'block' : 'none';
verMasBtn.textContent = expanded ? 'Ver más' : 'Ver menos';
return;
}
const resumen = wrap.querySelector('.resumen.clamp');
if (!resumen) return;
// Pestañas
const tabBtn = t.closest('.tab-btn');
if (tabBtn && !tabBtn.disabled) {
const li = tabBtn.closest('[data-item]');
const header = tabBtn.parentElement;
header.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
tabBtn.classList.add('active');
const isExpanded = resumen.classList.contains('expanded');
if (isExpanded) {
resumen.classList.remove('expanded');
btn.textContent = 'Ver más';
} else {
resumen.classList.add('expanded');
btn.textContent = 'Ver menos';
const wanted = tabBtn.getAttribute('data-tab');
li.querySelectorAll('.tab-panel').forEach(p => {
p.classList.toggle('active', p.getAttribute('data-panel') === wanted);
});
}
// Paginación (AJAX)
const pageLink = t.closest('.page-link[data-page]');
if (pageLink) {
e.preventDefault();
const url = new URL(window.location.href);
url.searchParams.set('page', pageLink.dataset.page);
fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
.then(r => r.text())
.then(html => {
(document.getElementById('noticias-container') || document).innerHTML = html;
})
.catch(console.error);
}
});
})();

35
templates/noticias.html
View file

@ -6,11 +6,8 @@
<h2><i class="fas fa-filter" style="color: var(--secondary-color); margin-right: 10px;"></i>Filtrar Noticias</h2>
<form method="get" action="{{ url_for('home') }}" id="filter-form">
<!-- Campos ocultos para paginación -->
<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">
@ -68,7 +65,6 @@
</form>
</div>
<!-- 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;">
@ -84,7 +80,6 @@
</div>
<div id="noticias-container" style="margin-top:16px;">
{# El parcial incluye la lista + la paginación #}
{% include '_noticias_list.html' %}
</div>
@ -111,7 +106,6 @@ document.addEventListener('DOMContentLoaded', function() {
}
async function cargarNoticias(keepPage) {
// Si cambiamos filtros manualmente, reiniciamos a página 1
if (!keepPage) pageInput.value = 1;
const formData = new FormData(form);
@ -135,40 +129,17 @@ document.addEventListener('DOMContentLoaded', function() {
}
}
// Envío del formulario (filtrar) -> page = 1
form.addEventListener('submit', function(e) {
e.preventDefault();
cargarNoticias(false);
});
// Clic en enlaces de paginación (delegación)
document.addEventListener('click', function(e) {
const link = e.target.closest('a.page-link');
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);
});
@ -176,22 +147,18 @@ document.addEventListener('DOMContentLoaded', function() {
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();
// al cambiar continente, forzamos recarga desde página 1
cargarNoticias(false);
});
filtrarPaises(); // Ejecutar al inicio
filtrarPaises();
});
</script>
{% endblock %}