diff --git a/CHANGELOG b/CHANGELOG index 1e9aeefd19a4b5cd76bc9ebb9129f8cd3cadddcc..d3561d2efc94ab3baca0962ccd93e3ae1b899a51 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -8,6 +8,7 @@ v 6.9.0 - Fix syntax highlighting for code comments blocks - Improve comments loading logic - Stop refreshing comments when the tab is hidden + - Improve issue and merge request mobile UI (Drew Blessing) v 6.8.0 - Ability to at mention users that are participating in issue and merge req. discussion diff --git a/app/assets/stylesheets/generic/issue_box.scss b/app/assets/stylesheets/generic/issue_box.scss index 3db4d908d9c693dc5eb0097ce01ebc88f937425b..ccdcc657946662cd350606ad3fe1d6cc8e253885 100644 --- a/app/assets/stylesheets/generic/issue_box.scss +++ b/app/assets/stylesheets/generic/issue_box.scss @@ -70,7 +70,6 @@ } .state { - height: 34px; border-bottom: 1px solid #DDD; line-height: 32px; } @@ -89,6 +88,18 @@ border: none; border-top: 1px solid #eee; padding: 15px 25px; + + // Reset text align for children + .text-right > * { text-align: left; } + + @media (max-width: $screen-xs-max) { + // Don't right align on mobile + .text-right { text-align: left; } + + .row .col-md-6 { + padding-top: 5px; + } + } } .description { @@ -106,7 +117,11 @@ padding: 1px 25px; text-align: center; text-shadow: none; - margin-right: 20px; display: inline-block; + line-height: 34px; + } + + .creator { + padding: 2px 15px; } } diff --git a/app/assets/stylesheets/sections/issues.scss b/app/assets/stylesheets/sections/issues.scss index d4f8c8108abda6143772f9eece42e0ae7c3e6fe8..3c48361b2ec02ec4b596cff30f7fab9079047d64 100644 --- a/app/assets/stylesheets/sections/issues.scss +++ b/app/assets/stylesheets/sections/issues.scss @@ -143,3 +143,36 @@ form.edit-issue { border-color: #E5E5E5; } } + +@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%; + margin-top: -1px; + + &:first-child:not(:last-child) { + border-radius: 4px 4px 0 0; + } + + &:not(:first-child):not(:last-child) { + border-radius: 0; + } + + &:last-child:not(:first-child) { + border-radius: 0 0 4px 4px; + } + } + } +} diff --git a/app/assets/stylesheets/sections/votes.scss b/app/assets/stylesheets/sections/votes.scss index 13f811e01a1680bf901098643bf09b94530b38b1..d683e33e1f05276ac1f9acf7010b7d78b4c1c41b 100644 --- a/app/assets/stylesheets/sections/votes.scss +++ b/app/assets/stylesheets/sections/votes.scss @@ -40,4 +40,10 @@ .votes-holder { float: right; width: 250px; + + @media (max-width: $screen-xs-max) { + width: 100%; + margin-top: 5px; + margin-bottom: 10px; + } } diff --git a/app/views/projects/issues/_issue_context.html.haml b/app/views/projects/issues/_issue_context.html.haml index aae101cf40f6ee78b8895e5b43dd7255db73ed88..425dcb45ddf6dea0b2021f9ec73d7eed20b7cd3d 100644 --- a/app/views/projects/issues/_issue_context.html.haml +++ b/app/views/projects/issues/_issue_context.html.haml @@ -1,22 +1,24 @@ = form_for [@project, @issue], remote: true, html: {class: 'edit-issue inline-update'} do |f| - %strong.append-right-10 - Assignee: + .row + .col-md-6 + %strong.append-right-10 + Assignee: - - if can?(current_user, :modify_issue, @issue) - = project_users_select_tag('issue[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @issue.assignee_id) - - elsif issue.assignee - = link_to_member(@project, @issue.assignee) - - else - None + - if can?(current_user, :modify_issue, @issue) + = project_users_select_tag('issue[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @issue.assignee_id) + - elsif issue.assignee + = link_to_member(@project, @issue.assignee) + - else + None - .pull-right - %strong.append-right-10 - Milestone: - - if can?(current_user, :modify_issue, @issue) - = f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone (none):" }, {class: 'select2 select2-compact'}) - = hidden_field_tag :issue_context - = f.submit class: 'btn' - - elsif issue.milestone - = link_to issue.milestone.title, project_milestone_path - - else - None + .col-md-6.text-right + %strong.append-right-10 + Milestone: + - if can?(current_user, :modify_issue, @issue) + = f.select(:milestone_id, milestone_options(@issue), { include_blank: "Select milestone" }, {class: 'select2 select2-compact'}) + = hidden_field_tag :issue_context + = f.submit class: 'btn' + - elsif issue.milestone + = link_to issue.milestone.title, project_milestone_path + - else + None diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index 124eb53571d2228be485848a9d6b04deba998cda..b6d3a8edf4da9a22cfb07d8614ac613ea888ddab 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -1,7 +1,7 @@ %h3.page-title Issue ##{@issue.iid} - %span.pull-right + %span.pull-right.issue-btn-group - if can?(current_user, :write_issue, @project) = link_to new_project_issue_path(@project), class: "btn btn-grouped", title: "New Issue", id: "new_issue_link" do %i.icon-plus @@ -16,28 +16,29 @@ %i.icon-edit Edit -.votes-holder - #votes= render 'votes/votes_block', votable: @issue +.clearfix + .votes-holder + #votes= render 'votes/votes_block', votable: @issue -.back-link - = link_to project_issues_path(@project) do - ← To issues list - %span.milestone-nav-link - - if @issue.milestone - | - %span.light Milestone - = link_to project_milestone_path(@project, @issue.milestone) do - = @issue.milestone.title + .back-link + = link_to project_issues_path(@project) do + ← To issues list + %span.milestone-nav-link + - if @issue.milestone + | + %span.light Milestone + = link_to project_milestone_path(@project, @issue.milestone) do + = @issue.milestone.title .issue-box{ class: issue_box_class(@issue) } - .state - %span.state-label + .state.clearfix + .state-label.col-sm-2.col-xs-12 - if @issue.closed? Closed - else Open - %span.creator + %span.creator.col-sm-9.col-xs-12 Created by #{link_to_member(@project, @issue.author)} #{time_ago_with_tooltip(@issue.created_at)} %h4.title diff --git a/app/views/projects/merge_requests/show/_context.html.haml b/app/views/projects/merge_requests/show/_context.html.haml index 2bd850426a907fb47b1bc90849be06b79c027c9d..5c6734fd24be3ede39a81eb12bce34410da987db 100644 --- a/app/views/projects/merge_requests/show/_context.html.haml +++ b/app/views/projects/merge_requests/show/_context.html.haml @@ -1,22 +1,24 @@ = form_for [@project, @merge_request], remote: true, html: {class: 'edit-merge_request inline-update'} do |f| - %strong.append-right-10 - Assignee: + .row + .col-md-6 + %strong.append-right-10 + Assignee: - - if can?(current_user, :modify_merge_request, @merge_request) - = project_users_select_tag('merge_request[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @merge_request.assignee_id) - - elsif merge_request.assignee - = link_to_member(@project, @merge_request.assignee) - - else - None + - if can?(current_user, :modify_merge_request, @merge_request) + = project_users_select_tag('merge_request[assignee_id]', placeholder: 'Select assignee', class: 'custom-form-control', selected: @merge_request.assignee_id) + - elsif merge_request.assignee + = link_to_member(@project, @merge_request.assignee) + - else + None - .pull-right - %strong.append-right-10 - Milestone: - - if can?(current_user, :modify_merge_request, @merge_request) - = f.select(:milestone_id, milestone_options(@merge_request), { include_blank: "Select milestone (none):" }, {class: 'select2 select2-compact'}) - = hidden_field_tag :merge_request_context - = f.submit class: 'btn' - - elsif merge_request.milestone - = link_to merge_request.milestone.title, project_milestone_path - - else - None + .col-md-6.text-right + %strong.append-right-10 + Milestone: + - if can?(current_user, :modify_merge_request, @merge_request) + = f.select(:milestone_id, milestone_options(@merge_request), { include_blank: "Select milestone" }, {class: 'select2 select2-compact'}) + = hidden_field_tag :merge_request_context + = f.submit class: 'btn' + - elsif merge_request.milestone + = link_to merge_request.milestone.title, project_milestone_path + - else + None diff --git a/app/views/projects/merge_requests/show/_mr_box.html.haml b/app/views/projects/merge_requests/show/_mr_box.html.haml index 8855982a2e752c7ca80dc0c637d960d01a83ab5a..435e916c6dcafb8aca6df7f136eb057b4e205d44 100644 --- a/app/views/projects/merge_requests/show/_mr_box.html.haml +++ b/app/views/projects/merge_requests/show/_mr_box.html.haml @@ -1,6 +1,6 @@ .issue-box{ class: issue_box_class(@merge_request) } - .state - %span.state-label + .state.clearfix + %span.state-label.col-sm-2.col-xs-12 - if @merge_request.merged? Merged - elsif @merge_request.closed? @@ -8,7 +8,7 @@ - else Open - %span.creator + %span.creator.col-sm-9.col-xs-12 Created by #{link_to_member(@project, @merge_request.author)} #{time_ago_with_tooltip(@merge_request.created_at)} %h4.title diff --git a/app/views/projects/merge_requests/show/_mr_title.html.haml b/app/views/projects/merge_requests/show/_mr_title.html.haml index 7676fc137c7b35e6044a033916ad2409db2f0744..8f78e93df4f12d19e50948fdcaf99ef2c72e2cdb 100644 --- a/app/views/projects/merge_requests/show/_mr_title.html.haml +++ b/app/views/projects/merge_requests/show/_mr_title.html.haml @@ -1,7 +1,7 @@ %h3.page-title = "Merge Request ##{@merge_request.iid}" - %span.pull-right + %span.pull-right.issue-btn-group - if can?(current_user, :modify_merge_request, @merge_request) - if @merge_request.open? .btn-group.pull-left