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,257 +394,259 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/* (1) Champs de texte */
|
||||
input[type=text],
|
||||
input[type=mail],
|
||||
input[type=password],
|
||||
select,
|
||||
&.invalid > input[type=text],
|
||||
&.invalid > input[type=mail],
|
||||
&.invalid > input[type=password],
|
||||
&.invalid > select,
|
||||
input.invalid[type=text],
|
||||
input.invalid[type=mail],
|
||||
input.invalid[type=password],
|
||||
select.invalid{
|
||||
display: inline-block;
|
||||
margin: 1em 0;
|
||||
padding: .7em 1em;
|
||||
|
||||
border-radius: 3px;
|
||||
border: 1px solid #d7dde8;
|
||||
|
||||
color: #2f3033;
|
||||
|
||||
transition: border .4s ease-in-out;
|
||||
|
||||
&:focus,
|
||||
&:hover{
|
||||
border-color: $form-invalid-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
select{
|
||||
width: 100%;
|
||||
display: block;
|
||||
background: #fff;
|
||||
/* (1) Champs de texte */
|
||||
input[type=text],
|
||||
input[type=mail],
|
||||
input[type=password],
|
||||
select,
|
||||
&.invalid > input[type=text],
|
||||
&.invalid > input[type=mail],
|
||||
&.invalid > input[type=password],
|
||||
&.invalid > select,
|
||||
input.invalid[type=text],
|
||||
input.invalid[type=mail],
|
||||
input.invalid[type=password],
|
||||
select.invalid{
|
||||
display: inline-block;
|
||||
margin: 1em 0;
|
||||
padding: .7em 1em;
|
||||
|
||||
option{
|
||||
padding: .5em;
|
||||
}
|
||||
}
|
||||
border-radius: 3px;
|
||||
border: 1px solid #d7dde8;
|
||||
|
||||
color: #2f3033;
|
||||
|
||||
// Champs valides
|
||||
&.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],
|
||||
select.valid{
|
||||
&:focus,
|
||||
&:hover{
|
||||
border-color: $form-valid-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Champs neutres
|
||||
&.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],
|
||||
select.neutral{
|
||||
&:focus,
|
||||
&:hover{
|
||||
border-color: $form-neutral-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Champs neutres
|
||||
&.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]{
|
||||
&:focus,
|
||||
&:hover{
|
||||
border-color: $form-search-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* (2) Boutons */
|
||||
button,
|
||||
button.invalid,
|
||||
&.invalid > button{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
|
||||
padding: .7em 1em;
|
||||
|
||||
border-radius: 3px;
|
||||
border: 1px solid $form-invalid-color;
|
||||
|
||||
background: $form-invalid-color center center no-repeat;
|
||||
|
||||
color: #fff;
|
||||
|
||||
transition: background .4s ease-in-out;
|
||||
|
||||
transform: translateX(-50%);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-invalid-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Boutons valides
|
||||
button.valid,
|
||||
&.valid > button{
|
||||
border-color: $form-valid-color;
|
||||
|
||||
background-color: $form-valid-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-valid-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Boutons neutres
|
||||
button.neutral,
|
||||
&.neutral > button{
|
||||
border-color: $form-neutral-color;
|
||||
|
||||
background-color: $form-neutral-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-neutral-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Boutons recherche
|
||||
button.search,
|
||||
&.search > button{
|
||||
border-color: $form-search-color;
|
||||
|
||||
background-color: $form-search-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-search-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Boutons quand action validee
|
||||
&.invalid > button.active,
|
||||
button.invalid.active,
|
||||
button.active{
|
||||
background-color: #fff;
|
||||
background-image: url('/src/static/container/active@#{$rd-form-invalid-color}.svg') !important;
|
||||
background-size: 1em auto;
|
||||
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
button.valid.active,
|
||||
&.valid > button.active{
|
||||
background-image: url('/src/static/container/active@#{$rd-form-valid-color}.svg') !important;
|
||||
}
|
||||
button.neutral.active,
|
||||
&.neutral > button.active{
|
||||
background-image: url('/src/static/container/active@#{$rd-form-neutral-color}.svg') !important;
|
||||
}
|
||||
button.search.active,
|
||||
&.search > button.active{
|
||||
background-image: url('/src/static/container/active@#{$rd-form-search-color}.svg') !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// "OU" separant les boutons
|
||||
hr.OR[data-label]{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
|
||||
border: 0;
|
||||
border-bottom: 1px dashed $form-invalid-color;
|
||||
|
||||
&:before{
|
||||
content: attr(data-label);
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
padding: 0 1em;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
color: $form-invalid-color;
|
||||
|
||||
transform: translateX(-50%) translatey(-50%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// "OU" valide
|
||||
.valid > hr.OR,
|
||||
hr.OR.valid{
|
||||
border-bottom: 1px dashed $form-valid-color;
|
||||
&:before{
|
||||
color: $form-valid-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// "OU" neutre
|
||||
.neutral > hr.OR,
|
||||
hr.OR.neutral{
|
||||
border-bottom: 1px dashed $form-neutral-color;
|
||||
&:before{
|
||||
color: $form-neutral-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// "OU" recherche
|
||||
.search > hr.OR,
|
||||
hr.OR.search{
|
||||
border-bottom: 1px dashed $form-search-color;
|
||||
&:before{
|
||||
color: $form-search-color;
|
||||
}
|
||||
transition: border .4s ease-in-out;
|
||||
|
||||
&:focus,
|
||||
&:hover{
|
||||
border-color: $form-invalid-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
select{
|
||||
width: 100%;
|
||||
display: block;
|
||||
background: #fff;
|
||||
|
||||
option{
|
||||
padding: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Champs valides
|
||||
.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],
|
||||
select.valid{
|
||||
&:focus,
|
||||
&:hover{
|
||||
border-color: $form-valid-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Champs neutres
|
||||
.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],
|
||||
select.neutral{
|
||||
&:focus,
|
||||
&:hover{
|
||||
border-color: $form-neutral-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Champs neutres
|
||||
.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]{
|
||||
&:focus,
|
||||
&:hover{
|
||||
border-color: $form-search-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* (2) Boutons */
|
||||
button,
|
||||
button.invalid,
|
||||
.invalid > button{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
|
||||
padding: .7em 1em;
|
||||
|
||||
border-radius: 3px;
|
||||
border: 1px solid $form-invalid-color;
|
||||
|
||||
background: $form-invalid-color center center no-repeat;
|
||||
|
||||
color: #fff;
|
||||
|
||||
transition: background .4s ease-in-out;
|
||||
|
||||
transform: translateX(-50%);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-invalid-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Boutons valides
|
||||
button.valid,
|
||||
.valid > button{
|
||||
border-color: $form-valid-color;
|
||||
|
||||
background-color: $form-valid-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-valid-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Boutons neutres
|
||||
button.neutral,
|
||||
.neutral > button{
|
||||
border-color: $form-neutral-color;
|
||||
|
||||
background-color: $form-neutral-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-neutral-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Boutons recherche
|
||||
button.search,
|
||||
.search > button{
|
||||
border-color: $form-search-color;
|
||||
|
||||
background-color: $form-search-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled{
|
||||
background-color: #fff;
|
||||
color: $form-search-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Boutons quand action validee
|
||||
.invalid > button.active,
|
||||
button.invalid.active,
|
||||
button.active{
|
||||
background-color: #fff;
|
||||
background-image: url('/src/static/container/active@#{$rd-form-invalid-color}.svg') !important;
|
||||
background-size: 1em auto;
|
||||
|
||||
color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
button.valid.active,
|
||||
.valid > button.active{
|
||||
background-image: url('/src/static/container/active@#{$rd-form-valid-color}.svg') !important;
|
||||
}
|
||||
button.neutral.active,
|
||||
.neutral > button.active{
|
||||
background-image: url('/src/static/container/active@#{$rd-form-neutral-color}.svg') !important;
|
||||
}
|
||||
button.search.active,
|
||||
.search > button.active{
|
||||
background-image: url('/src/static/container/active@#{$rd-form-search-color}.svg') !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// "OU" separant les boutons
|
||||
hr.OR[data-label]{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
|
||||
border: 0;
|
||||
border-bottom: 1px dashed $form-invalid-color;
|
||||
|
||||
&:before{
|
||||
content: attr(data-label);
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
padding: 0 1em;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
color: $form-invalid-color;
|
||||
|
||||
transform: translateX(-50%) translatey(-50%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// "OU" valide
|
||||
.valid > hr.OR,
|
||||
hr.OR.valid{
|
||||
border-bottom: 1px dashed $form-valid-color;
|
||||
&:before{
|
||||
color: $form-valid-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// "OU" neutre
|
||||
.neutral > hr.OR,
|
||||
hr.OR.neutral{
|
||||
border-bottom: 1px dashed $form-neutral-color;
|
||||
&:before{
|
||||
color: $form-neutral-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// "OU" recherche
|
||||
.search > hr.OR,
|
||||
hr.OR.search{
|
||||
border-bottom: 1px dashed $form-search-color;
|
||||
&:before{
|
||||
color: $form-search-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
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