From 5f2386918a4d563cf3dc6d1eb0233ffd8ef0ac64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Mon, 23 Jun 2014 13:00:47 +0200 Subject: [PATCH] Sidebar options for User Story detail --- app/partials/us-detail.jade | 36 +++++++ app/styles/components/buttons.scss | 19 ++-- app/styles/dependencies/mixins.scss | 14 +-- app/styles/layout/us-detail.scss | 149 ++++++++++++++++++++++++---- app/styles/main.scss | 3 +- app/styles/modules/activity.scss | 5 +- 6 files changed, 187 insertions(+), 39 deletions(-) diff --git a/app/partials/us-detail.jade b/app/partials/us-detail.jade index 812685a9..69d9ef73 100644 --- a/app/partials/us-detail.jade +++ b/app/partials/us-detail.jade @@ -48,3 +48,39 @@ block content //-include views/modules/comments include views/modules/activity sidebar.menu-secondary.sidebar + h1 + span Open + span.us-detail-status In progress + div.us-detail-progress-bar + div.current-progress + span.tasks-completed 6/7 tasks completed + ul.points-per-role + li.total + span.points 10 + span.role total + - for(var x=0; x<5; x++) + li.total + span.points 10 + span.role UX + section.us-detail-assigned-to + div.user-avatar + a.avatar(href="", title="Assigned to") + img(src="http://thecodeplayer.com/u/uifaces/18.jpg", alt="username") + div.assigned-to + span.assigned-title Assigned to + span.user-assigned Anler Hernández + section.watchers + div.watchers-header + span.title watchers + a.icon.icon-plus(href="", title="Add watcher") + div.watchers-content + - for(var y=0; y<5; y++) + div.watcher-single + div.watcher-avatar + a.avatar(href="", title="Assigned to") + img(src="http://thecodeplayer.com/u/uifaces/32.jpg", alt="username") + a.watcher-name(href="", title="Jesús Espino") Jesús Espino + section.us-settings + a.button.button-gray(href="", title="Client requirement") Client requirement + a.button.button-gray(href="", title="Team requirement") Team requirement + a.button.button-red(href="", title="Block") Block diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss index 00aa30d1..acc18fa6 100755 --- a/app/styles/components/buttons.scss +++ b/app/styles/components/buttons.scss @@ -11,28 +11,23 @@ } } -%button { +%button, +.button { @extend %large; + @include transition (background .3s linear); display: inline-block; font-family: 'ostrichSans'; padding: 8px 40px; - .icon { - margin-right: .3rem; + &:hover { + @include transition (background .3s linear); } -} - -.button-green, -.button-gray, -.button-red { - @extend %button; - @include transition (background .3s linear); span { color: $white; position: relative; top: 2px; } - &:hover { - @include transition (background .3s linear); + .icon { + margin-right: .3rem; } } diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss index eb10e249..97c623ee 100644 --- a/app/styles/dependencies/mixins.scss +++ b/app/styles/dependencies/mixins.scss @@ -10,13 +10,13 @@ } // Table Flex - http://devbryce.com/site/flexbox/ -@mixin table-flex { - align-content: stretch; - align-items: stretch; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-start; +@mixin table-flex($align-content: stretch, $align-items: stretch, $display: flex, $flex-direction: row, $flex-wrap: wrap, $justify-content: flex-start) { + align-content: $align-content; + align-items: $align-items; + display: $display; + flex-direction: $flex-direction; + flex-wrap: $flex-wrap; + justify-content: $justify-content; } @mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') { diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss index 9a86a3f8..3d49229f 100644 --- a/app/styles/layout/us-detail.scss +++ b/app/styles/layout/us-detail.scss @@ -104,30 +104,143 @@ padding: 1rem 2rem; } -.activity-single { - @include table-flex; - border-bottom: 2px solid $gray-light; - padding: 1rem 0; +.us-detail-status { + @extend %large; + color: $green-taiga; + vertical-align: middle; +} + +.us-detail-progress-bar { + background: $grayer; + height: 26px; + margin-bottom: 1rem; position: relative; - .username { - color: $green-taiga; - margin-bottom: 1rem; + .current-progress { + background: $fresh-taiga; + height: 26px; + left: 0; + position: absolute; + top: 0; + width: 60%; } - .date { + .tasks-completed { @extend %small; - color: $gray-light; - margin-left: 1rem; + color: $white; + left: 10px; + position: absolute; + top: 2px; } } -.activity-user { - @include table-flex-child(1, 50px, 0); - img { - max-width: 70px; +.points-per-role { + li { + border-right: 1px solid $grayer; + display: inline-block; + margin: .5rem .1rem; + opacity: .3; + text-align: center; + width: 18%; + &:first-child { + opacity: 1; + } + &:nth-child(5n) { + border: 0; + } + } + .points { + @extend %xlarge; + display: block; + font-family: 'ostrichSans'; + text-align: center; + } + .role { + display: inline-block; + max-width: 90%; + overflow: hidden; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + } +} + +.us-detail-assigned-to { + @include table-flex(); + margin-top: 2rem; + .user-avatar { + @include table-flex-child(1, 0); + } + .assigned-to { + @include table-flex-child(3, 0); + margin-left: 1rem; + margin-top: 15px; + .assigned-title { + color: $gray-light; + display: block; + } + .user-assigned { + @extend %large; + color: $green-taiga; + } + } +} + +.watchers { + margin-top: 2rem; + .watchers-header { + border-bottom: 2px solid $gray-light; + padding: .5rem; + position: relative; + .title { + @extend %large; + font-family: 'ostrichSans'; + } + .icon { + @extend %large; + position: absolute; + right: 1rem; + top: 4px; + } + } + .watcher-single { + @include table-flex(center, center, flex, row, wrap, center); + border-bottom: 1px solid $gray-light; + padding: .5rem; + vertical-align: middle; + &:last-child { + border: 0; + } + .watcher-avatar { + @include table-flex-child(1, 0); + } + .watcher-name { + @include table-flex-child(8, 0); + @extend %large; + color: $grayer; + margin-left: 1rem; + } + } +} + +.us-settings { + margin-top: 2rem; + .button { + color: $white; + display: block; + margin-bottom: .5rem; + text-align: center; width: 100%; } -} - -.activity-content { - @include table-flex-child(20, 150px, 0); + .button-gray { + background: $gray-light; + &:hover, + &.active { + background: $grayer; + } + } + .button-red { + &:hover, + &.active { + background: $red; + } + } } diff --git a/app/styles/main.scss b/app/styles/main.scss index 57568424..918c0a85 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -42,9 +42,10 @@ $prefix-for-spec: true; @import 'modules/admin-functionalities'; @import 'modules/category-config'; @import 'modules/project-details'; -@import 'modules/comments'; @import 'modules/attachments'; +@import 'modules/comments'; @import 'modules/comment-activity'; +@import 'modules/activity'; // Responsive @import 'responsive/mobile'; diff --git a/app/styles/modules/activity.scss b/app/styles/modules/activity.scss index 8b7e986f..62674b1f 100644 --- a/app/styles/modules/activity.scss +++ b/app/styles/modules/activity.scss @@ -44,6 +44,7 @@ @include table-flex; border-bottom: 2px solid $gray-light; padding: 2rem 0; + position: relative; &:first-child { margin-top: 0; } @@ -60,7 +61,8 @@ } .activity-username { border-bottom: 1px dotted $gray-light; - padding-bottom: 1rem; + color: $green-taiga; + margin-bottom: 1rem; } .activity-content { @include table-flex-child(20, 150px, 0); @@ -72,6 +74,7 @@ } } .date { + @extend %small; color: $gray-light; margin-left: 1rem; }