first commit - draft
This commit is contained in:
xdrm-brackets
parent
68d0461d7c
commit
50b857c3a6
|
|
@ -1,38 +1,26 @@
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div id='CONTAINER' class='card' style="top: 0; height: 100%">
|
<div id='CONTAINER' class='list'>
|
||||||
|
|
||||||
<div class="card container" style="width: 100%">
|
<!-- <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-if='gstore.ues.length <= 0'>Aucun enseignant trouvé</section> -->
|
||||||
|
|
||||||
<section v-for='ue in gstore.ues' :data-id='ue.code'>
|
<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 class='main'>{{ ue.code }}</div>
|
||||||
<div>
|
<div>{{ ue.label }}</div>
|
||||||
<span>{{ue.volumeCours}}</span>
|
|
||||||
<span>heures de cours</span>
|
<div>{{ ue.volumeCours }}</div>
|
||||||
</div>
|
<div>{{ ue.volumeTD }}</div>
|
||||||
<div>
|
<div>{{ ue.volumeTP }}</div>
|
||||||
<span>{{ue.volumeTD}}</span>
|
<div class='tag list hidden' data-count='6'>
|
||||||
<span>heures de TD</span>
|
<div class='tag'>L1 Info</div>
|
||||||
</div>
|
<div class='tag'>M1 Info</div>
|
||||||
<div>
|
<div class='tag'>M2 Info (S2)</div>
|
||||||
<span>{{ue.volumeTP}}</span>
|
|
||||||
<span>heures de TP</span>
|
|
||||||
</div>
|
|
||||||
</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>
|
</section>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
|
|
||||||
/* [1] List style
|
/* [1] List style
|
||||||
---------------------------------*/
|
---------------------------------*/
|
||||||
#CONTAINER > div.list{
|
#CONTAINER.list{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
// flex properties
|
// flex properties
|
||||||
|
|
@ -34,43 +34,115 @@
|
||||||
& > *:first-child{ margin-top: 1em; }
|
& > *:first-child{ margin-top: 1em; }
|
||||||
& > *:last-child{ margin-bottom: 3em; }
|
& > *:last-child{ margin-bottom: 3em; }
|
||||||
|
|
||||||
/* (1) List element */
|
/* (1) List line */
|
||||||
& > section{
|
& > section{
|
||||||
|
|
||||||
display: block;
|
display: flex;
|
||||||
|
|
||||||
margin: .3em 1em;
|
margin: .3em 1em;
|
||||||
padding: .8em 1em;
|
padding: .5em 1em;
|
||||||
|
|
||||||
border-radius: 5px / 5px;
|
border-radius: 5px / 5px;
|
||||||
|
|
||||||
background-color: #fff;
|
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;
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
margin: 0 1.2em;
|
flex: 1 1 0;
|
||||||
margin-top: .8em;
|
|
||||||
|
|
||||||
font-size: inherit;
|
margin: .5em .5em;
|
||||||
color: darken($secondary-color, 5%);
|
|
||||||
|
|
||||||
|
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 */
|
/* (3.1) Visible tags */
|
||||||
& > hr{
|
& > div.tag{
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
margin: 1em 1.5em;
|
margin: 0 .2em;
|
||||||
|
padding: .2em .5em;
|
||||||
|
|
||||||
border: 0;
|
// border-radius: 3px / 3px;
|
||||||
border-bottom: 2px solid darken($bg-color, 5%);
|
// 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%);
|
||||||
|
// }
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue