Commit fec96453 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray Committed by Phil Hughes

Merge request tabs fixes

- Makes activity dropdown and resolved counter smaller
- Uses grid for spacing
- Removes scrolling on MR tabs
parent c50eed54
...@@ -49,8 +49,8 @@ export default { ...@@ -49,8 +49,8 @@ export default {
</script> </script>
<template> <template>
<div v-if="resolvableDiscussionsCount > 0" class="line-resolve-all-container prepend-top-8"> <div v-if="resolvableDiscussionsCount > 0" class="line-resolve-all-container full-width-mobile">
<div> <div class="full-width-mobile d-flex d-sm-block">
<div :class="{ 'has-next-btn': hasNextButton }" class="line-resolve-all"> <div :class="{ 'has-next-btn': hasNextButton }" class="line-resolve-all">
<span <span
:class="{ 'is-active': allResolved }" :class="{ 'is-active': allResolved }"
...@@ -64,7 +64,11 @@ export default { ...@@ -64,7 +64,11 @@ export default {
{{ n__('discussion resolved', 'discussions resolved', resolvableDiscussionsCount) }} {{ n__('discussion resolved', 'discussions resolved', resolvableDiscussionsCount) }}
</span> </span>
</div> </div>
<div v-if="resolveAllDiscussionsIssuePath && !allResolved" class="btn-group" role="group"> <div
v-if="resolveAllDiscussionsIssuePath && !allResolved"
class="btn-group btn-group-sm"
role="group"
>
<a <a
v-gl-tooltip v-gl-tooltip
:href="resolveAllDiscussionsIssuePath" :href="resolveAllDiscussionsIssuePath"
...@@ -74,7 +78,7 @@ export default { ...@@ -74,7 +78,7 @@ export default {
<icon name="issue-new" /> <icon name="issue-new" />
</a> </a>
</div> </div>
<div v-if="isLoggedIn && !allResolved" class="btn-group" role="group"> <div v-if="isLoggedIn && !allResolved" class="btn-group btn-group-sm" role="group">
<button <button
v-gl-tooltip v-gl-tooltip
title="Jump to first unresolved discussion" title="Jump to first unresolved discussion"
......
...@@ -105,12 +105,12 @@ export default { ...@@ -105,12 +105,12 @@ export default {
<template> <template>
<div <div
v-if="displayFilters" v-if="displayFilters"
class="discussion-filter-container js-discussion-filter-container d-inline-block align-bottom" class="discussion-filter-container js-discussion-filter-container d-inline-block align-bottom full-width-mobile"
> >
<button <button
id="discussion-filter-dropdown" id="discussion-filter-dropdown"
ref="dropdownToggle" ref="dropdownToggle"
class="btn btn-default qa-discussion-filter" class="btn btn-sm qa-discussion-filter"
data-toggle="dropdown" data-toggle="dropdown"
aria-expanded="false" aria-expanded="false"
> >
......
...@@ -199,6 +199,7 @@ ...@@ -199,6 +199,7 @@
&.user-cover-block { &.user-cover-block {
padding: 24px 0 0; padding: 24px 0 0;
border-bottom: 1px solid $border-color;
.nav-links { .nav-links {
width: 100%; width: 100%;
...@@ -232,14 +233,6 @@ ...@@ -232,14 +233,6 @@
margin-top: -1px; margin-top: -1px;
} }
.nav-block {
.controls {
float: right;
margin-top: 8px;
padding-bottom: 8px;
}
}
.content-block { .content-block {
padding: $gl-padding 0; padding: $gl-padding 0;
border-bottom: 1px solid $white-dark; border-bottom: 1px solid $white-dark;
......
...@@ -489,3 +489,15 @@ img.emoji { ...@@ -489,3 +489,15 @@ img.emoji {
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }
// Make buttons/dropdowns full-width on mobile
.full-width-mobile {
@include media-breakpoint-down(xs) {
width: 100%;
> .dropdown-menu,
> .btn {
width: 100%;
}
}
}
...@@ -13,8 +13,8 @@ ...@@ -13,8 +13,8 @@
a, a,
button { button {
padding: $gl-btn-padding; padding: $gl-padding-8;
padding-bottom: 11px; padding-bottom: $gl-padding-8 + 1;
font-size: 14px; font-size: 14px;
line-height: 28px; line-height: 28px;
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
...@@ -58,8 +58,12 @@ ...@@ -58,8 +58,12 @@
} }
.top-area { .top-area {
@include clearfix;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
display: flex;
@include media-breakpoint-down(md) {
flex-flow: column-reverse wrap;
}
.nav-text { .nav-text {
padding-top: 16px; padding-top: 16px;
...@@ -75,9 +79,8 @@ ...@@ -75,9 +79,8 @@
} }
.nav-links { .nav-links {
margin-bottom: 0;
border-bottom: 0; border-bottom: 0;
float: left; flex: 1;
&.wide { &.wide {
width: 100%; width: 100%;
...@@ -98,16 +101,23 @@ ...@@ -98,16 +101,23 @@
&.mobile-separator { &.mobile-separator {
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
margin-bottom: $gl-padding-8;
} }
} }
} }
.nav-controls { .nav-controls {
display: inline-block; display: inline-block;
float: right;
text-align: right; text-align: right;
padding: $gl-padding-8 0;
margin-bottom: 0; @include media-breakpoint-down(sm) {
margin-top: $gl-padding-8;
}
@include media-breakpoint-up(md) {
display: flex;
align-items: center;
}
> .btn, > .btn,
> .btn-container, > .btn-container,
...@@ -115,8 +125,6 @@ ...@@ -115,8 +125,6 @@
> input, > input,
> form { > form {
margin-right: $gl-padding-top; margin-right: $gl-padding-top;
display: inline-block;
vertical-align: top;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
...@@ -143,7 +151,7 @@ ...@@ -143,7 +151,7 @@
@include media-breakpoint-up(lg) { width: 250px; } @include media-breakpoint-up(lg) { width: 250px; }
} }
@include media-breakpoint-down(xs) { @include media-breakpoint-down(sm) {
padding-bottom: 0; padding-bottom: 0;
width: 100%; width: 100%;
...@@ -153,7 +161,7 @@ ...@@ -153,7 +161,7 @@
.dropdown-toggle, .dropdown-toggle,
.dropdown-menu-toggle, .dropdown-menu-toggle,
.form-control { .form-control {
margin: 0 0 10px; margin: 0 0 $gl-padding-8;
display: block; display: block;
width: 100%; width: 100%;
} }
...@@ -165,7 +173,7 @@ ...@@ -165,7 +173,7 @@
form { form {
display: block; display: block;
height: auto; height: auto;
margin-bottom: 14px; margin-bottom: $gl-padding-8;
input { input {
width: 100%; width: 100%;
...@@ -236,20 +244,11 @@ ...@@ -236,20 +244,11 @@
width: 100%; width: 100%;
} }
@include media-breakpoint-down(xs) { @include media-breakpoint-down(md) {
flex-flow: row wrap;
.nav-controls { .nav-controls {
$controls-margin: $btn-margin-5 - 2px; $controls-margin: $btn-margin-5 - 2px;
flex: 0 0 100%; flex: 0 0 100%;
margin-top: $gl-padding-8;
&.controls-flex {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
padding: 0 0 $gl-padding-top;
}
.controls-item, .controls-item,
.controls-item-full, .controls-item-full,
...@@ -326,8 +325,8 @@ ...@@ -326,8 +325,8 @@
.fade-right, .fade-right,
.fade-left { .fade-left {
top: 16px; bottom: $gl-padding;
bottom: auto; top: auto;
} }
&.is-smaller { &.is-smaller {
...@@ -367,6 +366,7 @@ ...@@ -367,6 +366,7 @@
display: flex; display: flex;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
overflow: hidden; overflow: hidden;
align-items: center;
.nav-links { .nav-links {
border-bottom: 0; border-bottom: 0;
......
...@@ -35,9 +35,6 @@ ...@@ -35,9 +35,6 @@
} }
.group-nav-container .nav-controls { .group-nav-container .nav-controls {
align-items: flex-start;
padding: $gl-padding-top 0 0;
.group-filter-form { .group-filter-form {
flex: 1 1 auto; flex: 1 1 auto;
margin-right: $gl-padding-8; margin-right: $gl-padding-8;
......
...@@ -69,7 +69,11 @@ ...@@ -69,7 +69,11 @@
} }
.emoji-block { .emoji-block {
padding: 10px 0; padding: $gl-padding-4 0;
@include media-breakpoint-down(md) {
padding: $gl-padding-8 0;
}
} }
} }
...@@ -132,6 +136,10 @@ ...@@ -132,6 +136,10 @@
z-index: 200; z-index: 200;
overflow: hidden; overflow: hidden;
@include media-breakpoint-down(sm) {
z-index: 251;
}
a:not(.btn) { a:not(.btn) {
color: inherit; color: inherit;
......
...@@ -846,15 +846,40 @@ ...@@ -846,15 +846,40 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(xs) {
flex-direction: column-reverse; .discussion-filter-container,
.line-resolve-all-container {
margin-bottom: $gl-padding-4;
}
} }
.discussion-filter-container { .discussion-filter-container {
margin-top: $gl-padding-8;
&:not(:only-child) { &:not(:only-child) {
padding-right: $gl-padding-8; margin: $gl-padding-4;
}
}
.merge-request-tabs {
height: $grid-size * 6;
}
}
// Wrap MR tabs/buttons so you don't have to scroll on desktop
@include media-breakpoint-down(md) {
.merge-request-tabs-container,
.epic-tabs-container {
flex-direction: column-reverse;
padding-top: $gl-padding-8;
}
}
@include media-breakpoint-down(lg) {
.right-sidebar-expanded {
.merge-request-tabs-container,
.epic-tabs-container {
flex-direction: column-reverse;
align-items: flex-start;
padding-top: $gl-padding-8;
} }
} }
} }
......
...@@ -768,9 +768,7 @@ $note-form-margin-left: 72px; ...@@ -768,9 +768,7 @@ $note-form-margin-left: 72px;
} }
.line-resolve-all-container { .line-resolve-all-container {
@include notes-media('min', map-get($grid-breakpoints, sm)) { margin: $gl-padding-4;
margin-right: 0;
}
> div { > div {
white-space: nowrap; white-space: nowrap;
...@@ -786,6 +784,8 @@ $note-form-margin-left: 72px; ...@@ -786,6 +784,8 @@ $note-form-margin-left: 72px;
} }
.btn { .btn {
line-height: $gl-line-height;
svg { svg {
fill: $gray-darkest; fill: $gray-darkest;
} }
...@@ -811,10 +811,11 @@ $note-form-margin-left: 72px; ...@@ -811,10 +811,11 @@ $note-form-margin-left: 72px;
.line-resolve-all { .line-resolve-all {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
padding: 6px 10px; padding: $gl-padding-4 10px;
background-color: $gray-light; background-color: $gray-light;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: $border-radius-default; border-radius: $border-radius-default;
font-size: $gl-btn-small-font-size;
&.has-next-btn { &.has-next-btn {
border-top-right-radius: 0; border-top-right-radius: 0;
...@@ -830,6 +831,10 @@ $note-form-margin-left: 72px; ...@@ -830,6 +831,10 @@ $note-form-margin-left: 72px;
vertical-align: middle; vertical-align: middle;
} }
} }
@include media-breakpoint-down(xs) {
flex: 1;
}
} }
.line-resolve-btn { .line-resolve-btn {
......
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
= icon('spinner spin') = icon('spinner spin')
.todos-filters .todos-filters
.row-content-block.second-block .issues-details-filters.row-content-block.second-block
= form_tag todos_filter_path(without: [:project_id, :author_id, :type, :action_id]), method: :get, class: 'filter-form d-sm-flex' do = form_tag todos_filter_path(without: [:project_id, :author_id, :type, :action_id]), method: :get, class: 'filter-form d-sm-flex' do
.filter-categories.flex-fill .filter-categories.flex-fill
.filter-item.inline .filter-item.inline
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
= render 'groups/home_panel' = render 'groups/home_panel'
.groups-listing{ data: { endpoints: { default: group_children_path(@group, format: :json), shared: group_shared_projects_path(@group, format: :json) } } } .groups-listing{ data: { endpoints: { default: group_children_path(@group, format: :json), shared: group_shared_projects_path(@group, format: :json) } } }
.top-area.group-nav-container .top-area.group-nav-container.justify-content-between
.scrolling-tabs-container.inner-page-scroll-tabs .scrolling-tabs-container.inner-page-scroll-tabs
.fade-left= icon('angle-left') .fade-left= icon('angle-left')
.fade-right= icon('angle-right') .fade-right= icon('angle-right')
......
...@@ -8,18 +8,18 @@ ...@@ -8,18 +8,18 @@
- create_branch_path = project_branches_path(@project, branch_name: @issue.to_branch_name, ref: @project.default_branch, issue_iid: @issue.iid) - create_branch_path = project_branches_path(@project, branch_name: @issue.to_branch_name, ref: @project.default_branch, issue_iid: @issue.iid)
- refs_path = refs_namespace_project_path(@project.namespace, @project, search: '') - refs_path = refs_namespace_project_path(@project.namespace, @project, search: '')
.create-mr-dropdown-wrap.d-inline-block{ data: { can_create_path: can_create_path, create_mr_path: create_mr_path, create_branch_path: create_branch_path, refs_path: refs_path } } .create-mr-dropdown-wrap.d-inline-block.full-width-mobile{ data: { can_create_path: can_create_path, create_mr_path: create_mr_path, create_branch_path: create_branch_path, refs_path: refs_path } }
.btn-group.unavailable .btn-group.btn-group-sm.unavailable
%button.btn.btn-grouped{ type: 'button', disabled: 'disabled' } %button.btn.btn-grouped{ type: 'button', disabled: 'disabled' }
= icon('spinner', class: 'fa-spin') = icon('spinner', class: 'fa-spin')
%span.text %span.text
Checking branch availability… Checking branch availability…
.btn-group.available.hidden .btn-group.btn-group-sm.available.hidden
%button.btn.js-create-merge-request.btn-success.btn-inverted{ type: 'button', data: { action: data_action } } %button.btn.js-create-merge-request.btn-success.btn-inverted{ type: 'button', data: { action: data_action } }
= value = value
%button.btn.create-merge-request-dropdown-toggle.dropdown-toggle.btn-success.btn-inverted.js-dropdown-toggle{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } } %button.btn.create-merge-request-dropdown-toggle.dropdown-toggle.btn-success.btn-inverted.js-dropdown-toggle.flex-grow-0{ type: 'button', data: { dropdown: { trigger: '#create-merge-request-dropdown' }, display: 'static' } }
= icon('caret-down') = icon('caret-down')
.droplab-dropdown .droplab-dropdown
......
...@@ -31,10 +31,7 @@ ...@@ -31,10 +31,7 @@
.merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') } .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
.merge-request-tabs-container .merge-request-tabs-container
.scrolling-tabs-container.inner-page-scroll-tabs.is-smaller %ul.merge-request-tabs.nav-tabs.nav.nav-links
.fade-left= icon('angle-left')
.fade-right= icon('angle-right')
%ul.merge-request-tabs.nav-tabs.nav.nav-links.scrolling-tabs
%li.notes-tab.qa-notes-tab %li.notes-tab.qa-notes-tab
= tab_link_for @merge_request, :show, force_link: @commit.present? do = tab_link_for @merge_request, :show, force_link: @commit.present? do
= _("Discussion") = _("Discussion")
...@@ -53,7 +50,7 @@ ...@@ -53,7 +50,7 @@
= tab_link_for @merge_request, :diffs do = tab_link_for @merge_request, :diffs do
= _("Changes") = _("Changes")
%span.badge.badge-pill= @merge_request.diff_size %span.badge.badge-pill= @merge_request.diff_size
.d-inline-flex.flex-wrap .d-flex.flex-wrap.align-items-center.justify-content-lg-end
#js-vue-discussion-filter{ data: { default_filter: current_user&.notes_filter_for(@merge_request), #js-vue-discussion-filter{ data: { default_filter: current_user&.notes_filter_for(@merge_request),
notes_filters: UserPreference.notes_filters.to_json } } notes_filters: UserPreference.notes_filters.to_json } }
#js-vue-discussion-counter #js-vue-discussion-counter
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
.nav-text.row-main-content .nav-text.row-main-content
= s_('TagsPage|Tags give the ability to mark specific points in history as being important') = s_('TagsPage|Tags give the ability to mark specific points in history as being important')
.nav-controls.row-fixed-content .nav-controls
= form_tag(filter_tags_path, method: :get) do = form_tag(filter_tags_path, method: :get) do
= search_field_tag :search, params[:search], { placeholder: s_('TagsPage|Filter by tag name'), id: 'tag-search', class: 'form-control search-text-input input-short', spellcheck: false } = search_field_tag :search, params[:search], { placeholder: s_('TagsPage|Filter by tag name'), id: 'tag-search', class: 'form-control search-text-input input-short', spellcheck: false }
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
- else - else
= s_("TagsPage|Can't find HEAD commit for this tag") = s_("TagsPage|Can't find HEAD commit for this tag")
.nav-controls.controls-flex .nav-controls
- if can?(current_user, :push_code, @project) - if can?(current_user, :push_code, @project)
= link_to edit_project_tag_release_path(@project, @tag.name), class: 'btn btn-edit controls-item has-tooltip', title: s_('TagsPage|Edit release notes') do = link_to edit_project_tag_release_path(@project, @tag.name), class: 'btn btn-edit controls-item has-tooltip', title: s_('TagsPage|Edit release notes') do
= icon("pencil") = icon("pencil")
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
= auto_discovery_link_tag(:atom, user_url(@user, format: :atom), title: "#{@user.name} activity") = auto_discovery_link_tag(:atom, user_url(@user, format: :atom), title: "#{@user.name} activity")
.user-profile .user-profile
.cover-block.user-cover-block.top-area .cover-block.user-cover-block
.cover-controls .cover-controls
- if @user == current_user - if @user == current_user
= link_to profile_path, class: 'btn btn-default has-tooltip', title: s_('UserProfile|Edit profile'), 'aria-label': 'Edit profile' do = link_to profile_path, class: 'btn btn-default has-tooltip', title: s_('UserProfile|Edit profile'), 'aria-label': 'Edit profile' do
......
---
title: Update merge request tabs so they no longer scroll
merge_request:
author:
type: other
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