new design with link solution ??
This commit is contained in:
parent
fe4db55e06
commit
ea2f2a84ae
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
/* (3.2) Hidden view */
|
&[data-good='1']{
|
||||||
&.hidden{
|
color: #7ace4c;
|
||||||
|
background-color: #f1faed;
|
||||||
|
}
|
||||||
|
|
||||||
height: 1.4em;
|
&[data-none='1']{
|
||||||
flex: 0 0 1.4em;
|
color: #f33155;
|
||||||
|
background-color: #feeaee;
|
||||||
border-radius: 50% / 50%;
|
|
||||||
|
|
||||||
& > div.tag{
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue