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

Multiple popovers in backlog table

stable
Xavier Julián 2014-06-05 11:13:26 +02:00
parent 367b71db96
commit a0957af050
3 changed files with 78 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/styles/components/popover.scss
View File

@ -12,14 +12,20 @@
bottom: #{$bottom}; bottom: #{$bottom};
right: #{$right}; right: #{$right};
width: $width; width: $width;
z-index: 99;
display: none; display: none;
a { a {
padding: 10px 2px; padding: 10px 2px;
display: block; display: block;
@extend .small; @extend .small;
border-bottom: 1px solid $grayer; border-bottom: 1px solid $grayer;
color: $white;
&:last-child { &:last-child {
border: none; border: none;
} }
&:hover {
color: $freshTaiga;
@include transition (color .3s linear);
}
} }
} }

24
app/styles/modules/backlog-table.scss
View File

@ -70,6 +70,9 @@
@extend .small; @extend .small;
border-bottom: 1px solid $grayLight; border-bottom: 1px solid $grayLight;
} }
.status, .points {
position: relative;
}
.blocked { .blocked {
background: $redLight; background: $redLight;
color: $white; color: $white;
@ -88,4 +91,25 @@
.doom-line { .doom-line {
border-bottom: 3px solid $red; border-bottom: 3px solid $red;
} }
.pop-status {
@include popover(150px, "", 30px, 10px, "");
}
.pop-points {
@include popover(150px, "", 30px, 10px, "");
}
.pop-points-open {
@include popover(200px, "", 30px, 10px, "");
li {
width: 23%;
display: inline-block;
}
a{
display: block;
text-align: center;
&:hover {
background: $freshTaiga;
color: $white;
}
}
}
} }

54
app/views/modules/backlog-table.jade
View File

@ -8,7 +8,7 @@ section.backlog-table
div.user-stories.width-4 div.user-stories.width-4
div.status.width-2 div.status.width-2
div.points.width-1 Front div.points.width-1 Front
div.points.width-1 Back div.points.width-1 Total
div.row.table-main.blocked.doom-line div.row.table-main.blocked.doom-line
div.user-stories.width-4 div.user-stories.width-4
div.user-story-name div.user-story-name
@ -19,9 +19,51 @@ section.backlog-table
div.user-story-tags div.user-story-tags
- for(var y = 0; y < 3; y++) - for(var y = 0; y < 3; y++)
include ../components/tag include ../components/tag
div.status.width-2 Status div.status.width-2
div.points.width-1 Front a(href="", title="Status Name") Status Name
div.points.width-1 Back ul.popover.pop-status
li
a(href="", title="Status 1") Status 1
li
a(href="", title="Status 2") Status 2
li
a(href="", title="Status 3") Status 3
div.points.width-1
a(href="", title="Front") 24
ul.popover.pop-points-open
li
a(href="", title="0") 0
li
a(href="", title="1/2") 1/2
li
a(href="", title="1") 1
li
a(href="", title="2") 2
li
a(href="", title="3") 3
li
a(href="", title="4") 4
li
a(href="", title="8") 8
li
a(href="", title="13") 13
li
a(href="", title="20") 20
li
a(href="", title="40") 40
li
a(href="", title="100") 100
li
a(href="", title="?") ?
div.points.width-1
a(href="", title="Total Points") 43
ul.popover.pop-status
li
a(href="", title="Status 1") Status 1
li
a(href="", title="Status 2") Status 2
li
a(href="", title="Status 3") Status 3
- for (var x = 0; x < 50; x++) - for (var x = 0; x < 50; x++)
div.row.table-main div.row.table-main
div.user-stories.width-4 div.user-stories.width-4
@ -34,5 +76,5 @@ section.backlog-table
- for(var y = 0; y < 3; y++) - for(var y = 0; y < 3; y++)
include ../components/tag include ../components/tag
div.status.width-2 Status div.status.width-2 Status
div.points.width-1 Front div.points.width-1 12
div.points.width-1 Back div.points.width-1 54