taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Popovers for attributes explanation. Looks 🆒

stable
Xavier Julián 2014-11-06 18:15:24 +01:00 committed by Jesús Espino
parent 2202f315cf
commit 0adb56c1dc
2 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/partials/views/modules/team/team-table.jade
View File

@ -3,16 +3,28 @@ section.table-team.basic-table
div.username div.username
div.attribute.attribute-name div.attribute.attribute-name
span Bug Killer span Bug Killer
div.popover.attribute-explanation
span Thanks to you, this project still steady!
div.attribute div.attribute
span Poison Drinker span Poison Drinker
div.popover.attribute-explanation
span Hey, are you a iocaine-holic?
div.attribute div.attribute
span Brown Dealer span Brown Dispatcher
div.attribute div.popover.attribute-explanation
Total Power span Oh, stop dealing work!
div.attribute div.attribute
span Brown Dealer Total Brown Eater
div.popover.attribute-explanation
span Oh, poor devil, you are valuable!
div.attribute
span Chatter
div.popover.attribute-explanation
span This is not a chat... but I love your comments!
div.attribute div.attribute
Total Power Total Power
div.popover.attribute-explanation
span How far did you go into this Taiga?
div.row.hero div.row.hero
div.username div.username
figure.avatar figure.avatar

12
app/styles/modules/team/team-table.scss
View File

@ -7,6 +7,7 @@
} }
.attribute { .attribute {
@include table-flex-child(1, 0, 0); @include table-flex-child(1, 0, 0);
position: relative;
text-align: center; text-align: center;
.icon, .icon,
.points { .points {
@ -21,6 +22,11 @@
color: $fresh-taiga; color: $fresh-taiga;
opacity: 1; opacity: 1;
} }
&:hover {
.popover {
display: block;
}
}
} }
.team-header { .team-header {
@extend %title; @extend %title;
@ -40,7 +46,7 @@
} }
figcaption { figcaption {
margin-left: 1rem; margin-left: 1rem;
width: 75%; width: 65%;
span { span {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -60,4 +66,8 @@
color: $gray-light; color: $gray-light;
} }
} }
.popover {
@include popover(100%, '', 0, 30px, '', 15px, '', 50%, -5px);
@extend %small;
}
} }