diff options
author | George Tsiolis <tsiolis.g@gmail.com> | 2018-01-26 00:51:33 +0300 |
---|---|---|
committer | George Tsiolis <tsiolis.g@gmail.com> | 2018-02-02 20:07:24 +0300 |
commit | d87b03796e2f48050530d9f8504191417c0d03a3 (patch) | |
tree | eba24d15ac10e0fa4a7b7a6923389313897fa263 | |
parent | ab6f4ad4c738df5387dd01302622cc67f78952d7 (diff) |
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
14 files changed, 35 insertions, 24 deletions
diff --git a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue index cb8e6072a9b..63d8329e495 100644 --- a/app/assets/javascripts/vue_shared/components/navigation_tabs.vue +++ b/app/assets/javascripts/vue_shared/components/navigation_tabs.vue @@ -48,7 +48,7 @@ }; </script> <template> - <ul class="nav-links scrolling-tabs"> + <ul class="nav-links scrolling-tabs separator"> <li v-for="(tab, i) in tabs" :key="i" diff --git a/app/assets/stylesheets/framework/secondary-navigation-elements.scss b/app/assets/stylesheets/framework/secondary-navigation-elements.scss index 5f67126bafa..17c31d6b184 100644 --- a/app/assets/stylesheets/framework/secondary-navigation-elements.scss +++ b/app/assets/stylesheets/framework/secondary-navigation-elements.scss @@ -82,6 +82,10 @@ /* Small devices (phones, tablets, 768px and lower) */ @media (max-width: $screen-xs-max) { width: 100%; + + &.mobile-separator { + border-bottom: 1px solid $border-color; + } } } @@ -168,9 +172,9 @@ display: inline-block; } - // Applies on /dashboard/issues .project-item-select-holder { margin: 0; + width: 100%; } } } @@ -340,7 +344,6 @@ .project-item-select-holder.btn-group { display: flex; - max-width: 350px; overflow: hidden; float: right; diff --git a/app/views/dashboard/_groups_head.html.haml b/app/views/dashboard/_groups_head.html.haml index cebdbab4e74..617c20b9635 100644 --- a/app/views/dashboard/_groups_head.html.haml +++ b/app/views/dashboard/_groups_head.html.haml @@ -1,5 +1,5 @@ .top-area - %ul.nav-links + %ul.nav-links.mobile-separator = nav_link(page: dashboard_groups_path) do = link_to dashboard_groups_path, title: _("Your groups") do Your groups diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml index 9038c4fbebd..449a2ce625e 100644 --- a/app/views/dashboard/_projects_head.html.haml +++ b/app/views/dashboard/_projects_head.html.haml @@ -4,7 +4,7 @@ .top-area.scrolling-tabs-container.inner-page-scroll-tabs .fade-left= icon('angle-left') .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 = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do Your projects diff --git a/app/views/dashboard/projects/_nav.html.haml b/app/views/dashboard/projects/_nav.html.haml index c18077bc66f..97f854cc5f0 100644 --- a/app/views/dashboard/projects/_nav.html.haml +++ b/app/views/dashboard/projects/_nav.html.haml @@ -1,5 +1,5 @@ .nav-block - %ul.nav-links + %ul.nav-links.mobile-separator = nav_link(html_options: { class: ("active" unless params[:personal].present?) }) do = link_to s_('DashboardProjects|All'), dashboard_projects_path = nav_link(html_options: { class: ("active" if params[:personal].present?) }) do diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml index 20ca6ec969a..664966989db 100644 --- a/app/views/dashboard/todos/index.html.haml +++ b/app/views/dashboard/todos/index.html.haml @@ -4,7 +4,7 @@ - if current_user.todos.any? .top-area - %ul.nav-links + %ul.nav-links.mobile-separator %li.todos-pending{ class: active_when(params[:state].blank? || params[:state] == 'pending') }> = link_to todos_filter_path(state: 'pending') do %span diff --git a/app/views/projects/pipeline_schedules/_tabs.html.haml b/app/views/projects/pipeline_schedules/_tabs.html.haml index 7fcb624a9dd..8996c1b3e38 100644 --- a/app/views/projects/pipeline_schedules/_tabs.html.haml +++ b/app/views/projects/pipeline_schedules/_tabs.html.haml @@ -1,4 +1,4 @@ -%ul.nav-links +%ul.nav-links.mobile-separator %li{ class: active_when(scope.nil?) }> = link_to schedule_path_proc.call(nil) do = s_("PipelineSchedules|All") diff --git a/app/views/projects/pipelines/_with_tabs.html.haml b/app/views/projects/pipelines/_with_tabs.html.haml index 398a1c46746..5de17977d5a 100644 --- a/app/views/projects/pipelines/_with_tabs.html.haml +++ b/app/views/projects/pipelines/_with_tabs.html.haml @@ -1,7 +1,7 @@ - failed_builds = @pipeline.statuses.latest.failed .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 = link_to project_pipeline_path(@project, @pipeline), data: { target: 'div#js-tab-pipeline', action: 'pipelines', toggle: 'tab' }, class: 'pipeline-tab' do Pipeline diff --git a/app/views/shared/_event_filter.html.haml b/app/views/shared/_event_filter.html.haml index 151aad306a0..e7fa7477e0c 100644 --- a/app/views/shared/_event_filter.html.haml +++ b/app/views/shared/_event_filter.html.haml @@ -1,11 +1,14 @@ -%ul.nav-links.event-filter.scrolling-tabs - = event_filter_link EventFilter.all, _('All'), s_('EventFilterBy|Filter by all') - - if event_filter_visible(:repository) - = event_filter_link EventFilter.push, _('Push events'), s_('EventFilterBy|Filter by push events') - - if event_filter_visible(:merge_requests) - = event_filter_link EventFilter.merged, _('Merge events'), s_('EventFilterBy|Filter by merge events') - - if event_filter_visible(:issues) - = 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') +.scrolling-tabs-container.inner-page-scroll-tabs.is-smaller + .fade-left= icon('angle-left') + .fade-right= icon('angle-right') + %ul.nav-links.event-filter.scrolling-tabs + = event_filter_link EventFilter.all, _('All'), s_('EventFilterBy|Filter by all') + - if event_filter_visible(:repository) + = event_filter_link EventFilter.push, _('Push events'), s_('EventFilterBy|Filter by push events') + - if event_filter_visible(:merge_requests) + = event_filter_link EventFilter.merged, _('Merge events'), s_('EventFilterBy|Filter by merge events') + - if event_filter_visible(:issues) + = 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') diff --git a/app/views/shared/_milestones_filter.html.haml b/app/views/shared/_milestones_filter.html.haml index db2ac1e1d12..034b76b978f 100644 --- a/app/views/shared/_milestones_filter.html.haml +++ b/app/views/shared/_milestones_filter.html.haml @@ -1,4 +1,4 @@ -%ul.nav-links +%ul.nav-links.mobile-separator %li{ class: milestone_class_for_state(params[:state], 'opened', true) }> = link_to milestones_filter_path(state: 'opened') do Open diff --git a/app/views/shared/builds/_tabs.html.haml b/app/views/shared/builds/_tabs.html.haml index 639f28cc210..0b003125912 100644 --- a/app/views/shared/builds/_tabs.html.haml +++ b/app/views/shared/builds/_tabs.html.haml @@ -1,4 +1,4 @@ -%ul.nav-links +%ul.nav-links.mobile-separator %li{ class: active_when(scope.nil?) }> = link_to build_path_proc.call(nil) do All diff --git a/app/views/shared/issuable/_nav.html.haml b/app/views/shared/issuable/_nav.html.haml index 6d8a4668cec..4d8109eb90c 100644 --- a/app/views/shared/issuable/_nav.html.haml +++ b/app/views/shared/issuable/_nav.html.haml @@ -1,7 +1,7 @@ - type = local_assigns.fetch(:type, :issues) - 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') }> = 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)} diff --git a/app/views/snippets/_snippets_scope_menu.html.haml b/app/views/snippets/_snippets_scope_menu.html.haml index 8b6a98a054a..65aa4fbc757 100644 --- a/app/views/snippets/_snippets_scope_menu.html.haml +++ b/app/views/snippets/_snippets_scope_menu.html.haml @@ -1,7 +1,7 @@ - subject = local_assigns.fetch(:subject, current_user) - 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?) } = link_to subject_snippets_path(subject) do All diff --git a/changelogs/unreleased/fix-adjust-button-group-width-on-mobile.yml b/changelogs/unreleased/fix-adjust-button-group-width-on-mobile.yml new file mode 100644 index 00000000000..b79ec2944fd --- /dev/null +++ b/changelogs/unreleased/fix-adjust-button-group-width-on-mobile.yml @@ -0,0 +1,5 @@ +--- +title: Change button group width on mobile +merge_request: 16726 +author: George Tsiolis +type: fixed |