list issues

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

app/partials/views/modules/filter-tags.jade

@@ -1,5 +1,5 @@
-div.filter-tags
+section.filter-tags
-    div.filter-tag.selected(style="background-color: red")
+    div.filter-tag.active(style="background-color: red")
         div.tag-name Tagname
         div.tag-count 4
 

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

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

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';

app/styles/modules/filter-tags.scss

@@ -7,7 +7,7 @@
         opacity: .5;
         padding: .5rem 1rem;
         position: relative;
-        &.selected {
+        &.active {
             opacity: 1;
         }
     }

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

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