mti
/
ptut-vhost
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[scss.global] added tooltip arrow + transformed before-icons to raw icons [ue.view] replaced before-icons with raw icons

This commit is contained in:
xdrm-brackets 2018-03-30 17:03:35 +02:00
parent e8ed5ab97d
commit 07ab742071
2 changed files with 53 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
webpack/component/ue/view.vue
View File

@ -75,18 +75,18 @@
<div class='table little'> <div class='table little'>
<div> <div>
<span class='active reflow' :data-error='ue.nbrCours!=ue.nbrProfCours || ue.modCours != 0?1:0'>{{ ue.nbrCours }} CM</span> <span class='active reflow' :data-error='ue.nbrCours!=ue.nbrProfCours || ue.modCours != 0?1:0'>{{ ue.nbrCours }} CM</span>
<span v-show='ue.nbrCours!=ue.nbrProfCours' class='notlast user reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span> <span v-show='ue.nbrCours!=ue.nbrProfCours' class='notlast user-icon reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
<span v-show='ue.modCours != 0' class='notlast time reflow nospace' data-tooltip='volume horaire incohérent'></span> <span v-show='ue.modCours != 0' class='notlast time-icon reflow nospace' data-tooltip='volume horaire incohérent'></span>
</div> </div>
<div> <div>
<span class='active reflow' :data-error='ue.nbrTD!=ue.nbrProfTD || ue.modTD != 0?1:0'>{{ ue.nbrTD }} TD</span> <span class='active reflow' :data-error='ue.nbrTD!=ue.nbrProfTD || ue.modTD != 0?1:0'>{{ ue.nbrTD }} TD</span>
<span v-show='ue.nbrTD!=ue.nbrProfTD' class='notlast user reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span> <span v-show='ue.nbrTD!=ue.nbrProfTD' class='notlast user-icon reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
<span v-show='ue.modTD != 0' class='notlast time reflow nospace' data-tooltip='volume horaire incohérent'></span> <span v-show='ue.modTD != 0' class='notlast time-icon reflow nospace' data-tooltip='volume horaire incohérent'></span>
</div> </div>
<div> <div>
<span class='active reflow' :data-error='ue.nbrTP!=ue.nbrProfTP || ue.modTP != 0?1:0'>{{ ue.nbrTP }} TP</span> <span class='active reflow' :data-error='ue.nbrTP!=ue.nbrProfTP || ue.modTP != 0?1:0'>{{ ue.nbrTP }} TP</span>
<span v-show='ue.nbrTP!=ue.nbrProfTP' class='notlast user reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span> <span v-show='ue.nbrTP!=ue.nbrProfTP' class='notlast user-icon reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
<span v-show='ue.modTP != 0' class='notlast time reflow nospace' data-tooltip='volume horaire incohérent'></span> <span v-show='ue.modTP != 0' class='notlast time-icon reflow nospace' data-tooltip='volume horaire incohérent'></span>
</div> </div>
</div> </div>

52
webpack/scss/global.scss
View File

@ -59,25 +59,43 @@ a{
} }
/* (8) Striked text */
[data-strike='1'], [data-strike='1'],
.strike{ .strike{
text-decoration: line-through; text-decoration: line-through;
opacity: .5; opacity: .5;
} }
/* (9) Icons (1em wide) */
.user-icon, .time-icon{
display: block;
position: relative;
width: 1em;
height: 1em;
background: url('/asset/svg/teacher.svg@#{$rd-form-neutral-color}') center center no-repeat;
background-size: contain;
&.time-icon{
background-image: url('/asset/svg/time.svg@#{$rd-form-neutral-color}');
}
}
/* (10) Toggling tooltip on hover */
[data-tooltip]{ [data-tooltip]{
position: relative; position: relative;
cursor: pointer; cursor: pointer;
&:after{ &:before{
content: attr(data-tooltip); content: attr(data-tooltip);
display: block; display: block;
position: absolute; position: absolute;
top: calc( 100% + .3em ); top: calc( 100% + 1em );
left: 50%; left: 50%;
margin-left: -.1em; margin-left: -.1em;
@ -90,6 +108,7 @@ a{
font-size: .7em; font-size: .7em;
color: #ddd; color: #ddd;
letter-spacing: 0;
background-color: #444; background-color: #444;
@ -97,13 +116,38 @@ a{
transition: transform .1s ease-in-out; transition: transform .1s ease-in-out;
z-index: 1000; z-index: 999;
} }
&:hover:not([data-tooltip='']):after{ &:hover:not([data-tooltip='']):before{
transform: translateX(-50%) translateY(0) scale(1); transform: translateX(-50%) translateY(0) scale(1);
} }
&:after{
content: '';
display: block;
position: absolute;
top: calc( 100% + .6em );
left: 50%;
width: .4em;
height: .4em;
background-color: #444;
transform: translateX(-50%) rotate(45deg) scale(0);
transition: transform .1s ease-in-out;
z-index: 1000;
}
&:hover:not([data-tooltip='']):after{
transform: translateX(-50%) rotate(45deg) scale(1);
}
} }