diff --git a/CHANGELOG b/CHANGELOG index 8692f61fe36..a355b622609 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -20,6 +20,7 @@ v 8.5.3 - Flush repository caches before renaming projects - Sort starred projects on dashboard based on last activity by default - Show commit message in JIRA mention comment + - Makes issue page and merge request page usable on mobile browsers. v 8.5.2 - Fix sidebar overlapping content when screen width was below 1200px diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index c17d2186e29..321da10a009 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -220,41 +220,41 @@ $ -> .off 'breakpoint:change' .on 'breakpoint:change', (e, breakpoint) -> if breakpoint is 'sm' or breakpoint is 'xs' - $gutterIcon = $('.gutter-toggle').find('i') + $gutterIcon = $('aside .gutter-toggle').find('i') if $gutterIcon.hasClass('fa-angle-double-right') $gutterIcon.closest('a').trigger('click') $(document) .off 'click', 'aside .gutter-toggle' - .on 'click', 'aside .gutter-toggle', (e) -> + .on 'click', 'aside .gutter-toggle', (e, triggered) -> e.preventDefault() $this = $(this) $thisIcon = $this.find 'i' + $allGutterToggleIcons = $('.gutter-toggle i') if $thisIcon.hasClass('fa-angle-double-right') - $thisIcon + $allGutterToggleIcons .removeClass('fa-angle-double-right') .addClass('fa-angle-double-left') - $this - .closest('aside') + $('aside.right-sidebar') .removeClass('right-sidebar-expanded') .addClass('right-sidebar-collapsed') $('.page-with-sidebar') .removeClass('right-sidebar-expanded') .addClass('right-sidebar-collapsed') else - $thisIcon + $allGutterToggleIcons .removeClass('fa-angle-double-left') .addClass('fa-angle-double-right') - $this - .closest('aside') + $('aside.right-sidebar') .removeClass('right-sidebar-collapsed') .addClass('right-sidebar-expanded') $('.page-with-sidebar') .removeClass('right-sidebar-collapsed') .addClass('right-sidebar-expanded') - $.cookie("collapsed_gutter", - $('.right-sidebar') - .hasClass('right-sidebar-collapsed'), { path: '/' }) + if not triggered + $.cookie("collapsed_gutter", + $('.right-sidebar') + .hasClass('right-sidebar-collapsed'), { path: '/' }) bootstrapBreakpoint = undefined; checkBootstrapBreakpoints = -> diff --git a/app/assets/javascripts/merge_request_tabs.js.coffee b/app/assets/javascripts/merge_request_tabs.js.coffee index 23a218b4c7d..58373ba87a5 100644 --- a/app/assets/javascripts/merge_request_tabs.js.coffee +++ b/app/assets/javascripts/merge_request_tabs.js.coffee @@ -195,6 +195,6 @@ class @MergeRequestTabs setTimeout( -> # Only when sidebar is collapsed if $gutterIcon.is('.fa-angle-double-right') - $gutterIcon.closest('a').trigger('click') + $gutterIcon.closest('a').trigger('click',[true]) , 0) diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss index 5d7fd36be16..77a00586b26 100644 --- a/app/assets/stylesheets/framework/issue_box.scss +++ b/app/assets/stylesheets/framework/issue_box.scss @@ -5,11 +5,20 @@ */ .status-box { + + /* Extra small devices (phones, less than 768px) */ + /* No media query since this is the default in Bootstrap */ + padding: 5px 11px; + margin-top: 4px; + /* Small devices (tablets, 768px and up) */ + @media (min-width: $screen-sm-min) { + padding: 0 $gl-btn-padding; + margin-top: 5px; + } + @include border-radius(3px); display: block; float: left; - padding: 0 $gl-btn-padding; - margin-top: 5px; margin-right: 10px; color: #FFF; font-size: $gl-font-size; diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index de947c89c19..6b382e4b1b2 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -27,7 +27,14 @@ } &.right-sidebar-expanded { - padding-right: $gutter_width; + /* Extra small devices (phones, less than 768px) */ + /* No media query since this is the default in Bootstrap */ + padding-right: 0; + /* Small devices (tablets, 768px and up) */ + @media (min-width: $screen-sm-min) { + padding-right: $gutter_width; + } + } } @@ -199,7 +206,12 @@ padding-left: $sidebar_width; &.right-sidebar-collapsed { - padding-right: $sidebar_collapsed_width; + /* Extra small devices (phones, less than 768px) */ + padding-right: 0; + /* Small devices (tablets, 768px and up) */ + @media (min-width: $screen-sm-min) { + padding-right: $sidebar_collapsed_width; + } } .sidebar-wrapper { @@ -225,7 +237,12 @@ padding-left: $sidebar_collapsed_width; &.right-sidebar-collapsed { - padding-right: $sidebar_collapsed_width; + /* Extra small devices (phones, less than 768px) */ + padding-right: 0; + /* Small devices (tablets, 768px and up) */ + @media (min-width: $screen-sm-min) { + padding-right: $sidebar_collapsed_width; + } } .sidebar-wrapper { @@ -292,7 +309,13 @@ } .page-sidebar-collapsed { + /* Extra small devices (phones, less than 768px) */ @include collapsed-sidebar; + padding-right: 0; + /* Small devices (tablets, 768px and up) */ + @media (min-width: $screen-sm-min) { + @include collapsed-sidebar; + } } .page-sidebar-expanded { diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index d93b6ee6733..d3eda1a57e6 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -18,7 +18,8 @@ } .issue-meta { - margin-left: 65px + display: inline-block; + line-height: 20px; } } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index b61d1f180b3..1310e6ad7c7 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -151,7 +151,6 @@ } } - .right-sidebar { position: fixed; top: 58px; @@ -184,6 +183,13 @@ } &.right-sidebar-collapsed { + /* Extra small devices (phones, less than 768px) */ + display: none; + /* Small devices (tablets, 768px and up) */ + @media (min-width: $screen-sm-min) { + display: block + } + width: $sidebar_collapsed_width; padding-top: 0; @@ -247,6 +253,10 @@ } } +.btn-default.gutter-toggle { + margin-top: 4px; +} + .detail-page-description { small { color: $gray-darkest; diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index a2ca00234ed..1b686c58eaf 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -99,18 +99,17 @@ form.edit-issue { .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; + margin-top: 10px; } &:last-child:not(:first-child) { - border-radius: 0 0 4px 4px; + margin-top: 10px; } } } @@ -134,3 +133,11 @@ form.edit-issue { color: $secondary-text; margin-left: 52px; } + +.editor-details { + display: block; + + @media (min-width: $screen-sm-min) { + display: inline-block; + } +} \ No newline at end of file diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb index d6fb629b0c2..c8061fcdc59 100644 --- a/app/helpers/projects_helper.rb +++ b/app/helpers/projects_helper.rb @@ -38,12 +38,16 @@ module ProjectsHelper author_html << image_tag(avatar_icon(author, opts[:size]), width: opts[:size], class: "avatar avatar-inline #{"s#{opts[:size]}" if opts[:size]}", alt:'') if opts[:avatar] # Build name span tag - author_html << content_tag(:span, sanitize(author.name), class: opts[:author_class]) if opts[:name] + if opts[:by_username] + author_html << content_tag(:span, sanitize("@#{author.username}"), class: opts[:author_class]) if opts[:name] + else + author_html << content_tag(:span, sanitize(author.name), class: opts[:author_class]) if opts[:name] + end author_html = author_html.html_safe if opts[:name] - link_to(author_html, user_path(author), class: "author_link").html_safe + link_to(author_html, user_path(author), class: "author_link #{"#{opts[:mobile_classes]}" if opts[:mobile_classes]}").html_safe else title = opts[:title].sub(":name", sanitize(author.name)) link_to(author_html, user_path(author), class: "author_link has_tooltip", data: { 'original-title'.to_sym => title, container: 'body' } ).html_safe diff --git a/app/models/merge_request.rb b/app/models/merge_request.rb index 025b522cf66..cf26183c254 100644 --- a/app/models/merge_request.rb +++ b/app/models/merge_request.rb @@ -490,6 +490,16 @@ class MergeRequest < ActiveRecord::Base end end + def state_icon_name + if merged? + "check" + elsif closed? + "times" + else + "circle-o" + end + end + def target_sha @target_sha ||= target_project.repository.commit(target_branch).sha end diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index 7d8798981e3..617b0437807 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -5,8 +5,39 @@ = render "header_title" .issue - .detail-page-header - .pull-right + .detail-page-header.issuable-header + .pull-left + .status-box{ class: "status-box-closed #{issue_button_visibility(@issue, false)}"} + %span.hidden-xs + Closed + %span.hidden-sm.hidden-md.hidden-lg + = icon('check') + .status-box{ class: "status-box-open #{issue_button_visibility(@issue, true)}"} + %span.hidden-xs + Open + %span.hidden-sm.hidden-md.hidden-lg + = icon('circle-o') + + %a.btn.btn-default.pull-right.hidden-sm.hidden-md.hidden-lg.gutter-toggle{ href: "#" } + = icon('angle-double-left') + + .issue-meta + %strong.identifier + Issue ##{@issue.iid} + %span.creator + by + .editor-details + .editor-details + %strong + = link_to_member(@project, @issue.author, size: 24, mobile_classes: "hidden-xs") + %span.hidden-xs + = '@' + @issue.author.username + %strong + = link_to_member(@project, @issue.author, size: 24, mobile_classes: "hidden-sm hidden-md hidden-lg", + by_username: true, avatar: false) + = time_ago_with_tooltip(@issue.created_at) + + .pull-right.issue-btn-group - if can?(current_user, :create_issue, @project) = link_to new_namespace_project_issue_path(@project.namespace, @project), class: 'btn btn-nr btn-grouped new-issue-link btn-success', title: 'New issue', id: 'new_issue_link' do = icon('plus') @@ -19,19 +50,6 @@ = icon('pencil-square-o') Edit - .pull-left - .status-box{ class: "status-box-closed #{issue_button_visibility(@issue, false)}"} Closed - .status-box{ class: "status-box-open #{issue_button_visibility(@issue, true)}"} Open - - .issue-meta - %span.identifier - Issue ##{@issue.iid} - %span.creator - · - by #{link_to_member(@project, @issue.author, size: 24)} - = '@' + @issue.author.username - · - = time_ago_with_tooltip(@issue.created_at, placement: 'bottom', html_class: 'issue_created_ago') .issue-details.issuable-details .detail-page-description.content-block 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 339031f15b2..d24c12251f3 100644 --- a/app/views/projects/merge_requests/show/_mr_title.html.haml +++ b/app/views/projects/merge_requests/show/_mr_title.html.haml @@ -1,14 +1,25 @@ .detail-page-header .status-box{ class: status_box_class(@merge_request) } - = @merge_request.state_human_name - %span.identifier - Merge Request #{@merge_request.to_reference} - %span.creator - · - by #{link_to_member(@project, @merge_request.author, size: 24)} - = '@' + @merge_request.author.username - · - = time_ago_with_tooltip(@merge_request.created_at) + %span.hidden-xs + = @merge_request.state_human_name + %span.hidden-sm.hidden-md.hidden-lg + = icon(@merge_request.state_icon_name) + %a.btn.btn-default.pull-right.hidden-sm.hidden-md.hidden-lg.gutter-toggle{ href: "#" } + = icon('angle-double-left') + .issue-meta + %strong.identifier + Merge Request ##{@merge_request.iid} + %span.creator + by + .editor-details + %strong + = link_to_member(@project, @merge_request.author, size: 24, mobile_classes: "hidden-xs") + %span.hidden-xs + = '@' + @merge_request.author.username + %strong + = link_to_member(@project, @merge_request.author, size: 24, mobile_classes: "hidden-sm hidden-md hidden-lg", + by_username: true, avatar: false) + = time_ago_with_tooltip(@merge_request.created_at) .issue-btn-group.pull-right - if can?(current_user, :update_merge_request, @merge_request)