cambios en la busqueda ajaz y correcciones en traducciones
This commit is contained in:
jlimolina
parent
95adc07f37
commit
47a252e339
9 changed files with 1152 additions and 449 deletions
|
|
@ -82,349 +82,369 @@
|
|||
|
||||
|
||||
|
||||
{% if session.get('user_id') and recent_searches_with_results and not q and page == 1 %}
|
||||
<div class="search-history-home" style="margin-bottom: 3rem; padding: 0 10px;">
|
||||
<h3 style="margin-bottom: 20px; color: var(--text-color); font-weight: 600; padding-left: 10px;">
|
||||
<i class="fas fa-history"></i> Tu Actividad Reciente
|
||||
</h3>
|
||||
<div class="timeline-container">
|
||||
{% for search in recent_searches_with_results %}
|
||||
<div class="timeline-item" id="search-block-{{ search.id }}">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content search-block-container">
|
||||
<button onclick="confirmDeleteSearch('{{ search.id }}')" class="btn-delete-search"
|
||||
title="Eliminar este bloque">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
<div id="search-history-container" {% if q %}style="display:none;" {% endif %}>
|
||||
{% if session.get('user_id') and recent_searches_with_results and not q and page == 1 %}
|
||||
<div class="search-history-home" style="margin-bottom: 3rem; padding: 0 10px;">
|
||||
<h3 style="margin-bottom: 20px; color: var(--text-color); font-weight: 600; padding-left: 10px;">
|
||||
<i class="fas fa-history"></i> Tu Actividad Reciente
|
||||
</h3>
|
||||
<div class="timeline-container">
|
||||
{% for search in recent_searches_with_results %}
|
||||
<div class="timeline-item" id="search-block-{{ search.id }}">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content search-block-container">
|
||||
<button onclick="confirmDeleteSearch('{{ search.id }}')" class="btn-delete-search"
|
||||
title="Eliminar este bloque">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
|
||||
{% set search_url = url_for('home.home', q=search.query, pais_id=search.pais_id,
|
||||
categoria_id=search.categoria_id) %}
|
||||
<a href="{{ search_url }}" class="search-block-link" style="text-decoration: none; color: inherit;">
|
||||
<div class="card search-history-card">
|
||||
<div class="timeline-header">
|
||||
<div class="timeline-title">
|
||||
{% if search.query %}
|
||||
<span class="search-query">"{{ search.query }}"</span>
|
||||
{% endif %}
|
||||
{% if search.pais_nombre %}
|
||||
<span class="search-tag"><i class="fas fa-globe-americas"></i> {{ search.pais_nombre
|
||||
}}</span>
|
||||
{% endif %}
|
||||
{% if search.categoria_nombre %}
|
||||
<span class="search-tag"><i class="fas fa-tag"></i> {{ search.categoria_nombre }}</span>
|
||||
{% endif %}
|
||||
{% if not search.query and not search.pais_nombre and not search.categoria_nombre %}
|
||||
<span class="search-query">Búsqueda General</span>
|
||||
{% endif %}
|
||||
{% set search_url = url_for('home.home', q=search.query, pais_id=search.pais_id,
|
||||
categoria_id=search.categoria_id) %}
|
||||
<a href="{{ search_url }}" class="search-block-link" style="text-decoration: none; color: inherit;">
|
||||
<div class="card search-history-card">
|
||||
<div class="timeline-header">
|
||||
<div class="timeline-title">
|
||||
{% if search.query %}
|
||||
<span class="search-query">"{{ search.query }}"</span>
|
||||
{% endif %}
|
||||
{% if search.pais_nombre %}
|
||||
<span class="search-tag"><i class="fas fa-globe-americas"></i> {{ search.pais_nombre
|
||||
}}</span>
|
||||
{% endif %}
|
||||
{% if search.categoria_nombre %}
|
||||
<span class="search-tag"><i class="fas fa-tag"></i> {{ search.categoria_nombre
|
||||
}}</span>
|
||||
{% endif %}
|
||||
{% if not search.query and not search.pais_nombre and not search.categoria_nombre %}
|
||||
<span class="search-query">Búsqueda General</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="timeline-meta">
|
||||
<span title="{{ search.searched_at.strftime('%d/%m/%Y %H:%M') }}">
|
||||
{{ search.searched_at.strftime('%H:%M') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-meta">
|
||||
<span title="{{ search.searched_at.strftime('%d/%m/%Y %H:%M') }}">
|
||||
{{ search.searched_at.strftime('%H:%M') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-results-preview">
|
||||
{% if search.noticias %}
|
||||
<ul class="timeline-news-list">
|
||||
{% for noticia in search.noticias %}
|
||||
<li>
|
||||
{% if noticia.traduccion_id %}
|
||||
<a href="{{ url_for('noticia.noticia', tr_id=noticia.traduccion_id) }}"
|
||||
class="result-tile-link">
|
||||
{% else %}
|
||||
<a href="{{ url_for('noticia.noticia', id=noticia.id) }}"
|
||||
<div class="search-results-preview">
|
||||
{% if search.noticias %}
|
||||
<ul class="timeline-news-list">
|
||||
{% for noticia in search.noticias %}
|
||||
<li>
|
||||
{% if noticia.traduccion_id %}
|
||||
<a href="{{ url_for('noticia.noticia', tr_id=noticia.traduccion_id) }}"
|
||||
class="result-tile-link">
|
||||
{% endif %}
|
||||
<span class="result-title">
|
||||
{{ noticia.titulo_traducido if noticia.tiene_traduccion else
|
||||
noticia.titulo_original }}
|
||||
</span>
|
||||
<span class="result-source">{{ noticia.fuente_nombre }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p class="no-results">Sin resultados nuevos</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<a href="{{ url_for('noticia.noticia', id=noticia.id) }}"
|
||||
class="result-tile-link">
|
||||
{% endif %}
|
||||
<span class="result-title">
|
||||
{{ noticia.titulo_traducido if noticia.tiene_traduccion else
|
||||
noticia.titulo_original }}
|
||||
</span>
|
||||
<span class="result-source">{{ noticia.fuente_nombre }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<p class="no-results">Sin resultados nuevos</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="timeline-footer">
|
||||
<i class="far fa-newspaper"></i> {{ search.results_count }} resultados encontrados
|
||||
<span class="view-more">Ver ahora <i class="fas fa-arrow-right"></i></span>
|
||||
<div class="timeline-footer">
|
||||
<i class="far fa-newspaper"></i> {{ search.results_count }} resultados encontrados
|
||||
<span class="view-more">Ver ahora <i class="fas fa-arrow-right"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--accent-color: var(--accent-red);
|
||||
--text-color: var(--newspaper-gray);
|
||||
--bg-color: var(--paper-cream);
|
||||
--card-bg: var(--paper-white);
|
||||
}
|
||||
<style>
|
||||
:root {
|
||||
--accent-color: var(--accent-red);
|
||||
--text-color: var(--newspaper-gray);
|
||||
--bg-color: var(--paper-cream);
|
||||
--card-bg: var(--paper-white);
|
||||
}
|
||||
|
||||
.timeline-container {
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
border-left: 2px solid var(--accent-red);
|
||||
/* Var accent-color opacity */
|
||||
margin-left: 10px;
|
||||
}
|
||||
.timeline-container {
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
border-left: 2px solid var(--accent-red);
|
||||
/* Var accent-color opacity */
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: -37px;
|
||||
top: 20px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--accent-red);
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--bg-color, #f4f6f8);
|
||||
box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.2);
|
||||
}
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: -37px;
|
||||
top: 20px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--accent-red);
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--bg-color, #f4f6f8);
|
||||
box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.2);
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
position: relative;
|
||||
}
|
||||
.timeline-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-history-card {
|
||||
padding: 0;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
background: var(--card-bg, #fff);
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.search-history-card {
|
||||
padding: 0;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
background: var(--card-bg, #fff);
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.timeline-header {
|
||||
padding: 15px 20px;
|
||||
background: rgba(108, 99, 255, 0.05);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.timeline-header {
|
||||
padding: 15px 20px;
|
||||
background: rgba(108, 99, 255, 0.05);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.timeline-title {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-query {
|
||||
color: var(--accent-color);
|
||||
font-weight: 700;
|
||||
}
|
||||
.search-query {
|
||||
color: var(--accent-color);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.search-tag {
|
||||
font-size: 0.85rem;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
}
|
||||
.search-tag {
|
||||
font-size: 0.85rem;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.timeline-meta {
|
||||
font-size: 0.85rem;
|
||||
color: #888;
|
||||
white-space: nowrap;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.timeline-meta {
|
||||
font-size: 0.85rem;
|
||||
color: #888;
|
||||
white-space: nowrap;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.search-results-preview {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
.search-results-preview {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.timeline-news-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.timeline-news-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.timeline-news-list li {
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.timeline-news-list li {
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.timeline-news-list li:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
.timeline-news-list li:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
display: block;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-color);
|
||||
line-height: 1.4;
|
||||
margin-bottom: 4px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.result-title {
|
||||
display: block;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-color);
|
||||
line-height: 1.4;
|
||||
margin-bottom: 4px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.result-source {
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
}
|
||||
.result-source {
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.result-tile-link:hover .result-title {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.result-tile-link:hover .result-title {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.timeline-footer {
|
||||
padding: 10px 20px;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.timeline-footer {
|
||||
padding: 10px 20px;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.view-more {
|
||||
color: var(--accent-color);
|
||||
font-weight: 500;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.view-more {
|
||||
color: var(--accent-color);
|
||||
font-weight: 500;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.btn-delete-search {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 10;
|
||||
border: none;
|
||||
background: #fff;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
padding: 6px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.btn-delete-search {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 10;
|
||||
border: none;
|
||||
background: #fff;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
padding: 6px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.search-block-container:hover .btn-delete-search {
|
||||
color: #ff4d4d;
|
||||
}
|
||||
.search-block-container:hover .btn-delete-search {
|
||||
color: #ff4d4d;
|
||||
}
|
||||
|
||||
.timeline-item:hover .search-history-card {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.timeline-item:hover .search-history-card {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.timeline-item:hover .view-more {
|
||||
opacity: 1;
|
||||
}
|
||||
.timeline-item:hover .view-more {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Dark Mode Adjustments */
|
||||
.dark-mode .timeline-container {
|
||||
border-left-color: rgba(108, 99, 255, 0.2);
|
||||
}
|
||||
/* Dark Mode Adjustments */
|
||||
.dark-mode .timeline-container {
|
||||
border-left-color: rgba(108, 99, 255, 0.2);
|
||||
}
|
||||
|
||||
.dark-mode .timeline-dot {
|
||||
border-color: #1a2635;
|
||||
/* Dark bg */
|
||||
}
|
||||
.dark-mode .timeline-dot {
|
||||
border-color: #1a2635;
|
||||
/* Dark bg */
|
||||
}
|
||||
|
||||
.dark-mode .search-history-card {
|
||||
background: #252e3e;
|
||||
border-color: #333;
|
||||
}
|
||||
.dark-mode .search-history-card {
|
||||
background: #252e3e;
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.dark-mode .timeline-header {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-bottom-color: #333;
|
||||
}
|
||||
.dark-mode .timeline-header {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-bottom-color: #333;
|
||||
}
|
||||
|
||||
.dark-mode .search-tag {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ccc;
|
||||
}
|
||||
.dark-mode .search-tag {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.dark-mode .timeline-news-list li {
|
||||
border-bottom-color: #333;
|
||||
}
|
||||
.dark-mode .timeline-news-list li {
|
||||
border-bottom-color: #333;
|
||||
}
|
||||
|
||||
.dark-mode .timeline-footer {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-top-color: #333;
|
||||
}
|
||||
.dark-mode .timeline-footer {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-top-color: #333;
|
||||
}
|
||||
|
||||
.dark-mode .btn-delete-search {
|
||||
background: #333;
|
||||
color: #666;
|
||||
}
|
||||
.dark-mode .btn-delete-search {
|
||||
background: #333;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.dark-mode .result-source {
|
||||
color: #777;
|
||||
}
|
||||
.dark-mode .result-source {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
text-align: center;
|
||||
color: #888;
|
||||
font-style: italic;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
.no-results {
|
||||
text-align: center;
|
||||
color: #888;
|
||||
font-style: italic;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function confirmDeleteSearch(searchId) {
|
||||
if (confirm('¿Eliminar este bloque del historial?')) {
|
||||
fetch(`/delete_search/${searchId}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
const block = document.getElementById(`search-block-${searchId}`);
|
||||
if (block) {
|
||||
block.style.opacity = '0';
|
||||
block.style.transform = 'scale(0.9)';
|
||||
setTimeout(() => {
|
||||
block.remove();
|
||||
// If no blocks left, maybe hide the container?
|
||||
const container = document.querySelector('.search-history-home div[style*="grid"]');
|
||||
if (container && container.children.length === 0) {
|
||||
document.querySelector('.search-history-home').remove();
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
} else {
|
||||
alert('Error al eliminar: ' + (data.error || 'Desconocido'));
|
||||
<script>
|
||||
function confirmDeleteSearch(searchId) {
|
||||
if (confirm('¿Eliminar este bloque del historial?')) {
|
||||
fetch(`/delete_search/${searchId}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Error:', err);
|
||||
alert('Error de conexión');
|
||||
});
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
const block = document.getElementById(`search-block-${searchId}`);
|
||||
if (block) {
|
||||
block.style.opacity = '0';
|
||||
block.style.transform = 'scale(0.9)';
|
||||
setTimeout(() => {
|
||||
block.remove();
|
||||
// If no blocks left, maybe hide the container?
|
||||
const container = document.querySelector('.search-history-home div[style*="grid"]');
|
||||
if (container && container.children.length === 0) {
|
||||
document.querySelector('.search-history-home').remove();
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
} else {
|
||||
alert('Error al eliminar: ' + (data.error || 'Desconocido'));
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Error:', err);
|
||||
alert('Error de conexión');
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
</script>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div id="noticias-container">
|
||||
<div id="noticias-container" style="position: relative;">
|
||||
<div id="news-loading-overlay"
|
||||
style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); z-index: 10; align-items: center; justify-content: center;">
|
||||
<div class="spinner"
|
||||
style="width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid var(--accent-red); border-radius: 50%; animation: spin 1s linear infinite;">
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% include '_noticias_list.html' %}
|
||||
</div>
|
||||
|
||||
|
|
@ -460,23 +480,69 @@
|
|||
}
|
||||
}
|
||||
|
||||
async function cargarNoticiasFromURL(url) {
|
||||
let currentAbortController = null;
|
||||
|
||||
async function cargarNoticiasFromURL(url, isNewSearch = false) {
|
||||
const container = document.getElementById('noticias-container');
|
||||
// Ensure minimum height to prevent collapse and scroll jump
|
||||
container.style.minHeight = container.offsetHeight + 'px';
|
||||
|
||||
// Abort previous request
|
||||
if (currentAbortController) {
|
||||
currentAbortController.abort();
|
||||
}
|
||||
currentAbortController = new AbortController();
|
||||
const signal = currentAbortController.signal;
|
||||
|
||||
// Prepare UI for loading
|
||||
container.style.opacity = '0.5';
|
||||
container.style.transition = 'opacity 0.2s';
|
||||
const loadingOverlay = document.getElementById('news-loading-overlay');
|
||||
if (loadingOverlay) loadingOverlay.style.display = 'flex';
|
||||
|
||||
try {
|
||||
const response = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
|
||||
const response = await fetch(url, {
|
||||
headers: { 'X-Requested-With': 'XMLHttpRequest' },
|
||||
signal: signal
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
||||
|
||||
const html = await response.text();
|
||||
|
||||
if (signal.aborted) return;
|
||||
|
||||
container.innerHTML = html;
|
||||
|
||||
// Re-apply styles/initializers for dynamic content
|
||||
if (typeof applyReadStyles === 'function') applyReadStyles();
|
||||
if (typeof loadFavorites === 'function') loadFavorites();
|
||||
|
||||
// Reset minHeight since we have new content
|
||||
container.style.minHeight = '';
|
||||
|
||||
// Scroll to top of results if it's a new search
|
||||
if (isNewSearch) {
|
||||
const rect = container.getBoundingClientRect();
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const targetY = rect.top + scrollTop - 100; // Offset for sticky nav
|
||||
window.scrollTo({ top: targetY, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error al filtrar noticias:', error);
|
||||
container.innerHTML = '<p style="color:var(--error-color); text-align:center;">Error al cargar las noticias.</p>';
|
||||
if (error.name === 'AbortError') {
|
||||
console.log('Fetch aborted');
|
||||
} else {
|
||||
console.error('Error al cargar noticias:', error);
|
||||
container.innerHTML = '<div style="text-align:center; padding:3rem; color:var(--accent-red);">' +
|
||||
'<i class="fas fa-exclamation-triangle fa-2x"></i>' +
|
||||
'<p style="margin-top:1rem;">Error al cargar las noticias. Por favor, reintenta.</p></div>';
|
||||
}
|
||||
} finally {
|
||||
container.style.opacity = '1';
|
||||
// Optional: remove minHeight if you want it to shrink back, but keeping it is often safer until next interaction
|
||||
// container.style.minHeight = '';
|
||||
if (!signal.aborted) {
|
||||
container.style.opacity = '1';
|
||||
const loadingOverlay = document.getElementById('news-loading-overlay');
|
||||
if (loadingOverlay) loadingOverlay.style.display = 'none';
|
||||
currentAbortController = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -485,10 +551,24 @@
|
|||
|
||||
const formData = new FormData(form);
|
||||
const params = new URLSearchParams(formData);
|
||||
|
||||
// Toggle search history visibility based on query
|
||||
const historyContainer = document.getElementById('search-history-container');
|
||||
if (historyContainer) {
|
||||
const queryVal = params.get('q') || '';
|
||||
historyContainer.style.display = queryVal.trim().length > 0 ? 'none' : 'block';
|
||||
}
|
||||
|
||||
const newUrl = `${form.action}?${params.toString()}`;
|
||||
|
||||
await cargarNoticiasFromURL(newUrl);
|
||||
window.history.pushState({ path: newUrl }, '', newUrl);
|
||||
await cargarNoticiasFromURL(newUrl, !keepPage);
|
||||
|
||||
// Update URL without reloading
|
||||
if (!keepPage) {
|
||||
window.history.pushState({ path: newUrl }, '', newUrl);
|
||||
} else {
|
||||
window.history.replaceState({ path: newUrl }, '', newUrl);
|
||||
}
|
||||
};
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
|
|
@ -496,45 +576,36 @@
|
|||
cargarNoticias(false);
|
||||
});
|
||||
|
||||
const toggleOrig = document.getElementById('toggle-orig');
|
||||
const toggleTr = document.getElementById('toggle-tr');
|
||||
|
||||
if (toggleOrig) {
|
||||
toggleOrig.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
origInput.value = '1';
|
||||
cargarNoticias(false);
|
||||
});
|
||||
}
|
||||
if (toggleTr) {
|
||||
toggleTr.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
origInput.value = '';
|
||||
if (!langInput.value) langInput.value = 'es';
|
||||
cargarNoticias(false);
|
||||
});
|
||||
}
|
||||
// Toggle buttons (if they exist in the UI)
|
||||
['toggle-orig', 'toggle-tr'].forEach(id => {
|
||||
const el = document.getElementById(id);
|
||||
if (el) {
|
||||
el.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
if (id === 'toggle-orig') origInput.value = '1';
|
||||
else {
|
||||
origInput.value = '';
|
||||
if (!langInput.value) langInput.value = 'es';
|
||||
}
|
||||
cargarNoticias(false);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
continenteSelect.addEventListener('change', function () {
|
||||
filtrarPaises();
|
||||
cargarNoticias(false);
|
||||
});
|
||||
paisSelect.addEventListener('change', function () {
|
||||
cargarNoticias(false);
|
||||
});
|
||||
categoriaSelect.addEventListener('change', function () {
|
||||
cargarNoticias(false);
|
||||
});
|
||||
fechaInput.addEventListener('change', function () {
|
||||
cargarNoticias(false);
|
||||
});
|
||||
paisSelect.addEventListener('change', () => cargarNoticias(false));
|
||||
categoriaSelect.addEventListener('change', () => cargarNoticias(false));
|
||||
fechaInput.addEventListener('change', () => cargarNoticias(false));
|
||||
|
||||
let qTimer = null;
|
||||
qInput.addEventListener('input', function () {
|
||||
if (qTimer) clearTimeout(qTimer);
|
||||
qTimer = setTimeout(() => {
|
||||
cargarNoticias(false);
|
||||
}, 450);
|
||||
}, 500); // Optimized debounce
|
||||
});
|
||||
|
||||
const semanticToggle = document.getElementById('semantic-toggle');
|
||||
|
|
@ -550,7 +621,7 @@
|
|||
|
||||
window.addEventListener('popstate', function (e) {
|
||||
const url = (e.state && e.state.path) ? e.state.path : window.location.href;
|
||||
cargarNoticiasFromURL(url);
|
||||
cargarNoticiasFromURL(url, false);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue