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>{{ 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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Reference in New Issue