Watchers lightbox

app/partials/issues-detail.jade

@@ -72,17 +72,7 @@ block content
                     span.assigned-title Assigned to
                     span.user-assigned Anler Hernández
 
-            section.watchers
+            include views/modules/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
 
             // NOTE: only for user story?
             // section.us-detail-settings

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

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

app/styles/layout/us-detail.scss

@@ -206,14 +206,14 @@
     }
     .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);
@@ -221,6 +221,8 @@
         color: $grayer;
         margin-left: 1rem;
     }
+    .watcher-avatar {
+        @include table-flex-child(1, 0);
     }
 }
 

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;
+        }
+    }
+}