Compare commits

...

3 Commits

Author SHA1 Message Date
xdrm-brackets ea2f2a84ae new design with link solution ?? 2018-03-07 16:45:59 +01:00
xdrm-brackets fe4db55e06 Merge branch 'master' into ue-design 2018-03-07 16:06:54 +01:00
xdrm-brackets 50b857c3a6 first commit - draft 2018-03-07 11:56:36 +01:00
3 changed files with 111 additions and 49 deletions

View File

@ -1,38 +1,29 @@
<template>
<div id='CONTAINER' class='card' style="top: 0; height: 100%">
<div id='CONTAINER' class='list'>
<div class="card container" style="width: 100%">
<section v-if='gstore.ues.length <= 0'>Aucun enseignant trouvé</section>
<!-- <input class='list instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='teacher_view_instant_search'>
<section v-for='ue in gstore.ues' :data-id='ue.code'>
<span class='category'>{{ ue.code }}</span>
<h1>{{ ue.label }}</h1>
<section v-if='gstore.ues.length <= 0'>Aucun enseignant trouvé</section> -->
<div class='table'>
<div>
<span>{{ue.volumeCours}}</span>
<span>heures de cours</span>
</div>
<div>
<span>{{ue.volumeTD}}</span>
<span>heures de TD</span>
</div>
<div>
<span>{{ue.volumeTP}}</span>
<span>heures de TP</span>
</div>
</div>
<section v-for='ue in gstore.ues' :data-id='ue.code'>
<div class='sub'><strong>ZOU</strong> équivalents TD</div>
<div class='main'>{{ ue.code }}</div>
<div>{{ ue.label }}</div>
<div class='footer'>
<span :class="(ue.volumeCours == 0) ? 'course' : 'course active'">{{ ue.volumeCours }}</span><hr>
<span :class="(ue.volumeTD == 0) ? 'td' : 'td active'">{{ ue.volumeTD }}</span><hr>
<span :class="(ue.volumeTP == 0) ? 'tp' : 'tp active'">{{ ue.volumeTP }}</span>
</div>
</section>
</div>
<div class='tag list'>
<a class='tag'
:data-none='ue.volumeCours>0?0:1'
:data-good='ue.volumeCours >= Math.max(ue.volumeTD+ue.volumeTP)?1:0'>{{ ue.volumeCours }}h</a>
<a class='tag'
:data-none='ue.volumeTD>0?0:1'
:data-good='ue.volumeTD >= Math.max(ue.volumeCours+ue.volumeTP)?1:0'>{{ ue.volumeTD }}h</a>
<a class='tag'
:data-none='ue.volumeTP>0?0:1'
:data-good='ue.volumeTP >= Math.max(ue.volumeCours+ue.volumeTD)?1:0' >{{ ue.volumeTP }}h</a>
</div>
</section>
</div>

View File

@ -24,7 +24,7 @@
/* [1] List style
---------------------------------*/
#CONTAINER > div.list{
#CONTAINER.list{
display: flex;
// flex properties
@ -34,42 +34,111 @@
& > *:first-child{ margin-top: 1em; }
& > *:last-child{ margin-bottom: 3em; }
/* (1) List element */
/* (1) List line */
& > section{
display: block;
display: flex;
margin: .3em 1em;
padding: .8em 1em;
padding: .5em 1em;
border-radius: 5px / 5px;
background-color: #fff;
}
// flex
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
/* (2) List title */
& > h1{
display: inline-block;
margin: 0 1.2em;
margin-top: .8em;
/* (2) List item */
& > div{
display: inline-block;
position: relative;
font-size: inherit;
color: darken($secondary-color, 5%);
flex: 1 1 0;
margin: .5em .5em;
font-size: .9em;
/* (3) Tag List */
&.tag.list{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
flex-shrink: 1;
/* (3.1) Visible tags */
& > .tag{
display: inline-block;
position: relative;
flex: 0 1 3em;
margin: 0 .2em;
padding: .2em .5em;
border-radius: 3px / 3px;
background-color: #f4f8f9;
color: #8298a3;
font-size: .9em;
white-space: nowrap;
text-align: center;
&[data-normal='1']{
color: #ffbb44;
background-color: #fff8ec;
}
&[data-good='1']{
color: #7ace4c;
background-color: #f1faed;
}
&[data-none='1']{
color: #f33155;
background-color: #feeaee;
}
}
}
}
}
/* (3) List separator */
& > hr{
display: block;
position: relative;
// /* (2) List title */
// & > h1{
// display: inline-block;
margin: 1em 1.5em;
// margin: 0 1.2em;
// margin-top: .8em;
border: 0;
border-bottom: 2px solid darken($bg-color, 5%);
}
// font-size: inherit;
// color: darken($secondary-color, 5%);
// }
// /* (3) List separator */
// & > hr{
// display: block;
// position: relative;
// margin: 1em 1.5em;
// border: 0;
// border-bottom: 2px solid darken($bg-color, 5%);
// }
}

View File

@ -206,6 +206,8 @@ a{
color: inherit;
text-decoration: none;
cursor: pointer;
&:after{
content: '';
display: block;
@ -213,7 +215,7 @@ a{
width: 0%;
height: .1em;
background-color: #ddd;
background-color: currentColor;
transition: width .1s ease-in-out;