Modification design tableaux

This commit is contained in:
xdrm-brackets 2015-11-02 12:20:01 +01:00
parent 149f8db043
commit f746ba1672
7 changed files with 242 additions and 114 deletions

View File

@ -30,34 +30,28 @@
/* STYLE "BASIC" DES TABLEAUX */
table.basic{
/* position */
/*width: calc( 100% - 2*1em );*/
margin: 2em 1em;
width: 100%;
margin-bottom: 1em;
/* border */
border-radius: 5px;
border-spacing: 0;
box-shadow: 0 0 4px #e3e3e3;
/*box-shadow: 0 0 4px #e3e3e3;*/
}
/* affichage du corps si tête activée */
table.basic thead + tbody td{ display: none; }
table.basic thead + tbody td.more{ display: block; }
table.basic thead.active + tbody td{ display: table-cell; }
table.basic tr td,
table.basic tr th,
#DRAGNDROP td,
#DRAGNDROP th{
/* position */
padding: 1em 1.5em;
padding: 1.5em 1.5em;
width: 25%;
/* border */
border-width: 1px 1px 0 0;
border-style: solid;
border-color: #e0e1e3;
/*border-width: 1px 0 0 0;*/
/*border-style: solid;*/
/*border-color: #e0e1e3;*/
/* backgroud */
background-color: #fff;
@ -76,64 +70,24 @@ table.basic tr th,
cursor: default;
}
/* la ligne "Voir plus" */
table.basic tr td.more{
/* background */
background: #f7f8fc url(../src/more.svg) right 1em center no-repeat;
background-size: auto 1.5em;
/* titre aligné à gauche */
table.basic th{ text-align: left; }
/* foreground */
color: #b7b7b7;
text-align: right;
padding-right: 3em;
/* <thead> sans background */
table.basic thead tr th{ background-color: transparent; }
/* extra */
cursor: pointer;
}
table.basic tr td.more:before{ content: 'Voir plus'; }
table.basic thead.active + tbody tr td.more:before{ content: 'Voir moins'; }
/* on cache "voir plus" quand le tableau est déroulé */
table.basic thead.active + td.more{ display: none; }
/* différence avec <thead> */
table.basic tr th{ background-color: #f7f8fc; font-size: 1.05em; }
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; }
table.basic:nth-child(4n+0) tr td:first-child{ border-left: 10px solid #e63c54; }
table.basic:nth-child(4n+1) tr td:first-child{ border-left: 10px solid #3c73e6; }
table.basic:nth-child(4n+2) tr td:first-child{ border-left: 10px solid #e6983c; }
table.basic:nth-child(4n+3) tr td:first-child{ border-left: 10px solid #2dcc70; }
/* @hover */
table.basic tr:hover td:not(.more){
background-color: #2dcc70;
color: #fff;
}
table.basic tr:hover td{ color: #fff; }
table.basic:nth-child(4n+0) thead th{ color: #e63c54; }
table.basic:nth-child(4n+0) tr:hover td:not(.more) { background-color: #e63c54; }
table.basic:nth-child(4n+1) thead th{ color: #3c73e6; }
table.basic:nth-child(4n+1) tr:hover td:not(.more) { background-color: #3c73e6; }
table.basic:nth-child(4n+2) thead th{ color: #e6983c; }
table.basic:nth-child(4n+2) tr:hover td:not(.more) { background-color: #e6983c; }
table.basic:nth-child(4n+3) thead th{ color: #2dcc70; }
table.basic:nth-child(4n+3) tr:hover td:not(.more) { background-color: #2dcc70; }
table.basic:nth-child(4n+0) tr:hover td{ background-color: rgba(230, 60, 84, 1); }
table.basic:nth-child(4n+1) tr:hover td{ background-color: rgba(60, 115, 230, 1); }
table.basic:nth-child(4n+2) tr:hover td{ background-color: rgba(230, 152, 60, 1); }
table.basic:nth-child(4n+3) tr:hover td{ background-color: rgba(45, 204, 112, 1); }

163
css/global2.css Executable file
View File

@ -0,0 +1,163 @@
.no-select{
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-o-user-select: none;
}
.hidden{ display: none !important; }
/**********************/
/*** TABLEAU .BASIC ***/
/**********************/
/* STYLE "BASIC" DES TABLEAUX */
table.basic{
/* position */
/*width: calc( 100% - 2*1em );*/
margin: 2em 1em;
/* border */
border-radius: 5px;
border-spacing: 0;
box-shadow: 0 0 4px #e3e3e3;
}
/* affichage du corps si tête activée */
table.basic thead + tbody td{ display: none; }
table.basic thead + tbody td.more{ display: block; }
table.basic thead.active + tbody td{ display: table-cell; }
table.basic tr td,
table.basic tr th,
#DRAGNDROP td,
#DRAGNDROP 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;
/* animation */
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
/* extra */
cursor: default;
}
/* la ligne "Voir plus" */
table.basic tr td.more{
/* background */
background: #f7f8fc url(../src/more.svg) right 1em center no-repeat;
background-size: auto 1.5em;
/* foreground */
color: #b7b7b7;
text-align: right;
padding-right: 3em;
/* extra */
cursor: pointer;
}
table.basic tr td.more:before{ content: 'Voir plus'; }
table.basic thead.active + tbody tr td.more:before{ content: 'Voir moins'; }
/* on cache "voir plus" quand le tableau est déroulé */
table.basic thead.active + td.more{ display: none; }
/* différence avec <thead> */
table.basic tr th{ background-color: #f7f8fc; font-size: 1.05em; }
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:not(.more){
background-color: #2dcc70;
color: #fff;
}
table.basic:nth-child(4n+0) thead th{ color: #e63c54; }
table.basic:nth-child(4n+0) tr:hover td:not(.more) { background-color: #e63c54; }
table.basic:nth-child(4n+1) thead th{ color: #3c73e6; }
table.basic:nth-child(4n+1) tr:hover td:not(.more) { background-color: #3c73e6; }
table.basic:nth-child(4n+2) thead th{ color: #e6983c; }
table.basic:nth-child(4n+2) tr:hover td:not(.more) { background-color: #e6983c; }
table.basic:nth-child(4n+3) thead th{ color: #2dcc70; }
table.basic:nth-child(4n+3) tr:hover td:not(.more) { background-color: #2dcc70; }
/******************/
/*** PARAGRAPHS ***/
/******************/
#CONTAINER section > p{
/* position */
padding: 1em;
margin: 1em;
/* border */
border-radius: 3px;
border: 1px solid #ddd;
/* background */
background-color: #fff;
}
#CONTAINER section > p:hover{
box-shadow: 1px 1px 3px #ddd;
}

View File

@ -761,7 +761,7 @@ class DataBase{
/******************************************************/
/***** déplace un étudiant d'un groupe à un autre *****/
/******************************************************/
public function deplacerEtudiant($etudiant,$groupe, $semestre, $annee){
public function deplacerEtudiant($etudiant, $groupe, $semestre, $annee){
/*** on cherche un semestre avec ce rang et cette année (qui est unique) ***/
$getSemestreUID = $this->pdo->prepare("SELECT id_semestre as id FROM semestre WHERE rang = :rang AND annee = :annee");
$getSemestreUID->execute(array(

View File

@ -34,6 +34,13 @@ require_once __ROOT__.'/manager/groups.php';
if( $answer->request == 'success' ){ // si pas d'erreur
//////////////////////////////////////////////////////////////
echo "<table class='basic'><thead><tr>";
echo '<th>Identifiant</td>';
echo '<th>Prenom</td>';
echo '<th>Nom</td>';
echo '<th>Groupe</td>';
echo '</tr></thead></table>';
foreach($answer->grouplist as $group){ // pour chaque groupe
@ -41,31 +48,20 @@ require_once __ROOT__.'/manager/groups.php';
echo "<table class='basic'>";
echo '<thead>';
echo '<tr>';
echo '<th colspan=5>Groupe <span>'.$group->nom.'</span></th>';
echo '</tr>';
echo '</thead>';
echo '<tbody>';
echo '<tbody>';
// pour chaque utilisateur
foreach($group->userlist as $user){
echo '<tr>';
foreach($user as $key=>$value)
if( $key == 'identifiant' )
echo "<td class='hidden'>".$value.'</td>';
elseif( $key == 'prenom' || $key == 'nom' )
echo '<td>'.$value.'</td>';
echo "<td>".$user['identifiant'].'</td>';
echo '<td>'.$user['prenom'].'</td>';
echo '<td>'.$user['nom'].'</td>';
echo '<td>Groupe <span>'.$group->nom.'</span></td>';
echo '</tr>';
}
echo '<tr><td colspan=5 class=more></td></tr>';
// echo '<tr><td colspan=5 class=more></td></tr>';
echo '</tbody>';
@ -119,30 +115,32 @@ if( $_SESSION['identifiant'] != null && $_SESSION['droits'] == 'student' ){ // s
if( $answer->request == 'success' ){ // si on a bien récupéré les membres du groupe
////////////////////////////////////////////////////////////////////////////////
echo "<table class='basic'>";
echo "<thead class='active'><tr>";
echo '<th colspan=5>Groupe <span>'.$monGroupe.'</span></th>';
echo '</tr></thead>';
echo "<table class='basic'><thead>";
echo '<tr>';
echo '<th colspan=5>';
echo 'Groupe '.$group->nom;
echo '</th>';
echo '</tr>';
echo '</thead></table>';
echo '<tbody>';
echo "<table class='basic'><tbody>";
// pour chaque utilisateur
foreach($answer->userlist as $user){
echo '<tr>';
foreach($user as $key=>$value)
if( $key == 'identifiant' )
echo "<td class='hidden'>".$value.'</td>';
elseif( $key == 'prenom' || $key == 'nom' )
echo '<td>'.$value.'</td>';
echo '</tr>';
}
// pour chaque utilisateur
foreach($answer->userlist as $user){
echo '<tr>';
echo "<td>".$user['identifiant'].'</td>';
echo '<td>'.$user['prenom'].'</td>';
echo '<td>'.$user['nom'].'</td>';
echo '<td>Groupe <span>'.$group->nom.'</span></td>';
echo '</tr>';
}
// echo '<tr><td colspan=5 class=more></td></tr>';
// echo '<tr><td colspan=5 class=more></td></tr>';
echo '</tbody>';
echo '</tbody>';
echo '</table>';
echo '</table>';
////////////////////////////////////////////////////////////////////////////////
}else
echo "Erreur interne.";
@ -176,6 +174,7 @@ if( $_SESSION['identifiant'] != null && $_SESSION['droits'] == 'admin' ){ // si
if( $answer->request == 'success' ){ // si pas d'erreur
//////////////////////////////////////////////////////////////
foreach($answer->grouplist as $group){ // pour chaque groupe
@ -185,7 +184,10 @@ if( $_SESSION['identifiant'] != null && $_SESSION['droits'] == 'admin' ){ // si
echo '<thead>';
echo '<tr>';
echo '<th colspan=5>Groupe <span>'.$group->nom.'</span></th>';
echo '<th colspan=5>';
echo 'Groupe '.$group->nom;
echo "<span style='font-weight:normal;padding-left:1em; font-size: .8em;'>(glisser-déposer étudiant pour le déplacer)</span>";
echo '</th>';
echo '</tr>';
echo '</thead>';
@ -196,18 +198,15 @@ if( $_SESSION['identifiant'] != null && $_SESSION['droits'] == 'admin' ){ // si
// pour chaque utilisateur
foreach($group->userlist as $user){
echo '<tr>';
foreach($user as $key=>$value)
if( $key == 'identifiant' )
echo "<td class='hidden'>".$value.'</td>';
elseif( $key == 'prenom' || $key == 'nom' )
echo '<td>'.$value.'</td>';
echo "<td>".$user['identifiant'].'</td>';
echo '<td>'.$user['prenom'].'</td>';
echo '<td>'.$user['nom'].'</td>';
echo '<td><strong><span>'.$group->nom.'</span></strong></td>';
echo '</tr>';
}
echo '<tr><td colspan=5 class=more></td></tr>';
// echo '<tr><td colspan=5 class=more></td></tr>';
echo '</tbody>';

View File

@ -1,6 +1,18 @@
<?php define('__ROOT__', dirname(__FILE__) );
require_once __ROOT__.'/manager/security.php';
/***************/
/*** A FAIRE ***/
/***************
[ ] Lors du déplacement par drag'n'drop, déplacer l'élève au bon endroit (classé alphabétiquement)
[ ] Refaire le design des tableaux en utilisant xdoc/flat_table_design.jpg
/***************/
/***************/
/***************/
/*** CRÉATION D'UTILISATEUR ***/
// require('manager/user.php');

BIN
xdoc/flat_table_design.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

View File

@ -64,7 +64,7 @@
* + valeur (18) => 18
* + base (20) => /20
*
* [ETUDIANT] membre d'un [GROUPE] associé à un [SEMESTRE] = appartenance_groupe [id_etudiant, id_groupe, id_semestre]
* [ETUDIANT] membre d'un [GROUPE] associé à un [SEMESTRE] = appartenance [id_etudiant, id_groupe, id_semestre]
*
* [UE] contient des [MODULES] en fonction du [SEMESTRE] = programme [id_semestre, id_ue, id_module]
*