Interface/Conception 'history/view' CSS à revoir et améliorer pour que tout soit aligné correctement
This commit is contained in:
xdrm-brackets
parent
5eb766e030
commit
daa1750665
|
|
@ -9,13 +9,9 @@
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
// @active
|
||||
& > section.active{
|
||||
display: block;
|
||||
}
|
||||
|
||||
// @active + .list
|
||||
& > section.active.list{
|
||||
& > section.active{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
|
|
@ -26,6 +22,10 @@
|
|||
flex: 0 0 1;
|
||||
}
|
||||
|
||||
.inline-row{
|
||||
flex: 3em 0 1;
|
||||
}
|
||||
|
||||
// Barre de recherche
|
||||
.searchbar{
|
||||
display: inline-block;
|
||||
|
|
@ -75,7 +75,8 @@
|
|||
|
||||
/* [2] INLINE-BOX pour afficher les listes de donnees
|
||||
=========================================================*/
|
||||
& > section > .inline-box{
|
||||
& > section > .inline-box,
|
||||
& > section > .inline-row{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
// width: calc( 50% - 2*1em - 2*1em );
|
||||
|
|
@ -287,9 +288,70 @@
|
|||
|
||||
}
|
||||
|
||||
|
||||
/* [2-2] INLINE-ROW pour afficher des lignes
|
||||
=========================================================*/
|
||||
& > section.fstart{
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.searchbar{
|
||||
flex: 1em 0 0;
|
||||
width: calc( 100% - 3em - 2*2em );
|
||||
}
|
||||
}
|
||||
|
||||
& > section > .inline-row{
|
||||
|
||||
width: calc( 100% - 4em - 2*1em );
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
// Sur la même ligne répartis équitablement
|
||||
& > span,
|
||||
& > span.row{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
flex: 100% 1 1;
|
||||
|
||||
border-left: 1px solid #ddd;
|
||||
text-align: center;
|
||||
|
||||
&:first-child{
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > span.column{
|
||||
flex-direction: row;
|
||||
padding: 0 .5em;
|
||||
}
|
||||
|
||||
button{
|
||||
flex: auto;
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* [3] Formulaires
|
||||
=========================================================*/
|
||||
& > section > form{
|
||||
& > section > form, .form{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
|
|
@ -332,6 +394,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* (1) Champs de texte */
|
||||
input[type=text],
|
||||
|
|
@ -376,10 +440,10 @@
|
|||
|
||||
|
||||
// Champs valides
|
||||
&.valid > input[type=text],
|
||||
&.valid > input[type=mail],
|
||||
&.valid > input[type=password],
|
||||
&.valid > select,
|
||||
.valid > input[type=text],
|
||||
.valid > input[type=mail],
|
||||
.valid > input[type=password],
|
||||
.valid > select,
|
||||
input.valid[type=text],
|
||||
input.valid[type=mail],
|
||||
input.valid[type=password],
|
||||
|
|
@ -391,10 +455,10 @@
|
|||
}
|
||||
|
||||
// Champs neutres
|
||||
&.neutral > input[type=text],
|
||||
&.neutral > input[type=mail],
|
||||
&.neutral > input[type=password],
|
||||
&.neutral > select,
|
||||
.neutral > input[type=text],
|
||||
.neutral > input[type=mail],
|
||||
.neutral > input[type=password],
|
||||
.neutral > select,
|
||||
input.neutral[type=text],
|
||||
input.neutral[type=mail],
|
||||
input.neutral[type=password],
|
||||
|
|
@ -406,10 +470,10 @@
|
|||
}
|
||||
|
||||
// Champs neutres
|
||||
&.search > input[type=text],
|
||||
&.search > input[type=mail],
|
||||
&.search > input[type=password],
|
||||
&.search > select,
|
||||
.search > input[type=text],
|
||||
.search > input[type=mail],
|
||||
.search > input[type=password],
|
||||
.search > select,
|
||||
input.search[type=text],
|
||||
input.search[type=mail],
|
||||
input.search[type=password]{
|
||||
|
|
@ -424,7 +488,7 @@
|
|||
/* (2) Boutons */
|
||||
button,
|
||||
button.invalid,
|
||||
&.invalid > button{
|
||||
.invalid > button{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
|
|
@ -453,7 +517,7 @@
|
|||
|
||||
// Boutons valides
|
||||
button.valid,
|
||||
&.valid > button{
|
||||
.valid > button{
|
||||
border-color: $form-valid-color;
|
||||
|
||||
background-color: $form-valid-color;
|
||||
|
|
@ -468,7 +532,7 @@
|
|||
|
||||
// Boutons neutres
|
||||
button.neutral,
|
||||
&.neutral > button{
|
||||
.neutral > button{
|
||||
border-color: $form-neutral-color;
|
||||
|
||||
background-color: $form-neutral-color;
|
||||
|
|
@ -483,7 +547,7 @@
|
|||
|
||||
// Boutons recherche
|
||||
button.search,
|
||||
&.search > button{
|
||||
.search > button{
|
||||
border-color: $form-search-color;
|
||||
|
||||
background-color: $form-search-color;
|
||||
|
|
@ -498,7 +562,7 @@
|
|||
|
||||
|
||||
// Boutons quand action validee
|
||||
&.invalid > button.active,
|
||||
.invalid > button.active,
|
||||
button.invalid.active,
|
||||
button.active{
|
||||
background-color: #fff;
|
||||
|
|
@ -510,15 +574,15 @@
|
|||
|
||||
|
||||
button.valid.active,
|
||||
&.valid > button.active{
|
||||
.valid > button.active{
|
||||
background-image: url('/src/static/container/active@#{$rd-form-valid-color}.svg') !important;
|
||||
}
|
||||
button.neutral.active,
|
||||
&.neutral > button.active{
|
||||
.neutral > button.active{
|
||||
background-image: url('/src/static/container/active@#{$rd-form-neutral-color}.svg') !important;
|
||||
}
|
||||
button.search.active,
|
||||
&.search > button.active{
|
||||
.search > button.active{
|
||||
background-image: url('/src/static/container/active@#{$rd-form-search-color}.svg') !important;
|
||||
}
|
||||
|
||||
|
|
@ -580,7 +644,7 @@
|
|||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -47,7 +47,7 @@
|
|||
$getmachines = new ModuleRequest('machineDefault/getAll'); // On utilise la methode 'getAll' du module 'machineDefault'
|
||||
$nbmachines = count( $getmachines->dispatch()->get('machines') ); // On recupere la reponse
|
||||
|
||||
echo "<section data-sublink='view' class='list'>";
|
||||
echo "<section data-sublink='view' class='list fstart'>";
|
||||
|
||||
// Barre de recherche
|
||||
echo "<input type='text' class='searchbar' placeholder='Recherche'>";
|
||||
|
|
@ -55,15 +55,42 @@
|
|||
|
||||
/* (1) On récupère les données
|
||||
---------------------------------------------------------*/
|
||||
$selReq = Database::getPDO()->query("select count(distinct id_user) as users, max(timestamp) as last from history group by id_machine");
|
||||
$selReq = Database::getPDO()->query("select m.*, count(distinct h.id_user) as users, max(h.timestamp) as last
|
||||
from history as h, machine as m
|
||||
where h.id_machine = m.id_machine
|
||||
group by h.id_machine");
|
||||
$selected = Database::delNumeric( $selReq->fetchAll() );
|
||||
|
||||
|
||||
echo "<article class='inline-row'>";
|
||||
echo "<span>Machine</span>";
|
||||
echo "<span>Dernière utilisation</span>";
|
||||
echo "<span>Conducteurs</span>";
|
||||
echo "<span>Historique détaillé</span>";
|
||||
echo "</article>";
|
||||
|
||||
foreach($selected as $m=>$mac){
|
||||
|
||||
echo "<article class='inline-box'>"
|
||||
echo "<article class='inline-row'>";
|
||||
|
||||
echo "<span class='title'><span>#".$mac['name']."</span></span>";
|
||||
|
||||
echo "<span class='row'>";
|
||||
echo "<span>".date('d/m/Y H:i:s', $mac['last'])."</span>";
|
||||
echo "<span style='color:#aaa;'>Il y a xx jours et yy heures</span>";
|
||||
echo "</span>";
|
||||
|
||||
|
||||
echo "<span class='column'>";
|
||||
echo "<span>".$mac['users']." conducteur(s)</span>";
|
||||
echo "<span>".$mac['users']."</span>";
|
||||
echo "</span>";
|
||||
|
||||
echo "<span>";
|
||||
echo "<button class='search'>Détails</button>";
|
||||
echo "</span>";
|
||||
|
||||
echo "</article>";
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue