diff --git a/app/partials/issues-detail.jade b/app/partials/issues-detail.jade index deeb3ee4..a757c95f 100644 --- a/app/partials/issues-detail.jade +++ b/app/partials/issues-detail.jade @@ -72,17 +72,7 @@ block content 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 + include views/modules/watchers // NOTE: only for user story? // section.us-detail-settings diff --git a/app/partials/views/modules/lightbox_watchers.jade b/app/partials/views/modules/lightbox_watchers.jade new file mode 100644 index 00000000..61623884 --- /dev/null +++ b/app/partials/views/modules/lightbox_watchers.jade @@ -0,0 +1,14 @@ +a.close(href="", title="close") + span.icon.icon-delete +form + h2.title Add watchers + fieldset + input(type="text", data-maxlength="500", placeholder="Search for users") + + div.watchers + - 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 \ No newline at end of file diff --git a/app/partials/views/modules/watchers.jade b/app/partials/views/modules/watchers.jade new file mode 100644 index 00000000..b369882c --- /dev/null +++ b/app/partials/views/modules/watchers.jade @@ -0,0 +1,11 @@ +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 \ No newline at end of file diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss index 9c826200..0ab8a724 100644 --- a/app/styles/layout/us-detail.scss +++ b/app/styles/layout/us-detail.scss @@ -206,21 +206,23 @@ } .watcher-single { @include table-flex(center, center, flex, row, wrap, center); + @include transition(background .3s linear); + background: transparent; 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 %medium; - color: $grayer; - margin-left: 1rem; - } + } + .watcher-name { + @include table-flex-child(8, 0); + @extend %medium; + color: $grayer; + margin-left: 1rem; + } + .watcher-avatar { + @include table-flex-child(1, 0); } } diff --git a/app/styles/modules/lightbox.scss b/app/styles/modules/lightbox.scss index b2cd1b62..87929958 100644 --- a/app/styles/modules/lightbox.scss +++ b/app/styles/modules/lightbox.scss @@ -278,3 +278,23 @@ min-height: 8rem; } } + +.lightbox_watchers { + form { + @include table-flex-child(0, 600px, 0, 600px); + } + .watchers { + margin-top: 1rem; + .watcher-name { + @include table-flex-child(12, 0); + } + } + .watcher-single { + &:hover, + &.active { + @include transition(background .3s linear); + background: lighten($green-taiga, 55%); + cursor: pointer; + } + } +}