refactored NewsList.vue structure to improve layout flexibility and fixed minor styling inconsistencies

This commit is contained in:
2025-08-03 01:04:00 +02:00
parent ab133d0e4f
commit 9af5b88713

View File

@@ -17,11 +17,11 @@
<article
v-for="article in news.articles"
:key="article.id"
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-gray-800/50 transition-all duration-200 overflow-hidden group"
class="flex flex-col h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md dark:hover:shadow-lg dark:hover:shadow-gray-800/50 transition-all duration-200 overflow-hidden group"
>
<!-- Article Header -->
<div class="p-4 sm:p-6">
<div class="flex items-start justify-between mb-3">
<div class="flex-1 p-4 sm:p-6">
<div class="flex items-start justify-between mb-3">
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
{{ article.country }}
@@ -51,8 +51,8 @@
<!-- Article Footer -->
<div
class="flex justify-between items-center gap-4 p-4 sm:p6">
<button
class="flex justify-between items-center gap-4 p-4 sm:p-6">
<button
@click="openModal(article)"
class="flex-1 inline-flex items-center justify-center cursor-pointer px-4 py-2 text-sm font-medium rounded-lg bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50 transition-colors"
>