From d87b03796e2f48050530d9f8504191417c0d03a3 Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Thu, 25 Jan 2018 23:51:33 +0200
Subject: 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
---
 .../vue_shared/components/navigation_tabs.vue      |  2 +-
 .../framework/secondary-navigation-elements.scss   |  7 ++++--
 app/views/dashboard/_groups_head.html.haml         |  2 +-
 app/views/dashboard/_projects_head.html.haml       |  2 +-
 app/views/dashboard/projects/_nav.html.haml        |  2 +-
 app/views/dashboard/todos/index.html.haml          |  2 +-
 .../projects/pipeline_schedules/_tabs.html.haml    |  2 +-
 app/views/projects/pipelines/_with_tabs.html.haml  |  2 +-
 app/views/shared/_event_filter.html.haml           | 25 ++++++++++++----------
 app/views/shared/_milestones_filter.html.haml      |  2 +-
 app/views/shared/builds/_tabs.html.haml            |  2 +-
 app/views/shared/issuable/_nav.html.haml           |  2 +-
 app/views/snippets/_snippets_scope_menu.html.haml  |  2 +-
 .../fix-adjust-button-group-width-on-mobile.yml    |  5 +++++
 14 files changed, 35 insertions(+), 24 deletions(-)
 create mode 100644 changelogs/unreleased/fix-adjust-button-group-width-on-mobile.yml

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
-- 
cgit v1.2.1