From 227b40938c1f963a39b6951ccd687683318eea99 Mon Sep 17 00:00:00 2001 From: Juanfran Date: Mon, 23 Jun 2014 10:16:25 +0200 Subject: [PATCH] list issues --- app/partials/issues.jade | 8 ++- app/partials/views/modules/filter-tags.jade | 4 +- app/partials/views/modules/issues-header.jade | 18 +++++ app/partials/views/modules/issues-table.jade | 21 ++++++ app/styles/main.scss | 2 + app/styles/modules/filter-tags.scss | 2 +- app/styles/modules/issues-header.scss | 29 ++++++++ app/styles/modules/issues-table.scss | 70 +++++++++++++++++++ 8 files changed, 150 insertions(+), 4 deletions(-) create mode 100644 app/partials/views/modules/issues-header.jade create mode 100644 app/partials/views/modules/issues-table.jade create mode 100644 app/styles/modules/issues-header.scss create mode 100644 app/styles/modules/issues-table.scss diff --git a/app/partials/issues.jade b/app/partials/issues.jade index da5c2228..bcc46790 100644 --- a/app/partials/issues.jade +++ b/app/partials/issues.jade @@ -6,9 +6,15 @@ block head block content div.wrapper sidebar.menu-secondary.sidebar + header + h1 Filters + include views/modules/search-in include views/modules/filter-tags - section.main.admin-roles + section.main.issues-page header include views/components/mainTitle + + include views/modules/issues-header + include views/modules/issues-table \ No newline at end of file diff --git a/app/partials/views/modules/filter-tags.jade b/app/partials/views/modules/filter-tags.jade index 318f8ed6..8f4ac66f 100644 --- a/app/partials/views/modules/filter-tags.jade +++ b/app/partials/views/modules/filter-tags.jade @@ -1,5 +1,5 @@ -div.filter-tags - div.filter-tag.selected(style="background-color: red") +section.filter-tags + div.filter-tag.active(style="background-color: red") div.tag-name Tagname div.tag-count 4 diff --git a/app/partials/views/modules/issues-header.jade b/app/partials/views/modules/issues-header.jade new file mode 100644 index 00000000..1c41cc8f --- /dev/null +++ b/app/partials/views/modules/issues-header.jade @@ -0,0 +1,18 @@ +section.issues-header + ul + li + a(href="#").active + span.icon.icon-issues + | SHOW LIST + + li + a(href="#") + span.icon.icon-graph + | SHOW GRAPH + + div.new-issue + a.button-green(href="") + span.text + | + NEW ISSUE + a.button-bulk(href="") + span.icon.icon-bulk \ No newline at end of file diff --git a/app/partials/views/modules/issues-table.jade b/app/partials/views/modules/issues-table.jade new file mode 100644 index 00000000..3adf6568 --- /dev/null +++ b/app/partials/views/modules/issues-table.jade @@ -0,0 +1,21 @@ +section.issues-table + div.row.title + div.level-field.width-1 Severity + div.level-field.width-1 Priority + div.width-7.subject Subject + div.width-2 Status + div.width-2 Assigned to + - for (var x = 0; x < 50; x++) + div.row.table-main + div.level-field.width-1 + div.level + div.level-field.width-1 + div.level + div.width-7.subject + | #2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet leo accumsan, commodo neque eu, iaculis nisl. Phasellus fermentum ipsum eget sapien suscipit pretium. + div.width-2 + In progress + div.width-2 + figure.avatar + img(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username") + figcaption Pilar \ No newline at end of file diff --git a/app/styles/main.scss b/app/styles/main.scss index bec50bf0..a5d264ff 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -36,6 +36,8 @@ $prefix-for-spec: true; @import 'modules/search-filter'; @import 'modules/search-result-table'; @import 'modules/search-in'; +@import 'modules/issues-table'; +@import 'modules/issues-header'; @import 'modules/filter-tags'; @import 'modules/admin-menu'; @import 'modules/admin-submenu'; diff --git a/app/styles/modules/filter-tags.scss b/app/styles/modules/filter-tags.scss index 0f142693..d640d9a7 100644 --- a/app/styles/modules/filter-tags.scss +++ b/app/styles/modules/filter-tags.scss @@ -7,7 +7,7 @@ opacity: .5; padding: .5rem 1rem; position: relative; - &.selected { + &.active { opacity: 1; } } diff --git a/app/styles/modules/issues-header.scss b/app/styles/modules/issues-header.scss new file mode 100644 index 00000000..aa93a6ab --- /dev/null +++ b/app/styles/modules/issues-header.scss @@ -0,0 +1,29 @@ +.issues-header { + align-items: center; + background-color: $whitish; + display: flex; + justify-content: space-between; + padding: .5rem 1rem; + ul { + display: flex; + margin-bottom: 0; + } + li { + margin-right: 2rem; + a { + @extend %large; + font-family: 'ostrichSans'; + opacity: .4; + &.active, + &:hover { + @include transition (opacity .3s linear); + color: $blackish; + opacity: 1; + + } + } + .icon { + padding-right: .5rem; + } + } +} diff --git a/app/styles/modules/issues-table.scss b/app/styles/modules/issues-table.scss new file mode 100644 index 00000000..7bef17dd --- /dev/null +++ b/app/styles/modules/issues-table.scss @@ -0,0 +1,70 @@ +.issues-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: center; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + padding: 1rem 0; + 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); + } + .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; + } + .avatar { + align-items: center; + display: flex; + img { + flex-basis: 35px; + } + figcaption { + margin-left: 1rem; + } + } + .level { + background-color: $gray-light; + border-radius: 9px; + height: 18px; + margin: 0 auto; + width: 18px; + } + .level-field { + text-align: center; + } + .subject { + padding-right: 1rem; + } +}