Commit 34560068 authored by Phil Hughes's avatar Phil Hughes

Merge branch '55125-mr-tab-scrolling' into 'master'

Fix alignment of MR tabs and buttons

Closes #55125

See merge request gitlab-org/gitlab-ce!29088
parents c50eed54 fec96453
......@@ -49,8 +49,8 @@ export default {
</script>
<template>
<div v-if="resolvableDiscussionsCount > 0" class="line-resolve-all-container prepend-top-8">
<div>
<div v-if="resolvableDiscussionsCount > 0" class="line-resolve-all-container full-width-mobile">
<div class="full-width-mobile d-flex d-sm-block">
<div :class="{ 'has-next-btn': hasNextButton }" class="line-resolve-all">
<span
:class="{ 'is-active': allResolved }"
......@@ -64,7 +64,11 @@ export default {
{{ n__('discussion resolved', 'discussions resolved', resolvableDiscussionsCount) }}
</span>
</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
v-gl-tooltip
:href="resolveAllDiscussionsIssuePath"
......@@ -74,7 +78,7 @@ export default {
<icon name="issue-new" />
</a>
</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
v-gl-tooltip
title="Jump to first unresolved discussion"
......
......@@ -105,12 +105,12 @@ export default {
<template>
<div
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
id="discussion-filter-dropdown"
ref="dropdownToggle"
class="btn btn-default qa-discussion-filter"
class="btn btn-sm qa-discussion-filter"
data-toggle="dropdown"
aria-expanded="false"
>
......
......@@ -199,6 +199,7 @@
&.user-cover-block {
padding: 24px 0 0;
border-bottom: 1px solid $border-color;
.nav-links {
width: 100%;
......@@ -232,14 +233,6 @@
margin-top: -1px;
}
.nav-block {
.controls {
float: right;
margin-top: 8px;
padding-bottom: 8px;
}
}
.content-block {
padding: $gl-padding 0;
border-bottom: 1px solid $white-dark;
......
......@@ -489,3 +489,15 @@ img.emoji {
.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 @@
a,
button {
padding: $gl-btn-padding;
padding-bottom: 11px;
padding: $gl-padding-8;
padding-bottom: $gl-padding-8 + 1;
font-size: 14px;
line-height: 28px;
color: $gl-text-color-secondary;
......@@ -58,8 +58,12 @@
}
.top-area {
@include clearfix;
border-bottom: 1px solid $border-color;
display: flex;
@include media-breakpoint-down(md) {
flex-flow: column-reverse wrap;
}
.nav-text {
padding-top: 16px;
......@@ -75,9 +79,8 @@
}
.nav-links {
margin-bottom: 0;
border-bottom: 0;
float: left;
flex: 1;
&.wide {
width: 100%;
......@@ -98,16 +101,23 @@
&.mobile-separator {
border-bottom: 1px solid $border-color;
margin-bottom: $gl-padding-8;
}
}
}
.nav-controls {
display: inline-block;
float: 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-container,
......@@ -115,8 +125,6 @@
> input,
> form {
margin-right: $gl-padding-top;
display: inline-block;
vertical-align: top;
&:last-child {
margin-right: 0;
......@@ -143,7 +151,7 @@
@include media-breakpoint-up(lg) { width: 250px; }
}
@include media-breakpoint-down(xs) {
@include media-breakpoint-down(sm) {
padding-bottom: 0;
width: 100%;
......@@ -153,7 +161,7 @@
.dropdown-toggle,
.dropdown-menu-toggle,
.form-control {
margin: 0 0 10px;
margin: 0 0 $gl-padding-8;
display: block;
width: 100%;
}
......@@ -165,7 +173,7 @@
form {
display: block;
height: auto;
margin-bottom: 14px;
margin-bottom: $gl-padding-8;
input {
width: 100%;
......@@ -236,20 +244,11 @@
width: 100%;
}
@include media-breakpoint-down(xs) {
flex-flow: row wrap;
@include media-breakpoint-down(md) {
.nav-controls {
$controls-margin: $btn-margin-5 - 2px;
flex: 0 0 100%;
&.controls-flex {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
padding: 0 0 $gl-padding-top;
}
margin-top: $gl-padding-8;
.controls-item,
.controls-item-full,
......@@ -326,8 +325,8 @@
.fade-right,
.fade-left {
top: 16px;
bottom: auto;
bottom: $gl-padding;
top: auto;
}
&.is-smaller {
......@@ -367,6 +366,7 @@
display: flex;
border-bottom: 1px solid $border-color;
overflow: hidden;
align-items: center;
.nav-links {
border-bottom: 0;
......
......@@ -35,9 +35,6 @@
}
.group-nav-container .nav-controls {
align-items: flex-start;
padding: $gl-padding-top 0 0;
.group-filter-form {
flex: 1 1 auto;
margin-right: $gl-padding-8;
......
......@@ -69,7 +69,11 @@
}
.emoji-block {
padding: 10px 0;
padding: $gl-padding-4 0;
@include media-breakpoint-down(md) {
padding: $gl-padding-8 0;
}
}
}
......@@ -132,6 +136,10 @@
z-index: 200;
overflow: hidden;
@include media-breakpoint-down(sm) {
z-index: 251;
}
a:not(.btn) {
color: inherit;
......
......@@ -846,15 +846,40 @@
display: flex;
justify-content: space-between;
@include media-breakpoint-down(sm) {
flex-direction: column-reverse;
@include media-breakpoint-down(xs) {
.discussion-filter-container,
.line-resolve-all-container {
margin-bottom: $gl-padding-4;
}
}
.discussion-filter-container {
margin-top: $gl-padding-8;
&: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;
}
.line-resolve-all-container {
@include notes-media('min', map-get($grid-breakpoints, sm)) {
margin-right: 0;
}
margin: $gl-padding-4;
> div {
white-space: nowrap;
......@@ -786,6 +784,8 @@ $note-form-margin-left: 72px;
}
.btn {
line-height: $gl-line-height;
svg {
fill: $gray-darkest;
}
......@@ -811,10 +811,11 @@ $note-form-margin-left: 72px;
.line-resolve-all {
vertical-align: middle;
display: inline-block;
padding: 6px 10px;
padding: $gl-padding-4 10px;
background-color: $gray-light;
border: 1px solid $border-color;
border-radius: $border-radius-default;
font-size: $gl-btn-small-font-size;
&.has-next-btn {
border-top-right-radius: 0;
......@@ -830,6 +831,10 @@ $note-form-margin-left: 72px;
vertical-align: middle;
}
}
@include media-breakpoint-down(xs) {
flex: 1;
}
}
.line-resolve-btn {
......
......@@ -34,7 +34,7 @@
= icon('spinner spin')
.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
.filter-categories.flex-fill
.filter-item.inline
......
......@@ -9,7 +9,7 @@
= render 'groups/home_panel'
.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
.fade-left= icon('angle-left')
.fade-right= icon('angle-right')
......
......@@ -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)
- 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 } }
.btn-group.unavailable
.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.btn-group-sm.unavailable
%button.btn.btn-grouped{ type: 'button', disabled: 'disabled' }
= icon('spinner', class: 'fa-spin')
%span.text
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 } }
= 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')
.droplab-dropdown
......
......@@ -31,29 +31,26 @@
.merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
.merge-request-tabs-container
.scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
.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
= tab_link_for @merge_request, :show, force_link: @commit.present? do
= _("Discussion")
%span.badge.badge-pill= @merge_request.related_notes.user.count
- if @merge_request.source_project
%li.commits-tab
= tab_link_for @merge_request, :commits do
= _("Commits")
%span.badge.badge-pill= @commits_count
- if @pipelines.any?
%li.pipelines-tab
= tab_link_for @merge_request, :pipelines do
= _("Pipelines")
%span.badge.badge-pill.js-pipelines-mr-count= @pipelines.size
%li.diffs-tab.qa-diffs-tab
= tab_link_for @merge_request, :diffs do
= _("Changes")
%span.badge.badge-pill= @merge_request.diff_size
.d-inline-flex.flex-wrap
%ul.merge-request-tabs.nav-tabs.nav.nav-links
%li.notes-tab.qa-notes-tab
= tab_link_for @merge_request, :show, force_link: @commit.present? do
= _("Discussion")
%span.badge.badge-pill= @merge_request.related_notes.user.count
- if @merge_request.source_project
%li.commits-tab
= tab_link_for @merge_request, :commits do
= _("Commits")
%span.badge.badge-pill= @commits_count
- if @pipelines.any?
%li.pipelines-tab
= tab_link_for @merge_request, :pipelines do
= _("Pipelines")
%span.badge.badge-pill.js-pipelines-mr-count= @pipelines.size
%li.diffs-tab.qa-diffs-tab
= tab_link_for @merge_request, :diffs do
= _("Changes")
%span.badge.badge-pill= @merge_request.diff_size
.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),
notes_filters: UserPreference.notes_filters.to_json } }
#js-vue-discussion-counter
......
......@@ -9,7 +9,7 @@
.nav-text.row-main-content
= 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
= 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 @@
- else
= s_("TagsPage|Can't find HEAD commit for this tag")
.nav-controls.controls-flex
.nav-controls
- 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
= icon("pencil")
......
......@@ -9,7 +9,7 @@
= auto_discovery_link_tag(:atom, user_url(@user, format: :atom), title: "#{@user.name} activity")
.user-profile
.cover-block.user-cover-block.top-area
.cover-block.user-cover-block
.cover-controls
- if @user == current_user
= 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