first commit - draft
This commit is contained in:
xdrm-brackets
parent
68d0461d7c
commit
50b857c3a6
|
|
@ -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-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>{{ 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>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
/* [1] List style
|
||||
---------------------------------*/
|
||||
#CONTAINER > div.list{
|
||||
#CONTAINER.list{
|
||||
display: flex;
|
||||
|
||||
// flex properties
|
||||
|
|
@ -34,42 +34,114 @@
|
|||
& > *: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[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.1) Visible tags */
|
||||
& > div.tag{
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
margin: 0 .2em;
|
||||
padding: .2em .5em;
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* (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%);
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue