From 3da1f4f6d69029361e4efd380bde73bcf73ac351 Mon Sep 17 00:00:00 2001 From: Nur Rony Date: Tue, 7 Feb 2017 16:30:44 +0600 Subject: [PATCH 1/3] fix alignment for long title --- app/assets/stylesheets/pages/issuable.scss | 9 ++ app/assets/stylesheets/pages/issues.scss | 2 +- .../stylesheets/pages/merge_requests.scss | 8 +- app/views/projects/issues/_issue.html.haml | 102 +++++++------- .../merge_requests/_merge_request.html.haml | 129 +++++++++--------- 5 files changed, 133 insertions(+), 117 deletions(-) diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 9174976c4c6..e1ef9228cbe 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -461,6 +461,15 @@ .issuable-list { li { + .issue-info-container { + display: inline-block; + width: 96.5%; + + @media (max-width: $screen-md-max) { + width: 95%; + } + } + .issue-check { float: left; padding-right: $gl-padding; diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 1e605337f09..80b0c9493d8 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -1,6 +1,6 @@ .issues-list { .issue { - padding: 10px $gl-padding; + padding: 10px 0 10px $gl-padding; position: relative; .title { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index b01d8d695d6..86b4f84044c 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -266,9 +266,15 @@ .mr-list { .merge-request { - padding: 10px 15px; + padding: 10px 0 10px 15px; position: relative; + .issue-info-container { + @media (max-width: $screen-xs-max) { + width: 88%; + } + } + .merge-request-title { margin-bottom: 2px; diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml index 085b2fc2814..c41818546f9 100644 --- a/app/views/projects/issues/_issue.html.haml +++ b/app/views/projects/issues/_issue.html.haml @@ -2,59 +2,59 @@ - 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-title.title - %span.issue-title-text - = confidential_icon(issue) - = link_to issue.title, issue_path(issue) - %ul.controls - - if issue.closed? + - 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 + + - if downvotes > 0 + %li + = icon('thumbs-down') + = downvotes + + - note_count = issue.notes.user.count %li - CLOSED + = link_to issue_path(issue, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do + = icon('comments') + = note_count - - 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 - - - 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 - - .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   - = 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 + = 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? +   + %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')} diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml index 4dbb97b3228..a5fbe9d6128 100644 --- a/app/views/projects/merge_requests/_merge_request.html.haml +++ b/app/views/projects/merge_requests/_merge_request.html.haml @@ -3,73 +3,74 @@ .issue-check = check_box_tag dom_id(merge_request, "selected"), nil, false, 'data-id' => merge_request.id, class: "selected_issue" - .merge-request-title.title - %span.merge-request-title-text - = link_to merge_request.title, merge_request_path(merge_request) - %ul.controls - - if merge_request.merged? + .issue-info-container + .merge-request-title.title + %span.merge-request-title-text + = link_to merge_request.title, merge_request_path(merge_request) + %ul.controls + - if merge_request.merged? + %li + MERGED + - elsif merge_request.closed? + %li + = icon('ban') + CLOSED + + - if merge_request.head_pipeline + %li + = render_pipeline_status(merge_request.head_pipeline) + + - if merge_request.open? && merge_request.broken? + %li + = link_to merge_request_path(merge_request), class: "has-tooltip", title: "Cannot be merged automatically", data: { container: 'body' } do + = icon('exclamation-triangle') + + - if merge_request.assignee + %li + = link_to_member(merge_request.source_project, merge_request.assignee, name: false, title: "Assigned to :name") + + - upvotes, downvotes = merge_request.upvotes, merge_request.downvotes + - if upvotes > 0 + %li + = icon('thumbs-up') + = upvotes + + - if downvotes > 0 + %li + = icon('thumbs-down') + = downvotes + + - note_count = merge_request.related_notes.user.count %li - MERGED - - elsif merge_request.closed? - %li - = icon('ban') - CLOSED + = link_to merge_request_path(merge_request, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do + = icon('comments') + = note_count - - if merge_request.head_pipeline - %li - = render_pipeline_status(merge_request.head_pipeline) + .merge-request-info + #{issuable_reference(merge_request)} · + opened #{time_ago_with_tooltip(merge_request.created_at, placement: 'bottom')} + by #{link_to_member(@project, merge_request.author, avatar: false)} + - if merge_request.target_project.default_branch != merge_request.target_branch +   + = link_to namespace_project_commits_path(merge_request.project.namespace, merge_request.project, merge_request.target_branch) do + = icon('code-fork') + = merge_request.target_branch - - if merge_request.open? && merge_request.broken? - %li - = link_to merge_request_path(merge_request), class: "has-tooltip", title: "Cannot be merged automatically", data: { container: 'body' } do - = icon('exclamation-triangle') + - if merge_request.milestone +   + = link_to namespace_project_merge_requests_path(merge_request.project.namespace, merge_request.project, milestone_title: merge_request.milestone.title) do + = icon('clock-o') + = merge_request.milestone.title - - if merge_request.assignee - %li - = link_to_member(merge_request.source_project, merge_request.assignee, name: false, title: "Assigned to :name") + - if merge_request.labels.any? +   + - merge_request.labels.each do |label| + = link_to_label(label, subject: merge_request.project, type: :merge_request, css_class: 'label-link') - - upvotes, downvotes = merge_request.upvotes, merge_request.downvotes - - if upvotes > 0 - %li - = icon('thumbs-up') - = upvotes + - if merge_request.tasks? +   + %span.task-status + = merge_request.task_status - - if downvotes > 0 - %li - = icon('thumbs-down') - = downvotes - - - note_count = merge_request.related_notes.user.count - %li - = link_to merge_request_path(merge_request, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do - = icon('comments') - = note_count - - .merge-request-info - #{issuable_reference(merge_request)} · - opened #{time_ago_with_tooltip(merge_request.created_at, placement: 'bottom')} - by #{link_to_member(@project, merge_request.author, avatar: false)} - - if merge_request.target_project.default_branch != merge_request.target_branch -   - = link_to namespace_project_commits_path(merge_request.project.namespace, merge_request.project, merge_request.target_branch) do - = icon('code-fork') - = merge_request.target_branch - - - if merge_request.milestone -   - = link_to namespace_project_merge_requests_path(merge_request.project.namespace, merge_request.project, milestone_title: merge_request.milestone.title) do - = icon('clock-o') - = merge_request.milestone.title - - - if merge_request.labels.any? -   - - merge_request.labels.each do |label| - = link_to_label(label, subject: merge_request.project, type: :merge_request, css_class: 'label-link') - - - if merge_request.tasks? -   - %span.task-status - = merge_request.task_status - - .pull-right.hidden-xs - %span updated #{time_ago_with_tooltip(merge_request.updated_at, placement: 'bottom', html_class: 'merge_request_updated_ago')} + .pull-right.hidden-xs + %span updated #{time_ago_with_tooltip(merge_request.updated_at, placement: 'bottom', html_class: 'merge_request_updated_ago')} From 4cde12dfedfb6a747f5c0a8c105159fadfb5d2e5 Mon Sep 17 00:00:00 2001 From: Nur Rony Date: Tue, 7 Feb 2017 16:49:37 +0600 Subject: [PATCH 2/3] adds changelog --- changelogs/unreleased/27610-issue-number-alignment.yml | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelogs/unreleased/27610-issue-number-alignment.yml diff --git a/changelogs/unreleased/27610-issue-number-alignment.yml b/changelogs/unreleased/27610-issue-number-alignment.yml new file mode 100644 index 00000000000..19ab8872c62 --- /dev/null +++ b/changelogs/unreleased/27610-issue-number-alignment.yml @@ -0,0 +1,4 @@ +--- +title: fixes issue number alignment problem in MR and issue list +merge_request: 9020 +author: From ca81c1c06845a0a0f956b0291e38c6d4403c69e0 Mon Sep 17 00:00:00 2001 From: Nur Rony Date: Wed, 8 Feb 2017 13:04:00 +0600 Subject: [PATCH 3/3] replaces media query with flexbox --- app/assets/stylesheets/pages/issuable.scss | 16 +-- .../stylesheets/pages/merge_requests.scss | 7 +- app/views/projects/issues/_issue.html.haml | 111 +++++++++--------- 3 files changed, 69 insertions(+), 65 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? + .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") + + - upvotes, downvotes = issue.upvotes, issue.downvotes + - if upvotes > 0 + %li + = icon('thumbs-up') + = upvotes + + - if downvotes > 0 + %li + = icon('thumbs-down') + = downvotes + + - note_count = issue.notes.user.count %li - CLOSED + = link_to issue_path(issue, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do + = icon('comments') + = note_count - - 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 - - - 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 - - .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   - = 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 + = 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? +   + %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')}