public/wallabicher
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement dark mode support across the application

Browse Source
This commit is contained in:
Omar Sánchez Pizarro
2026-01-19 22:47:03 +01:00
parent d954d92daf
commit 75fa59807c
8 changed files with 160 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/frontend/src/views/Articles.vue
View File

@@ -2,7 +2,7 @@
<div>
<div class="mb-4 sm:mb-6">
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-4 mb-4">
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900">Artículos Notificados</h1>
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100">Artículos Notificados</h1>
<div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:space-x-4">
<select
v-model="selectedPlatform"
@@ -40,20 +40,20 @@
<div v-if="loading" class="text-center py-12">
<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
<p class="mt-2 text-gray-600">Cargando artículos...</p>
<p class="mt-2 text-gray-600 dark:text-gray-400">Cargando artículos...</p>
</div>
<div v-else-if="filteredArticles.length === 0 && !searchQuery" class="card text-center py-12">
<p class="text-gray-600">No hay artículos para mostrar</p>
<p class="text-gray-600 dark:text-gray-400">No hay artículos para mostrar</p>
</div>
<div v-else-if="searching" class="card text-center py-12">
<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
<p class="mt-2 text-gray-600">Buscando artículos en Redis...</p>
<p class="mt-2 text-gray-600 dark:text-gray-400">Buscando artículos en Redis...</p>
</div>
<div v-else-if="filteredArticles.length === 0 && searchQuery && !searching" class="card text-center py-12">
<p class="text-gray-600">No se encontraron artículos que coincidan con "{{ searchQuery }}"</p>
<p class="text-gray-600 dark:text-gray-400">No se encontraron artículos que coincidan con "{{ searchQuery }}"</p>
<button @click="searchQuery = ''" class="btn btn-secondary mt-4">Limpiar búsqueda</button>
</div>
@@ -74,8 +74,8 @@
@error="($event) => handleImageError($event)"
/>
</div>
<div v-else class="w-24 h-24 sm:w-32 sm:h-32 bg-gray-200 rounded-lg flex items-center justify-center">
<span class="text-gray-400 text-xs">Sin imagen</span>
<div v-else class="w-24 h-24 sm:w-32 sm:h-32 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
<span class="text-gray-400 dark:text-gray-500 text-xs">Sin imagen</span>
</div>
</div>
@@ -94,12 +94,12 @@
>
{{ article.platform?.toUpperCase() || 'N/A' }}
</span>
<span class="text-xs sm:text-sm text-gray-500">
<span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400">
{{ formatDate(article.notifiedAt) }}
</span>
</div>
<h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-1 line-clamp-2" :title="article.title">
<h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-2" :title="article.title">
{{ article.title || 'Sin título' }}
</h3>
@@ -109,7 +109,7 @@
</span>
</div>
<div class="space-y-1 text-xs sm:text-sm text-gray-600 mb-2">
<div class="space-y-1 text-xs sm:text-sm text-gray-600 dark:text-gray-400 mb-2">
<div v-if="article.location" class="flex flex-wrap items-center">
<span class="font-medium">📍 Localidad:</span>
<span class="ml-2">{{ article.location }}</span>
@@ -124,7 +124,7 @@
</div>
</div>
<p v-if="article.description" class="text-xs sm:text-sm text-gray-700 mb-2 overflow-hidden line-clamp-2">
<p v-if="article.description" class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 mb-2 overflow-hidden line-clamp-2">
{{ article.description }}
</p>
@@ -138,7 +138,7 @@
>
🔗 Ver anuncio
</a>
<span class="text-xs text-gray-400 break-all">
<span class="text-xs text-gray-400 dark:text-gray-500 break-all">
ID: {{ article.id }}
</span>
</div>