Sidebar options for User Story detail
Xavier Julián
parent
3f488cbf0d
commit
5f2386918a
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
.button-green,
|
||||
.button-gray,
|
||||
.button-red {
|
||||
@extend %button;
|
||||
&:hover {
|
||||
@include transition (background .3s linear);
|
||||
}
|
||||
span {
|
||||
color: $white;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
&:hover {
|
||||
@include transition (background .3s linear);
|
||||
.icon {
|
||||
margin-right: .3rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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:'') {
|
||||
|
|
|
|||
|
|
@ -104,30 +104,143 @@
|
|||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.activity-single {
|
||||
@include table-flex;
|
||||
border-bottom: 2px solid $gray-light;
|
||||
padding: 1rem 0;
|
||||
position: relative;
|
||||
.username {
|
||||
.us-detail-status {
|
||||
@extend %large;
|
||||
color: $green-taiga;
|
||||
margin-bottom: 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.date {
|
||||
|
||||
.us-detail-progress-bar {
|
||||
background: $grayer;
|
||||
height: 26px;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
.current-progress {
|
||||
background: $fresh-taiga;
|
||||
height: 26px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 60%;
|
||||
}
|
||||
.tasks-completed {
|
||||
@extend %small;
|
||||
color: $white;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-user {
|
||||
@include table-flex-child(1, 50px, 0);
|
||||
img {
|
||||
max-width: 70px;
|
||||
.us-settings {
|
||||
margin-top: 2rem;
|
||||
.button {
|
||||
color: $white;
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.button-gray {
|
||||
background: $gray-light;
|
||||
&:hover,
|
||||
&.active {
|
||||
background: $grayer;
|
||||
}
|
||||
}
|
||||
.button-red {
|
||||
&:hover,
|
||||
&.active {
|
||||
background: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-content {
|
||||
@include table-flex-child(20, 150px, 0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue