From fcc20d1f42445e689a1ae31e487708af87996499 Mon Sep 17 00:00:00 2001
From: ALAMI Adnane <Adnane.Alami@bordeaux-inp.fr>
Date: Wed, 23 Apr 2025 11:07:32 +0200
Subject: [PATCH] fix: (forgot to say that the layout in enhanced in last
commit) + fix du prettier
---
.../src/components/HeaderComponent.vue | 12 +-
.../src/components/canvas/CanvasItem.vue | 188 +++++++++---------
.../src/components/canvas/HeaderCanvas.vue | 14 +-
.../src/components/canvas/LeanCanvas.vue | 14 +-
.../MyINPulse-front/src/views/CanvasView.vue | 10 +-
5 files changed, 122 insertions(+), 116 deletions(-)
diff --git a/front/MyINPulse-front/src/components/HeaderComponent.vue b/front/MyINPulse-front/src/components/HeaderComponent.vue
index 53da9d9..d26e6ca 100644
--- a/front/MyINPulse-front/src/components/HeaderComponent.vue
+++ b/front/MyINPulse-front/src/components/HeaderComponent.vue
@@ -1,11 +1,15 @@
<template>
<header>
<a
- href="https://www.bordeaux-inp.fr/fr/lincubateur-bordeaux-inpulse"
- target="_blank"
- rel="noopener"
+ href="https://www.bordeaux-inp.fr/fr/lincubateur-bordeaux-inpulse"
+ target="_blank"
+ rel="noopener"
>
- <img src="./icons/logo inpulse.png" alt="INPulse Logo" class="logo" />
+ <img
+ src="./icons/logo inpulse.png"
+ alt="INPulse Logo"
+ class="logo"
+ />
</a>
</header>
</template>
diff --git a/front/MyINPulse-front/src/components/canvas/CanvasItem.vue b/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
index e4cdc22..9ee1554 100755
--- a/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
+++ b/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
@@ -5,68 +5,82 @@
<div class="tooltip-explain">{{ description }}</div>
<template v-if="expanded">
- <div class="explain">
+ <div class="explain">
<p>
{{ description }}
</p>
- </div>
+ </div>
</template>
<div class="description-wrapper custom-flow">
<div
v-for="(desc, index) in currentDescriptions"
:key="index"
- :class="['section-bloc', index % 2 === 0 ? 'from-left' : 'from-right']"
+ :class="[
+ 'section-bloc',
+ index % 2 === 0 ? 'from-left' : 'from-right',
+ ]"
class="section-bloc"
>
- <!-- ADMIN -------------------------------------------------------------------------------------------->
+ <!-- ADMIN -------------------------------------------------------------------------------------------->
- <template v-if="IS_ADMIN">
- <div class="description">
- <p class="m-0">{{ desc }}</p>
- </div>
- </template>
-
- <!-- ENTREP ------------------------------------------------------------------------------------------->
-
- <template v-if="!IS_ADMIN">
- <!-- Mode affichage -->
- <template v-if="!isEditing[index]">
- <div class="description">
- <p class="m-0">{{ desc }}</p>
- </div>
- <div class="button-container">
- <button
- v-if="expanded"
- class="edit-button"
- @click.stop="startEditing(index)"
- >
- Éditer
- </button>
- </div>
- </template>
-
- <!-- Mode édition -->
- <template v-else>
- <div class="edit-row">
- <textarea
- v-model="editedDescriptions[index]"
- class="edit-input"
- ></textarea>
- <div class="button-container">
- <button class="save-button" @click.stop="saveEdit(index)">Enregistrer</button>
- <button class="cancel-button" @click.stop="cancelEdit(index)">Annuler</button>
- </div>
+ <template v-if="IS_ADMIN">
+ <div class="description">
+ <p class="m-0">{{ desc }}</p>
</div>
- </template>
- </template>
- </div>
- <!---------------------------------------------------------------------------------------------------->
- <template v-if="expanded">
- <div class="canvas-exit-hint">
- Cliquez n'importe où pour quitter le canvas (terminez d'abord vos modifications)
- </div>
- </template>
+ </template>
+
+ <!-- ENTREP ------------------------------------------------------------------------------------------->
+
+ <template v-if="!IS_ADMIN">
+ <!-- Mode affichage -->
+ <template v-if="!isEditing[index]">
+ <div class="description">
+ <p class="m-0">{{ desc }}</p>
+ </div>
+ <div class="button-container">
+ <button
+ v-if="expanded"
+ class="edit-button"
+ @click.stop="startEditing(index)"
+ >
+ Éditer
+ </button>
+ </div>
+ </template>
+
+ <!-- Mode édition -->
+ <template v-else>
+ <div class="edit-row">
+ <textarea
+ v-model="editedDescriptions[index]"
+ class="edit-input"
+ ></textarea>
+ <div class="button-container">
+ <button
+ class="save-button"
+ @click.stop="saveEdit(index)"
+ >
+ Enregistrer
+ </button>
+ <button
+ class="cancel-button"
+ @click.stop="cancelEdit(index)"
+ >
+ Annuler
+ </button>
+ </div>
+ </div>
+ </template>
+ </template>
+ </div>
+ <!---------------------------------------------------------------------------------------------------->
+ <template v-if="expanded">
+ <div class="canvas-exit-hint">
+ Cliquez n'importe où pour quitter le canvas (terminez
+ d'abord vos modifications)
+ </div>
+ </template>
</div>
</div>
</template>
@@ -175,17 +189,17 @@ const mockFetch = async (projectId: number, title: number, date: string) => {
"Les clients ont du mal à trouver des produits écoresponsables abordables.",
"Le processus d'achat en ligne est trop complexe.",
"Manque de transparence sur l’origine des produits.",
- "Peu d’alternatives locales et durables sur le marché."
+ "Peu d’alternatives locales et durables sur le marché.",
],
2: [
"Jeunes urbains engagés dans la cause écologique.",
"Familles à revenu moyen voulant consommer responsable.",
- "Entreprises soucieuses de leur empreinte carbone."
+ "Entreprises soucieuses de leur empreinte carbone.",
],
3: [
"Une plateforme centralisée avec des produits écologiques certifiés.",
"Un service client humain et réactif.",
- "Livraison éco-responsable avec suivi."
+ "Livraison éco-responsable avec suivi.",
],
4: [
"Application intuitive avec suggestions personnalisées.",
@@ -198,22 +212,22 @@ const mockFetch = async (projectId: number, title: number, date: string) => {
6: [
"Canaux digitaux : réseaux sociaux, SEO.",
"Partenariats avec influenceurs écoresponsables.",
- "Boutique physique en pop-up stores."
+ "Boutique physique en pop-up stores.",
],
7: [
"Taux de rétention client mensuel.",
- "Taux de satisfaction utilisateur (NPS)."
+ "Taux de satisfaction utilisateur (NPS).",
],
8: [
"Coût du développement logiciel initial.",
"Campagnes publicitaires et communication.",
- "Frais logistiques (emballages, transport)."
+ "Frais logistiques (emballages, transport).",
],
9: [
"Ventes directes sur la plateforme.",
"Abonnement mensuel premium pour livraison gratuite.",
- "Revenus via partenariats de marque."
- ]
+ "Revenus via partenariats de marque.",
+ ],
};
// On extrait les descriptions pour la section demandée
@@ -227,8 +241,6 @@ const mockFetch = async (projectId: number, title: number, date: string) => {
});
};
-
-
// Utilisation du mock dans handleClick pour tester sans serveur
const handleClick = async () => {
if (!expanded.value) {
@@ -309,20 +321,6 @@ const cancelEdit = (index: number) => {
editedDescriptions.value[index] = currentDescriptions.value[index];
isEditing.value[index] = false;
};
-
-const randomStyle = () => {
- const offsetX = Math.floor(Math.random() * 20) - 10; // entre -10 et +10px
- const offsetY = Math.floor(Math.random() * 20) - 10;
- return {
- transform: `translate(${offsetX}px, ${offsetY}px)`,
- transition: 'transform 0.3s ease',
- };
-};
-
-const styleClasses = ['float-up', 'float-left', 'float-right', 'wiggle', 'tilt'];
-const getRandomClass = () => {
- return styleClasses[Math.floor(Math.random() * styleClasses.length)];
-};
</script>
<style scoped>
@@ -424,7 +422,6 @@ const getRandomClass = () => {
overflow: hidden;
}
-
.button-container {
display: block;
margin-top: 20px;
@@ -445,14 +442,13 @@ const getRandomClass = () => {
cursor: default;
max-width: 100%;
- width: fit-content;
+ width: fit-content;
overflow-wrap: break-word;
box-sizing: border-box;
min-width: 120px;
}
-
.editing-section-bloc {
width: 100%;
justify-content: center;
@@ -546,7 +542,6 @@ const getRandomClass = () => {
box-sizing: border-box;
}
-
.custom-flow {
display: flex;
flex-wrap: wrap;
@@ -560,20 +555,29 @@ const getRandomClass = () => {
overflow-x: hidden;
}
-
.container {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
- grid-auto-rows: min-content;
- grid-auto-flow: dense;
- gap: 1rem;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+ grid-auto-rows: min-content;
+ grid-auto-flow: dense;
+ gap: 1rem;
}
-.float-up { transform: translateY(-10px); }
-.float-left { transform: translateX(-10px); }
-.float-right { transform: translateX(10px); }
-.wiggle { transform: rotate(1deg); }
-.tilt { transform: rotate(-1deg); }
+.float-up {
+ transform: translateY(-10px);
+}
+.float-left {
+ transform: translateX(-10px);
+}
+.float-right {
+ transform: translateX(10px);
+}
+.wiggle {
+ transform: rotate(1deg);
+}
+.tilt {
+ transform: rotate(-1deg);
+}
.from-left {
align-self: flex-start;
@@ -595,10 +599,10 @@ const getRandomClass = () => {
.explain {
font-size: 16px;
- color: #444; /* gris doux pour le texte */
- background-color: #f9f9f9; /* fond léger pour contraster */
+ color: #444;
+ background-color: #f9f9f9;
padding: 7px;
- border-left: 4px solid #0d6efd; /* petite bande à gauche type "info" */
+ border-left: 4px solid #0d6efd;
border-right: 4px solid #0d6efd;
border-radius: 6px;
margin-bottom: 20px;
@@ -606,6 +610,4 @@ const getRandomClass = () => {
line-height: 1.6;
font-family: "Segoe UI", sans-serif;
}
-
-
</style>
diff --git a/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue b/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
index afb0659..b8966e4 100644
--- a/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
+++ b/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
@@ -1,15 +1,17 @@
<template>
<header class="header">
<a
- href="https://www.bordeaux-inp.fr/fr/lincubateur-bordeaux-inpulse"
- target="_blank"
- rel="noopener"
+ href="https://www.bordeaux-inp.fr/fr/lincubateur-bordeaux-inpulse"
+ target="_blank"
+ rel="noopener"
>
- <img src="../icons/logo inpulse.png" alt="INPulse Logo" class="logo" />
+ <img
+ src="../icons/logo inpulse.png"
+ alt="INPulse Logo"
+ class="logo"
+ />
</a>
-
-
<div class="header-actions">
<div ref="dropdownRef" class="dropdown-wrapper">
<button class="contact-button" @click.stop="toggleDropdown">
diff --git a/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue b/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
index f7b6c5a..1c84fd7 100644
--- a/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
+++ b/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
@@ -117,19 +117,18 @@ onMounted(() => {
gap: 12px;
padding: 30px;
position: relative;
- height: auto; /* autorise la hauteur à s'ajuster selon le contenu */
- max-height: none; /* enlève la limite de hauteur */
+ height: auto; /* autorise la hauteur à s'ajuster selon le contenu */
+ max-height: none; /* enlève la limite de hauteur */
box-sizing: border-box;
- overflow: visible; /* autorise le débordement visible */
+ overflow: visible; /* autorise le débordement visible */
}
@media (max-width: 768px) {
- .canvas {
- grid-template-columns: repeat(1, 1fr);
- }
+ .canvas {
+ grid-template-columns: repeat(1, 1fr);
+ }
}
-
.Probleme {
grid-column: 1 / 3;
grid-row: 1 / 5;
@@ -200,5 +199,4 @@ onMounted(() => {
.Revenus {
background-color: #c8e6c9;
}
-
</style>
diff --git a/front/MyINPulse-front/src/views/CanvasView.vue b/front/MyINPulse-front/src/views/CanvasView.vue
index d240adb..0fead7a 100644
--- a/front/MyINPulse-front/src/views/CanvasView.vue
+++ b/front/MyINPulse-front/src/views/CanvasView.vue
@@ -1,5 +1,4 @@
<template>
-
<div>
<header>
<HeaderCanvas :project-id="1" />
@@ -25,7 +24,8 @@
<a href="tel:{{ admin.phoneNumber }}">{{
admin.phoneNumber
}}</a>
- </p> <div class="main"></div>
+ </p>
+ <div class="main"></div>
</div>
</div>
</template>
@@ -139,11 +139,11 @@ onMounted(() => {
}
.canvas-help-text {
- margin-top: 20px;
- margin-bottom: -10px;
+ margin-top: 20px;
+ margin-bottom: -10px;
}
div:last-child {
- margin-bottom: 60px;
+ margin-bottom: 60px;
}
</style>