conflicts resolved
This commit is contained in:
Do-raa
829
pages/index.vue
829
pages/index.vue
@@ -1,427 +1,454 @@
|
||||
<template>
|
||||
<div class="background">
|
||||
<main>
|
||||
<video controls width="640">
|
||||
<source src="/videos/video.mp4" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
<ContentDoc />
|
||||
<div id="app">
|
||||
<h2>Ajouter un nouvel article</h2>
|
||||
<form @submit.prevent="addArticle">
|
||||
<div>
|
||||
<label for="title">Titre :</label>
|
||||
<input type="text" id="title" v-model="newArticle.title" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="content">Contenu :</label>
|
||||
<textarea id="content" v-model="newArticle.content" required></textarea>
|
||||
</div>
|
||||
<button type="submit">Ajouter l'article</button>
|
||||
</form>
|
||||
<v-container fluid class="lg:mx-12 mx-2">
|
||||
<v-row class="video-section">
|
||||
<video autoplay loop muted playsinline class="video-background">
|
||||
<source src="/videos/video.mp4" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</v-row>
|
||||
<!-- Introduction section -->
|
||||
<v-row v-if="introduction" class="d-flex justify-center align-center text-center">
|
||||
<h1 class="my-8 lg:text-xl text-l text-black">{{ introduction.title }}</h1>
|
||||
<p class="text-xs text-black mb-8 mr-2 lg:mr-8 text-justify">{{ introduction.description }}</p>
|
||||
</v-row>
|
||||
<!-- Articles Section -->
|
||||
<v-row>
|
||||
<!-- Left Column -->
|
||||
<v-col cols="12" md="6">
|
||||
<div v-for="(article, index) in leftColumnArticles" :key="article.id || index" class="article">
|
||||
<v-card class="mb-12" elevation="0">
|
||||
<v-card-title>
|
||||
<h2 class="lg:text-sm text-xs text-wrap text-black font-bold">{{ article.title }}</h2>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<p class="text-xs text-black">{{ article.description }}</p>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn icon="mdi-play" @click="toggleShow(article.id)">
|
||||
</v-btn>
|
||||
<p class="text-gray-700 lg:text-xs text-xs">Suggérer une modification de texte</p>
|
||||
</v-card-actions>
|
||||
|
||||
<h2> Nouveaux Articles </h2>
|
||||
<!-- Liste des articles -->
|
||||
<div v-for="(article, index) in articles" :key="index" class="article">
|
||||
<h3>{{ article.title }}</h3>
|
||||
<p>{{ article.content }}</p>
|
||||
<button @click="editArticle(index)">Modifier</button>
|
||||
<button @click="deleteArticle(index)">Supprimer</button>
|
||||
</div>
|
||||
<v-expand-transition>
|
||||
<div v-show="showStates[article.id]">
|
||||
<v-divider></v-divider>
|
||||
<p class="text-gray-500 text-xs mx-5"> La constitution des DAV ne se fera pas
|
||||
seule. Chacun et
|
||||
chacune sont
|
||||
invité(e)s à donner le meilleur d’eux même pour assurer sa constitution,
|
||||
son respect, ainsi que sa mise en application.
|
||||
Soyez courtois . Tout commentaire désobligeant irrespectueux ou agressif sera
|
||||
systématiquement supprimé. </p>
|
||||
|
||||
<!-- Formulaire de modification -->
|
||||
<div v-if="isEditing" class="edit-form">
|
||||
<h2>Modifier l'article</h2>
|
||||
<form @submit.prevent="updateArticle">
|
||||
<div>
|
||||
<label for="edit-title">Titre :</label>
|
||||
<input type="text" id="edit-title" v-model="currentArticle.title" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="edit-content">Contenu :</label>
|
||||
<textarea id="edit-content" v-model="currentArticle.content" required></textarea>
|
||||
</div>
|
||||
<button type="submit">Mettre à jour</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Comments Section -->
|
||||
<v-card-text>
|
||||
<v-textarea v-model="newComments[article.id]" outlined rows="2"
|
||||
auto-grow></v-textarea>
|
||||
<VBtnValid @click="addComment(article.id)">
|
||||
Valider
|
||||
</VBtnValid>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<section class="forum">
|
||||
<h2>Forum Public</h2>
|
||||
<!-- Forum content -->
|
||||
<div v-for="(post, index) in posts" :key="index" class="post">
|
||||
<p><strong>Article {{ post.articleNumber }}:</strong></p>
|
||||
<div class="actions">
|
||||
<button @click="upvote(index)">👍 {{ post.votes }}</button>
|
||||
<button @click="downvote(index)">👎</button>
|
||||
</div>
|
||||
<textarea v-model="replies[index]" placeholder="Commentaires..."></textarea>
|
||||
<button @click="addReply(index)">Commenter</button>
|
||||
<div v-if="post.replies.length > 0" class="replies">
|
||||
<h4>Commentaires :</h4>
|
||||
<ul class="no-spacing">
|
||||
<li v-for="(reply, rIndex) in post.replies" :key="rIndex">
|
||||
{{ reply.content }} - <em>{{ reply.date }}</em>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="signature">
|
||||
<h2>Signer la Charte</h2>
|
||||
<form @submit.prevent="submitSignature">
|
||||
<input v-model="name" placeholder="Nom complet" required />
|
||||
<input v-model="email" type="email" placeholder="Email" required />
|
||||
<textarea v-model="comment" placeholder="Ajouter un commentaire"></textarea>
|
||||
<button type="submit">Signer</button>
|
||||
</form>
|
||||
<p v-if="signatureSuccess">Merci pour votre signature, {{ name }} !</p>
|
||||
<div v-if="signatures.length">
|
||||
<h3>Signatures enregistrées :</h3>
|
||||
<ul>
|
||||
<li v-for="signature in signatures" :key="signature.email">
|
||||
<strong>{{ signature.name }}</strong> - {{ signature.comment }} - <em>{{ signature.date }}</em>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<!-- Right Column -->
|
||||
<v-col cols="12" md="6">
|
||||
<div v-for="(article, index) in rightColumnArticles" :key="article.id || index" class="article">
|
||||
<v-card class="mb-12" elevation="0">
|
||||
<v-card-title>
|
||||
<h2 class="lg:text-sm text-xs text-wrap text-black font-bold">{{ article.title }}</h2>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<p class="text-xs text-black">{{ article.description }}</p>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn icon="mdi-play" @click="toggleShow(article.id)">
|
||||
</v-btn>
|
||||
<p class="text-gray-700 lg:text-xs text-xs">Suggérer une modification de texte</p>
|
||||
</v-card-actions>
|
||||
|
||||
<v-expand-transition>
|
||||
<div v-show="showStates[article.id]">
|
||||
<v-divider></v-divider>
|
||||
<p class="text-gray-500 text-xs mx-5"> La constitution des DAV ne se fera pas
|
||||
seule. Chacun et
|
||||
chacune sont
|
||||
invité(e)s à donner le meilleur d’eux même pour assurer sa constitution,
|
||||
son respect, ainsi que sa mise en application.
|
||||
Soyez courtois . Tout commentaire désobligeant irrespectueux ou agressif sera
|
||||
systématiquement supprimé. </p>
|
||||
|
||||
<!-- Comments Section -->
|
||||
<v-card-text>
|
||||
<v-textarea v-model="newComments[article.id]" outlined rows="2"
|
||||
auto-grow></v-textarea>
|
||||
<VBtnValid @click="addComment(article.id)">
|
||||
Valider
|
||||
</VBtnValid>
|
||||
</v-card-text>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
</v-card>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-if="summary" class="d-flex justify-center align-center text-center">
|
||||
<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-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="" collapse-icon="">
|
||||
<div class="d-flex align-center mb-2">
|
||||
<span class="mr-2">
|
||||
<v-icon class="m-1 text-primary hover:text-green-500 text-xs"
|
||||
@click.stop="likeArticle(article.id)">
|
||||
mdi-thumb-up
|
||||
</v-icon>
|
||||
<p class="ml-2 lg:ml-0 text-primary">{{ article.likes }}</p>
|
||||
</span>
|
||||
|
||||
<span class="mr-3">
|
||||
<v-icon class="m-1 text-tertiary hover:text-red-500 text-xs"
|
||||
@click.stop="dislikeArticle(article.id)">
|
||||
mdi-thumb-down
|
||||
</v-icon>
|
||||
<p class="ml-2 lg:ml-0 text-tertiary">{{ article.dislikes }}</p>
|
||||
</span>
|
||||
<h2 class="text-sm text-wrap text-black font-bold m-0">
|
||||
{{ article.title }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="d-flex align-center mt-2">
|
||||
<!-- Control the panel opening -->
|
||||
<v-icon class="mr-1">
|
||||
mdi-play
|
||||
</v-icon>
|
||||
<p class="text-gray-700 text-xs ml-2">Voir les suggestions</p>
|
||||
</div>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-expand-transition>
|
||||
<v-timeline align="start" density="compact" class="ml-3">
|
||||
<v-timeline-item v-if="article.comments.length"
|
||||
v-for="(comment, cIndex) in article.comments" :key="cIndex" dot-color="primary"
|
||||
size="x-small">
|
||||
<div class="mb-0">
|
||||
<p class="text-sm text-black">{{ comment }}</p>
|
||||
</div>
|
||||
</v-timeline-item>
|
||||
|
||||
<v-timeline-item v-else dot-color="secondary" size="x-small">
|
||||
<p class="text-sm text-black">Aucune suggestion pour cet article</p>
|
||||
</v-timeline-item>
|
||||
</v-timeline>
|
||||
</v-expand-transition>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Signature Section -->
|
||||
<v-row class="justify-center my-8">
|
||||
<v-col cols="12" md="8" lg="6">
|
||||
<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>
|
||||
</v-card-title>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<v-form @submit.prevent="submitSignature" lazy-validation class="text-xs font-sans">
|
||||
<v-text-field v-model="name" label="Nom complet" outlined dense hide-details
|
||||
:rules="[rules.required]" class="mb-2" prepend-inner-icon="mdi-account"></v-text-field>
|
||||
<v-text-field v-model="email" type="email" label="Email" placeholder="Entrez votre email"
|
||||
outlined dense hide-details :rules="[rules.required, rules.email]" class="mb-2"
|
||||
prepend-inner-icon="mdi-email"></v-text-field>
|
||||
<v-textarea v-model="comment" label="Ajouter un commentaire"
|
||||
placeholder="Partagez vos réflexions ou suggestions" outlined dense hide-details
|
||||
rows="2" class="mb-2" prepend-inner-icon="mdi-message-text"></v-textarea>
|
||||
<VBtnValid :disabled="!isFormValid" type="submit" block>
|
||||
<v-icon size="16" left>mdi-check-circle</v-icon>
|
||||
Signer
|
||||
</VBtnValid>
|
||||
</v-form>
|
||||
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- Success Overlay (Dynamic Content) -->
|
||||
<v-overlay v-model="overlay" class="d-flex align-center justify-center"
|
||||
:style="{ background: 'rgba(0, 0, 0, 0.5)', backdropFilter: 'blur(4px)' }">
|
||||
<v-card class="py-10 px-8 text-center" elevation="4" rounded="lg" style="max-width: 400px;">
|
||||
<v-icon :color="overlayIconColor" size="48" class="mb-4">{{ overlayIcon }}</v-icon>
|
||||
<p class="overlay-msg text-sm font-semibold text-black text-uppercase">{{ overlayMessage }}</p>
|
||||
<VBtnValid class="mt-6" @click="overlay = false">
|
||||
{{ overlayButtonText }}
|
||||
</VBtnValid>
|
||||
</v-card>
|
||||
</v-overlay>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
newArticle: { title: "", content: "" },
|
||||
articles: [],
|
||||
isEditing: false,
|
||||
currentArticle: null,
|
||||
currentArticleIndex: null,
|
||||
posts: Array.from({ length: 20 }, (_, i) => ({
|
||||
articleNumber: i + 1,
|
||||
votes: 0,
|
||||
replies: [],
|
||||
})),
|
||||
replies: [],
|
||||
signatures: [], // Initialize signatures as an empty array
|
||||
signatureSuccess: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
addArticle() {
|
||||
if (this.newArticle.title && this.newArticle.content) {
|
||||
this.articles.push({ ...this.newArticle });
|
||||
this.newArticle.title = "";
|
||||
this.newArticle.content = "";
|
||||
} else {
|
||||
alert("Veuillez remplir tous les champs.");
|
||||
}
|
||||
},
|
||||
deleteArticle(index) {
|
||||
this.articles.splice(index, 1);
|
||||
},
|
||||
editArticle(index) {
|
||||
this.isEditing = true;
|
||||
this.currentArticleIndex = index;
|
||||
this.currentArticle = { ...this.articles[index] };
|
||||
},
|
||||
updateArticle() {
|
||||
if (this.currentArticle && this.currentArticle.title && this.currentArticle.content) {
|
||||
// Met à jour l'article dans la liste
|
||||
this.articles[this.currentArticleIndex] = { ...this.currentArticle };
|
||||
// Réinitialise les variables
|
||||
this.isEditing = false;
|
||||
this.currentArticle = null;
|
||||
this.currentArticleIndex = null;
|
||||
} else {
|
||||
alert("Veuillez remplir tous les champs avant de mettre à jour.");
|
||||
}
|
||||
},
|
||||
cancelEdit() {
|
||||
this.isEditing = false;
|
||||
this.currentArticle = null;
|
||||
this.currentArticleIndex = null;
|
||||
},
|
||||
upvote(index) {
|
||||
this.posts[index].votes++;
|
||||
},
|
||||
downvote(index) {
|
||||
this.posts[index].votes--;
|
||||
},
|
||||
addReply(index) {
|
||||
if (this.replies[index]?.trim()) {
|
||||
this.posts[index].replies.push({
|
||||
content: this.replies[index],
|
||||
date: new Date().toLocaleString(),
|
||||
});
|
||||
this.replies[index] = "";
|
||||
}
|
||||
},
|
||||
submitSignature() {
|
||||
if (this.name && this.email) {
|
||||
this.signatures.push({
|
||||
name: this.name,
|
||||
email: this.email,
|
||||
comment: this.comment,
|
||||
date: new Date().toLocaleString(),
|
||||
});
|
||||
this.signatureSuccess = true;
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useAsyncData } from 'nuxt/app';
|
||||
|
||||
// Clear the input fields after successful submission
|
||||
this.name = "";
|
||||
this.email = "";
|
||||
this.comment = "";
|
||||
} else {
|
||||
alert("Veuillez remplir tous les champs obligatoires !");
|
||||
}
|
||||
},
|
||||
},
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
});
|
||||
|
||||
const articles = ref([]);
|
||||
const newComments = ref([]);
|
||||
const leftColumnArticles = ref([]);
|
||||
const rightColumnArticles = ref([]);
|
||||
const showStates = ref({});
|
||||
const introduction = ref(null);
|
||||
const summary = ref(null);
|
||||
|
||||
const signatures = ref([]);
|
||||
// Form fields
|
||||
const name = ref('');
|
||||
const email = ref('');
|
||||
const comment = ref('');
|
||||
|
||||
const isFormValid = computed(() => name.value && email.value);
|
||||
|
||||
const overlay = ref(false);
|
||||
const overlayIcon = ref('mdi-check-circle'); // Default icon
|
||||
const overlayMessage = ref('Votre suggestion à été ajoutée avec succès'); // Default message
|
||||
const overlayButtonText = ref('Continuer'); // Default button text
|
||||
const overlayIconColor = ref('success');
|
||||
|
||||
const rules = {
|
||||
required: (value) => !!value || "Ce champ est obligatoire.",
|
||||
email: (value) => /.+@.+\..+/.test(value) || "L'email doit être valide.",
|
||||
};
|
||||
|
||||
const toggleShow = (articleId) => {
|
||||
showStates.value[articleId] = !showStates.value[articleId];
|
||||
};
|
||||
|
||||
// Fetch articles data
|
||||
const { data: contentData, error } = await useAsyncData("content", () =>
|
||||
queryContent().find()
|
||||
);
|
||||
|
||||
// Process fetched content
|
||||
if (!error.value && contentData.value) {
|
||||
for (const file of contentData.value) {
|
||||
if (file.type === "intro") {
|
||||
introduction.value = file;
|
||||
} else if (file.type === "article") {
|
||||
try {
|
||||
// Add default values (likes, dislikes, comments) if missing
|
||||
const article = {
|
||||
id: file.id,
|
||||
title: file.title,
|
||||
description: file.description,
|
||||
likes: file.likes || 0,
|
||||
dislikes: file.dislikes || 0,
|
||||
comments: file.comments || [],
|
||||
};
|
||||
|
||||
// Add the article locally
|
||||
articles.value.push(article);
|
||||
|
||||
await $fetch('/api/articles', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
id: article.id,
|
||||
title: article.title,
|
||||
description: article.description,
|
||||
likes: article.likes,
|
||||
dislikes: article.dislikes,
|
||||
comments: article.comments,
|
||||
},
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Error creating article:', err);
|
||||
}
|
||||
} else if (file.type === "summary") {
|
||||
summary.value = file;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize newComments object based on article IDs
|
||||
articles.value.forEach(article => {
|
||||
newComments.value[article.id] = '';
|
||||
});
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await $fetch(`/api/articles`, {
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
if (response.success && response.data) {
|
||||
// Update the articles array by merging data from the response
|
||||
articles.value = articles.value.map((article) => {
|
||||
const updatedArticle = response.data.find((data) => data.id === article.id);
|
||||
return updatedArticle
|
||||
? {
|
||||
...article,
|
||||
likes: updatedArticle.likes,
|
||||
dislikes: updatedArticle.dislikes,
|
||||
comments: updatedArticle.comments,
|
||||
}
|
||||
: article;
|
||||
});
|
||||
} else {
|
||||
console.error('Failed to fetch articles:', response.message || 'Unknown error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching articles:', error);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const likeArticle = async (articleId) => {
|
||||
const article = articles.value.find((a) => a.id === articleId);
|
||||
if (!article) return;
|
||||
article.likes += 1;
|
||||
|
||||
try {
|
||||
await $fetch(`/api/articles/${articleId}`, {
|
||||
method: 'PUT',
|
||||
body: { likes: article.likes },
|
||||
});
|
||||
|
||||
console.log('Article updated successfully');
|
||||
} catch (error) {
|
||||
console.error('Error in likeArticle:', error);
|
||||
}
|
||||
};;
|
||||
|
||||
|
||||
const dislikeArticle = async (articleId) => {
|
||||
const article = articles.value.find((a) => a.id === articleId);
|
||||
if (!article) return;
|
||||
article.dislikes += 1;
|
||||
|
||||
try {
|
||||
await $fetch(`/api/articles/${articleId}`, {
|
||||
method: 'PUT',
|
||||
body: { dislikes: article.dislikes },
|
||||
});
|
||||
|
||||
console.log('Article updated successfully');
|
||||
} catch (error) {
|
||||
console.error('Error in dislikeArticle:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const addComment = async (articleId) => {
|
||||
const commentText = newComments.value[articleId]?.trim();
|
||||
if (!commentText) return;
|
||||
|
||||
const article = articles.value.find((a) => a.id === articleId);
|
||||
article.comments.push(commentText);
|
||||
newComments.value[articleId] = '';
|
||||
|
||||
overlayIcon.value = 'mdi-check-circle';
|
||||
overlayMessage.value = `Merci pour votre suggestion. Veuillez la consulter tout en descendant vers le bas de la page`;
|
||||
overlayButtonText.value = 'Continuer';
|
||||
overlayIconColor.value = 'success';
|
||||
overlay.value = true;
|
||||
try {
|
||||
await $fetch(`/api/articles/${article.id}`, {
|
||||
method: 'PUT',
|
||||
body: { comments: article.comments },
|
||||
});
|
||||
|
||||
console.log('Comment added successfully');
|
||||
} catch (error) {
|
||||
console.error('Error in addComment:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const submitSignature = async () => {
|
||||
const signatureData = {
|
||||
name: name.value,
|
||||
email: email.value,
|
||||
comment: comment.value,
|
||||
};
|
||||
signatures.value.push({ ...signatureData });
|
||||
try {
|
||||
await $fetch('/api/charte', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(signatureData)
|
||||
})
|
||||
console.log('Charte is submitted successfully');
|
||||
} catch (error) {
|
||||
console.error('Error in submit signature:', error);
|
||||
}
|
||||
overlayIcon.value = 'mdi-check-circle';
|
||||
overlayMessage.value = `Merci pour votre signature ${name.value}`
|
||||
overlayButtonText.value = 'Continuer';
|
||||
overlayIconColor.value = 'success';
|
||||
overlay.value = true;
|
||||
name.value = '';
|
||||
email.value = '';
|
||||
comment.value = '';
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.article {
|
||||
margin-bottom: 20px;
|
||||
margin: 20px ;
|
||||
}
|
||||
.edit-form {
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
.video-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.post {
|
||||
border: 1px solid #F5F5F5;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.replies {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.signature {
|
||||
margin: 20px 0;
|
||||
.video-background {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Styles généraux */
|
||||
.background {
|
||||
padding: 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #F5F5F5;
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
font-family: "Times New Roman", Times, serif;
|
||||
}
|
||||
|
||||
/* Section Forum */
|
||||
.forum {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
border: 1px solid #474405;
|
||||
border-radius: 8px;
|
||||
background-color: #F5F5F5;
|
||||
margin-bottom: 5cm;
|
||||
p {
|
||||
font-family: "Times New Roman", Times, serif;
|
||||
}
|
||||
|
||||
.forum h2 {
|
||||
font-size: 24px;
|
||||
color: #6A994E;
|
||||
margin-bottom: 15px;
|
||||
.v-expansion-panel-title {
|
||||
font-family: Georgia;
|
||||
}
|
||||
|
||||
.post {
|
||||
border: 1px solid#474405;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 15px;
|
||||
background-color: #F5F5F5;
|
||||
.v-card {
|
||||
font-family: Georgia;
|
||||
}
|
||||
|
||||
.post p {
|
||||
font-size: 16px;
|
||||
color: #474405;
|
||||
margin: 0 0 10px;
|
||||
.overlay-msg {
|
||||
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
.post .actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.post .actions button {
|
||||
background-color: #8B5E3C;
|
||||
color: #F5F5F5;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.post .actions button:hover {
|
||||
background-color: #e6ee0d;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #474405;
|
||||
border-radius: 4px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #6A994E;
|
||||
color: #F5F5F5;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
/* Réponses */
|
||||
.replies {
|
||||
margin-top: 15px;
|
||||
padding-left: 10px;
|
||||
border-left: 2px solid #8B5E3C;
|
||||
}
|
||||
|
||||
.replies h4 {
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
color: #474405;
|
||||
}
|
||||
|
||||
.replies ul {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.replies li {
|
||||
font-size: 14px;
|
||||
color: #8B5E3C;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* Section Signatures */
|
||||
.signature {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
border: 1px solid #474405;
|
||||
border-radius: 8px;
|
||||
background-color: #F5F5F5;
|
||||
margin-bottom: 1cm;
|
||||
}
|
||||
|
||||
.signature h2 {
|
||||
font-size: 24px;
|
||||
color: #6A994E;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.signature form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.signature input,
|
||||
.signature textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #474405;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.signature button {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.signature ul {
|
||||
margin-top: 15px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
h3{
|
||||
color: #6A994E;
|
||||
}
|
||||
|
||||
.signature ul li {
|
||||
font-size: 16px;
|
||||
color:#474405;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #474405;
|
||||
}
|
||||
|
||||
.signature ul li:last-child {
|
||||
border-bottom: none;
|
||||
|
||||
}
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
text-align: center;
|
||||
color: #6A994E;
|
||||
margin-top: 4cm;
|
||||
border: 1px solid #474405;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin-bottom: 5cm;
|
||||
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: #474405;
|
||||
|
||||
}
|
||||
input,
|
||||
textarea {
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
font-size: 10px;
|
||||
resize: vertical;
|
||||
|
||||
|
||||
}
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: #6A994E;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
form {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
border: 1px solid #474405;
|
||||
border-radius: 8px;
|
||||
background-color: #F5F5F5;
|
||||
margin-bottom: 1cm;
|
||||
|
||||
}
|
||||
h3{
|
||||
color: #474405;
|
||||
}
|
||||
button {
|
||||
margin-right: 10px; /* Espace à droite du bouton */
|
||||
}
|
||||
|
||||
/* Exemple spécifique pour le deuxième bouton */
|
||||
button:last-child {
|
||||
margin-right: 0; /* Pas d'espace après le dernier bouton */
|
||||
.custom-btn {
|
||||
font-size: 12px;
|
||||
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
||||
padding: 4px 8px;
|
||||
min-height: 24px;
|
||||
min-width: 40px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user