Skip to content

G
gitlab-ce
Commit 14df110b authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets
Browse files
Options

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

Issue sidebar mobile

Fixes #13592 
Fixes #14037 

See merge request !3050
parents efe7a6b0 9cae8dbb
Hide whitespace changes
Inline Side-by-side
Showing with 143 additions and 49 deletions
CHANGELOG
View file @ 14df110b
......@@ -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
......
app/assets/javascripts/application.js.coffee
View file @ 14df110b
......@@ -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 = ->
......
app/assets/javascripts/merge_request_tabs.js.coffee
View file @ 14df110b
......@@ -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)
app/assets/stylesheets/framework/issue_box.scss
View file @ 14df110b
......@@ -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;
......
app/assets/stylesheets/framework/sidebar.scss
View file @ 14df110b
......@@ -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 {
......
app/assets/stylesheets/pages/detail_page.scss
View file @ 14df110b
......@@ -18,7 +18,8 @@
}
.issue-meta {
margin-left: 65px
display: inline-block;
line-height: 20px;
}
}
......
app/assets/stylesheets/pages/issuable.scss
View file @ 14df110b
......@@ -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;
......
app/assets/stylesheets/pages/issues.scss
View file @ 14df110b
......@@ -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
app/helpers/projects_helper.rb
View file @ 14df110b
......@@ -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
......
app/models/merge_request.rb
View file @ 14df110b
......@@ -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
......
app/views/projects/issues/show.html.haml
View file @ 14df110b
......@@ -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
&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
.detail-page-description.content-block
......
app/views/projects/merge_requests/show/_mr_title.html.haml
View file @ 14df110b
.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
&middot;
by #{link_to_member(@project, @merge_request.author, size: 24)}
= '@' + @merge_request.author.username
&middot;
= 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)
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7