replaces media query with flexbox27610-issue-number-alignment

3 files changed, 66 insertions, 62 deletions

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index e1ef9228cbe..1a53730bed5 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -461,17 +461,19 @@
 
 .issuable-list {
   li {
-    .issue-info-container {
-      display: inline-block;
-      width: 96.5%;
 
-      @media (max-width: $screen-md-max) {
-        width: 95%;
-      }
+    .issue-box {
+      display: -webkit-flex;
+      display: flex;
+    }
+
+    .issue-info-container {
+      -webkit-flex: 1;
+      flex: 1;
+      padding-right: $gl-padding;
     }
 
     .issue-check {
-      float: left;
       padding-right: $gl-padding;
       margin-bottom: 10px;
       min-width: 15px;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 86b4f84044c..d8130f7274b 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -268,11 +268,12 @@
   .merge-request {
     padding: 10px  0 10px 15px;
     position: relative;
+    display: -webkit-flex;
+    display: flex;
 
     .issue-info-container {
-      @media (max-width: $screen-xs-max) {
-        width: 88%;
-      }
+      -webkit-flex: 1;
+      flex: 1;
     }
 
     .merge-request-title {
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index c41818546f9..5c9839cb330 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -1,60 +1,61 @@
 %li{ id: dom_id(issue), class: issue_css_classes(issue), url: issue_path(issue), data: { labels: issue.label_ids, id: issue.id } }
-  - if @bulk_edit
-    .issue-check
-      = check_box_tag dom_id(issue, "selected"), nil, false, 'data-id' => issue.id, class: "selected_issue"
-  .issue-info-container
-    .issue-title.title
-      %span.issue-title-text
-        = confidential_icon(issue)
-        = link_to issue.title, issue_path(issue)
-      %ul.controls
-        - if issue.closed?
-          %li
-            CLOSED
+  .issue-box
+    - if @bulk_edit
+      .issue-check
+        = check_box_tag dom_id(issue, "selected"), nil, false, 'data-id' => issue.id, class: "selected_issue"
+    .issue-info-container
+      .issue-title.title
+        %span.issue-title-text
+          = confidential_icon(issue)
+          = link_to issue.title, issue_path(issue)
+        %ul.controls
+          - if issue.closed?
+            %li
+              CLOSED
 
-        - if issue.assignee
-          %li
-            = link_to_member(@project, issue.assignee, name: false, title: "Assigned to :name")
+          - if issue.assignee
+            %li
+              = link_to_member(@project, issue.assignee, name: false, title: "Assigned to :name")
 
-        - upvotes, downvotes = issue.upvotes, issue.downvotes
-        - if upvotes > 0
-          %li
-            = icon('thumbs-up')
-            = upvotes
+          - upvotes, downvotes = issue.upvotes, issue.downvotes
+          - if upvotes > 0
+            %li
+              = icon('thumbs-up')
+              = upvotes
 
-        - if downvotes > 0
-          %li
-            = icon('thumbs-down')
-            = downvotes
+          - if downvotes > 0
+            %li
+              = icon('thumbs-down')
+              = downvotes
 
-        - note_count = issue.notes.user.count
-        %li
-          = link_to issue_path(issue, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do
-            = icon('comments')
-            = note_count
+          - note_count = issue.notes.user.count
+          %li
+            = link_to issue_path(issue, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do
+              = icon('comments')
+              = note_count
 
-    .issue-info
-      #{issuable_reference(issue)} ·
-      opened #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')}
-      by #{link_to_member(@project, issue.author, avatar: false)}
-      - if issue.milestone
-         
-        = link_to namespace_project_issues_path(issue.project.namespace, issue.project, milestone_title: issue.milestone.title) do
-          = icon('clock-o')
-          = issue.milestone.title
-      - if issue.due_date
-        %span{ class: "#{'cred' if issue.overdue?}" }
+      .issue-info
+        #{issuable_reference(issue)} ·
+        opened #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')}
+        by #{link_to_member(@project, issue.author, avatar: false)}
+        - if issue.milestone
+           
+          = link_to namespace_project_issues_path(issue.project.namespace, issue.project, milestone_title: issue.milestone.title) do
+            = icon('clock-o')
+            = issue.milestone.title
+        - if issue.due_date
+          %span{ class: "#{'cred' if issue.overdue?}" }
+             
+            = icon('calendar')
+            = issue.due_date.to_s(:medium)
+        - if issue.labels.any?
+           
+          - issue.labels.each do |label|
+            = link_to_label(label, subject: issue.project, css_class: 'label-link')
+        - if issue.tasks?
            
-          = icon('calendar')
-          = issue.due_date.to_s(:medium)
-      - if issue.labels.any?
-         
-        - issue.labels.each do |label|
-          = link_to_label(label, subject: issue.project, css_class: 'label-link')
-      - if issue.tasks?
-         
-        %span.task-status
-          = issue.task_status
+          %span.task-status
+            = issue.task_status
 
-      .pull-right.issue-updated-at
-        %span updated #{time_ago_with_tooltip(issue.updated_at, placement: 'bottom', html_class: 'issue_update_ago')}
+        .pull-right.issue-updated-at
+          %span updated #{time_ago_with_tooltip(issue.updated_at, placement: 'bottom', html_class: 'issue_update_ago')}