Commit 14df110b authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Merge branch 'issue-sidebar-mobile' into 'master'

Issue sidebar mobile

Fixes #13592 
Fixes #14037 

See merge request !3050
parents efe7a6b0 9cae8dbb
...@@ -20,6 +20,7 @@ v 8.5.3 ...@@ -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,38 +220,38 @@ $ -> ...@@ -220,38 +220,38 @@ $ ->
.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')
if not triggered
$.cookie("collapsed_gutter", $.cookie("collapsed_gutter",
$('.right-sidebar') $('.right-sidebar')
.hasClass('right-sidebar-collapsed'), { path: '/' }) .hasClass('right-sidebar-collapsed'), { path: '/' })
......
...@@ -195,6 +195,6 @@ class @MergeRequestTabs ...@@ -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 @@ ...@@ -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,8 +27,15 @@ ...@@ -27,8 +27,15 @@
} }
&.right-sidebar-expanded { &.right-sidebar-expanded {
/* 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; padding-right: $gutter_width;
} }
}
} }
.sidebar-wrapper { .sidebar-wrapper {
...@@ -199,8 +206,13 @@ ...@@ -199,8 +206,13 @@
padding-left: $sidebar_width; padding-left: $sidebar_width;
&.right-sidebar-collapsed { &.right-sidebar-collapsed {
/* 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; padding-right: $sidebar_collapsed_width;
} }
}
.sidebar-wrapper { .sidebar-wrapper {
width: $sidebar_width; width: $sidebar_width;
...@@ -225,8 +237,13 @@ ...@@ -225,8 +237,13 @@
padding-left: $sidebar_collapsed_width; padding-left: $sidebar_collapsed_width;
&.right-sidebar-collapsed { &.right-sidebar-collapsed {
/* 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; padding-right: $sidebar_collapsed_width;
} }
}
.sidebar-wrapper { .sidebar-wrapper {
width: $sidebar_collapsed_width; width: $sidebar_collapsed_width;
...@@ -292,7 +309,13 @@ ...@@ -292,7 +309,13 @@
} }
.page-sidebar-collapsed { .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; @include collapsed-sidebar;
}
} }
.page-sidebar-expanded { .page-sidebar-expanded {
......
...@@ -18,7 +18,8 @@ ...@@ -18,7 +18,8 @@
} }
.issue-meta { .issue-meta {
margin-left: 65px display: inline-block;
line-height: 20px;
} }
} }
......
...@@ -151,7 +151,6 @@ ...@@ -151,7 +151,6 @@
} }
} }
.right-sidebar { .right-sidebar {
position: fixed; position: fixed;
top: 58px; top: 58px;
...@@ -184,6 +183,13 @@ ...@@ -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 @@ ...@@ -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 { ...@@ -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 { ...@@ -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;
}
}
\ No newline at end of file
...@@ -38,12 +38,16 @@ module ProjectsHelper ...@@ -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
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] 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 ...@@ -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 @@ ...@@ -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 @@ ...@@ -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
&middot;
by #{link_to_member(@project, @issue.author, size: 24)}
= '@' + @issue.author.username
&middot;
= 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
......
.detail-page-header .detail-page-header
.status-box{ class: status_box_class(@merge_request) } .status-box{ class: status_box_class(@merge_request) }
%span.hidden-xs
= @merge_request.state_human_name = @merge_request.state_human_name
%span.identifier %span.hidden-sm.hidden-md.hidden-lg
Merge Request #{@merge_request.to_reference} = 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 %span.creator
&middot; by
by #{link_to_member(@project, @merge_request.author, size: 24)} .editor-details
%strong
= link_to_member(@project, @merge_request.author, size: 24, mobile_classes: "hidden-xs")
%span.hidden-xs
= '@' + @merge_request.author.username = '@' + @merge_request.author.username
&middot; %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) = time_ago_with_tooltip(@merge_request.created_at)
.issue-btn-group.pull-right .issue-btn-group.pull-right
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment