Commit 05d8e87d authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch 'winh-full-height-boards-sidebar' into 'master'

Make issue boards sidebar full height

Closes #36980 and #36447

See merge request gitlab-org/gitlab-ce!14214
parents 0d389682 e7ad2bf5
...@@ -77,9 +77,6 @@ $(() => { ...@@ -77,9 +77,6 @@ $(() => {
}); });
Store.rootPath = this.boardsEndpoint; Store.rootPath = this.boardsEndpoint;
this.filterManager = new FilteredSearchBoards(Store.filter, true);
this.filterManager.setup();
// Listen for updateTokens event // Listen for updateTokens event
eventHub.$on('updateTokens', this.updateTokens); eventHub.$on('updateTokens', this.updateTokens);
}, },
...@@ -87,6 +84,9 @@ $(() => { ...@@ -87,6 +84,9 @@ $(() => {
eventHub.$off('updateTokens', this.updateTokens); eventHub.$off('updateTokens', this.updateTokens);
}, },
mounted () { mounted () {
this.filterManager = new FilteredSearchBoards(Store.filter, true);
this.filterManager.setup();
Store.disabled = this.disabled; Store.disabled = this.disabled;
gl.boardService.all() gl.boardService.all()
.then(response => response.json()) .then(response => response.json())
......
...@@ -7,6 +7,7 @@ $gutter_inner_width: 250px; ...@@ -7,6 +7,7 @@ $gutter_inner_width: 250px;
$sidebar-transition-duration: .15s; $sidebar-transition-duration: .15s;
$sidebar-breakpoint: 1024px; $sidebar-breakpoint: 1024px;
$default-transition-duration: .15s; $default-transition-duration: .15s;
$right-sidebar-transition-duration: .3s;
/* /*
* Color schema * Color schema
......
...@@ -55,6 +55,15 @@ ...@@ -55,6 +55,15 @@
.boards-app { .boards-app {
position: relative; position: relative;
@media (min-width: $screen-sm-min) {
transition: width $right-sidebar-transition-duration;
width: 100%;
&.is-compact {
width: calc(100% - #{$gutter_width});
}
}
} }
.boards-app-loading { .boards-app-loading {
...@@ -78,11 +87,6 @@ ...@@ -78,11 +87,6 @@
height: calc(100vh - 222px); height: calc(100vh - 222px);
// scss-lint:enable DuplicateProperty // scss-lint:enable DuplicateProperty
min-height: 475px; min-height: 475px;
transition: width .2s;
&.is-compact {
width: calc(100% - 290px);
}
} }
} }
...@@ -412,14 +416,6 @@ ...@@ -412,14 +416,6 @@
.page-with-layout-nav.page-with-sub-nav .issue-boards-sidebar, .page-with-layout-nav.page-with-sub-nav .issue-boards-sidebar,
.page-with-new-sidebar.page-with-sidebar .issue-boards-sidebar { .page-with-new-sidebar.page-with-sidebar .issue-boards-sidebar {
position: absolute;
&.right-sidebar {
top: 0;
bottom: 0;
height: 100%;
}
.issuable-sidebar-header { .issuable-sidebar-header {
position: relative; position: relative;
} }
...@@ -457,8 +453,8 @@ ...@@ -457,8 +453,8 @@
.right-sidebar.right-sidebar-expanded { .right-sidebar.right-sidebar-expanded {
&.boards-sidebar-slide-enter-active, &.boards-sidebar-slide-enter-active,
&.boards-sidebar-slide-leave-active { &.boards-sidebar-slide-leave-active {
transition: width .2s, transition: width $right-sidebar-transition-duration,
padding .2s; padding $right-sidebar-transition-duration;
} }
&.boards-sidebar-slide-enter, &.boards-sidebar-slide-enter,
......
...@@ -223,14 +223,14 @@ ...@@ -223,14 +223,14 @@
top: $new-navbar-height; top: $new-navbar-height;
bottom: 0; bottom: 0;
right: 0; right: 0;
transition: width .3s; transition: width $right-sidebar-transition-duration;
background: $gray-light; background: $gray-light;
z-index: 200; z-index: 200;
overflow: hidden; overflow: hidden;
.issuable-sidebar { .issuable-sidebar {
width: calc(100% + 100px); width: calc(100% + 100px);
height: calc(100% - #{$new-navbar-height}); height: 100%;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
......
...@@ -12,11 +12,11 @@ ...@@ -12,11 +12,11 @@
%script#js-board-template{ type: "text/x-template" }= render "shared/boards/components/board" %script#js-board-template{ type: "text/x-template" }= render "shared/boards/components/board"
%script#js-board-modal-filter{ type: "text/x-template" }= render "shared/issuable/search_bar", type: :boards_modal %script#js-board-modal-filter{ type: "text/x-template" }= render "shared/issuable/search_bar", type: :boards_modal
.hidden-xs.hidden-sm #board-app.boards-app{ "v-cloak" => true, data: board_data, ":class" => "{ 'is-compact': detailIssueVisible }" }
= render 'shared/issuable/search_bar', type: :boards .hidden-xs.hidden-sm
= render 'shared/issuable/search_bar', type: :boards
#board-app.boards-app{ "v-cloak" => true, data: board_data } .boards-list
.boards-list{ ":class" => "{ 'is-compact': detailIssueVisible }" }
.boards-app-loading.text-center{ "v-if" => "loading" } .boards-app-loading.text-center{ "v-if" => "loading" }
= icon("spinner spin") = icon("spinner spin")
%board{ "v-cloak" => true, %board{ "v-cloak" => true,
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment