first commit - draft

This commit is contained in:
xdrm-brackets 2018-03-07 11:56:36 +01:00
parent 68d0461d7c
commit 50b857c3a6
2 changed files with 108 additions and 48 deletions

View File

@ -1,38 +1,26 @@
<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-if='gstore.ues.length <= 0'>Aucun enseignant trouvé</section> -->
<section v-for='ue in gstore.ues' :data-id='ue.code'>
<span class='category'>{{ ue.code }}</span>
<h1>{{ ue.label }}</h1>
<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 class='main'>{{ ue.code }}</div>
<div>{{ ue.label }}</div>
<div>{{ ue.volumeCours }}</div>
<div>{{ ue.volumeTD }}</div>
<div>{{ ue.volumeTP }}</div>
<div class='tag list hidden' data-count='6'>
<div class='tag'>L1 Info</div>
<div class='tag'>M1 Info</div>
<div class='tag'>M2 Info (S2)</div>
</div>
<div class='sub'><strong>ZOU</strong> équivalents TD</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>

View File

@ -24,7 +24,7 @@
/* [1] List style
---------------------------------*/
#CONTAINER > div.list{
#CONTAINER.list{
display: flex;
// flex properties
@ -34,43 +34,115 @@
& > *: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{
/* (2) List item */
& > div{
display: inline-block;
position: relative;
margin: 0 1.2em;
margin-top: .8em;
flex: 1 1 0;
font-size: inherit;
color: darken($secondary-color, 5%);
margin: .5em .5em;
font-size: .9em;
/* (3) Tag List */
&.tag.list[data-count]{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
border-radius: 3px / 3px;
padding: .5em;
background-color: #ccc;
&:before{
content: attr(data-count);
}
/* (3) List separator */
& > hr{
/* (3.1) Visible tags */
& > div.tag{
display: block;
position: relative;
margin: 1em 1.5em;
margin: 0 .2em;
padding: .2em .5em;
border: 0;
border-bottom: 2px solid darken($bg-color, 5%);
// border-radius: 3px / 3px;
// background-color: #f4f8f9;
color: #999;
font-size: .8em;
white-space: nowrap;
}
/* (3.2) Hidden view */
&.hidden{
height: 1.4em;
flex: 0 0 1.4em;
border-radius: 50% / 50%;
& > div.tag{
display: none;
}
}
}
}
}
// /* (2) List title */
// & > h1{
// display: inline-block;
// margin: 0 1.2em;
// margin-top: .8em;
// 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%);
// }
}