[webpack.teacher.view] added generic CSS+HTML semantic for 'filter' + 'instant search'

This commit is contained in:
xdrm-brackets 2018-03-04 17:23:35 +01:00
parent 0e2ac90b58
commit 405e74d8d8
4 changed files with 249 additions and 26 deletions

View File

@ -0,0 +1,54 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
height="1024"
width="768"
version="1.1"
id="svg4"
sodipodi:docname="checkbox.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1015"
id="namedview6"
showgrid="false"
inkscape:zoom="0.23046875"
inkscape:cx="384"
inkscape:cy="512"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="1"
inkscape:current-layer="svg4" />
<path
d="M 640,192 256,576 128,448 0,576 256,832 768,320 Z"
id="fill-edit"
inkscape:connector-curvature="0" />
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -1,32 +1,62 @@
<template>
<div id='CONTAINER' class='card'>
<div id='CONTAINER'>
<section v-if='gstore.professors.length <= 0'>Aucun enseignant trouvé</section>
<input class='card instant-search neutral' type='text' placeholder='Recherche instantannée'>
<section v-for='prof in gstore.professors' :data-id='prof.idProfesseur'>
<span class='category'>{{ prof.categorie }}</span>
<h1>{{ prof.firstName }} {{ prof.lastName }}</h1>
<div class='card container'>
<div class='table'>
<div>
<span>{{prof.hoursToDo}}</span>
<span>heures à faire</span>
<section v-if='gstore.professors.length <= 0'>Aucun enseignant trouvé</section>
<section v-for='prof in gstore.professors' :data-id='prof.idProfesseur'>
<span class='category'>{{ prof.categorie }}</span>
<h1>{{ prof.firstName }} {{ prof.lastName }}</h1>
<div class='table'>
<div>
<span>{{prof.hoursToDo}}</span>
<span>heures à faire</span>
</div>
<div>
<span>{{ prof.VHCours + prof.VHTd + prof.VHTp }}</span>
<span>heures prévues</span>
</div>
</div>
<div>
<span>{{ prof.VHCours + prof.VHTd + prof.VHTp }}</span>
<span>heures prévues</span>
<div class='sub'><strong>{{ prof.equiTD }}h</strong> équivalents TD</div>
<div class='footer'>
<span :class="(prof.VHCours == 0) ? 'course' : 'course active'">{{ prof.VHCours }}</span><hr>
<span :class="(prof.VHTd == 0) ? 'td' : 'td active'">{{ prof.VHTd }}</span><hr>
<span :class="(prof.VHTp == 0) ? 'tp' : 'tp active'">{{ prof.VHTp }}</span>
</div>
</section>
</div>
<div class='card filter'>
<div title='UEs'>
<span class='active'>Systèmes d'Information</span>
<span>Introduction aux systèmes numériques</span>
<span class='active'>Graphes</span>
<span>Introduction à la méthode B</span>
</div>
<div class='sub'><strong>{{ prof.equiTD }}h</strong> équivalents TD</div>
<div class='footer'>
<span :class="(prof.VHCours == 0) ? 'course' : 'course active'">{{ prof.VHCours }}</span><hr>
<span :class="(prof.VHTd == 0) ? 'td' : 'td active'">{{ prof.VHTd }}</span><hr>
<span :class="(prof.VHTp == 0) ? 'tp' : 'tp active'">{{ prof.VHTp }}</span>
<div title='Formations'>
<span>Master TI</span>
<span class='active'>Master TI - Année 2</span>
<span>Master TI - Année 2</span>
</div>
</section>
<div title='Catégories'>
<span>Maîtres de conférence</span>
<span class='active'>Intervenant externe</span>
<span>Autres</span>
</div>
</div>
</div>

View File

@ -7,14 +7,14 @@
position: absolute;
top: $header-height;
left: $menu-width;
min-height: calc( 100% - #{$header-height} );
height: calc( 100% - #{$header-height} );
width: calc( 100% - #{$menu-width} );
height: auto;
background-color: $bg-color;
overflow: hidden;
overflow-y: auto;
z-index: 100;
@ -24,7 +24,7 @@
/* [1] List style
---------------------------------*/
#CONTAINER.list{
#CONTAINER > div.list{
display: flex;
// flex properties
@ -77,11 +77,45 @@
/* [2] Card style
/* [2] Card style -> instant-search
---------------------------------*/
#CONTAINER.card{
#CONTAINER > input.card.instant-search{
display: block;
position: absolute;
top: .5em;
left: .5em;
// 100% - filtr - padding - border
width: calc( 100% - 20em - 1em - 6*1em );
height: calc( 3em - 2*.5em - 2*1px);
margin: 0;
padding: .5em 1em;
border-radius: 3px / 3px;
background-color: #fff;
box-shadow: 0 2px 2px darken(#fff, 10%);
}
/* [3] Card style -> container
---------------------------------*/
#CONTAINER > div.card.container{
display: flex;
position: absolute;
top: 3em;
left: 0;
width: calc( 100% - 20em );
min-height: calc( 100% - 3em );
// flex properties
flex-direction: row;
@ -89,6 +123,9 @@
align-items: flex-start;
flex-wrap: wrap;
z-index: 101;
overflow: hidden;
/* (1) Card container */
& > section{
@ -96,6 +133,7 @@
// flex-grow: 1;
flex-basis: 15em;
flex-shrink: 1;
flex-grow: 1;
display: block;
position: relative;
@ -318,3 +356,104 @@
}
}
/* [4] Card style -> filter
---------------------------------*/
#CONTAINER > div.card.filter{
display: flex;
position: fixed;
top: #{$header-height + 1em};
left: calc( 100% - 20em + 1em );
// deflt - marg - scrollBarOffset
width: calc( 20em - 2*1em - 1em );
height: calc( 100% - 2*1em - #{$header-height} );
border-radius: 3px / 3px;
background-color: #fff;
box-shadow: 0 2px 2px darken(#fff, 10%);
// flex
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
/* (1) Filter Group */
& > div[title]{
display: block;
position: relative;
margin: 1em;
/* (1.1) Title content */
&:before{
content: attr(title);
display: block;
position: relative;
margin-bottom: 1em;
font-size: .8em;
color: darken($secondary-color, 10%);
text-transform: uppercase;
letter-spacing: .05em;
}
/* (1.2) Filter element */
& > span{
display: block;
position: relative;
text-indent: 1.5em;
margin-bottom: 1em;
cursor: default;
&:hover{ text-decoration: underline; }
/* (1.3) Pseudo-checkbox */
&:before{
content: '';
display: block;
position: absolute;
width: calc( 1em - 2*2px );
height: calc( 1em - 2*2px );
border-radius: 3px / 3px;
border: 2px solid $secondary-color;
background: #fff center center no-repeat;
background-size: auto 80%;
transition: background .2s ease-in-out,
border-color .2s ease-in-out;
cursor: pointer;
}
/* (1.4) Active pseudo-checkbox */
&.active:before{
background-image: url('/asset/svg/checkbox.svg@ffffff');
background-color: $form-valid-color;
border-color: $form-valid-color;
}
}
}
}

View File

@ -15,11 +15,11 @@ select.neutral{
padding: .5em 1em;
border-radius: 3px;
border: 1px dashed $form-neutral-color;
border: 1px solid $form-neutral-color;
background-color: #fff;
color: $form-neutral-color;
color: lighten($primary-color, 15%);
transition: border .2s ease-in-out,
color .2s ease-in-out;