Pb du autoheight réglé

API.php

@@ -38,7 +38,8 @@
 					/* GROUPES */
 					/***********/
 					case 'groups':
-						$answer->type = "group";
+						if( isset($request->level_1) ){ include 'manager/groups.php'; groups_switch_level_1($request, $answer); }	
+						else                          { $answer->request = 'missing_level_1';                               }
 						break;
 
 

css/container.css

@@ -1,11 +1,11 @@
 #CONTAINER section{
 	/* position */
-	display: block;
+	display: none;
-	position: absolute;
+	position: relative;
 		top: 0;
 		left: 0;
 		width: 100%;
-		min-height: calc( 100vh - 5em );
+		min-height: 100%;
 		height: auto;
 	padding: 2em;
 	
@@ -17,5 +17,58 @@
 }
 
 
+#CONTAINER section.active{ display: block; }
 
-#CONTAINER section.active{ z-index: 8; }
+
+
+/* STYLE "BASIC" DES TABLEAUX */
+table.basic{
+	/* border */
+	border-radius: 5px;
+	border-spacing: 0; 
+	box-shadow: 0 0 4px #e3e3e3;
+}
+
+
+table.basic tr td,
+table.basic tr th{
+	/* position */
+	padding: 1em 1.5em;
+
+	/* border */
+	border-width: 1px 1px 0 0;
+	border-style: solid;
+	border-color: #e0e1e3;
+	
+	/* backgroud */
+	background-color: #fff;
+
+	/* foreground */
+	color: #4e4e4e;
+}
+
+table.basic tr th{ background-color: #f7f8fc; }
+table.basic tr th:first-letter{ text-transform: uppercase; }
+
+
+/* on ajoute les rebords pour ceux à gauche */
+table.basic tr td:first-child,
+table.basic tr th:first-child{ border-left-width: 1px;   }
+/* on ajoute les rebords pour ceux en bas */
+table.basic tr:last-child td { border-bottom-width: 1px; }
+
+
+/* angle haut gauche */ 
+table.basic tr:first-child th:first-child{ border-radius: 5px 0 0 0; }
+/* angle haut droit */ 
+table.basic tr:first-child th:last-child { border-radius: 0 5px 0 0; }
+/* angle bas gauche */ 
+table.basic tr:last-child td:first-child { border-radius: 0 0 0 5px; }
+/* angle bas droit */ 
+table.basic tr:last-child td:last-child  { border-radius: 0 0 5px 0; }
+
+/* @hover */
+table.basic tr:hover td{
+	background-color: #f7f8fc;
+	color: #333;
+}

css/header.css

@@ -84,7 +84,7 @@
 	
 	/* border */
 	border-radius: 100% / 100%;
-	border: 2px solid #28B965;
+	border: 2px solid #2dcc70;
 
 	/* background */
 	background: transparent url(../src/header/logout.svg) center center no-repeat;
@@ -126,7 +126,7 @@
 
 /* BOUTON SURVOL */
 #HEADER .notifbar #LOGOUT:hover{
-	background-color: #28B965;
+	background-color: #2dcc70;
 	background-image: url(../src/header/logout@hover.svg);
 }
 

css/layout.css

@@ -36,7 +36,7 @@ body{
 		top: 0;
 		left: 0;
 		width: 100%;
-		height: 100%;
+		min-height: 100%;
 
 	/* background */
 	background: #ecf0f1;
@@ -44,7 +44,8 @@ body{
 	background-size: cover;
 	background-attachment: fixed;
 
-	/* overflow */
+	/* scroll */
+	overflow: auto;
 	overflow-x: hidden;           /* empêche la barre horizontale de scroll [précaution] */
 
 	/* foreground */
@@ -152,7 +153,8 @@ body{
 		position: relative;
 			margin-left: 14em;
 			width: calc( 100% - 14em );
-			min-height: calc( 100% - 5em );
+			/*min-height: 100%;*/
+			height: auto;
 
 		/* background */
 		background-color: #ecf0f1;

css/menu.css

@@ -20,7 +20,7 @@
 	height: 5em;
 
 	/* background */
-	background: #28B965 url(../src/menu/userdata/visitor.svg) left 1em center no-repeat;
+	background: #28b965 url(../src/menu/userdata/visitor.svg) left 1em center no-repeat;
 	background-size: 3em auto;
 
 	/* foreground */

index.php

@@ -71,11 +71,11 @@ $notifNotifNum   = 5;
 						echo "<div class='userdata'>Connection</div>";
 				?>
 				<span data-link='home'    >Accueil    </span>
-				<span data-link='groups'  >Groupes   </span>
+				<span data-link='groups'  >Composition</span>
 				<span data-link='ue'      >Suivi      </span>
 				<span data-link='modules' >Modules    </span>
 				<span data-link='marks'   >Notes      </span>
-				<span data-link='settings'>Paramètres</span>
+				<span data-link='settings'>Paramètres </span>
 			</nav>
 
 			<!-- HEADER DE LA PAGE -->

page/_JS/groups.js

@@ -27,11 +27,13 @@ if( document.querySelector('#CONTAINER hgroup.active') == null )
 /****************** EXEMPLE API ******************/
 /*************************************************/
 
+// on récupère la liste des élèves du groupe E
+
 /* objet envoyé à API.php */
 var request = {
 	level_0: 'groups',
-	level_1: 'visualiser',
+	level_1: 'userlist',
-	group  : 'ego'
+	groupe : 'E'
 };
 
 // console.log( request );

page/groups.php

@@ -18,8 +18,35 @@
 <section name='all' title='tous les groupes'>
 	<?php if( $_SESSION['username'] != null ){
 
-		for($a = 0 ; $a < 10 ; $a++)
+		// on lit la liste d'utilisateurs
-			echo $a.'<br>';
+		$userlistFile = file_get_contents('../src/userlistSample.json');
+
+		$userlist = JSON_decode($userlistFile);
+
+
+		echo "<table class='basic'>";
+
+			// TITRES
+			echo '<thead><tr>';
+			foreach($userlist[0] as $key=>$value)
+				echo '<th>'.$key.'</th>';
+			echo '</tr></thead>';
+
+
+			// CONTENU
+			echo '<tbody>';
+			foreach($userlist as $eleve){
+				echo '<tr>';
+
+				foreach($eleve as $value)
+					echo '<td>'.$value.'</td>';
+
+				echo '</tr>';
+			}
+			echo '</tbody>';
+			
+		echo '</table>';
+		
 	} ?>
 	</section>
 

src/userlistSample.json

@@ -0,0 +1,122 @@
+[
+  {
+    "name": "Dickson William",
+    "sexe": "male"
+  },
+  {
+    "name": "Ortega Levy",
+    "sexe": "male"
+  },
+  {
+    "name": "Stark Barrera",
+    "sexe": "male"
+  },
+  {
+    "name": "Daugherty Rodriquez",
+    "sexe": "male"
+  },
+  {
+    "name": "Shepard Conway",
+    "sexe": "male"
+  },
+  {
+    "name": "Irene Knapp",
+    "sexe": "female"
+  },
+  {
+    "name": "Frank Mckee",
+    "sexe": "male"
+  },
+  {
+    "name": "Tammy Pearson",
+    "sexe": "female"
+  },
+  {
+    "name": "Sherrie Dawson",
+    "sexe": "female"
+  },
+  {
+    "name": "Guadalupe Richmond",
+    "sexe": "female"
+  },
+  {
+    "name": "Juarez Winters",
+    "sexe": "male"
+  },
+  {
+    "name": "Wendi Ashley",
+    "sexe": "female"
+  },
+  {
+    "name": "Turner Romero",
+    "sexe": "male"
+  },
+  {
+    "name": "England Cooper",
+    "sexe": "male"
+  },
+  {
+    "name": "Merle Frye",
+    "sexe": "female"
+  },
+  {
+    "name": "Lindsay Ferguson",
+    "sexe": "female"
+  },
+  {
+    "name": "Graham Carver",
+    "sexe": "male"
+  },
+  {
+    "name": "Aline Green",
+    "sexe": "female"
+  },
+  {
+    "name": "Lorna Clayton",
+    "sexe": "female"
+  },
+  {
+    "name": "Riley Hines",
+    "sexe": "male"
+  },
+  {
+    "name": "Wiggins Cain",
+    "sexe": "male"
+  },
+  {
+    "name": "Compton Stevenson",
+    "sexe": "male"
+  },
+  {
+    "name": "Polly Byrd",
+    "sexe": "female"
+  },
+  {
+    "name": "Kasey Tate",
+    "sexe": "female"
+  },
+  {
+    "name": "Benson Rocha",
+    "sexe": "male"
+  },
+  {
+    "name": "Rose Reeves",
+    "sexe": "female"
+  },
+  {
+    "name": "Lizzie Rose",
+    "sexe": "female"
+  },
+  {
+    "name": "Rebecca Garcia",
+    "sexe": "female"
+  },
+  {
+    "name": "York Crawford",
+    "sexe": "male"
+  },
+  {
+    "name": "Harrison Jimenez",
+    "sexe": "male"
+  }
+]

test.php

@@ -104,20 +104,20 @@
 
 	/*** AFFICHER LES MEMBRES D'UN GROUPE ***/
 	
-	require('manager/groups.php');
+	// require('manager/groups.php');
 
-	$request = new stdClass();
+	// $request = new stdClass();
-	$answer  = new stdClass();
+	// $answer  = new stdClass();
 
-	$request->level_1 = 'userlist';
+	// $request->level_1 = 'userlist';
-	$request->groupe = 'E';             // groupe.nom
+	// $request->groupe = 'E';             // groupe.nom
 
 
-	groups_switch_level_1($request, $answer);
+	// groups_switch_level_1($request, $answer);
 
-	echo var_dump( $answer );
+	// echo var_dump( $answer );
 
-	echo "<br><br><br><br><br><br><br>It works !";
+	// echo "<br><br><br><br><br><br><br>It works !";