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 class='main'>{{ ue.code }}</div>
<div>{{ ue.label }}</div> <div>{{ ue.label }}</div>
<div>{{ ue.volumeCours }}</div> <div class='tag list'>
<div>{{ ue.volumeTD }}</div> <a class='tag'
<div>{{ ue.volumeTP }}</div> :data-none='ue.volumeCours>0?0:1'
<div class='tag list hidden' data-count='6'> :data-good='ue.volumeCours >= Math.max(ue.volumeTD+ue.volumeTP)?1:0'>{{ ue.volumeCours }}h</a>
<div class='tag'>L1 Info</div> <a class='tag'
<div class='tag'>M1 Info</div> :data-none='ue.volumeTD>0?0:1'
<div class='tag'>M2 Info (S2)</div> :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> </div>
</section> </section>

View File

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

View File

@ -206,6 +206,8 @@ a{
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
cursor: pointer;
&:after{ &:after{
content: ''; content: '';
display: block; display: block;
@ -213,7 +215,7 @@ a{
width: 0%; width: 0%;
height: .1em; height: .1em;
background-color: #ddd; background-color: currentColor;
transition: width .1s ease-in-out; transition: width .1s ease-in-out;