Refactored issue header to work better for mobile

This will also work better for when the title makes the buttons drop down a new line

Closes #14228

app/assets/stylesheets/framework/issue_box.scss

@@ -5,7 +5,7 @@
  */
 
 .status-box {
-  
+
   /* Extra small devices (phones, less than 768px) */
   /* No media query since this is the default in Bootstrap */
   padding: 5px 11px;

app/assets/stylesheets/framework/mobile.scss

@@ -70,13 +70,6 @@
     display: none;
   }
 
-  .issue-details {
-    .creator,
-    .page-title .btn-close {
-      display: none;
-    }
-  }
-
   %ul.notes .note-role, .note-actions {
     display: none;
   }

app/assets/stylesheets/pages/detail_page.scss

@@ -16,11 +16,6 @@
   .issue_created_ago, .author_link {
     white-space: nowrap;
   }
-
-  .issue-meta {
-    display: inline-block;
-    line-height: 20px;
-  }
 }
 
 .detail-page-description {

app/assets/stylesheets/pages/issuable.scss

@@ -273,10 +273,6 @@
   }
 }
 
-.btn-default.gutter-toggle {
-  margin-top: 4px;
-}
-
 .detail-page-description {
   small {
     color: $gray-darkest;
@@ -322,3 +318,50 @@
     padding-top: 7px;
   }
 }
+
+.issuable-status-box {
+  float: none;
+  display: inline-block;
+  margin-top: 0;
+
+  @media (max-width: $screen-xs-max) {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+.issuable-header {
+  position: relative;
+  padding-left: 45px;
+  padding-right: 45px;
+  line-height: 35px;
+
+  @media (min-width: $screen-sm-min) {
+    float: left;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.issuable-actions {
+  padding-top: 10px;
+
+  @media (min-width: $screen-sm-min) {
+    float: right;
+    padding-top: 0;
+  }
+}
+
+.issuable-gutter-toggle {
+  @media (max-width: $screen-sm-max) {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+
+.issuable-meta {
+  display: inline-block;
+  line-height: 18px;
+}

app/assets/stylesheets/pages/issues.scss

@@ -86,41 +86,9 @@ form.edit-issue {
 @media (max-width: $screen-xs-max) {
   .issue-btn-group {
     width: 100%;
-    margin-top: 5px;
-
-    .btn-group {
-      width: 100%;
-
-      ul {
-        width: 100%;
-        text-align: center;
-      }
-    }
 
     .btn {
       width: 100%;
-
-      &:first-child:not(:last-child) {
-
-      }
-
-      &:not(:first-child):not(:last-child) {
-        margin-top: 10px;
-      }
-
-      &:last-child:not(:first-child) {
-        margin-top: 10px;
-      }
-    }
-  }
-
-  .issue {
-    &:hover  .issue-actions {
-      display: none !important;
-    }
-
-    .issue-updated-at {
-      display: none;
     }
   }
 }
@@ -133,11 +101,3 @@ form.edit-issue {
   color: $gl-text-color;
   margin-left: 52px;
 }
-
-.editor-details {
-  display: block;
-
-  @media (min-width: $screen-sm-min) {
-    display: inline-block;
-  }
-}

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

 - page_title           "#{@issue.title} (##{@issue.iid})", "Issues"
 - page_description     @issue.description
 - page_card_attributes @issue.card_attributes
+- header_title         project_title(@project, "Issues", namespace_project_issues_path(@project.namespace, @project))
 
-= render "header_title"
+.clearfix.detail-page-header
+  .issuable-header
+    .issuable-status-box.status-box.status-box-closed{ class: "#{issue_button_visibility(@issue, false)}" }
+      = icon('check', class: "hidden-sm hidden-md hidden-lg")
+      %span.hidden-xs
+        Closed
+    .issuable-status-box.status-box.status-box-open{ class: "#{issue_button_visibility(@issue, true)}"}
+      = icon('circle-o', class: "hidden-sm hidden-md hidden-lg")
+      %span.hidden-xs Open
 
-.issue
-  .detail-page-header.issuable-header
-    .pull-left
-      .status-box{ class: "status-box-closed #{issue_button_visibility(@issue, false)}"}
-        %span.hidden-xs
-          Closed
-        %span.hidden-sm.hidden-md.hidden-lg
-          = icon('check')
-      .status-box{ class: "status-box-open #{issue_button_visibility(@issue, true)}"}
-        %span.hidden-xs
-          Open
-        %span.hidden-sm.hidden-md.hidden-lg
-          = icon('circle-o')
-
-    %a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.js-sidebar-toggle{ href: "#" }
+    %a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
       = icon('angle-double-left')
 
-    .issue-meta
+    .issuable-meta
       = confidential_icon(@issue)
       %strong.identifier
-        Issue ##{@issue.iid}
-      %span.creator
-        opened
-        .editor-details
-          .editor-details
-            = time_ago_with_tooltip(@issue.created_at)
-            by
-            %strong
-              = link_to_member(@project, @issue.author, size: 24, mobile_classes: "hidden-xs")
-            %strong
-              = link_to_member(@project, @issue.author, size: 24, mobile_classes: "hidden-sm hidden-md hidden-lg",
-                by_username: true, avatar: false)
+        Issue #{@issue.to_reference}
+      opened
+      = time_ago_with_tooltip(@issue.created_at)
+      by
+      %strong
+        = link_to_member(@project, @issue.author, size: 24, mobile_classes: "hidden-xs")
+        = link_to_member(@project, @issue.author, size: 24, by_username: true, avatar: false, mobile_classes: "hidden-sm hidden-md hidden-lg")
 
-    .pull-right.issue-btn-group
+  .issuable-actions
+    .clearfix.issue-btn-group.dropdown
+      %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ data: { toggle: "dropdown" } }
+        %span.caret
+        Options
+      .dropdown-menu.dropdown-menu-align-right.hidden-lg
+        %ul
+          - if can?(current_user, :create_issue, @project)
+            %li
+              = link_to 'New issue', new_namespace_project_issue_path(@project.namespace, @project), title: 'New issue', id: 'new_issue_link'
+          - if can?(current_user, :update_issue, @issue)
+            %li
+              = link_to 'Reopen issue', issue_path(@issue, issue: {state_event: :reopen}, status_only: true, format: 'json'), data: {no_turbolink: true}, class: " #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
+            %li
+              = link_to 'Close issue', issue_path(@issue, issue: {state_event: :close}, status_only: true, format: 'json'), data: {no_turbolink: true}, class: "#{issue_button_visibility(@issue, true)}", title: 'Close issue'
+            %li
+              = link_to 'Edit', edit_namespace_project_issue_path(@project.namespace, @project, @issue)
       - if can?(current_user, :create_issue, @project)
-        = link_to new_namespace_project_issue_path(@project.namespace, @project), class: 'btn btn-nr btn-grouped new-issue-link btn-success', title: 'New issue', id: 'new_issue_link' do
+        = link_to new_namespace_project_issue_path(@project.namespace, @project), class: 'hidden-xs hidden-sm btn btn-nr btn-grouped new-issue-link btn-success', title: 'New issue', id: 'new_issue_link' do
           = icon('plus')
           New issue
       - if can?(current_user, :update_issue, @issue)
-        = link_to 'Reopen issue', issue_path(@issue, issue: {state_event: :reopen}, status_only: true, format: 'json'), data: {no_turbolink: true}, class: "btn btn-nr btn-grouped btn-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
-        = link_to 'Close issue', issue_path(@issue, issue: {state_event: :close}, status_only: true, format: 'json'), data: {no_turbolink: true}, class: "btn btn-nr btn-grouped btn-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
-        = link_to edit_namespace_project_issue_path(@project.namespace, @project, @issue), class: 'btn btn-nr btn-grouped issuable-edit' do
+        = link_to 'Reopen issue', issue_path(@issue, issue: {state_event: :reopen}, status_only: true, format: 'json'), data: {no_turbolink: true}, class: "hidden-xs hidden-sm btn btn-nr btn-grouped btn-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
+        = link_to 'Close issue', issue_path(@issue, issue: {state_event: :close}, status_only: true, format: 'json'), data: {no_turbolink: true}, class: "hidden-xs hidden-sm btn btn-nr btn-grouped btn-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
+        = link_to edit_namespace_project_issue_path(@project.namespace, @project, @issue), class: 'hidden-xs hidden-sm btn btn-nr btn-grouped issuable-edit' do
           = icon('pencil-square-o')
           Edit
 
 
-  .issue-details.issuable-details
-    .detail-page-description.content-block
-      %h2.title
-        = markdown escape_once(@issue.title), pipeline: :single_line
-      %div
-        - if @issue.description.present?
-          .description{class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : ''}
-            .wiki
-              = preserve do
-                = markdown(@issue.description, cache_key: [@issue, "description"])
-            %textarea.hidden.js-task-list-field
-              = @issue.description
-      = edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue_edited_ago')
+.issue-details.issuable-details
+  .detail-page-description.content-block
+    %h2.title
+      = markdown escape_once(@issue.title), pipeline: :single_line
+    - if @issue.description.present?
+      .description{class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : ''}
+        .wiki
+          = preserve do
+            = markdown(@issue.description, cache_key: [@issue, "description"])
+        %textarea.hidden.js-task-list-field
+          = @issue.description
+    = edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue_edited_ago')
 
       #merge-requests{'data-url' => referenced_merge_requests_namespace_project_issue_url(@project.namespace, @project, @issue)}
         // This element is filled in using JavaScript.
@@ -70,13 +75,11 @@
       #related-branches{'data-url' => related_branches_namespace_project_issue_url(@project.namespace, @project, @issue)}
         // This element is filled in using JavaScript.
 
-    .content-block.content-block-small
-      = render 'new_branch'
-      = render 'votes/votes_block', votable: @issue
+  .content-block.content-block-small
+    = render 'new_branch'
+    = render 'votes/votes_block', votable: @issue
 
-    .row
-      %section.col-md-12
-        .issuable-discussion
-          = render 'projects/issues/discussion'
+  %section.issuable-discussion
+    = render 'projects/issues/discussion'
 
 = render 'shared/issuable/sidebar', issuable: @issue