Merge branch 'issue-sidebar-mobile' into 'master'
Issue sidebar mobile Fixes #13592 Fixes #14037 See merge request !3050
This commit is contained in:
commit
14df110b78
|
@ -20,6 +20,7 @@ v 8.5.3
|
||||||
- Flush repository caches before renaming projects
|
- Flush repository caches before renaming projects
|
||||||
- Sort starred projects on dashboard based on last activity by default
|
- Sort starred projects on dashboard based on last activity by default
|
||||||
- Show commit message in JIRA mention comment
|
- Show commit message in JIRA mention comment
|
||||||
|
- Makes issue page and merge request page usable on mobile browsers.
|
||||||
|
|
||||||
v 8.5.2
|
v 8.5.2
|
||||||
- Fix sidebar overlapping content when screen width was below 1200px
|
- Fix sidebar overlapping content when screen width was below 1200px
|
||||||
|
|
|
@ -220,41 +220,41 @@ $ ->
|
||||||
.off 'breakpoint:change'
|
.off 'breakpoint:change'
|
||||||
.on 'breakpoint:change', (e, breakpoint) ->
|
.on 'breakpoint:change', (e, breakpoint) ->
|
||||||
if breakpoint is 'sm' or breakpoint is 'xs'
|
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')
|
if $gutterIcon.hasClass('fa-angle-double-right')
|
||||||
$gutterIcon.closest('a').trigger('click')
|
$gutterIcon.closest('a').trigger('click')
|
||||||
|
|
||||||
$(document)
|
$(document)
|
||||||
.off 'click', 'aside .gutter-toggle'
|
.off 'click', 'aside .gutter-toggle'
|
||||||
.on 'click', 'aside .gutter-toggle', (e) ->
|
.on 'click', 'aside .gutter-toggle', (e, triggered) ->
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
$this = $(this)
|
$this = $(this)
|
||||||
$thisIcon = $this.find 'i'
|
$thisIcon = $this.find 'i'
|
||||||
|
$allGutterToggleIcons = $('.gutter-toggle i')
|
||||||
if $thisIcon.hasClass('fa-angle-double-right')
|
if $thisIcon.hasClass('fa-angle-double-right')
|
||||||
$thisIcon
|
$allGutterToggleIcons
|
||||||
.removeClass('fa-angle-double-right')
|
.removeClass('fa-angle-double-right')
|
||||||
.addClass('fa-angle-double-left')
|
.addClass('fa-angle-double-left')
|
||||||
$this
|
$('aside.right-sidebar')
|
||||||
.closest('aside')
|
|
||||||
.removeClass('right-sidebar-expanded')
|
.removeClass('right-sidebar-expanded')
|
||||||
.addClass('right-sidebar-collapsed')
|
.addClass('right-sidebar-collapsed')
|
||||||
$('.page-with-sidebar')
|
$('.page-with-sidebar')
|
||||||
.removeClass('right-sidebar-expanded')
|
.removeClass('right-sidebar-expanded')
|
||||||
.addClass('right-sidebar-collapsed')
|
.addClass('right-sidebar-collapsed')
|
||||||
else
|
else
|
||||||
$thisIcon
|
$allGutterToggleIcons
|
||||||
.removeClass('fa-angle-double-left')
|
.removeClass('fa-angle-double-left')
|
||||||
.addClass('fa-angle-double-right')
|
.addClass('fa-angle-double-right')
|
||||||
$this
|
$('aside.right-sidebar')
|
||||||
.closest('aside')
|
|
||||||
.removeClass('right-sidebar-collapsed')
|
.removeClass('right-sidebar-collapsed')
|
||||||
.addClass('right-sidebar-expanded')
|
.addClass('right-sidebar-expanded')
|
||||||
$('.page-with-sidebar')
|
$('.page-with-sidebar')
|
||||||
.removeClass('right-sidebar-collapsed')
|
.removeClass('right-sidebar-collapsed')
|
||||||
.addClass('right-sidebar-expanded')
|
.addClass('right-sidebar-expanded')
|
||||||
$.cookie("collapsed_gutter",
|
if not triggered
|
||||||
$('.right-sidebar')
|
$.cookie("collapsed_gutter",
|
||||||
.hasClass('right-sidebar-collapsed'), { path: '/' })
|
$('.right-sidebar')
|
||||||
|
.hasClass('right-sidebar-collapsed'), { path: '/' })
|
||||||
|
|
||||||
bootstrapBreakpoint = undefined;
|
bootstrapBreakpoint = undefined;
|
||||||
checkBootstrapBreakpoints = ->
|
checkBootstrapBreakpoints = ->
|
||||||
|
|
|
@ -195,6 +195,6 @@ class @MergeRequestTabs
|
||||||
setTimeout( ->
|
setTimeout( ->
|
||||||
# Only when sidebar is collapsed
|
# Only when sidebar is collapsed
|
||||||
if $gutterIcon.is('.fa-angle-double-right')
|
if $gutterIcon.is('.fa-angle-double-right')
|
||||||
$gutterIcon.closest('a').trigger('click')
|
$gutterIcon.closest('a').trigger('click',[true])
|
||||||
, 0)
|
, 0)
|
||||||
|
|
||||||
|
|
|
@ -5,11 +5,20 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.status-box {
|
.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);
|
@include border-radius(3px);
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
float: left;
|
||||||
padding: 0 $gl-btn-padding;
|
|
||||||
margin-top: 5px;
|
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
font-size: $gl-font-size;
|
font-size: $gl-font-size;
|
||||||
|
|
|
@ -27,7 +27,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.right-sidebar-expanded {
|
&.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;
|
padding-left: $sidebar_width;
|
||||||
|
|
||||||
&.right-sidebar-collapsed {
|
&.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 {
|
.sidebar-wrapper {
|
||||||
|
@ -225,7 +237,12 @@
|
||||||
padding-left: $sidebar_collapsed_width;
|
padding-left: $sidebar_collapsed_width;
|
||||||
|
|
||||||
&.right-sidebar-collapsed {
|
&.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 {
|
.sidebar-wrapper {
|
||||||
|
@ -292,7 +309,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-sidebar-collapsed {
|
.page-sidebar-collapsed {
|
||||||
|
/* Extra small devices (phones, less than 768px) */
|
||||||
@include collapsed-sidebar;
|
@include collapsed-sidebar;
|
||||||
|
padding-right: 0;
|
||||||
|
/* Small devices (tablets, 768px and up) */
|
||||||
|
@media (min-width: $screen-sm-min) {
|
||||||
|
@include collapsed-sidebar;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-sidebar-expanded {
|
.page-sidebar-expanded {
|
||||||
|
|
|
@ -18,7 +18,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.issue-meta {
|
.issue-meta {
|
||||||
margin-left: 65px
|
display: inline-block;
|
||||||
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -151,7 +151,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.right-sidebar {
|
.right-sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 58px;
|
top: 58px;
|
||||||
|
@ -184,6 +183,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&.right-sidebar-collapsed {
|
&.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;
|
width: $sidebar_collapsed_width;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
|
|
||||||
|
@ -247,6 +253,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-default.gutter-toggle {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.detail-page-description {
|
.detail-page-description {
|
||||||
small {
|
small {
|
||||||
color: $gray-darkest;
|
color: $gray-darkest;
|
||||||
|
|
|
@ -99,18 +99,17 @@ form.edit-issue {
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: -1px;
|
|
||||||
|
|
||||||
&:first-child:not(:last-child) {
|
&:first-child:not(:last-child) {
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:first-child):not(:last-child) {
|
&:not(:first-child):not(:last-child) {
|
||||||
border-radius: 0;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child:not(:first-child) {
|
&:last-child:not(:first-child) {
|
||||||
border-radius: 0 0 4px 4px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -134,3 +133,11 @@ form.edit-issue {
|
||||||
color: $secondary-text;
|
color: $secondary-text;
|
||||||
margin-left: 52px;
|
margin-left: 52px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.editor-details {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
@media (min-width: $screen-sm-min) {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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]
|
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
|
# 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
|
author_html = author_html.html_safe
|
||||||
|
|
||||||
if opts[:name]
|
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
|
else
|
||||||
title = opts[:title].sub(":name", sanitize(author.name))
|
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
|
link_to(author_html, user_path(author), class: "author_link has_tooltip", data: { 'original-title'.to_sym => title, container: 'body' } ).html_safe
|
||||||
|
|
|
@ -490,6 +490,16 @@ class MergeRequest < ActiveRecord::Base
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def state_icon_name
|
||||||
|
if merged?
|
||||||
|
"check"
|
||||||
|
elsif closed?
|
||||||
|
"times"
|
||||||
|
else
|
||||||
|
"circle-o"
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
def target_sha
|
def target_sha
|
||||||
@target_sha ||= target_project.repository.commit(target_branch).sha
|
@target_sha ||= target_project.repository.commit(target_branch).sha
|
||||||
end
|
end
|
||||||
|
|
|
@ -5,8 +5,39 @@
|
||||||
= render "header_title"
|
= render "header_title"
|
||||||
|
|
||||||
.issue
|
.issue
|
||||||
.detail-page-header
|
.detail-page-header.issuable-header
|
||||||
.pull-right
|
.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)
|
- 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
|
= 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')
|
= icon('plus')
|
||||||
|
@ -19,19 +50,6 @@
|
||||||
= icon('pencil-square-o')
|
= icon('pencil-square-o')
|
||||||
Edit
|
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
|
.issue-details.issuable-details
|
||||||
.detail-page-description.content-block
|
.detail-page-description.content-block
|
||||||
|
|
|
@ -1,14 +1,25 @@
|
||||||
.detail-page-header
|
.detail-page-header
|
||||||
.status-box{ class: status_box_class(@merge_request) }
|
.status-box{ class: status_box_class(@merge_request) }
|
||||||
= @merge_request.state_human_name
|
%span.hidden-xs
|
||||||
%span.identifier
|
= @merge_request.state_human_name
|
||||||
Merge Request #{@merge_request.to_reference}
|
%span.hidden-sm.hidden-md.hidden-lg
|
||||||
%span.creator
|
= icon(@merge_request.state_icon_name)
|
||||||
·
|
%a.btn.btn-default.pull-right.hidden-sm.hidden-md.hidden-lg.gutter-toggle{ href: "#" }
|
||||||
by #{link_to_member(@project, @merge_request.author, size: 24)}
|
= icon('angle-double-left')
|
||||||
= '@' + @merge_request.author.username
|
.issue-meta
|
||||||
·
|
%strong.identifier
|
||||||
= time_ago_with_tooltip(@merge_request.created_at)
|
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
|
.issue-btn-group.pull-right
|
||||||
- if can?(current_user, :update_merge_request, @merge_request)
|
- if can?(current_user, :update_merge_request, @merge_request)
|
||||||
|
|
Loading…
Reference in New Issue