diff --git a/app/styles/dependencies/elements.scss b/app/styles/dependencies/elements.scss index 46a59c49..8b49415b 100644 --- a/app/styles/dependencies/elements.scss +++ b/app/styles/dependencies/elements.scss @@ -30,3 +30,7 @@ ul, ol { } ul { list-style: none outside; } ol { list-style: decimal; } + +.icon { + vertical-align: middle; +} diff --git a/app/styles/layout/backlog.scss b/app/styles/layout/backlog.scss index 20bb4b92..36939ffb 100644 --- a/app/styles/layout/backlog.scss +++ b/app/styles/layout/backlog.scss @@ -7,10 +7,11 @@ padding: 1em; margin-bottom: 2rem; @include clearfix; -} - -.trans-button { - margin-right: 1rem; + .trans-button { + margin-right: 1rem; + padding: 4px 0; + display: inline-block; + } } .new-us { diff --git a/app/styles/main.scss b/app/styles/main.scss index 256f8af5..a9e2f39b 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -29,6 +29,7 @@ $prefix-for-spec: true; @import 'modules/nav'; @import 'modules/sidebar'; @import 'modules/burndown'; +@import 'modules/backlog-table'; // Responsive @import 'responsive/mobile'; diff --git a/app/styles/modules/backlog-table.scss b/app/styles/modules/backlog-table.scss index e69de29b..bce72c4f 100644 --- a/app/styles/modules/backlog-table.scss +++ b/app/styles/modules/backlog-table.scss @@ -0,0 +1,55 @@ +.backlog-table{ + display:flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + align-content: stretch; + align-items: center; + width: 100%; + .row { + display:flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-content: stretch; + align-items: stretch; + width: 100%; + text-align: left; + padding: .5em 0; + + @for $i from 1 through 8 { + .width-#{$i} { + flex-grow: $i; + flex-shrink: 0; + flex-basis: 50px; + } + } + } + .user-stories { + flex-basis: 500px; + input { + vertical-align: top; + } + span { + max-width: 70%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: inline-block; + } + } + .title { + font-family: 'DroidSans-Bold'; + @extend .medium; + } + .sub-title { + font-family: 'DroidSans'; + @extend .small; + background: $whitish; + border-bottom: 2px solid $grayer; + } + .table-main { + @extend .small; + border-bottom: 1px solid $grayLight; + } +} diff --git a/app/views/modules/backlog-table.jade b/app/views/modules/backlog-table.jade index b0989098..620cd264 100644 --- a/app/views/modules/backlog-table.jade +++ b/app/views/modules/backlog-table.jade @@ -1,23 +1,33 @@ -section.table.backlog - header - div.row - div.user-stories.width-6 User Stories - div.status.width-2 Status - div.points.width-2 Points - div.row.sub-header - div.width-8 - div.status.width-1 Front - div.points.width-1 Total - body - div.row - div.user-stories.width-6 User Stories - input(type="checkbox", name="", id="") - span Crear el perfil de usuario Senior en el admin - a(href="", title="Edit") - span.ico(data-icon="edit") Edit - a(href="", title="Delete") - span.ico(data-icon="delete") Delete - div.status.width-2 - span Ready for test - div.status.width-1 3points - div.points.width-1 8points +section.backlog-table + div.row.title + div.user-stories.width-4 User Stories + div.status.width-2 Status + div.points.width-1 Points + div.points.width-1 + div.row.sub-title + div.user-stories.width-4 + div.status.width-2 + div.points.width-1 Front + div.points.width-1 Back + div.row.table-main + div.user-stories.width-4 + input(type="checkbox", name="", id="") + span Crear el perfil de usuario Senior en el admin + a(href="", title="Edit") + span.icon.icon-edit + a(href="", title="Delete") + span.icon.icon-delete + div.status.width-2 Status + div.points.width-1 Front + div.points.width-1 Back + div.row.table-main + div.user-stories.width-4 + input(type="checkbox", name="", id="") + span Crear el perfil de usuario Senior en el admin + a(href="", title="Edit") + span.icon.icon-edit + a(href="", title="Delete") + span.icon.icon-delete + div.status.width-2 Status + div.points.width-1 Front + div.points.width-1 Back