diff options
-rw-r--r-- | app/assets/javascripts/merge_request.js | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/detail_page.scss | 35 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issuable.scss | 38 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issues.scss | 17 | ||||
-rw-r--r-- | app/views/projects/issues/show.html.haml | 12 | ||||
-rw-r--r-- | app/views/projects/merge_requests/_mr_title.html.haml | 12 | ||||
-rw-r--r-- | app/views/shared/snippets/_header.html.haml | 21 | ||||
-rw-r--r-- | spec/features/projects/issuable_templates_spec.rb | 4 | ||||
-rw-r--r-- | spec/javascripts/merge_request_spec.js | 4 |
9 files changed, 66 insertions, 79 deletions
diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js index af0658eb668..1cc500db796 100644 --- a/app/assets/javascripts/merge_request.js +++ b/app/assets/javascripts/merge_request.js @@ -128,7 +128,7 @@ import IssuablesHelper from './helpers/issuables_helper'; }; MergeRequest.prototype.hideCloseButton = function() { - const el = document.querySelector('.merge-request .issuable-actions'); + const el = document.querySelector('.merge-request .js-issuable-actions'); const closeDropdownItem = el.querySelector('li.close-item'); if (closeDropdownItem) { closeDropdownItem.classList.add('hidden'); diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index 538e50ee306..52e4d904b9b 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -13,6 +13,41 @@ .author_link { white-space: nowrap; } + + @media (max-width: $screen-xs-max) { + display: block; + } +} + +.detail-page-header-body { + position: relative; + line-height: 35px; + display: flex; + flex-grow: 1; + + @media (min-width: $screen-sm-min) { + padding-left: 0; + padding-right: 0; + } +} + +.detail-page-header-actions { + @include new-style-dropdown; + + align-self: center; + flex-shrink: 0; + flex: 0 0 auto; + + @media (max-width: $screen-xs-max) { + width: 100%; + margin-top: 10px; + + > .issue-btn-group { + > .btn { + width: 100%; + } + } + } } .detail-page-description { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index d9d00197dc0..a8bb0c8cb87 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -622,50 +622,16 @@ margin-top: 0; height: auto; align-self: center; - - @media (max-width: $screen-xs-max) { - position: absolute; - top: 0; - left: 0; - } -} - -.issuable-header { - position: relative; - padding-left: 45px; - padding-right: 45px; - line-height: 35px; - display: flex; - flex-grow: 1; - - @media (min-width: $screen-sm-min) { - float: left; - padding-left: 0; - padding-right: 0; - } -} - -.issuable-actions { - @include new-style-dropdown; - - align-self: center; - flex-shrink: 0; - flex: 0 0 auto; - - @media (min-width: $screen-sm-min) { - float: right; - } } .issuable-gutter-toggle { @media (max-width: $screen-sm-max) { - position: absolute; - top: 0; - right: 0; + margin-left: $btn-side-margin; } } .issuable-meta { + flex: 1; display: inline-block; font-size: 14px; line-height: 24px; diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 8bb68ad2425..ae6881acab2 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -134,26 +134,11 @@ ul.related-merge-requests > li { } @media (max-width: $screen-xs-max) { - .detail-page-header, - .issuable-header { - display: block; - + .detail-page-header { .issuable-meta { line-height: 18px; } } - - .issuable-actions { - margin-top: 10px; - - .issue-btn-group { - width: 100%; - - .btn { - width: 100%; - } - } - } } .issue-form { diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml index b9fec8af4d7..9978ac48dc3 100644 --- a/app/views/projects/issues/show.html.haml +++ b/app/views/projects/issues/show.html.haml @@ -12,8 +12,8 @@ - can_update_issue = can?(current_user, :update_issue, @issue) - can_report_spam = @issue.submittable_as_spam_by?(current_user) -.clearfix.detail-page-header - .issuable-header +.detail-page-header + .detail-page-header-body .issuable-status-box.status-box.status-box-closed{ class: issue_button_visibility(@issue, false) } = icon('check', class: "hidden-sm hidden-md hidden-lg") %span.hidden-xs @@ -22,9 +22,6 @@ = icon('circle-o', class: "hidden-sm hidden-md hidden-lg") %span.hidden-xs Open - %a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" } - = icon('angle-double-left') - .issuable-meta - if @issue.confidential = icon('eye-slash', class: 'issuable-warning-icon') @@ -32,7 +29,10 @@ = icon('lock', class: 'issuable-warning-icon') = issuable_meta(@issue, @project, "Issue") - .issuable-actions.js-issuable-actions + %a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" } + = icon('angle-double-left') + + .detail-page-header-actions.js-issuable-actions .clearfix.issue-btn-group.dropdown %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } } Options diff --git a/app/views/projects/merge_requests/_mr_title.html.haml b/app/views/projects/merge_requests/_mr_title.html.haml index 72d5c4961ec..acda5b4ed8c 100644 --- a/app/views/projects/merge_requests/_mr_title.html.haml +++ b/app/views/projects/merge_requests/_mr_title.html.haml @@ -4,22 +4,22 @@ .alert.alert-danger %p The source project of this merge request has been removed. -.clearfix.detail-page-header - .issuable-header +.detail-page-header + .detail-page-header-body .issuable-status-box.status-box{ class: status_box_class(@merge_request) } = icon(@merge_request.state_icon_name, class: "hidden-sm hidden-md hidden-lg") %span.hidden-xs = @merge_request.state_human_name - %a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" } - = icon('angle-double-left') - .issuable-meta - if @merge_request.discussion_locked? = icon('lock', class: 'issuable-warning-icon') = issuable_meta(@merge_request, @project, "Merge request") - .issuable-actions.js-issuable-actions + %a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" } + = icon('angle-double-left') + + .detail-page-header-actions.js-issuable-actions .clearfix.issue-btn-group.dropdown %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } } Options diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml index 119d189f21d..12df79a28c7 100644 --- a/app/views/shared/snippets/_header.html.haml +++ b/app/views/shared/snippets/_header.html.haml @@ -1,14 +1,15 @@ -.detail-page-header.clearfix - .snippet-box.has-tooltip.inline.append-right-5{ title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: "body" } } - %span.sr-only - = visibility_level_label(@snippet.visibility_level) - = visibility_level_icon(@snippet.visibility_level, fw: false) - %span.creator - Authored - = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago') - by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "hidden-xs")} +.detail-page-header + .detail-page-header-body + .snippet-box.has-tooltip.inline.append-right-5{ title: snippet_visibility_level_description(@snippet.visibility_level, @snippet), data: { container: "body" } } + %span.sr-only + = visibility_level_label(@snippet.visibility_level) + = visibility_level_icon(@snippet.visibility_level, fw: false) + %span.creator + Authored + = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago') + by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "hidden-xs")} - .snippet-actions + .detail-page-header-actions - if @snippet.project_id? = render "projects/snippets/actions" - else diff --git a/spec/features/projects/issuable_templates_spec.rb b/spec/features/projects/issuable_templates_spec.rb index a012db8fd27..0257cd157c9 100644 --- a/spec/features/projects/issuable_templates_spec.rb +++ b/spec/features/projects/issuable_templates_spec.rb @@ -32,7 +32,7 @@ feature 'issuable templates', :js do message: 'added issue template', branch_name: 'master') visit project_issue_path project, issue - page.within('.content .issuable-actions') do + page.within('.js-issuable-actions') do click_on 'Edit' end fill_in :'issuable-title', with: 'test issue title' @@ -77,7 +77,7 @@ feature 'issuable templates', :js do message: 'added issue template', branch_name: 'master') visit project_issue_path project, issue - page.within('.content .issuable-actions') do + page.within('.js-issuable-actions') do click_on 'Edit' end fill_in :'issuable-title', with: 'test issue title' diff --git a/spec/javascripts/merge_request_spec.js b/spec/javascripts/merge_request_spec.js index 3ab901da6b6..70ae63ba036 100644 --- a/spec/javascripts/merge_request_spec.js +++ b/spec/javascripts/merge_request_spec.js @@ -63,7 +63,7 @@ import IssuablesHelper from '~/helpers/issuables_helper'; describe('merge request of another user', () => { beforeEach(() => { loadFixtures('merge_requests/merge_request_with_task_list.html.raw'); - this.el = document.querySelector('.merge-request .issuable-actions'); + this.el = document.querySelector('.js-issuable-actions'); const merge = new MergeRequest(); merge.hideCloseButton(); }); @@ -83,7 +83,7 @@ import IssuablesHelper from '~/helpers/issuables_helper'; describe('merge request of current_user', () => { beforeEach(() => { loadFixtures('merge_requests/merge_request_of_current_user.html.raw'); - this.el = document.querySelector('.merge-request .issuable-actions'); + this.el = document.querySelector('.js-issuable-actions'); const merge = new MergeRequest(); merge.hideCloseButton(); }); |