pannels de navigation avec des tabs

public/css/customCss.css

@@ -12,6 +12,42 @@
 
 
 
+/* pour des navtabs centrés*/
+
+
+/* center tabs */
+.nav-tabs, .nav-pills {
+    text-align:center;
+}
+
+/* line below tabs */
+.nav-tabs {
+    border-bottom: 2px solid #808080;
+}
+
+/* center logo */
+.img-center {
+  margin:0 auto;
+  padding: 15px;
+}
+
+.col-md-6 {
+  padding: 15px;
+  /*border-style: solid;*/
+}
+
+.new-row {
+  clear: left;    
+}
+  
+.no-title-col {
+  padding-top: 30px;      
+}
+
+
+
+
+
 
 
 

public/espace_perso.php

@@ -52,11 +52,6 @@ $listeCDCperso = $coupdecoeurRepository->fetchByIdUser($_SESSION["id_user"]);
 ?>
 <h1 class="titre">Ceci est la page de votre espace personnel</h1>
 
-  <h5 class="titre"> Changement mot de passe</h5>
-  <a href="modif_mdp.php"><button>Changer mon mot de passe</button></a>
-	
-
-
 <!-- bibliothèque personnelle de l'utilisateur -->
 <!-- balise cachée contenant la liste des images coup de coeur -->
 <div id="CDClist" style="display: none">
@@ -72,24 +67,40 @@ $listeCDCperso = $coupdecoeurRepository->fetchByIdUser($_SESSION["id_user"]);
 </div>
 
 
-  <div class="row no-gutters">
+<ul class="nav nav-tabs">
+  <li class="nav-item">
+    <a class="nav-link active titre" data-toggle="tab" href="#CDC">Vos images coup de coeur</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link titre" data-toggle="tab" href="#Review">Les images que vous avez note</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link titre" data-toggle="tab" href="#MDP">Changez votre mot de passe</a>
+  </li>
+</ul>
+
 
-  <div class="col CoupDeCoeur" style="margin: 0px;">
+
+<div class="tab-content">
+  <div class="tab-pane container active" id="CDC">
     <h3 class="titre">Vos images coup de coeur :</h3>
     <!-- liste des coups de coeur de l'utilisateur -->
     <div id="CDCdisplayArea"><div class="spinner-border text-dark"></div></div>
-  </div>
 
-
-  <!-- bibliothèque personnelle des images notées par l'utilisateur -->
-  <div class="col Reviewed" style="margin: 0px;">
+  </div>
+  <div class="tab-pane container fade" id="Review">
     <h3 class="titre">Les images que vous avez note :</h3>
     <div id="ReviewdisplayArea"><div class="spinner-border text-dark"></div></div>
+
+  </div>
+  <div class="tab-pane container fade" id="MDP">
+    <h5 class="titre"> Changement mot de passe</h5>
+    <a href="modif_mdp.php"><button>Changer mon mot de passe</button></a>
+
   </div>
 </div>
 
 
-  </div>
 
 
 

public/leaderboard.php

@@ -82,15 +82,31 @@ urlHasArgument();
 		?>
 	</div>
 
+	<ul class="nav nav-tabs">
+  		<li class="nav-item">
+    		<a class="nav-link active titre" data-toggle="tab" href="#Review">Par note</a>
+  		</li>
+  		<li class="nav-item">
+    		<a class="nav-link titre" data-toggle="tab" href="#CDC">Par coup de coeur</a>
+	  	</li>
+	</ul>
+
+	<div class="tab-content">
+  		<div class="tab-pane container active" id="Review">
 	<h1 class="titre">Images les mieux notees</h1>
 	<div id="NoteLeaderboardDisplayArea"></div>
-	<br/>
-	<br/>
-	<br/>
-
+  		</div>
+  		<div class="tab-pane container fade" id="CDC">
 	<h1 class="titre">Image les plus aimes</h1>
 
 	<div id="CDCLeaderboardDisplayArea"></div>
+  		</div>
+	</div>
+
+	<!-- <br/>
+	<br/>
+	<br/> -->
+