Initial issue boards UI

app/assets/stylesheets/framework/variables.scss

@@ -276,3 +276,5 @@ $personal-access-tokens-disabled-label-color: #bbb;
 
 $ci-output-bg: #1d1f21;
 $ci-text-color: #c5c8c6;
+
+$issue-boards-font-size: 15px;

app/assets/stylesheets/pages/boards.scss

+.issue-boards-page {
+  .page-with-sidebar {
+    display: flex;
+    min-height: 100vh;
+    max-height: 100vh;
+  }
+
+  .issue-boards-content {
+    display: flex;
+    height: 100%;
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+  }
+}
+
+.boards-list {
+  display: flex;
+  height: 100%;
+  padding-top: 25px;
+  padding-right: ($gl-padding / 2);
+  padding-left: ($gl-padding / 2);
+  overflow-x: scroll;
+}
+
+.board {
+  min-width: 400px;
+  height: 100%;
+  min-height: 500px;
+  padding-right: ($gl-padding / 2);
+  padding-left: ($gl-padding / 2);
+}
+
+.board-inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  font-size: $issue-boards-font-size;
+  background: $background-color;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+}
+
+.board-inner-container {
+  border-bottom: 1px solid $border-color;
+  padding: $gl-padding;
+}
+
+.board-title {
+  margin: 0;
+  font-size: 1em;
+}
+
+.board-search-container {
+  background-color: #fff;
+}
+
+.board-list {
+  flex: 1;
+  margin: 0;
+  padding: 5px;
+  list-style: none;
+  overflow: scroll;
+}
+
+.card {
+  width: 100%;
+  padding: 10px $gl-padding;
+  background: #fff;
+  border-radius: $border-radius-default;
+  box-shadow: 0 1px 2px rgba(186, 186, 186, 0.5);
+
+  &:not(:last-child) {
+    margin-bottom: 5px;
+  }
+}
+
+.card-title {
+  margin: 0;
+  font-size: 1em;
+}
+
+.card-footer {
+  margin-top: 5px;
+
+  .label {
+    margin-right: 4px;
+    font-size: (14px / $issue-boards-font-size);
+  }
+}
+
+.card-number {
+  margin-right: 8px;
+  font-weight: 500;
+}

app/helpers/application_helper.rb

@@ -320,4 +320,8 @@ module ApplicationHelper
       capture(&block)
     end
   end
+
+  def page_class
+    "issue-boards-page" if current_controller?(:boards)
+  end
 end

app/views/layouts/_page.html.haml

@@ -23,7 +23,6 @@
     = render "layouts/broadcast"
     = render "layouts/flash"
     = yield :flash_message
-    %div{ class: (container_class unless @no_container) }
+    %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
       .content
-        .clearfix
-          = yield
+        = yield

app/views/layouts/application.html.haml

 !!! 5
-%html{ lang: "en"}
+%html{ lang: "en", class: "#{page_class}" }
   = render "layouts/head"
   %body{class: "#{user_application_theme}", data: {page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}"}}
     = Gon::Base.render_data

app/views/projects/boards/index.html.haml

+- @no_container = true
+- @content_class = "issue-boards-content"
+- page_title "Boards"
+= render "projects/issues/head"
+
+.boards-list
+  .board
+    .board-inner
+      %header.board-inner-container
+        %h3.board-title
+          Backlog
+          %span.pull-right
+            5
+      .board-inner-container.board-search-container
+        %input.form-control{ type: "text", placeholder: "Search issues" }
+      %ul.board-list
+        %li.card
+          %h4.card-title
+            Issue title
+          .card-footer
+            %span.card-number
+              \#288
+            %span.label.color-label{ style: "background-color: #428bca; color: #FFFFFF" }
+              label

app/views/projects/boards/show.html.haml

 - @no_container = true
-- @content_class = 'issues-board-content'
-- page_title 'Board'
+- @content_class = "issue-boards-content"
+- page_title "Boards"
+= render "projects/issues/head"
 
-= render 'projects/issues/head'
-= render 'shared/issuable/filter', type: :boards
-
-.board-lists
+.boards-list
+  .board
+    .board-inner
+      %header.board-inner-container
+        %h3.board-title
+          Backlog
+          %span.pull-right
+            5
+      .board-inner-container.board-search-container
+        %input.form-control{ type: "text", placeholder: "Search issues" }
+      %ul.board-list
+        %li.card
+          %h4.card-title
+            Issue title
+          .card-footer
+            %span.card-number
+              \#288
+            %span.label.color-label{ style: "background-color: #428bca; color: #FFFFFF" }
+              label