From ad0f5fdc2729ac26268c2638c064abbf14134688 Mon Sep 17 00:00:00 2001 From: Drew Blessing Date: Thu, 27 Mar 2014 17:05:15 -0500 Subject: Improve mobile UI for issues and merge requests --- CHANGELOG | 1 + app/assets/stylesheets/generic/issue_box.scss | 19 ++++++++-- app/assets/stylesheets/sections/issues.scss | 33 ++++++++++++++++++ app/assets/stylesheets/sections/votes.scss | 6 ++++ app/views/projects/issues/_issue_context.html.haml | 40 ++++++++++++---------- app/views/projects/issues/show.html.haml | 31 +++++++++-------- .../merge_requests/show/_context.html.haml | 40 ++++++++++++---------- .../projects/merge_requests/show/_mr_box.html.haml | 6 ++-- .../merge_requests/show/_mr_title.html.haml | 2 +- 9 files changed, 119 insertions(+), 59 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 1e9aeefd19a..d3561d2efc9 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 3db4d908d9c..ccdcc657946 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 d4f8c8108ab..3c48361b2ec 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 13f811e01a1..d683e33e1f0 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 aae101cf40f..425dcb45ddf 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 124eb53571d..b6d3a8edf4d 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 2bd850426a9..5c6734fd24b 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 8855982a2e7..435e916c6dc 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 7676fc137c7..8f78e93df4f 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 -- cgit v1.2.1