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
|
||||
- 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
|
||||
|
|
|
@ -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 = ->
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -18,7 +18,8 @@
|
|||
}
|
||||
|
||||
.issue-meta {
|
||||
margin-left: 65px
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in New Issue