Scroll board into view when clicking issue

app/assets/javascripts/boards/boards_bundle.js.es6

@@ -33,9 +33,15 @@ $(() => {
       endpoint: $boardApp.dataset.endpoint,
       boardId: $boardApp.dataset.boardId,
       disabled: $boardApp.dataset.disabled === 'true',
-      issueLinkBase: $boardApp.dataset.issueLinkBase
+      issueLinkBase: $boardApp.dataset.issueLinkBase,
+      detailIssue: Store.detail
     },
     init: Store.create.bind(Store),
+    computed: {
+      detailIssueVisible () {
+        return Object.keys(this.detailIssue.issue).length;
+      }
+    },
     created () {
       gl.boardService = new BoardService(this.endpoint, this.boardId);
     },

app/assets/javascripts/boards/components/board.js.es6

@@ -21,6 +21,7 @@
     },
     data () {
       return {
+        detailIssue: Store.detail,
         filters: Store.state.filters,
         showIssueForm: false
       };
@@ -32,6 +33,26 @@
           this.list.getIssues(true);
         },
         deep: true
+      },
+      detailIssue: {
+        handler () {
+          if (!Object.keys(this.detailIssue.issue).length) return;
+
+          const issue = this.list.findIssue(this.detailIssue.issue.id);
+
+          if (issue) {
+            const boardsList = document.querySelectorAll('.boards-list')[0];
+            const right = (this.$el.offsetLeft + this.$el.offsetWidth) - boardsList.offsetWidth;
+            const left = boardsList.scrollLeft - this.$el.offsetLeft;
+
+            if (right - boardsList.scrollLeft > 0) {
+              boardsList.scrollLeft = right;
+            } else if (left > 0) {
+              boardsList.scrollLeft = this.$el.offsetLeft;
+            }
+          }
+        },
+        deep: true
       }
     },
     methods: {

app/assets/javascripts/boards/components/board_card.js.es6

@@ -20,11 +20,7 @@
     },
     computed: {
       issueDetailVisible () {
-        if (this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id) {
-          return true;
-        } else {
-          return false;
-        }
+        return this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id;
       }
     },
     methods: {

app/assets/javascripts/boards/components/board_sidebar.js.es6

@@ -29,15 +29,22 @@
       issue () {
         if (this.showSidebar) {
           this.$nextTick(() => {
-            new IssuableContext(this.currentUser);
-            new MilestoneSelect();
-            new gl.DueDateSelectors();
-            new LabelsSelect();
-            new Sidebar();
-            new Subscription('.subscription');
+            this.issuableContext = new IssuableContext(this.currentUser);
+            this.milestoneSelect = new MilestoneSelect();
+            this.dueDateSelect = new gl.DueDateSelectors();
+            this.labelsSelect = new LabelsSelect();
+            this.sidebar = new Sidebar();
+            this.subscription = new Subscription('.subscription');
           });
         } else {
           $('.right-sidebar').getNiceScroll().remove();
+
+          delete this.issuableContext;
+          delete this.milestoneSelect;
+          delete this.dueDateSelect;
+          delete this.labelsSelect;
+          delete this.sidebar;
+          delete this.subscription;
         }
       }
     },

app/assets/stylesheets/pages/boards.scss

@@ -76,6 +76,10 @@ lex
     height: 475px; // Needed for PhantomJS
     height: calc(100vh - 220px);
     min-height: 475px;
+
+    &.is-compact {
+      width: calc(100% - 290px);
+    }
   }
 }
 

app/views/projects/boards/components/_sidebar.html.haml

@@ -12,7 +12,7 @@
               {{ issue.id }}
         %a.gutter-toggle.pull-right{ role: "button",
           href: "#",
-          "@click" => "closeSidebar",
+          "@click.prevent" => "closeSidebar",
           "aria-label" => "Toggle sidebar" }
           = icon("times")
       .js-issuable-update

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

@@ -11,7 +11,7 @@
 = render 'shared/issuable/filter', 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" }
       = icon("spinner spin")
     = render "projects/boards/components/board"

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

@@ -11,7 +11,7 @@
 = render 'shared/issuable/filter', 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" }
       = icon("spinner spin")
     = render "projects/boards/components/board"