Refactored issue header to work better for mobile
This will also work better for when the title makes the buttons drop down a new line Closes #14228
This commit is contained in:
parent
05920a7964
commit
fd42b0db02
|
@ -5,7 +5,7 @@
|
|||
*/
|
||||
|
||||
.status-box {
|
||||
|
||||
|
||||
/* Extra small devices (phones, less than 768px) */
|
||||
/* No media query since this is the default in Bootstrap */
|
||||
padding: 5px 11px;
|
||||
|
|
|
@ -70,13 +70,6 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.issue-details {
|
||||
.creator,
|
||||
.page-title .btn-close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
%ul.notes .note-role, .note-actions {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
@ -16,11 +16,6 @@
|
|||
.issue_created_ago, .author_link {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.issue-meta {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-page-description {
|
||||
|
|
|
@ -273,10 +273,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn-default.gutter-toggle {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.detail-page-description {
|
||||
small {
|
||||
color: $gray-darkest;
|
||||
|
@ -322,3 +318,50 @@
|
|||
padding-top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.issuable-status-box {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
|
||||
@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;
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
float: left;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.issuable-actions {
|
||||
padding-top: 10px;
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
float: right;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.issuable-gutter-toggle {
|
||||
@media (max-width: $screen-sm-max) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.issuable-meta {
|
||||
display: inline-block;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
|
|
@ -86,41 +86,9 @@ form.edit-issue {
|
|||
@media (max-width: $screen-xs-max) {
|
||||
.issue-btn-group {
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
|
||||
.btn-group {
|
||||
width: 100%;
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
|
||||
&:first-child:not(:last-child) {
|
||||
|
||||
}
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.issue {
|
||||
&:hover .issue-actions {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.issue-updated-at {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -133,11 +101,3 @@ form.edit-issue {
|
|||
color: $gl-text-color;
|
||||
margin-left: 52px;
|
||||
}
|
||||
|
||||
.editor-details {
|
||||
display: block;
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,68 +1,73 @@
|
|||
- page_title "#{@issue.title} (##{@issue.iid})", "Issues"
|
||||
- page_description @issue.description
|
||||
- page_card_attributes @issue.card_attributes
|
||||
- header_title project_title(@project, "Issues", namespace_project_issues_path(@project.namespace, @project))
|
||||
|
||||
= render "header_title"
|
||||
.clearfix.detail-page-header
|
||||
.issuable-header
|
||||
.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
|
||||
Closed
|
||||
.issuable-status-box.status-box.status-box-open{ class: "#{issue_button_visibility(@issue, true)}"}
|
||||
= icon('circle-o', class: "hidden-sm hidden-md hidden-lg")
|
||||
%span.hidden-xs Open
|
||||
|
||||
.issue
|
||||
.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.visible-xs-block.gutter-toggle.js-sidebar-toggle{ href: "#" }
|
||||
%a.btn.btn-default.pull-right.visible-xs-block.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }
|
||||
= icon('angle-double-left')
|
||||
|
||||
.issue-meta
|
||||
.issuable-meta
|
||||
= confidential_icon(@issue)
|
||||
%strong.identifier
|
||||
Issue ##{@issue.iid}
|
||||
%span.creator
|
||||
opened
|
||||
.editor-details
|
||||
.editor-details
|
||||
= time_ago_with_tooltip(@issue.created_at)
|
||||
by
|
||||
%strong
|
||||
= link_to_member(@project, @issue.author, size: 24, mobile_classes: "hidden-xs")
|
||||
%strong
|
||||
= link_to_member(@project, @issue.author, size: 24, mobile_classes: "hidden-sm hidden-md hidden-lg",
|
||||
by_username: true, avatar: false)
|
||||
Issue #{@issue.to_reference}
|
||||
opened
|
||||
= time_ago_with_tooltip(@issue.created_at)
|
||||
by
|
||||
%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, mobile_classes: "hidden-sm hidden-md hidden-lg")
|
||||
|
||||
.pull-right.issue-btn-group
|
||||
.issuable-actions
|
||||
.clearfix.issue-btn-group.dropdown
|
||||
%button.btn.btn-default.pull-left.hidden-md.hidden-lg{ data: { toggle: "dropdown" } }
|
||||
%span.caret
|
||||
Options
|
||||
.dropdown-menu.dropdown-menu-align-right.hidden-lg
|
||||
%ul
|
||||
- if can?(current_user, :create_issue, @project)
|
||||
%li
|
||||
= link_to 'New issue', new_namespace_project_issue_path(@project.namespace, @project), title: 'New issue', id: 'new_issue_link'
|
||||
- if can?(current_user, :update_issue, @issue)
|
||||
%li
|
||||
= link_to 'Reopen issue', issue_path(@issue, issue: {state_event: :reopen}, status_only: true, format: 'json'), data: {no_turbolink: true}, class: " #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
|
||||
%li
|
||||
= link_to 'Close issue', issue_path(@issue, issue: {state_event: :close}, status_only: true, format: 'json'), data: {no_turbolink: true}, class: "#{issue_button_visibility(@issue, true)}", title: 'Close issue'
|
||||
%li
|
||||
= link_to 'Edit', edit_namespace_project_issue_path(@project.namespace, @project, @issue)
|
||||
- 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: 'hidden-xs hidden-sm btn btn-nr btn-grouped new-issue-link btn-success', title: 'New issue', id: 'new_issue_link' do
|
||||
= icon('plus')
|
||||
New issue
|
||||
- if can?(current_user, :update_issue, @issue)
|
||||
= link_to 'Reopen issue', issue_path(@issue, issue: {state_event: :reopen}, status_only: true, format: 'json'), data: {no_turbolink: true}, class: "btn btn-nr btn-grouped btn-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
|
||||
= link_to 'Close issue', issue_path(@issue, issue: {state_event: :close}, status_only: true, format: 'json'), data: {no_turbolink: true}, class: "btn btn-nr btn-grouped btn-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
|
||||
= link_to edit_namespace_project_issue_path(@project.namespace, @project, @issue), class: 'btn btn-nr btn-grouped issuable-edit' do
|
||||
= link_to 'Reopen issue', issue_path(@issue, issue: {state_event: :reopen}, status_only: true, format: 'json'), data: {no_turbolink: true}, class: "hidden-xs hidden-sm btn btn-nr btn-grouped btn-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
|
||||
= link_to 'Close issue', issue_path(@issue, issue: {state_event: :close}, status_only: true, format: 'json'), data: {no_turbolink: true}, class: "hidden-xs hidden-sm btn btn-nr btn-grouped btn-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
|
||||
= link_to edit_namespace_project_issue_path(@project.namespace, @project, @issue), class: 'hidden-xs hidden-sm btn btn-nr btn-grouped issuable-edit' do
|
||||
= icon('pencil-square-o')
|
||||
Edit
|
||||
|
||||
|
||||
.issue-details.issuable-details
|
||||
.detail-page-description.content-block
|
||||
%h2.title
|
||||
= markdown escape_once(@issue.title), pipeline: :single_line
|
||||
%div
|
||||
- if @issue.description.present?
|
||||
.description{class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : ''}
|
||||
.wiki
|
||||
= preserve do
|
||||
= markdown(@issue.description, cache_key: [@issue, "description"])
|
||||
%textarea.hidden.js-task-list-field
|
||||
= @issue.description
|
||||
= edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue_edited_ago')
|
||||
.issue-details.issuable-details
|
||||
.detail-page-description.content-block
|
||||
%h2.title
|
||||
= markdown escape_once(@issue.title), pipeline: :single_line
|
||||
- if @issue.description.present?
|
||||
.description{class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : ''}
|
||||
.wiki
|
||||
= preserve do
|
||||
= markdown(@issue.description, cache_key: [@issue, "description"])
|
||||
%textarea.hidden.js-task-list-field
|
||||
= @issue.description
|
||||
= edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue_edited_ago')
|
||||
|
||||
#merge-requests{'data-url' => referenced_merge_requests_namespace_project_issue_url(@project.namespace, @project, @issue)}
|
||||
// This element is filled in using JavaScript.
|
||||
|
@ -70,13 +75,11 @@
|
|||
#related-branches{'data-url' => related_branches_namespace_project_issue_url(@project.namespace, @project, @issue)}
|
||||
// This element is filled in using JavaScript.
|
||||
|
||||
.content-block.content-block-small
|
||||
= render 'new_branch'
|
||||
= render 'votes/votes_block', votable: @issue
|
||||
.content-block.content-block-small
|
||||
= render 'new_branch'
|
||||
= render 'votes/votes_block', votable: @issue
|
||||
|
||||
.row
|
||||
%section.col-md-12
|
||||
.issuable-discussion
|
||||
= render 'projects/issues/discussion'
|
||||
%section.issuable-discussion
|
||||
= render 'projects/issues/discussion'
|
||||
|
||||
= render 'shared/issuable/sidebar', issuable: @issue
|
||||
|
|
Loading…
Reference in New Issue