fix: (forgot to say that the layout in enhanced in last commit) + fix du prettier

2025-04-23 11:07:32 +02:00
parent 28b0e69da1
commit fcc20d1f42
5 changed files with 122 additions and 116 deletions
--- 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>
--- 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;
@@ -452,7 +449,6 @@ const getRandomClass = () => {
    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>
--- 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">
--- 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>
--- 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>