refactored NewsList.vue structure to improve layout flexibility and fixed minor styling inconsistencies
This commit is contained in:
@@ -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"
|
||||
>
|
||||
|
Reference in New Issue
Block a user