diff --git a/app/partials/views/modules/team/team-table.jade b/app/partials/views/modules/team/team-table.jade new file mode 100644 index 00000000..9a4025eb --- /dev/null +++ b/app/partials/views/modules/team/team-table.jade @@ -0,0 +1,60 @@ +section.table-team.basic-table + header.row.team-header + div.username + div.attribute.attribute-name + span Bug Killer + div.attribute + span Poison Drinker + div.attribute + span Brown Dealer + div.attribute + Total Power + div.attribute + span Brown Dealer + div.attribute + Total Power + div.row.hero + div.username + figure.avatar + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/bermonpainter/128.jpg", alt="username") + figcaption + span.name Xavier Julián Olmos + span.position The Fucking Master + div.attribute + span.icon.icon-github(style="opacity: .3;") + div.attribute + span.icon.icon-github(style="opacity: .1;") + div.attribute + span.icon.icon-github(style="opacity: .3;") + div.attribute + span.icon.icon-github(style="opacity: .1;") + div.attribute + span.icon.icon-github.top + div.attribute + span.points 666 + +h2 + span Team > + span All + +section.table-team.basic-table + - for (var x = 0; x < 10; x++) + div.row + div.username + figure.avatar + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/jackiesaik/128.jpg", alt="username") + figcaption + span.name Oompa Loompa + span.position Role + div.attribute + span.icon.icon-github(style="opacity: .1;") + div.attribute + span.icon.icon-github(style="opacity: .2;") + div.attribute + span.icon.icon-github(style="opacity: .3;") + div.attribute + span.icon.icon-github(style="opacity: .3;") + div.attribute + span.icon.icon-github(style="opacity: .1;") + div.attribute + span.points 666 diff --git a/app/partials/views/team/team.jade b/app/partials/views/team/team.jade index 1da24898..54602c3f 100644 --- a/app/partials/views/team/team.jade +++ b/app/partials/views/team/team.jade @@ -7,4 +7,6 @@ block content div.wrapper(ng-controller="TeamController as ctrl", ng-init="section='team'") sidebar.menu-secondary include ../modules/team/team-filters - section.main.backlog + section.main.team + include ../components/mainTitle + include ../modules/team/team-table diff --git a/app/styles/layout/team.scss b/app/styles/layout/team.scss new file mode 100644 index 00000000..fba2c6e2 --- /dev/null +++ b/app/styles/layout/team.scss @@ -0,0 +1,10 @@ +.team { + h2 { + margin: 1rem 0; + span { + &:last-child { + color: $green-taiga; + } + } + } +} diff --git a/app/styles/modules/team/team-table.scss b/app/styles/modules/team/team-table.scss new file mode 100644 index 00000000..8e7532d5 --- /dev/null +++ b/app/styles/modules/team/team-table.scss @@ -0,0 +1,63 @@ +.table-team { + .row { + padding: .5rem; + } + .username { + @include table-flex-child(3, 0, 0); + } + .attribute { + @include table-flex-child(1, 0, 0); + text-align: center; + .icon, + .points { + @extend %xlarge; + color: $grayer; + } + .points { + @extend %title; + @extend %bold; + } + .top { + color: $fresh-taiga; + opacity: 1; + } + } + .team-header { + @extend %title; + @extend %bold; + border-bottom: 0; + } + .hero { + background: $very-light-gray; + border-bottom: 0; + margin: 1rem 0; + } + .avatar { + @include table-flex(stretch, center, flex, row, wrap, flex-start); + img { + @include table-flex-child(1, 66px, 0); + max-width: 66px; + } + figcaption { + margin-left: 1rem; + width: 75%; + span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + } + } + .name, + .position { + display: block; + width: 100%; + } + .name { + @extend %bold; + } + .position { + color: $gray-light; + } + } +} diff --git a/main-sass.js b/main-sass.js index b6944227..6e14f951 100644 --- a/main-sass.js +++ b/main-sass.js @@ -28,6 +28,7 @@ exports.files = function () { 'layout/issues', 'layout/wiki', 'layout/wiki-edit', + 'layout/team', //################################################# // components @@ -131,6 +132,7 @@ exports.files = function () { //Team 'modules/team/team-filters', + 'modules/team/team-table', //################################################# // Help