Handle dropdown in mobile viewports

3 files changed, 59 insertions, 32 deletions

diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 2b5b7429b23..6f7a7a8ba1c 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -162,9 +162,22 @@ ul.related-merge-requests > li {
   margin-bottom: 30px;
 }
 
+.new-branch-col {
+  padding-top: 10px;
+}
+
 .create-mr-dropdown-wrap {
+  .btn-group:not(.hide) {
+    display: flex;
+  }
+
+  .js-create-merge-request {
+    flex-grow: 1;
+    flex-shrink: 0;
+  }
+
   .dropdown-menu {
-    min-width: 280px;
+    max-width: 280px;
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
@@ -219,3 +232,15 @@ ul.related-merge-requests > li {
   }
 }
 
+@media (min-width: $screen-sm-min) {
+  .new-branch-col {
+    padding-top: 0;
+    text-align: right;
+  }
+
+  .create-mr-dropdown-wrap {
+    .btn-group:not(.hide) {
+      display: inline-block;
+    }
+  }
+}
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index 0a23365271b..e748c8718f7 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -1,31 +1,30 @@
 - if can?(current_user, :push_code, @project)
-  .pull-right
-    .create-mr-dropdown-wrap{ data: { can_create_path: can_create_branch_namespace_project_issue_path(@project.namespace, @project, @issue), create_mr_path: create_merge_request_namespace_project_issue_path(@project.namespace, @project, @issue), create_branch_path: namespace_project_branches_path(@project.namespace, @project, branch_name: @issue.to_branch_name, issue_iid: @issue.iid) } }
-      .btn-group.unavailable
-        %button.btn.btn-grouped{ type: 'button', disabled: 'disabled' }
-          = icon('exclamation-triangle')
-          New branch unavailable
-          %button.btn.btn-inverted.disabled.dropdown-toggle{ type: 'button', disabled: 'disabled' }
-            = icon('caret-down')
-      .btn-group.available.hide
-        %input.btn.js-create-merge-request.btn-inverted.btn-success{ type: 'button', value: 'Create merge request', data: { action: 'create-mr' } }
-        %button.btn.btn-inverted.dropdown-toggle.btn-inverted.btn-success.js-dropdown-toggle{ type: 'button', data: { 'dropdown-trigger' => '#create-merge-request-dropdown' } }
+  .create-mr-dropdown-wrap{ data: { can_create_path: can_create_branch_namespace_project_issue_path(@project.namespace, @project, @issue), create_mr_path: create_merge_request_namespace_project_issue_path(@project.namespace, @project, @issue), create_branch_path: namespace_project_branches_path(@project.namespace, @project, branch_name: @issue.to_branch_name, issue_iid: @issue.iid) } }
+    .btn-group.unavailable
+      %button.btn.btn-grouped{ type: 'button', disabled: 'disabled' }
+        = icon('exclamation-triangle')
+        New branch unavailable
+        %button.btn.btn-inverted.disabled.dropdown-toggle{ type: 'button', disabled: 'disabled' }
           = icon('caret-down')
-        %ul#create-merge-request-dropdown.dropdown-menu.dropdown-menu-align-right{ data: { dropdown: true } }
-          %li.droplab-item-selected{ data: { value: 'create-mr', 'text' => 'Create a merge request' } }
-            .menu-item
-              .icon-container
-                = icon('check')
-              .description
-                %strong Create a merge request
-                %span
-                  Creates a branch named after this issue and a merge request. The source branch is 'master' by default.
-          %li.divider.droplab-item-ignore
-          %li{ data: {  value: 'create-branch', 'text' => 'Create a branch' } }
-            .menu-item
-              .icon-container
-                = icon('check')
-              .description
-                %strong Create a branch
-                %span
-                  Creates a branch named after this issue. The source branch is 'master' by default.
+    .btn-group.available.hide
+      %input.btn.js-create-merge-request.btn-inverted.btn-success{ type: 'button', value: 'Create merge request', data: { action: 'create-mr' } }
+      %button.btn.btn-inverted.dropdown-toggle.btn-inverted.btn-success.js-dropdown-toggle{ type: 'button', data: { 'dropdown-trigger' => '#create-merge-request-dropdown' } }
+        = icon('caret-down')
+      %ul#create-merge-request-dropdown.dropdown-menu.dropdown-menu-align-right{ data: { dropdown: true } }
+        %li.droplab-item-selected{ data: { value: 'create-mr', 'text' => 'Create a merge request' } }
+          .menu-item
+            .icon-container
+              = icon('check')
+            .description
+              %strong Create a merge request
+              %span
+                Creates a branch named after this issue and a merge request. The source branch is 'master' by default.
+        %li.divider.droplab-item-ignore
+        %li{ data: {  value: 'create-branch', 'text' => 'Create a branch' } }
+          .menu-item
+            .icon-container
+              = icon('check')
+            .description
+              %strong Create a branch
+              %span
+                Creates a branch named after this issue. The source branch is 'master' by default.
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 2a871966aa8..1418ad73553 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -70,8 +70,11 @@
       // This element is filled in using JavaScript.
 
   .content-block.content-block-small
-    = render 'new_branch' unless @issue.confidential?
-    = render 'award_emoji/awards_block', awardable: @issue, inline: true
+    .row
+      .col-sm-6
+        = render 'award_emoji/awards_block', awardable: @issue, inline: true
+      .col-sm-6.new-branch-col
+        = render 'new_branch' unless @issue.confidential?
 
   %section.issuable-discussion
     = render 'projects/issues/discussion'