diff --git a/app/search.jade b/app/search.jade index 8e5580c8..43de05f0 100644 --- a/app/search.jade +++ b/app/search.jade @@ -10,3 +10,4 @@ block content section.main.search-result include views/components/mainTitle include views/modules/search-filter + include views/modules/search-result-table \ No newline at end of file diff --git a/app/styles/main.scss b/app/styles/main.scss index c2dc4bf9..a4d2d3bf 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -40,6 +40,7 @@ $prefix-for-spec: true; @import 'modules/lightbox'; @import 'modules/taskboard-table'; @import 'modules/search-filter'; +@import 'modules/search-result-table'; // Responsive @import 'responsive/mobile'; diff --git a/app/styles/modules/backlog-table.scss b/app/styles/modules/backlog-table.scss index 6a5d0096..ac605440 100644 --- a/app/styles/modules/backlog-table.scss +++ b/app/styles/modules/backlog-table.scss @@ -13,7 +13,7 @@ flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; - padding: .5em 0; + padding: 1rem 0 1rem 1rem; text-align: left; width: 100%; @for $i from 1 through 8 { diff --git a/app/styles/modules/search-filter.scss b/app/styles/modules/search-filter.scss index d0bf2653..f7c4db00 100644 --- a/app/styles/modules/search-filter.scss +++ b/app/styles/modules/search-filter.scss @@ -1,6 +1,8 @@ .search-filter { ul { + border-bottom: 3px solid $gray-light; display: flex; + padding-bottom: .5rem; } li { margin-right: 1rem; @@ -9,6 +11,7 @@ @extend %large; font-family: 'ostrichSans'; opacity: .2; + &.active, &:hover { @include transition (opacity .3s linear); color: $blackish; diff --git a/app/styles/modules/search-result-table.scss b/app/styles/modules/search-result-table.scss new file mode 100644 index 00000000..a0140714 --- /dev/null +++ b/app/styles/modules/search-result-table.scss @@ -0,0 +1,72 @@ +.search-result-table { + align-content: stretch; + align-items: center; + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + width: 100%; + .row { + align-content: stretch; + align-items: stretch; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + padding: 1rem 0 1rem 1rem; + text-align: left; + width: 100%; + @for $i from 1 through 8 { + .width-#{$i} { + flex-basis: 50px; + flex-grow: $i; + flex-shrink: 0; + } + } + &:hover { + background: lighten($green-taiga, 60%); + @include transition (background .2s ease-in); + } + } + .row-selected { + background: lighten($green-taiga, 60%); + @include transition (background .2s ease-in); + } + .user-story-name { + flex-basis: 500px; + input { + vertical-align: top; + } + span { + display: inline-block; + max-width: 70%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .icon { + @extend %medium; + color: $gray-light; + &:hover { + color: $grayer; + @include transition (color .3s linear); + } + } + } + .title { + @extend %medium; + border-bottom: 1px solid $gray-light; + font-family: 'DroidSans-Bold'; + &:hover { + background: transparent; + } + } + .table-main { + @extend %small; + border-bottom: 1px solid $gray-light; + } + .status, + .points { + position: relative; + } +} diff --git a/app/views/modules/search-result-table.jade b/app/views/modules/search-result-table.jade new file mode 100644 index 00000000..5ab6d748 --- /dev/null +++ b/app/views/modules/search-result-table.jade @@ -0,0 +1,14 @@ +section.search-result-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 Sprints + - for (var x = 0; x < 50; x++) + div.row.table-main + div.user-stories.width-4 + div.user-story-name + a(href="") Crear el perfil de usuario Senior en el admin + div.status.width-2 Status + div.points.width-1 12 + div.points.width-1 54 \ No newline at end of file diff --git a/csslintrc.json b/csslintrc.json index 39936c38..0616cb74 100644 --- a/csslintrc.json +++ b/csslintrc.json @@ -18,5 +18,6 @@ "unqualified-attributes": false, "regex-selectors": false, "floats": false, - "fallback-colors": false + "fallback-colors": false, + "adjoining-classes": false }