Amelioration visuelle de Consulter_Contenu

src/Manuel.vue

 <template>
   <div :style="darktheme ? {'color' : 'white'} : {'color' : 'black'} "  style="text-align: center">
-    <h1>Bienvenue sur le manuel d'utilisation de l'application OpenQuizz</h1>
+    <h1 id="titreManuel">Bienvenue sur le manuel d'utilisation de l'application OpenQuizz</h1>
     <div style="display: flex">
       <div id="menuLateral">
 
@@ -11,14 +11,13 @@
 
           <ul class="cache">
             <li class="sousSection"><a href="#titreDeuxUn">Présentation Générale de l'interface</a></li>
-            <li class="sousSection"><a href="#titreDeuxDeux">Le mode Sombre</a>></li>
-            <li class="sousSection"><a href="#titreDeuxTrois">Le menu Panier/Banque</a>></li>
-            <li class="sousSection"><a href="#titreDeuxQuatre">Affichage du volet latéral</a>></li>
-            <li class="sousSection"><a href="#titreDeuxCinq">Le volet latéral</a>></li>
-            <li class="sousSection"><a href="#titreDeuxSix">Le tableau des contenus</a>></li>
-            <li class="sousSection"><a href="#titreDeuxSept">Le menu des options</a>></li>
-            <li class="sousSection"><a href="#titreDeuxHuit">L'ajout de contenu dans le panier</a>></li>
-
+            <li class="sousSection"><a href="#titreDeuxDeux">Le mode Sombre</a></li>
+            <li class="sousSection"><a href="#titreDeuxTrois">Le menu Panier/Banque</a></li>
+            <li class="sousSection"><a href="#titreDeuxQuatre">Affichage du volet latéral</a></li>
+            <li class="sousSection"><a href="#titreDeuxCinq">Le volet latéral</a></li>
+            <li class="sousSection"><a href="#titreDeuxSix">Le tableau des contenus</a></li>
+            <li class="sousSection"><a href="#titreDeuxSept">Le menu des options</a></li>
+            <li class="sousSection"><a href="#titreDeuxHuit">L'ajout de contenu dans le panier</a></li>
 
           </ul>
           <li><h5><span class="symboleSection" @click="naviguer"></span><a href="#titreTrois"> III - La gestion des contenus</a></h5></li>
@@ -499,7 +498,8 @@
         <h3 >5/ Deconnexion</h3>
         <br>
         <p> Quitte OpenQuizz et permet de revenir à l'écran de connexion </p>
-
+        <br>
+        <span id="remonterPage"><a href="#titreManuel"> Remonter en haut de la page</a></span>
       </div>
     </div>
   </div>
@@ -531,7 +531,7 @@ export default {
   height: auto;
   width: 30vh;
   margin-left: 10vh;
-  margin-top: 10vh;
+  margin-top: 5vh;
 
   border: 1px solid black;
   position: fixed;
@@ -541,7 +541,7 @@ export default {
   width: 120vh;
   min-height: 100%;
   height: 100%;
-  margin-top: 10vh;
+  margin-top: 5vh;
   margin-bottom: 5vh;
   margin-left: 65vh;
   border: 1px solid coral;
@@ -606,5 +606,9 @@ p {
   left: 30px;
 }
 
+#remonterPage::before {
+  content: "\2B06 ";
+}
+
 
 </style>
\ No newline at end of file

src/components/Consulter_Contenu.vue

@@ -28,14 +28,43 @@
       || contenuCliqueProvenance === 'perso')
        && versionMax > 1">
 
-      <p v-if="contenuCliqueProvenance!=='en-cours'">Type du contenu : {{ typeContenu }}</p>
+      <table id="testTable" v-if="contenuCliqueProvenance!=='en-cours'">
+
+        <tr>
+          <td class="titreTableau" style="background-color: skyblue">Type du contenu</td>
+          <td style="background-color: white">{{ typeContenu }}</td>
+        </tr>
+
+        <tr>
+          <td class="titreTableau" style="background-color: white">Source du contenu</td>
+          <td style="background-color: skyblue">{{ sourceContenu }}</td>
+        </tr>
+
+        <tr>
+          <td class="titreTableau" style="background-color: skyblue">Note du contenu</td>
+          <td style="background-color: white">({{versionChoisie}}) :  {{noteContenu}}</td>
+        </tr>
+
+        <tr>
+          <td class="titreTableau" style="background-color: white">Popularite du contenu</td>
+          <td style="background-color: skyblue">{{populariteContenu}}</td>
+        </tr>
+
+        <tr>
+          <td class="titreTableau" style="background-color: skyblue">Tags associés au contenu</td>
+          <td style="background-color: white">{{tagsContenus}}</td>
+        </tr>
+
+      </table>
+      <br>
+<!--      <p v-if="contenuCliqueProvenance!=='en-cours'">Type du contenu : {{ typeContenu }}</p>
       <p v-if="contenuCliqueProvenance!=='en-cours'">Source du contenu :  {{sourceContenu}}</p>
-      <p v-if="contenuCliqueProvenance!=='en-cours'">Note du contenu (v {{versionChoisie}}) :  {{noteContenu}}</p>
+      <p v-if="contenuCliqueProvenance!=='en-cours'">Note du contenu ( {{versionChoisie}}) :  {{noteContenu}}</p>
       <p v-if="contenuCliqueProvenance!=='en-cours'">Popularite du contenu :  {{populariteContenu}}</p>
-      <p v-if="contenuCliqueProvenance!=='en-cours'">Tags associés au contenu :  {{tagsContenus}}</p>
+      <p v-if="contenuCliqueProvenance!=='en-cours'">Tags associés au contenu :  {{tagsContenus}}</p>-->
 
       <p> Voici l'intérieur de votre contenu dans sa version {{versionChoisie}} :  </p>
-      <span contenteditable="false" v-html="formatterMarkdown()">
+      <span contenteditable="false" style="background-color: white; width: 50vw; margin-left: auto; margin-right: auto" v-html="formatterMarkdown()">
       </span>
       <br>
     </div>
@@ -263,5 +292,18 @@ button {
   width: auto;
 }
 
+#testTable {
+  width: auto;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: white;
+}
+
+.titreTableau{
+  width: 20vw;
+}
+
+
+
 
 </style>
\ No newline at end of file

src/components/Volet_Base.vue

@@ -247,6 +247,7 @@ export default {
      */
     deconnexion: function () {
       this.modeModification = false
+      this.modeConsultation = false
       this.panierChoisi = true
       this.isDeconnecte = true
     },