ui enhancement

components/Loader.vue

@@ -1,11 +1,11 @@
 <template>
         <v-container style="height: 600px;">
             <v-row align-content="center" class="fill-height" justify="center">
-                <v-col class="text-l text-center text-semibold text-uppercase " cols="12">
+                <v-col class="text-xl text-center text-bold text-uppercase font-sans " cols="12">
                    Soyez le bienvenue sur DAV
                 </v-col>
                 <v-col cols="6">
-                    <v-progress-linear color="deep-purple-accent-4" height="6" indeterminate
+                    <v-progress-linear color="primary" height="6" indeterminate
                         rounded></v-progress-linear>
                 </v-col>
             </v-row>

nuxt.config.ts

@@ -24,9 +24,6 @@ export default defineNuxtConfig({
       autoprefixer: {},
     },
   },
-  // build: {
-  //   transpile: ['vuetify'],
-  // },
   modules: [
       'vuetify-nuxt-module',
     '@nuxt/content',
@@ -49,7 +46,7 @@ export default defineNuxtConfig({
               primary: '#A7D129',
               secondary: '#686D76',
               tertiary: '#BE3737',
-              tangerine: '#EC8F67ff',
+              yellow: '#FFE31A',
               accent: '#000000',
             },
           },

pages/index.vue

@@ -106,7 +106,7 @@
                 <p class="text-xs text-black mb-8 px-1 text-center">{{ summary.description }}</p>
             </v-row>
             <v-row class="justify-center">
-                <v-col cols="12" md="6" lg="8"> <!-- Make it take more space on large screens -->
+                <v-col cols="12" md="6" lg="8">
                     <v-expansion-panels variant="accordion">
                         <v-expansion-panel v-for="(article, index) in articles" :key="article.id" class="article">
                             <v-expansion-panel-title class="d-flex flex-column align-start" expand-icon=""
@@ -114,17 +114,17 @@
                                 <div class="flex items-center mb-0">
                                     <!-- Like/Dislike Section -->
                                     <div class="mr-3 flex items-center">
-                                        <v-icon class="mr-1 text-primary text-xs" size="18"
+                                        <v-icon class="mr-1 text-xs" size="18" color="yellow"
                                             @click.stop="likeArticle(article.id)">
                                             mdi-thumb-up
                                         </v-icon>
-                                        <p class="text-primary text-sm">{{ article.likes }}</p>
+                                        <p class="text-gray-400 text-sm">{{ article.likes }}</p>
 
-                                        <v-icon class="mr-1 ml-2 text-tertiary text-xs" size="18"
+                                        <v-icon class="mr-1 ml-2 text-xs" size="18" color="yellow"
                                             @click.stop="dislikeArticle(article.id)">
                                             mdi-thumb-down
                                         </v-icon>
-                                        <p class="text-tertiary text-sm">{{ article.dislikes }}</p>
+                                        <p class="text-gray-400 text-sm">{{ article.dislikes }}</p>
                                     </div>
                                     <h2 class="text-sm text-wrap text-black font-bold m-0">
                                         {{ article.title }}
@@ -146,12 +146,12 @@
                                         <div class="flex items-center mb-0">
                                             <!-- Like/Dislike Section -->
                                             <div class="mr-3 flex items-center">
-                                                <v-icon color="primary" size="14"
+                                                <v-icon color="yellow" size="14"
                                                     @click="likeComment(article.id, comment.id)">mdi-thumb-up</v-icon>
-                                                <span class="text-xs text-primary ml-1 mr-2">{{ comment.likes }}</span>
+                                                <span class="text-xs text-gray-400 ml-1 mr-2">{{ comment.likes }}</span>
-                                                <v-icon color="tertiary" size="14"
+                                                <v-icon color="yellow" size="14"
                                                     @click="dislikeComment(article.id, comment.id)">mdi-thumb-down</v-icon>
-                                                <span class="text-xs text-tertiary ml-1">{{ comment.dislikes }}</span>
+                                                <span class="text-xs text-gray-400 ml-1">{{ comment.dislikes }}</span>
                                             </div>
                                             <!-- Comment Content -->
                                             <p class="text-sm text-black">{{ comment.content }}</p>
@@ -171,8 +171,8 @@
             </v-row>
 
             <!-- Signature Section -->
-            <v-row class="mr-2">
+            <v-row class="justify-center w-full">
-                <v-col cols="12">
+                <v-col cols="12" md="6" lg="8">
                     <v-card elevation="3" class="pa-6 bg-gray-100" color="secondary">
                         <v-card-title class="text-center">
                             <h2 class="text-uppercase text-md font-semibold font-sans">Signer la Charte</h2>
@@ -201,8 +201,8 @@
             </v-row>
 
             <!-- Signature Display Section -->
-            <v-row class=" sm:my-8">
+            <v-row class="justify-center">
-                <v-col cols="12">
+                <v-col cols="12" md="6" lg="8">
                     <v-expansion-panels variant="accordion">
                         <v-expansion-panel>
                             <v-expansion-panel-title class="d-flex flex-column align-start" expand-icon=""
@@ -330,8 +330,12 @@ const fetchContent = async () => {
             }
         }
         // Split articles into left and right columns
-        leftColumnArticles.value = articles.value.filter((_, index) => index % 2 === 0);
+        // leftColumnArticles.value = articles.value.filter((_, index) => index % 2 === 0);
-        rightColumnArticles.value = articles.value.filter((_, index) => index % 2 !== 0);
+       // rightColumnArticles.value = articles.value.filter((_, index) => index % 2 !== 0);
+        // Split articles into two columns (assuming a 50% split)
+        const midIndex = Math.ceil(articles.value.length / 2);
+        leftColumnArticles.value = articles.value.slice(0, midIndex);
+        rightColumnArticles.value = articles.value.slice(midIndex);
         // Initialize newComments object based on article IDs
         articles.value.forEach(article => {
             newComments.value[article.id] = '';