From 2feb9eb1f0563e7a97bc4f54448200983a842733 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Mon, 29 Feb 2016 15:13:00 -0500 Subject: [PATCH 01/13] Change icons for open close on issue/MR Button full width on phone on MR/issue. --- CHANGELOG | 1 + app/assets/stylesheets/pages/detail_page.scss | 2 +- app/assets/stylesheets/pages/issues.scss | 7 ++-- app/models/merge_request.rb | 10 +++++ app/views/projects/issues/show.html.haml | 41 ++++++++++++------- .../merge_requests/show/_mr_title.html.haml | 6 ++- 6 files changed, 46 insertions(+), 21 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index bcdcc5c8a52..fbd76864dcb 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/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index d93b6ee6733..787f0c8da0f 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -18,7 +18,7 @@ } .issue-meta { - margin-left: 65px + display: inline-block; } } diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index a2ca00234ed..e4a171ed4d5 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; } } } 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..aa70fdafd97 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -5,8 +5,32 @@ = 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') + + .issue-meta + %strong.identifier + Issue ##{@issue.iid} + %span.creator + by + .editor-details + %strong + =link_to_member(@project, @issue.author, size: 24, mobile_classes: "hidden-xs") + =link_to_member(@project, @issue.author, size: 24, + by_username: true, avatar: false) + = time_ago_with_tooltip(@issue.created_at, placement: 'bottom', html_class: 'issue_created_ago') + + .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 +43,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..fc4ade16299 100644 --- a/app/views/projects/merge_requests/show/_mr_title.html.haml +++ b/app/views/projects/merge_requests/show/_mr_title.html.haml @@ -1,6 +1,10 @@ .detail-page-header .status-box{ class: status_box_class(@merge_request) } - = @merge_request.state_human_name + %span.hidden-xs + = @merge_request.state_human_name + %span.hidden-sm.hidden-md.hidden-lg + =icon(@merge_request.state_icon_name) + %span.identifier Merge Request #{@merge_request.to_reference} %span.creator From d913febf0fd120efefdda6668ea73e02f3f6db50 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Mon, 29 Feb 2016 15:43:57 -0500 Subject: [PATCH 02/13] Hide correct author info in header of issuable. --- app/helpers/projects_helper.rb | 8 ++++++-- .../projects/merge_requests/show/_mr_title.html.haml | 6 ++++-- 2 files changed, 10 insertions(+), 4 deletions(-) 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/views/projects/merge_requests/show/_mr_title.html.haml b/app/views/projects/merge_requests/show/_mr_title.html.haml index fc4ade16299..de305fd1d0a 100644 --- a/app/views/projects/merge_requests/show/_mr_title.html.haml +++ b/app/views/projects/merge_requests/show/_mr_title.html.haml @@ -9,8 +9,10 @@ Merge Request #{@merge_request.to_reference} %span.creator · - by #{link_to_member(@project, @merge_request.author, size: 24)} - = '@' + @merge_request.author.username + by + =link_to_member(@project, @merge_request.author, size: 24, mobile_classes: "hidden-xs") + =link_to_member(@project, @merge_request.author, size: 24, + by_username: true, avatar: false) · = time_ago_with_tooltip(@merge_request.created_at) From c3e07b6f9cc22bf0b89ab5b6af8bca70cd3d6366 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Mon, 29 Feb 2016 17:14:38 -0500 Subject: [PATCH 03/13] Move static icon and change appearance. MR meta details media queries. --- .../stylesheets/framework/issue_box.scss | 10 +++++++-- app/assets/stylesheets/pages/detail_page.scss | 1 + app/assets/stylesheets/pages/issues.scss | 9 ++++++++ .../merge_requests/show/_mr_title.html.haml | 22 +++++++++---------- 4 files changed, 29 insertions(+), 13 deletions(-) diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss index 5d7fd36be16..2b72c249368 100644 --- a/app/assets/stylesheets/framework/issue_box.scss +++ b/app/assets/stylesheets/framework/issue_box.scss @@ -5,11 +5,17 @@ */ .status-box { + @media (max-width: $screen-sm-max) { + padding: 5px 11px; + margin-top: 4px; + } + @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/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index 787f0c8da0f..d3eda1a57e6 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -19,6 +19,7 @@ .issue-meta { display: inline-block; + line-height: 20px; } } diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index e4a171ed4d5..2f014d5549f 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -133,3 +133,12 @@ form.edit-issue { color: $secondary-text; margin-left: 52px; } + +.editor-details { + @media (max-width: $screen-sm-max) { + display: block; + } + @media (min-width: $screen-sm-min) { + display: inline-block; + } +} \ No newline at end of file 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 de305fd1d0a..f0c49dc5bde 100644 --- a/app/views/projects/merge_requests/show/_mr_title.html.haml +++ b/app/views/projects/merge_requests/show/_mr_title.html.haml @@ -4,17 +4,17 @@ = @merge_request.state_human_name %span.hidden-sm.hidden-md.hidden-lg =icon(@merge_request.state_icon_name) - - %span.identifier - Merge Request #{@merge_request.to_reference} - %span.creator - · - by - =link_to_member(@project, @merge_request.author, size: 24, mobile_classes: "hidden-xs") - =link_to_member(@project, @merge_request.author, size: 24, - by_username: true, avatar: false) - · - = time_ago_with_tooltip(@merge_request.created_at) + .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") + =link_to_member(@project, @merge_request.author, size: 24, + 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) From cabb61719d11fcfd6e9ae93b0c0227df8a3c5bdd Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Mon, 29 Feb 2016 18:04:40 -0500 Subject: [PATCH 04/13] Open sidebar button on mobile. --- app/assets/javascripts/application.js.coffee | 4 ++-- app/assets/stylesheets/framework/sidebar.scss | 22 ++++++++++++++++--- app/helpers/issuables_helper.rb | 2 +- app/views/projects/issues/show.html.haml | 3 +++ 4 files changed, 25 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index c17d2186e29..570adc27011 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -225,8 +225,8 @@ $ -> $gutterIcon.closest('a').trigger('click') $(document) - .off 'click', 'aside .gutter-toggle' - .on 'click', 'aside .gutter-toggle', (e) -> + .off 'click', '.gutter-toggle' + .on 'click', '.gutter-toggle', (e) -> e.preventDefault() $this = $(this) $thisIcon = $this.find 'i' diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index de947c89c19..f866151ae0c 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -199,7 +199,12 @@ padding-left: $sidebar_width; &.right-sidebar-collapsed { - padding-right: $sidebar_collapsed_width; + @media (max-width: $screen-sm-max) { + padding-right: 0; + } + @media (min-width: $screen-sm-min) { + padding-right: $sidebar_collapsed_width; + } } .sidebar-wrapper { @@ -225,7 +230,12 @@ padding-left: $sidebar_collapsed_width; &.right-sidebar-collapsed { - padding-right: $sidebar_collapsed_width; + @media (max-width: $screen-sm-max) { + padding-right: 0; + } + @media (min-width: $screen-sm-min) { + padding-right: $sidebar_collapsed_width; + } } .sidebar-wrapper { @@ -292,7 +302,13 @@ } .page-sidebar-collapsed { - @include collapsed-sidebar; + @media (max-width: $screen-sm-max) { + @include collapsed-sidebar; + padding-right: 0; + } + @media (min-width: $screen-sm-min) { + @include collapsed-sidebar; + } } .page-sidebar-expanded { diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb index 91a3aa371ef..1d1098c5df4 100644 --- a/app/helpers/issuables_helper.rb +++ b/app/helpers/issuables_helper.rb @@ -5,7 +5,7 @@ module IssuablesHelper end def sidebar_gutter_collapsed_class - "right-sidebar-#{sidebar_gutter_collapsed? ? 'collapsed' : 'expanded'}" + "hidden-xs right-sidebar-#{sidebar_gutter_collapsed? ? 'collapsed' : 'expanded'}" end def issuables_count(issuable) diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index aa70fdafd97..3e2557e033b 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -18,6 +18,9 @@ %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: "#" } + « + .issue-meta %strong.identifier Issue ##{@issue.iid} From 61ce134fa9c7fa8cd769a13a15309eaccce77371 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Tue, 1 Mar 2016 10:07:18 -0500 Subject: [PATCH 05/13] Small outside aside shrink sidebar button for mobile only. --- app/assets/javascripts/application.js.coffee | 13 +++++++++++++ app/views/projects/issues/show.html.haml | 2 +- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 570adc27011..4823bb6b7bd 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -231,6 +231,13 @@ $ -> $this = $(this) $thisIcon = $this.find 'i' if $thisIcon.hasClass('fa-angle-double-right') + # It's open -> close it + if bootstrapBreakpoint is 'xs' + # it's the gutter open button outside the aside + if not $this.closest('aside').length + $('aside').addClass('hidden-xs') + + console.log(bootstrapBreakpoint); $thisIcon .removeClass('fa-angle-double-right') .addClass('fa-angle-double-left') @@ -242,6 +249,12 @@ $ -> .removeClass('right-sidebar-expanded') .addClass('right-sidebar-collapsed') else + # It's closed -> open it + if bootstrapBreakpoint is 'xs' + # it's the gutter open button outside the aside + if not $this.closest('aside').length + $('aside').removeClass('hidden-xs') + $thisIcon .removeClass('fa-angle-double-left') .addClass('fa-angle-double-right') diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index 3e2557e033b..0c225ee3fe1 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -19,7 +19,7 @@ =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 From cabd228f70c9fef21d929eede06910b3d111fc29 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Wed, 2 Mar 2016 12:17:26 -0500 Subject: [PATCH 06/13] Fix bugs with open and close buttons --- app/assets/javascripts/application.js.coffee | 26 +++++-------------- app/assets/stylesheets/pages/issuable.scss | 19 +++++++++++++- app/helpers/issuables_helper.rb | 2 +- .../merge_requests/show/_mr_title.html.haml | 2 ++ 4 files changed, 27 insertions(+), 22 deletions(-) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 4823bb6b7bd..b2befc4273d 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -220,7 +220,7 @@ $ -> .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') @@ -230,36 +230,22 @@ $ -> e.preventDefault() $this = $(this) $thisIcon = $this.find 'i' + $allGutterToggleIcons = $('.gutter-toggle i') if $thisIcon.hasClass('fa-angle-double-right') - # It's open -> close it - if bootstrapBreakpoint is 'xs' - # it's the gutter open button outside the aside - if not $this.closest('aside').length - $('aside').addClass('hidden-xs') - - console.log(bootstrapBreakpoint); - $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 - # It's closed -> open it - if bootstrapBreakpoint is 'xs' - # it's the gutter open button outside the aside - if not $this.closest('aside').length - $('aside').removeClass('hidden-xs') - - $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') diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index b61d1f180b3..757cb9d2b8c 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; @@ -174,6 +173,12 @@ .gutter-toggle { border-left: 1px solid $border-gray-light; + @media (max-width: $screen-sm-max) { + display: none; + } + @media (min-width: $screen-sm-min) { + display: block + } } } @@ -184,6 +189,14 @@ } &.right-sidebar-collapsed { + + @media (max-width: $screen-sm-max) { + display: none; + } + @media (min-width: $screen-sm-min) { + display: block + } + width: $sidebar_collapsed_width; padding-top: 0; @@ -247,6 +260,10 @@ } } +.btn-default.gutter-toggle { + margin-top: 4px; +} + .detail-page-description { small { color: $gray-darkest; diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb index 1d1098c5df4..91a3aa371ef 100644 --- a/app/helpers/issuables_helper.rb +++ b/app/helpers/issuables_helper.rb @@ -5,7 +5,7 @@ module IssuablesHelper end def sidebar_gutter_collapsed_class - "hidden-xs right-sidebar-#{sidebar_gutter_collapsed? ? 'collapsed' : 'expanded'}" + "right-sidebar-#{sidebar_gutter_collapsed? ? 'collapsed' : 'expanded'}" end def issuables_count(issuable) 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 f0c49dc5bde..c0e1839757b 100644 --- a/app/views/projects/merge_requests/show/_mr_title.html.haml +++ b/app/views/projects/merge_requests/show/_mr_title.html.haml @@ -4,6 +4,8 @@ = @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} From 6e6a25187d54798074e18c47935e992f9e9588cd Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Wed, 2 Mar 2016 13:01:15 -0500 Subject: [PATCH 07/13] Combining recent change to have username in header with my MR. --- app/views/projects/issues/show.html.haml | 14 +++++++++----- .../merge_requests/show/_mr_title.html.haml | 5 ++++- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index 0c225ee3fe1..e8ab7f7af72 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -27,11 +27,15 @@ %span.creator by .editor-details - %strong - =link_to_member(@project, @issue.author, size: 24, mobile_classes: "hidden-xs") - =link_to_member(@project, @issue.author, size: 24, - by_username: true, avatar: false) - = time_ago_with_tooltip(@issue.created_at, placement: 'bottom', html_class: 'issue_created_ago') + .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) 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 c0e1839757b..c28e9d6f302 100644 --- a/app/views/projects/merge_requests/show/_mr_title.html.haml +++ b/app/views/projects/merge_requests/show/_mr_title.html.haml @@ -14,7 +14,10 @@ .editor-details %strong =link_to_member(@project, @merge_request.author, size: 24, mobile_classes: "hidden-xs") - =link_to_member(@project, @merge_request.author, size: 24, + %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) From 614cd8d12e5970967b9eab789665c2a195ddbba7 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Thu, 3 Mar 2016 12:28:06 -0500 Subject: [PATCH 08/13] Sidebar overflow on xs side. --- app/assets/stylesheets/framework/sidebar.scss | 8 +++++++- app/assets/stylesheets/pages/issuable.scss | 6 ------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index f866151ae0c..ddc9ccad62d 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -27,7 +27,13 @@ } &.right-sidebar-expanded { - padding-right: $gutter_width; + @media (max-width: $screen-sm-max) { + padding-right: 0; + } + @media (min-width: $screen-sm-min) { + padding-right: $gutter_width; + } + } } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 757cb9d2b8c..968de90c00d 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -173,12 +173,6 @@ .gutter-toggle { border-left: 1px solid $border-gray-light; - @media (max-width: $screen-sm-max) { - display: none; - } - @media (min-width: $screen-sm-min) { - display: block - } } } From d98dc53106181f695cadd2b9a3a18de5a2a0b485 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Fri, 4 Mar 2016 08:53:02 -0500 Subject: [PATCH 09/13] Correct media queries for small devices and tablets. --- app/assets/stylesheets/framework/issue_box.scss | 11 +++++++---- app/assets/stylesheets/framework/sidebar.scss | 7 ++++--- app/views/projects/issues/show.html.haml | 4 ++-- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss index 2b72c249368..77a00586b26 100644 --- a/app/assets/stylesheets/framework/issue_box.scss +++ b/app/assets/stylesheets/framework/issue_box.scss @@ -5,14 +5,17 @@ */ .status-box { - @media (max-width: $screen-sm-max) { - padding: 5px 11px; - margin-top: 4px; - } + + /* 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; diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index ddc9ccad62d..23e8a121bcc 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -27,9 +27,10 @@ } &.right-sidebar-expanded { - @media (max-width: $screen-sm-max) { - padding-right: 0; - } + /* 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; } diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index e8ab7f7af72..6cc5ce44b43 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -11,12 +11,12 @@ %span.hidden-xs Closed %span.hidden-sm.hidden-md.hidden-lg - =icon('check') + = 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') + = icon('circle-o') %a.btn.btn-default.pull-right.hidden-sm.hidden-md.hidden-lg.gutter-toggle{ href: "#" } =icon('angle-double-left') From c060823d02e9fc204b650eee889f282442276c25 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Fri, 4 Mar 2016 09:05:32 -0500 Subject: [PATCH 10/13] Fix remaining media queries using correct bs paradigms. --- app/assets/stylesheets/framework/sidebar.scss | 20 +++++++++---------- app/assets/stylesheets/pages/issuable.scss | 7 +++---- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 23e8a121bcc..6b382e4b1b2 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -206,9 +206,9 @@ padding-left: $sidebar_width; &.right-sidebar-collapsed { - @media (max-width: $screen-sm-max) { - padding-right: 0; - } + /* 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; } @@ -237,9 +237,9 @@ padding-left: $sidebar_collapsed_width; &.right-sidebar-collapsed { - @media (max-width: $screen-sm-max) { - padding-right: 0; - } + /* 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; } @@ -309,10 +309,10 @@ } .page-sidebar-collapsed { - @media (max-width: $screen-sm-max) { - @include collapsed-sidebar; - padding-right: 0; - } + /* 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; } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 968de90c00d..1310e6ad7c7 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -183,10 +183,9 @@ } &.right-sidebar-collapsed { - - @media (max-width: $screen-sm-max) { - display: none; - } + /* Extra small devices (phones, less than 768px) */ + display: none; + /* Small devices (tablets, 768px and up) */ @media (min-width: $screen-sm-min) { display: block } From 8835514b10871b7fa46813b194ebf3320991b8ff Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Fri, 4 Mar 2016 13:24:24 -0500 Subject: [PATCH 11/13] Fixes style consistencies. --- app/assets/stylesheets/pages/issues.scss | 5 ++--- app/views/projects/issues/show.html.haml | 6 +++--- .../projects/merge_requests/show/_mr_title.html.haml | 8 ++++---- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 2f014d5549f..1b686c58eaf 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -135,9 +135,8 @@ form.edit-issue { } .editor-details { - @media (max-width: $screen-sm-max) { - display: block; - } + display: block; + @media (min-width: $screen-sm-min) { display: inline-block; } diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index 6cc5ce44b43..617b0437807 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -19,7 +19,7 @@ = icon('circle-o') %a.btn.btn-default.pull-right.hidden-sm.hidden-md.hidden-lg.gutter-toggle{ href: "#" } - =icon('angle-double-left') + = icon('angle-double-left') .issue-meta %strong.identifier @@ -29,11 +29,11 @@ .editor-details .editor-details %strong - =link_to_member(@project, @issue.author, size: 24, mobile_classes: "hidden-xs") + = 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", + = 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) 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 c28e9d6f302..d24c12251f3 100644 --- a/app/views/projects/merge_requests/show/_mr_title.html.haml +++ b/app/views/projects/merge_requests/show/_mr_title.html.haml @@ -3,9 +3,9 @@ %span.hidden-xs = @merge_request.state_human_name %span.hidden-sm.hidden-md.hidden-lg - =icon(@merge_request.state_icon_name) + = 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') + = icon('angle-double-left') .issue-meta %strong.identifier Merge Request ##{@merge_request.iid} @@ -13,11 +13,11 @@ by .editor-details %strong - =link_to_member(@project, @merge_request.author, size: 24, mobile_classes: "hidden-xs") + = 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", + = 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) From 9afab2963c33e935069ed88069b548d85d478f7f Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Fri, 4 Mar 2016 14:29:20 -0500 Subject: [PATCH 12/13] Only save right sidebar position cookie if user did the collapsing. --- app/assets/javascripts/application.js.coffee | 11 ++++++----- app/assets/javascripts/merge_request_tabs.js.coffee | 2 +- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index b2befc4273d..d372e96cc50 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -225,8 +225,8 @@ $ -> $gutterIcon.closest('a').trigger('click') $(document) - .off 'click', '.gutter-toggle' - .on 'click', '.gutter-toggle', (e) -> + .off 'click', 'aside .gutter-toggle' + .on 'click', 'aside .gutter-toggle', (e, manual) -> e.preventDefault() $this = $(this) $thisIcon = $this.find 'i' @@ -251,9 +251,10 @@ $ -> $('.page-with-sidebar') .removeClass('right-sidebar-collapsed') .addClass('right-sidebar-expanded') - $.cookie("collapsed_gutter", - $('.right-sidebar') - .hasClass('right-sidebar-collapsed'), { path: '/' }) + if not manual + $.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) From 9cae8dbbfb990f929da08fb75657596a72f85fc0 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Fri, 4 Mar 2016 14:40:52 -0500 Subject: [PATCH 13/13] Uses the correct variable names for this situation. --- app/assets/javascripts/application.js.coffee | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index d372e96cc50..321da10a009 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -226,7 +226,7 @@ $ -> $(document) .off 'click', 'aside .gutter-toggle' - .on 'click', 'aside .gutter-toggle', (e, manual) -> + .on 'click', 'aside .gutter-toggle', (e, triggered) -> e.preventDefault() $this = $(this) $thisIcon = $this.find 'i' @@ -251,7 +251,7 @@ $ -> $('.page-with-sidebar') .removeClass('right-sidebar-collapsed') .addClass('right-sidebar-expanded') - if not manual + if not triggered $.cookie("collapsed_gutter", $('.right-sidebar') .hasClass('right-sidebar-collapsed'), { path: '/' })