RNM/DAV
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: build main page for DAV project and integrate database with Supabase and Prisma #1

Merged
dora merged 4 commits from feature/ui-and-responsiveness into main 2024-12-24 10:12:38 +01:00
Conversation 0 Commits 4 Files Changed 54 +22 -21
3 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1b35e137d3 - Show all commits

4
components/Loader.vue
View File

@@ -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>

5
nuxt.config.ts
View File

@@ -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',
},
},

34
pages/index.vue
View File

@@ -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>
<v-icon color="tertiary" size="14"
<span class="text-xs text-gray-400 ml-1 mr-2">{{ comment.likes }}</span>
<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-col cols="12">
<v-row class="justify-center w-full">
<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-col cols="12">
<v-row class="justify-center">
<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);
rightColumnArticles.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);
// 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] = '';