new design with link solution ??

This commit is contained in:
xdrm-brackets 2018-03-07 16:45:59 +01:00
parent fe4db55e06
commit ea2f2a84ae
3 changed files with 37 additions and 35 deletions

View File

@ -11,13 +11,16 @@
<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 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>

View File

@ -66,50 +66,47 @@
/* (3) Tag List */
&.tag.list[data-count]{
&.tag.list{
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
border-radius: 3px / 3px;
padding: .5em;
background-color: #ccc;
&:before{
content: attr(data-count);
}
flex-shrink: 1;
/* (3.1) Visible tags */
& > div.tag{
display: block;
& > .tag{
display: inline-block;
position: relative;
flex: 0 1 3em;
margin: 0 .2em;
padding: .2em .5em;
// border-radius: 3px / 3px;
// background-color: #f4f8f9;
border-radius: 3px / 3px;
background-color: #f4f8f9;
color: #999;
font-size: .8em;
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;
}
/* (3.2) Hidden view */
&.hidden{
height: 1.4em;
flex: 0 0 1.4em;
border-radius: 50% / 50%;
& > div.tag{
display: none;
&[data-none='1']{
color: #f33155;
background-color: #feeaee;
}
}

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;