Commit d87b0379 authored by George Tsiolis's avatar George Tsiolis

Improve top area navigation

- Change button group width on mobile to 100%
- Added scrolling container to activity top area secondary navigation
- Added bottom border to top-area nav-links to separate them from nav-controls
parent ab6f4ad4
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
}; };
</script> </script>
<template> <template>
<ul class="nav-links scrolling-tabs"> <ul class="nav-links scrolling-tabs separator">
<li <li
v-for="(tab, i) in tabs" v-for="(tab, i) in tabs"
:key="i" :key="i"
......
...@@ -82,6 +82,10 @@ ...@@ -82,6 +82,10 @@
/* Small devices (phones, tablets, 768px and lower) */ /* Small devices (phones, tablets, 768px and lower) */
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
width: 100%; width: 100%;
&.mobile-separator {
border-bottom: 1px solid $border-color;
}
} }
} }
...@@ -168,9 +172,9 @@ ...@@ -168,9 +172,9 @@
display: inline-block; display: inline-block;
} }
// Applies on /dashboard/issues
.project-item-select-holder { .project-item-select-holder {
margin: 0; margin: 0;
width: 100%;
} }
} }
} }
...@@ -340,7 +344,6 @@ ...@@ -340,7 +344,6 @@
.project-item-select-holder.btn-group { .project-item-select-holder.btn-group {
display: flex; display: flex;
max-width: 350px;
overflow: hidden; overflow: hidden;
float: right; float: right;
......
.top-area .top-area
%ul.nav-links %ul.nav-links.mobile-separator
= nav_link(page: dashboard_groups_path) do = nav_link(page: dashboard_groups_path) do
= link_to dashboard_groups_path, title: _("Your groups") do = link_to dashboard_groups_path, title: _("Your groups") do
Your groups Your groups
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
.top-area.scrolling-tabs-container.inner-page-scroll-tabs .top-area.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')
%ul.nav-links.scrolling-tabs %ul.nav-links.scrolling-tabs.mobile-separator
= nav_link(page: [dashboard_projects_path, root_path]) do = nav_link(page: [dashboard_projects_path, root_path]) do
= link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do
Your projects Your projects
......
.nav-block .nav-block
%ul.nav-links %ul.nav-links.mobile-separator
= nav_link(html_options: { class: ("active" unless params[:personal].present?) }) do = nav_link(html_options: { class: ("active" unless params[:personal].present?) }) do
= link_to s_('DashboardProjects|All'), dashboard_projects_path = link_to s_('DashboardProjects|All'), dashboard_projects_path
= nav_link(html_options: { class: ("active" if params[:personal].present?) }) do = nav_link(html_options: { class: ("active" if params[:personal].present?) }) do
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
- if current_user.todos.any? - if current_user.todos.any?
.top-area .top-area
%ul.nav-links %ul.nav-links.mobile-separator
%li.todos-pending{ class: active_when(params[:state].blank? || params[:state] == 'pending') }> %li.todos-pending{ class: active_when(params[:state].blank? || params[:state] == 'pending') }>
= link_to todos_filter_path(state: 'pending') do = link_to todos_filter_path(state: 'pending') do
%span %span
......
%ul.nav-links %ul.nav-links.mobile-separator
%li{ class: active_when(scope.nil?) }> %li{ class: active_when(scope.nil?) }>
= link_to schedule_path_proc.call(nil) do = link_to schedule_path_proc.call(nil) do
= s_("PipelineSchedules|All") = s_("PipelineSchedules|All")
......
- failed_builds = @pipeline.statuses.latest.failed - failed_builds = @pipeline.statuses.latest.failed
.tabs-holder .tabs-holder
%ul.pipelines-tabs.nav-links.no-top.no-bottom %ul.pipelines-tabs.nav-links.no-top.no-bottom.mobile-separator
%li.js-pipeline-tab-link %li.js-pipeline-tab-link
= link_to project_pipeline_path(@project, @pipeline), data: { target: 'div#js-tab-pipeline', action: 'pipelines', toggle: 'tab' }, class: 'pipeline-tab' do = link_to project_pipeline_path(@project, @pipeline), data: { target: 'div#js-tab-pipeline', action: 'pipelines', toggle: 'tab' }, class: 'pipeline-tab' do
Pipeline Pipeline
......
%ul.nav-links.event-filter.scrolling-tabs .scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
= event_filter_link EventFilter.all, _('All'), s_('EventFilterBy|Filter by all') .fade-left= icon('angle-left')
- if event_filter_visible(:repository) .fade-right= icon('angle-right')
= event_filter_link EventFilter.push, _('Push events'), s_('EventFilterBy|Filter by push events') %ul.nav-links.event-filter.scrolling-tabs
- if event_filter_visible(:merge_requests) = event_filter_link EventFilter.all, _('All'), s_('EventFilterBy|Filter by all')
= event_filter_link EventFilter.merged, _('Merge events'), s_('EventFilterBy|Filter by merge events') - if event_filter_visible(:repository)
- if event_filter_visible(:issues) = event_filter_link EventFilter.push, _('Push events'), s_('EventFilterBy|Filter by push events')
= event_filter_link EventFilter.issue, _('Issue events'), s_('EventFilterBy|Filter by issue events') - if event_filter_visible(:merge_requests)
- if comments_visible? = event_filter_link EventFilter.merged, _('Merge events'), s_('EventFilterBy|Filter by merge events')
= event_filter_link EventFilter.comments, _('Comments'), s_('EventFilterBy|Filter by comments') - if event_filter_visible(:issues)
= event_filter_link EventFilter.team, _('Team'), s_('EventFilterBy|Filter by team') = event_filter_link EventFilter.issue, _('Issue events'), s_('EventFilterBy|Filter by issue events')
- if comments_visible?
= event_filter_link EventFilter.comments, _('Comments'), s_('EventFilterBy|Filter by comments')
= event_filter_link EventFilter.team, _('Team'), s_('EventFilterBy|Filter by team')
%ul.nav-links %ul.nav-links.mobile-separator
%li{ class: milestone_class_for_state(params[:state], 'opened', true) }> %li{ class: milestone_class_for_state(params[:state], 'opened', true) }>
= link_to milestones_filter_path(state: 'opened') do = link_to milestones_filter_path(state: 'opened') do
Open Open
......
%ul.nav-links %ul.nav-links.mobile-separator
%li{ class: active_when(scope.nil?) }> %li{ class: active_when(scope.nil?) }>
= link_to build_path_proc.call(nil) do = link_to build_path_proc.call(nil) do
All All
......
- type = local_assigns.fetch(:type, :issues) - type = local_assigns.fetch(:type, :issues)
- page_context_word = type.to_s.humanize(capitalize: false) - page_context_word = type.to_s.humanize(capitalize: false)
%ul.nav-links.issues-state-filters %ul.nav-links.issues-state-filters.mobile-separator
%li{ class: active_when(params[:state] == 'opened') }> %li{ class: active_when(params[:state] == 'opened') }>
= link_to page_filter_path(state: 'opened', label: true), id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened.", data: { state: 'opened' } do = link_to page_filter_path(state: 'opened', label: true), id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened.", data: { state: 'opened' } do
#{issuables_state_counter_text(type, :opened)} #{issuables_state_counter_text(type, :opened)}
......
- subject = local_assigns.fetch(:subject, current_user) - subject = local_assigns.fetch(:subject, current_user)
- include_private = local_assigns.fetch(:include_private, false) - include_private = local_assigns.fetch(:include_private, false)
.nav-links.snippet-scope-menu .nav-links.snippet-scope-menu.mobile-separator
%li{ class: active_when(params[:scope].nil?) } %li{ class: active_when(params[:scope].nil?) }
= link_to subject_snippets_path(subject) do = link_to subject_snippets_path(subject) do
All All
......
---
title: Change button group width on mobile
merge_request: 16726
author: George Tsiolis
type: fixed
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