diff options
author | Phil Hughes <me@iamphill.com> | 2016-07-22 10:59:26 +0100 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2016-08-17 17:12:47 +0100 |
commit | 5dc41ecd9079160f4d56a4f7bab9d7f9afe07a52 (patch) | |
tree | 06fd40d12c76c0592c13f4d8fcd6a280e4305052 | |
parent | ec106b286922ef899da859f93902ecfb8236887e (diff) | |
download | gitlab-ce-5dc41ecd9079160f4d56a4f7bab9d7f9afe07a52.tar.gz |
Initial issue boards UI
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/boards.scss | 99 | ||||
-rw-r--r-- | app/helpers/application_helper.rb | 4 | ||||
-rw-r--r-- | app/views/layouts/_page.html.haml | 5 | ||||
-rw-r--r-- | app/views/layouts/application.html.haml | 2 | ||||
-rw-r--r-- | app/views/projects/boards/index.html.haml | 24 | ||||
-rw-r--r-- | app/views/projects/boards/show.html.haml | 28 |
7 files changed, 154 insertions, 10 deletions
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index ca720022539..5da390118c6 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/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; diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss new file mode 100644 index 00000000000..40aa6949672 --- /dev/null +++ b/app/assets/stylesheets/pages/boards.scss @@ -0,0 +1,99 @@ +.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; +} diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index c3613bc67dd..f3733b01721 100644 --- a/app/helpers/application_helper.rb +++ b/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 diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index a1a71c2fb33..bf50633af24 100644 --- a/app/views/layouts/_page.html.haml +++ b/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 diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 33cedaaf2ee..15a94ac23c5 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -1,5 +1,5 @@ !!! 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 diff --git a/app/views/projects/boards/index.html.haml b/app/views/projects/boards/index.html.haml new file mode 100644 index 00000000000..fcbd8ea6309 --- /dev/null +++ b/app/views/projects/boards/index.html.haml @@ -0,0 +1,24 @@ +- @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 diff --git a/app/views/projects/boards/show.html.haml b/app/views/projects/boards/show.html.haml index 44b002d3fe5..fcbd8ea6309 100644 --- a/app/views/projects/boards/show.html.haml +++ b/app/views/projects/boards/show.html.haml @@ -1,8 +1,24 @@ - @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 |