Affix assignee/milestone block

9 files changed, 162 insertions, 106 deletions

diff --git a/app/assets/javascripts/issue.js.coffee b/app/assets/javascripts/issue.js.coffee
index 45c248e6fb6..9b7c1be8355 100644
--- a/app/assets/javascripts/issue.js.coffee
+++ b/app/assets/javascripts/issue.js.coffee
@@ -15,3 +15,9 @@ class @Issue
       "issue"
       updateTaskState
     )
+
+    $('.issuable-affix').affix offset:
+      top: ->
+        @top = $('.issue-details').outerHeight(true) + 25
+      bottom: ->
+        @bottom = $('.footer').outerHeight(true)
diff --git a/app/assets/javascripts/merge_request.js.coffee b/app/assets/javascripts/merge_request.js.coffee
index 5bcbd56852d..757592842eb 100644
--- a/app/assets/javascripts/merge_request.js.coffee
+++ b/app/assets/javascripts/merge_request.js.coffee
@@ -20,6 +20,12 @@ class @MergeRequest
     if $("a.btn-close").length
       $("li.task-list-item input:checkbox").prop("disabled", false)
 
+    $('.issuable-affix').affix offset:
+      top: ->
+        @top = $('.merge-request-details').outerHeight(true) + 70
+      bottom: ->
+        @bottom = $('.footer').outerHeight(true)
+
   # Local jQuery finder
   $: (selector) ->
     this.$el.find(selector)
diff --git a/app/assets/stylesheets/sections/issuable.scss b/app/assets/stylesheets/sections/issuable.scss
new file mode 100644
index 00000000000..75bd39853bd
--- /dev/null
+++ b/app/assets/stylesheets/sections/issuable.scss
@@ -0,0 +1,25 @@
+@media (max-width: $screen-sm-max) {
+  .issuable-affix {
+    margin-top: 20px;
+  }
+}
+
+@media (max-width: $screen-md-max) {
+  .issuable-affix {
+    position: static;
+  }
+}
+
+@media (min-width: $screen-md-max) {
+  .issuable-affix {
+    &.affix-top {
+      position: static;
+    }
+
+    &.affix {
+      position: fixed;
+      top: 70px;
+      width: 220px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/sections/issues.scss b/app/assets/stylesheets/sections/issues.scss
index 7a9d3334d96..ccfc9b704a6 100644
--- a/app/assets/stylesheets/sections/issues.scss
+++ b/app/assets/stylesheets/sections/issues.scss
@@ -94,8 +94,15 @@
   }
 }
 
-.issue-show-labels .color-label {
-  padding: 6px 10px;
+.issue-show-labels {
+  a {
+    margin-right: 5px;
+    margin-bottom: 5px;
+    display: inline-block;
+    .color-label {
+      padding: 6px 10px;
+    }
+  }
 }
 
 form.edit-issue {
diff --git a/app/assets/stylesheets/sections/merge_requests.scss b/app/assets/stylesheets/sections/merge_requests.scss
index 0e27c389387..6662a38344a 100644
--- a/app/assets/stylesheets/sections/merge_requests.scss
+++ b/app/assets/stylesheets/sections/merge_requests.scss
@@ -95,7 +95,14 @@
       color: #999;
 
       .merge-request-labels {
-        display: inline-block;
+        a {
+          margin-right: 5px;
+          margin-bottom: 5px;
+          display: inline-block;
+          .color-label {
+            padding: 6px 10px;
+          }
+        }
       }
     }
   }
diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml
index e04e1985f1f..3a278058944 100644
--- a/app/views/projects/issues/_discussion.html.haml
+++ b/app/views/projects/issues/_discussion.html.haml
@@ -14,24 +14,24 @@
 
     .voting_notes#notes= render "projects/notes/notes_with_form"
   .col-md-3
-    %div
-    .clearfix
-      %span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
-        = cross_project_reference(@project, @issue)
-    %hr
-    .context
-      %cite.cgray
-        = render partial: 'issue_context', locals: { issue: @issue }
-    %hr
-    .clearfix
-      .votes-holder
-        %h6 Votes
-        #votes= render 'votes/votes_block', votable: @issue
-
-    - if @issue.labels.any?
+    .issuable-affix
+      .clearfix
+        %span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
+          = cross_project_reference(@project, @issue)
       %hr
-      %h6 Labels
-      .issue-show-labels
-        - @issue.labels.each do |label|
-          = link_to project_issues_path(@project, label_name: label.name) do
-            %p= render_colored_label(label)
+      .context
+        %cite.cgray
+          = render partial: 'issue_context', locals: { issue: @issue }
+      %hr
+      .clearfix
+        .votes-holder
+          %h6 Votes
+          #votes= render 'votes/votes_block', votable: @issue
+
+      - if @issue.labels.any?
+        %hr
+        %h6 Labels
+        .issue-show-labels
+          - @issue.labels.each do |label|
+            = link_to project_issues_path(@project, label_name: label.name) do
+              = render_colored_label(label)
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 75411c6d86f..bf343cbb7af 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -1,37 +1,40 @@
-%h4.page-title
-  .issue-box{ class: issue_box_class(@issue) }
-    - if @issue.closed?
-      Closed
-    - else
-      Open
-  Issue ##{@issue.iid}
-  %small.creator
-    · created by #{link_to_member(@project, @issue.author)} #{issue_timestamp(@issue)}
+.issue
+  .issue-details
+    %h4.page-title
+      .issue-box{ class: issue_box_class(@issue) }
+        - if @issue.closed?
+          Closed
+        - else
+          Open
+      Issue ##{@issue.iid}
+      %small.creator
+        · created by #{link_to_member(@project, @issue.author)} #{issue_timestamp(@issue)}
 
-  .pull-right
-    - if can?(current_user, :write_issue, @project)
-      = link_to new_project_issue_path(@project), class: "btn btn-grouped new-issue-link", title: "New Issue", id: "new_issue_link" do
-        %i.fa.fa-plus
-        New Issue
-    - if can?(current_user, :modify_issue, @issue)
-      - if @issue.closed?
-        = link_to 'Reopen', project_issue_path(@project, @issue, issue: {state_event: :reopen }, status_only: true), method: :put,  class: "btn btn-grouped btn-reopen"
-      - else
-        = link_to 'Close', project_issue_path(@project, @issue, issue: {state_event: :close }, status_only: true), method: :put, class: "btn btn-grouped btn-close", title: "Close Issue"
+      .pull-right
+        - if can?(current_user, :write_issue, @project)
+          = link_to new_project_issue_path(@project), class: "btn btn-grouped new-issue-link", title: "New Issue", id: "new_issue_link" do
+            %i.fa.fa-plus
+            New Issue
+        - if can?(current_user, :modify_issue, @issue)
+          - if @issue.closed?
+            = link_to 'Reopen', project_issue_path(@project, @issue, issue: {state_event: :reopen }, status_only: true), method: :put,  class: "btn btn-grouped btn-reopen"
+          - else
+            = link_to 'Close', project_issue_path(@project, @issue, issue: {state_event: :close }, status_only: true), method: :put, class: "btn btn-grouped btn-close", title: "Close Issue"
 
-      = link_to edit_project_issue_path(@project, @issue), class: "btn btn-grouped issuable-edit" do
-        %i.fa.fa-pencil-square-o
-        Edit
+          = link_to edit_project_issue_path(@project, @issue), class: "btn btn-grouped issuable-edit" do
+            %i.fa.fa-pencil-square-o
+            Edit
 
-%hr
-%h3.issue-title
-  = gfm escape_once(@issue.title)
-%div
-  - if @issue.description.present?
-    .description
-      .wiki
-        = preserve do
-          = markdown(@issue.description, parse_tasks: true)
+    %hr
+    %h3.issue-title
+      = gfm escape_once(@issue.title)
+    %div
+      - if @issue.description.present?
+        .description
+          .wiki
+            = preserve do
+              = markdown(@issue.description, parse_tasks: true)
 
-%hr
-= render "projects/issues/discussion"
+    %hr
+  .issue-discussion
+    = render "projects/issues/discussion"
diff --git a/app/views/projects/merge_requests/_discussion.html.haml b/app/views/projects/merge_requests/_discussion.html.haml
index f1f66569a9f..51e65f874c2 100644
--- a/app/views/projects/merge_requests/_discussion.html.haml
+++ b/app/views/projects/merge_requests/_discussion.html.haml
@@ -10,22 +10,23 @@
     = render "projects/merge_requests/show/participants"
     = render "projects/notes/notes_with_form"
   .col-md-3
-    .clearfix
-      %span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
-        = cross_project_reference(@project, @merge_request)
-    %hr
-    .context
-      %cite.cgray
-        = render partial: 'projects/merge_requests/show/context', locals: { merge_request: @merge_request }
-    %hr
-    .votes-holder
-      %h6 Votes
-      #votes= render 'votes/votes_block', votable: @merge_request
-
-    - if @merge_request.labels.any?
+    .issuable-affix
+      .clearfix
+        %span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
+          = cross_project_reference(@project, @merge_request)
+      %hr
+      .context
+        %cite.cgray
+          = render partial: 'projects/merge_requests/show/context', locals: { merge_request: @merge_request }
       %hr
-      %h6 Labels
-      .merge-request-show-labels
-        - @merge_request.labels.each do |label|
-          = link_to project_merge_requests_path(@project, label_name: label.name) do
-            %p= render_colored_label(label)
+      .votes-holder
+        %h6 Votes
+        #votes= render 'votes/votes_block', votable: @merge_request
+
+      - if @merge_request.labels.any?
+        %hr
+        %h6 Labels
+        .merge-request-show-labels
+          - @merge_request.labels.each do |label|
+            = link_to project_merge_requests_path(@project, label_name: label.name) do
+              = render_colored_label(label)
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 8e31a7e3fe4..af7044160c1 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -1,37 +1,38 @@
 .merge-request{'data-url' => project_merge_request_path(@project, @merge_request)}
-  = render "projects/merge_requests/show/mr_title"
-  %hr
-  = render "projects/merge_requests/show/mr_box"
-  %hr
-  .append-bottom-20
-    .slead
-      %span From
-      - if @merge_request.for_fork?
-        %strong.label-branch<
-          - if @merge_request.source_project
-            = link_to @merge_request.source_project_namespace, project_path(@merge_request.source_project)
-          - else
-            \ #{@merge_request.source_project_namespace}
-          \:#{@merge_request.source_branch}
-        %span into
-        %strong.label-branch #{@merge_request.target_project_namespace}:#{@merge_request.target_branch}
-      - else
-        %strong.label-branch #{@merge_request.source_branch}
-        %span into
-        %strong.label-branch #{@merge_request.target_branch}
-      - if @merge_request.open?
-        %span.pull-right
-          .btn-group
-            %a.btn.dropdown-toggle{ data: {toggle: :dropdown} }
-              %i.fa.fa-download
-              Download as
-              %span.caret
-            %ul.dropdown-menu
-              %li= link_to "Email Patches", project_merge_request_path(@project, @merge_request, format: :patch)
-              %li= link_to "Plain Diff",    project_merge_request_path(@project, @merge_request, format: :diff)
+  .merge-request-details
+    = render "projects/merge_requests/show/mr_title"
+    %hr
+    = render "projects/merge_requests/show/mr_box"
+    %hr
+    .append-bottom-20
+      .slead
+        %span From
+        - if @merge_request.for_fork?
+          %strong.label-branch<
+            - if @merge_request.source_project
+              = link_to @merge_request.source_project_namespace, project_path(@merge_request.source_project)
+            - else
+              \ #{@merge_request.source_project_namespace}
+            \:#{@merge_request.source_branch}
+          %span into
+          %strong.label-branch #{@merge_request.target_project_namespace}:#{@merge_request.target_branch}
+        - else
+          %strong.label-branch #{@merge_request.source_branch}
+          %span into
+          %strong.label-branch #{@merge_request.target_branch}
+        - if @merge_request.open?
+          %span.pull-right
+            .btn-group
+              %a.btn.dropdown-toggle{ data: {toggle: :dropdown} }
+                %i.fa.fa-download
+                Download as
+                %span.caret
+              %ul.dropdown-menu
+                %li= link_to "Email Patches", project_merge_request_path(@project, @merge_request, format: :patch)
+                %li= link_to "Plain Diff",    project_merge_request_path(@project, @merge_request, format: :diff)
 
-  = render "projects/merge_requests/show/how_to_merge"
-  = render "projects/merge_requests/show/state_widget"
+    = render "projects/merge_requests/show/how_to_merge"
+    = render "projects/merge_requests/show/state_widget"
 
   - if @commits.present?
     %ul.nav.nav-tabs.merge-request-tabs