Compare commits
3 Commits
| Author | SHA1 | Date |
|---|---|---|
xdrm-brackets
|
ea2f2a84ae | |
|
xdrm-brackets
|
fe4db55e06 | |
|
xdrm-brackets
|
50b857c3a6 |
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue