Modification design tableaux
This commit is contained in:
parent
149f8db043
commit
f746ba1672
|
@ -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); }
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -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(
|
||||
|
|
|
@ -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>';
|
||||
|
||||
|
|
12
test.php
12
test.php
|
@ -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');
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 27 KiB |
|
@ -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]
|
||||
*
|
||||
|
|
Loading…
Reference in New Issue