mejora de la semantica
This commit is contained in:
parent
d508dc2058
commit
cb8f69fb93
10 changed files with 191 additions and 227 deletions
|
|
@ -1,9 +1,14 @@
|
|||
<ul class="noticias-list">
|
||||
{% for n in noticias %}
|
||||
{% if n.traduccion_id %}
|
||||
{% set detalle_url = url_for('noticia', tr_id=n.traduccion_id) %}
|
||||
{% else %}
|
||||
{% set detalle_url = url_for('noticia', id=n.id) %}
|
||||
{% endif %}
|
||||
<li class="noticia-item" data-item>
|
||||
{% if n.imagen_url %}
|
||||
<div class="noticia-imagen">
|
||||
<a href="{{ n.url }}" target="_blank" rel="noopener noreferrer">
|
||||
<a href="{{ detalle_url }}">
|
||||
<img src="{{ n.imagen_url }}" alt="Imagen para {{ n.titulo }}" loading="lazy">
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -23,13 +28,13 @@
|
|||
<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">
|
||||
<a href="{{ detalle_url }}">
|
||||
{{ n.titulo_traducido or n.titulo }}
|
||||
</a>
|
||||
{% if n.tiene_traduccion %}
|
||||
<span class="badge" title="Mostrando traducción">ES</span>
|
||||
<span class="badge" title="Mostrando traducción">{{ (lang or 'es')|upper }}</span>
|
||||
{% if n.traduccion_id %}
|
||||
<a class="mini-link" href="{{ url_for('noticia', tr_id=n.traduccion_id) }}">ver detalle</a>
|
||||
<a class="mini-link" href="{{ detalle_url }}">ver detalle</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</h3>
|
||||
|
|
@ -54,8 +59,7 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# === Chips de tags para la TRADUCCIÓN (si existen) === #}
|
||||
{% set chips = (tags_por_trad.get(n.traduccion_id) if (n.traduccion_id and tags_por_trad) else None) %}
|
||||
{% set chips = (tags_por_tr.get(n.traduccion_id) if (n.traduccion_id and tags_por_tr) else None) %}
|
||||
{% if chips %}
|
||||
<div class="noticia-tags" style="margin-top:8px;" aria-label="Etiquetas">
|
||||
{% for valor, tipo in chips %}
|
||||
|
|
@ -63,11 +67,19 @@
|
|||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if n.url %}
|
||||
<div style="margin-top:8px;">
|
||||
<a href="{{ n.url }}" class="mini-link" target="_blank" rel="noopener noreferrer">
|
||||
Ver fuente original
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</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">
|
||||
<a href="{{ detalle_url }}">
|
||||
{{ n.titulo_original or n.titulo }}
|
||||
</a>
|
||||
<span class="badge badge-secondary">ORIG</span>
|
||||
|
|
@ -92,6 +104,14 @@
|
|||
<button class="ver-mas-btn" type="button">Ver más</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if n.url %}
|
||||
<div style="margin-top:8px;">
|
||||
<a href="{{ n.url }}" class="mini-link" target="_blank" rel="noopener noreferrer">
|
||||
Ver fuente original
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -144,7 +164,6 @@
|
|||
root.addEventListener('click', function(e){
|
||||
const t = e.target;
|
||||
|
||||
// Ver más / Ver menos
|
||||
const verMasBtn = t.closest('.ver-mas-btn');
|
||||
if (verMasBtn) {
|
||||
const wrap = verMasBtn.closest('.resumen-container');
|
||||
|
|
@ -158,7 +177,6 @@
|
|||
return;
|
||||
}
|
||||
|
||||
// Pestañas
|
||||
const tabBtn = t.closest('.tab-btn');
|
||||
if (tabBtn && !tabBtn.disabled) {
|
||||
const li = tabBtn.closest('[data-item]');
|
||||
|
|
@ -172,7 +190,6 @@
|
|||
});
|
||||
}
|
||||
|
||||
// Paginación (AJAX)
|
||||
const pageLink = t.closest('.page-link[data-page]');
|
||||
if (pageLink) {
|
||||
e.preventDefault();
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
{% extends "base.html" %}
|
||||
{% block title %}
|
||||
{% set d = dato if dato is defined else (r if r is defined else None) %}
|
||||
{% if d %}
|
||||
{{ d.titulo_trad or d.titulo_orig or d.titulo_traducido or d.titulo_original or 'Detalle de Noticia' }}
|
||||
{% if dato %}
|
||||
{{ dato.titulo_trad or dato.titulo_orig or 'Detalle de Noticia' }}
|
||||
{% else %}
|
||||
Detalle de Noticia
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% set d = dato if dato is defined else (r if r is defined else None) %}
|
||||
{% set d = dato %}
|
||||
|
||||
{% if not d %}
|
||||
<div class="card">
|
||||
|
|
@ -21,12 +20,14 @@
|
|||
<div class="card">
|
||||
<div class="feed-header">
|
||||
<h2 style="margin:0;">
|
||||
{{ d.titulo_trad or d.titulo_orig or d.titulo_traducido or d.titulo_original }}
|
||||
{% if d.lang_to %}<span class="badge" title="Traducción">{{ d.lang_to|upper }}</span>{% endif %}
|
||||
{{ d.titulo_trad or d.titulo_orig }}
|
||||
{% if d.lang_to %}
|
||||
<span class="badge" title="Traducción">{{ d.lang_to|upper }}</span>
|
||||
{% endif %}
|
||||
</h2>
|
||||
{% if d.fuente_url or d.url %}
|
||||
{% if d.url %}
|
||||
<div>
|
||||
<a class="btn btn-small" href="{{ d.fuente_url or d.url }}" target="_blank" rel="noopener">Ver fuente</a>
|
||||
<a class="btn btn-small" href="{{ d.url }}" target="_blank" rel="noopener">Ver fuente</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
@ -36,46 +37,52 @@
|
|||
{% set fecha_ = d.fecha %}
|
||||
{% if fecha_ %}
|
||||
<i class="far fa-calendar-alt"></i>
|
||||
{% if fecha_ is string %}{{ fecha_ }}{% else %}{{ fecha_.strftime('%d-%m-%Y %H:%M') }}{% endif %}
|
||||
{% if fecha_ is string %}
|
||||
{{ fecha_ }}
|
||||
{% else %}
|
||||
{{ fecha_.strftime('%d-%m-%Y %H:%M') }}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if d.fuente_nombre %} | <i class="fas fa-newspaper"></i> {{ d.fuente_nombre }}{% endif %}
|
||||
{% if d.categoria %} | <i class="fas fa-tag"></i> {{ d.categoria }}{% endif %}
|
||||
{% if d.pais %} | <i class="fas fa-globe-americas"></i> {{ d.pais }}{% endif %}
|
||||
</div>
|
||||
|
||||
{% if d.resumen_trad or d.cuerpo_traducido %}
|
||||
{% if d.imagen_url %}
|
||||
<div style="margin-bottom:16px; text-align:center;">
|
||||
<img src="{{ d.imagen_url }}" alt="Imagen de la noticia" style="max-width:100%; height:auto;" loading="lazy">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if d.resumen_trad %}
|
||||
<h3>Resumen (traducido)</h3>
|
||||
<div>{{ (d.resumen_trad or d.cuerpo_traducido)|safe_html }}</div>
|
||||
<div>{{ d.resumen_trad|safe_html }}</div>
|
||||
<hr>
|
||||
{% endif %}
|
||||
|
||||
{% if d.resumen_orig or d.cuerpo_original or d.resumen or d.titulo_original %}
|
||||
{% if d.resumen_orig %}
|
||||
<h3>Resumen (original)</h3>
|
||||
<div>{{ (d.resumen_orig or d.cuerpo_original or d.resumen)|safe_html }}</div>
|
||||
<div>{{ d.resumen_orig|safe_html }}</div>
|
||||
{% endif %}
|
||||
|
||||
{% if tags is defined and tags and tags|length %}
|
||||
{% if tags and tags|length %}
|
||||
<div style="margin-top:16px;">
|
||||
{% for t in tags %}
|
||||
{# t puede ser DictRow (t['valor']) o tupla (t.0) #}
|
||||
{% set valor = t.valor if t.valor is defined else (t[0] if t[0] is defined else '') %}
|
||||
{% set tipo = t.tipo if t.tipo is defined else (t[1] if t[1] is defined else '') %}
|
||||
<span class="badge" title="{{ (tipo or '')|capitalize }}">{{ valor }}</span>
|
||||
<span class="badge" title="{{ (t.tipo or '')|capitalize }}">{{ t.valor }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% set rels = relacionadas if relacionadas is defined else None %}
|
||||
{% if rels and rels|length %}
|
||||
{% if relacionadas and relacionadas|length %}
|
||||
<div class="card" style="margin-top:18px;">
|
||||
<div class="card-header">
|
||||
<h3 style="margin:0;">Noticias relacionadas</h3>
|
||||
</div>
|
||||
<div class="feed-body">
|
||||
<ul class="noticias-list">
|
||||
{% for r in rels %}
|
||||
{% for r in relacionadas %}
|
||||
<li class="noticia-item">
|
||||
{% if r.imagen_url %}
|
||||
<div class="noticia-imagen">
|
||||
|
|
@ -91,14 +98,17 @@
|
|||
<div class="noticia-meta">
|
||||
{% if r.fecha %}
|
||||
<i class="far fa-calendar-alt"></i>
|
||||
{% if r.fecha is string %}{{ r.fecha }}{% else %}{{ r.fecha.strftime('%d-%m-%Y %H:%M') }}{% endif %}
|
||||
{% if r.fecha is string %}
|
||||
{{ r.fecha }}
|
||||
{% else %}
|
||||
{{ r.fecha.strftime('%d-%m-%Y %H:%M') }}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if r.fuente_nombre %} | <i class="fas fa-newspaper"></i> {{ r.fuente_nombre }}{% endif %}
|
||||
{% if r.score is defined %} | <span title="Similitud coseno">score: {{ "%.3f"|format(r.score) }}</span>{% endif %}
|
||||
{% if r.score is defined %}
|
||||
| <span title="Similitud coseno">score: {{ "%.3f"|format(r.score) }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if r.resumen %}
|
||||
<div class="clamp">{{ r.resumen }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,13 @@
|
|||
<div class="filter-main-row">
|
||||
<div class="filter-search-box">
|
||||
<label for="q">Buscar por palabra clave</label>
|
||||
<input type="search" name="q" id="q" placeholder="Ej: Trump, California, IA..." value="{{ q or '' }}">
|
||||
<input
|
||||
type="search"
|
||||
name="q"
|
||||
id="q"
|
||||
placeholder="Ej: Trump, California, guerra en el mar Rojo..."
|
||||
value="{{ q or '' }}"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="filter-actions">
|
||||
|
|
@ -51,7 +57,11 @@
|
|||
<select name="pais_id" id="pais_id">
|
||||
<option value="">— Todos —</option>
|
||||
{% for pais in paises %}
|
||||
<option value="{{ pais.id }}" data-continente-id="{{ pais.continente_id }}" {% if pais_id == pais.id %}selected{% endif %}>
|
||||
<option
|
||||
value="{{ pais.id }}"
|
||||
data-continente-id="{{ pais.continente_id }}"
|
||||
{% if pais_id == pais.id %}selected{% endif %}
|
||||
>
|
||||
{{ pais.nombre }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
|
|
@ -135,17 +145,14 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
const newUrl = `${form.action}?${params.toString()}`;
|
||||
|
||||
await cargarNoticiasFromURL(newUrl);
|
||||
// Actualizar historial
|
||||
window.history.pushState({ path: newUrl }, '', newUrl);
|
||||
}
|
||||
|
||||
// Submit manual
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
cargarNoticias(false);
|
||||
});
|
||||
|
||||
// Toggle traducción/original
|
||||
const toggleOrig = document.getElementById('toggle-orig');
|
||||
const toggleTr = document.getElementById('toggle-tr');
|
||||
|
||||
|
|
@ -165,7 +172,6 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
});
|
||||
}
|
||||
|
||||
// Cambios en selects/fecha -> recarga automática
|
||||
continenteSelect.addEventListener('change', function() {
|
||||
filtrarPaises();
|
||||
cargarNoticias(false);
|
||||
|
|
@ -180,7 +186,6 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
cargarNoticias(false);
|
||||
});
|
||||
|
||||
// Debounce búsqueda
|
||||
let qTimer = null;
|
||||
qInput.addEventListener('input', function() {
|
||||
if (qTimer) clearTimeout(qTimer);
|
||||
|
|
@ -189,10 +194,8 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
}, 450);
|
||||
});
|
||||
|
||||
// Cargar países al inicio
|
||||
filtrarPaises();
|
||||
|
||||
// Soporte de navegación del historial
|
||||
window.addEventListener('popstate', function(e) {
|
||||
const url = (e.state && e.state.path) ? e.state.path : window.location.href;
|
||||
cargarNoticiasFromURL(url);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue