vikingowl/owly-news
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
vikingowl
2025-08-03 01:04:00 +02:00
parent ab133d0e4f
commit 9af5b88713
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/NewsList.vue
View File

@@ -17,10 +17,10 @@
<article <article
v-for="article in news.articles" v-for="article in news.articles"
:key="article.id" :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 --> <!-- Article Header -->
<div class="p-4 sm:p-6"> <div class="flex-1 p-4 sm:p-6">
<div class="flex items-start justify-between mb-3"> <div class="flex items-start justify-between mb-3">
<span <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"> 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">
@@ -51,7 +51,7 @@
<!-- Article Footer --> <!-- Article Footer -->
<div <div
class="flex justify-between items-center gap-4 p-4 sm:p6"> class="flex justify-between items-center gap-4 p-4 sm:p-6">
<button <button
@click="openModal(article)" @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" 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"