[webpack.teacher.view] added generic CSS+HTML semantic for 'filter' + 'instant search'
This commit is contained in:
xdrm-brackets
parent
0e2ac90b58
commit
405e74d8d8
|
|
@ -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 |
|
|
@ -1,32 +1,62 @@
|
||||||
<template>
|
<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'>
|
<div class='card container'>
|
||||||
<span class='category'>{{ prof.categorie }}</span>
|
|
||||||
<h1>{{ prof.firstName }} {{ prof.lastName }}</h1>
|
|
||||||
|
|
||||||
<div class='table'>
|
|
||||||
<div>
|
<section v-if='gstore.professors.length <= 0'>Aucun enseignant trouvé</section>
|
||||||
<span>{{prof.hoursToDo}}</span>
|
|
||||||
<span>heures à faire</span>
|
<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>
|
||||||
<div>
|
|
||||||
<span>{{ prof.VHCours + prof.VHTd + prof.VHTp }}</span>
|
<div class='sub'><strong>{{ prof.equiTD }}h</strong> équivalents TD</div>
|
||||||
<span>heures prévues</span>
|
|
||||||
|
<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>
|
</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>
|
||||||
|
|
||||||
<div class='sub'><strong>{{ prof.equiTD }}h</strong> équivalents TD</div>
|
<div title='Formations'>
|
||||||
|
<span>Master TI</span>
|
||||||
<div class='footer'>
|
<span class='active'>Master TI - Année 2</span>
|
||||||
<span :class="(prof.VHCours == 0) ? 'course' : 'course active'">{{ prof.VHCours }}</span><hr>
|
<span>Master TI - Année 2</span>
|
||||||
<span :class="(prof.VHTd == 0) ? 'td' : 'td active'">{{ prof.VHTd }}</span><hr>
|
|
||||||
<span :class="(prof.VHTp == 0) ? 'tp' : 'tp active'">{{ prof.VHTp }}</span>
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,14 +7,14 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: $header-height;
|
top: $header-height;
|
||||||
left: $menu-width;
|
left: $menu-width;
|
||||||
min-height: calc( 100% - #{$header-height} );
|
height: calc( 100% - #{$header-height} );
|
||||||
width: calc( 100% - #{$menu-width} );
|
width: calc( 100% - #{$menu-width} );
|
||||||
height: auto;
|
|
||||||
|
|
||||||
|
|
||||||
background-color: $bg-color;
|
background-color: $bg-color;
|
||||||
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
|
|
||||||
/* [1] List style
|
/* [1] List style
|
||||||
---------------------------------*/
|
---------------------------------*/
|
||||||
#CONTAINER.list{
|
#CONTAINER > div.list{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
// flex properties
|
// 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;
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 3em;
|
||||||
|
left: 0;
|
||||||
|
width: calc( 100% - 20em );
|
||||||
|
min-height: calc( 100% - 3em );
|
||||||
|
|
||||||
// flex properties
|
// flex properties
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
@ -89,6 +123,9 @@
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
z-index: 101;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
|
||||||
/* (1) Card container */
|
/* (1) Card container */
|
||||||
& > section{
|
& > section{
|
||||||
|
|
@ -96,6 +133,7 @@
|
||||||
// flex-grow: 1;
|
// flex-grow: 1;
|
||||||
flex-basis: 15em;
|
flex-basis: 15em;
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -317,4 +355,105 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* [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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -15,11 +15,11 @@ select.neutral{
|
||||||
padding: .5em 1em;
|
padding: .5em 1em;
|
||||||
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 1px dashed $form-neutral-color;
|
border: 1px solid $form-neutral-color;
|
||||||
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
color: $form-neutral-color;
|
color: lighten($primary-color, 15%);
|
||||||
|
|
||||||
transition: border .2s ease-in-out,
|
transition: border .2s ease-in-out,
|
||||||
color .2s ease-in-out;
|
color .2s ease-in-out;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue