From ca81c1c06845a0a0f956b0291e38c6d4403c69e0 Mon Sep 17 00:00:00 2001 From: Nur Rony Date: Wed, 8 Feb 2017 13:04:00 +0600 Subject: replaces media query with flexbox --- app/assets/stylesheets/pages/issuable.scss | 16 ++-- app/assets/stylesheets/pages/merge_requests.scss | 7 +- app/views/projects/issues/_issue.html.haml | 105 ++++++++++++----------- 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')} -- cgit v1.2.1