Initial issue boards UI
This commit is contained in:
parent
ec106b2869
commit
5dc41ecd90
|
@ -276,3 +276,5 @@ $personal-access-tokens-disabled-label-color: #bbb;
|
|||
|
||||
$ci-output-bg: #1d1f21;
|
||||
$ci-text-color: #c5c8c6;
|
||||
|
||||
$issue-boards-font-size: 15px;
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -320,4 +320,8 @@ module ApplicationHelper
|
|||
capture(&block)
|
||||
end
|
||||
end
|
||||
|
||||
def page_class
|
||||
"issue-boards-page" if current_controller?(:boards)
|
||||
end
|
||||
end
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue