Updated layout for various breakpoints

Updated translations

Adds sort direction dropdown

Allows the project list sorting direction to be changed,
available options can be sorted ascending or descending.
Implements the changes from the UX review.

3 files changed, 24 insertions, 12 deletions

diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml
index bb14b33079d..f52f4eec36a 100644
--- a/app/views/dashboard/_projects_head.html.haml
+++ b/app/views/dashboard/_projects_head.html.haml
@@ -1,3 +1,6 @@
+- is_explore = local_assigns.fetch(:is_explore, false)
+- is_explore_trending = local_assigns.fetch(:is_explore_trending, false)
+- without_tabs = local_assigns.fetch(:without_tabs, false)
 = content_for :flash_message do
   = render 'shared/project_limit'
 
@@ -6,27 +9,27 @@
 
   - if current_user.can_create_project?
     .page-title-controls
-      = link_to "New project", new_project_path, class: "btn btn-success"
+      = link_to _("New project"), new_project_path, class: "btn btn-success"
 
 .top-area.scrolling-tabs-container.inner-page-scroll-tabs
   .fade-left= icon('angle-left')
   .fade-right= icon('angle-right')
-  %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs
+  %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs.border-0
     = nav_link(page: [dashboard_projects_path, root_path]) do
       = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do
-        Your projects
+        = _("Your projects")
         %span.badge.badge-pill= limited_counter_with_delimiter(@total_user_projects_count)
     = nav_link(page: starred_dashboard_projects_path) do
       = link_to starred_dashboard_projects_path, data: {placement: 'right'} do
-        Starred projects
+        = _("Starred projects")
         %span.badge.badge-pill= limited_counter_with_delimiter(@total_starred_projects_count)
     = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do
       = link_to explore_root_path, data: {placement: 'right'} do
-        Explore projects
+        = _("Explore projects")
   - unless Feature.enabled?(:project_list_filter_bar)
     .nav-controls
       = render 'shared/projects/search_form'
       = render 'shared/projects/dropdown'
 - if Feature.enabled?(:project_list_filter_bar)
   .project-filters
-    = render 'shared/projects/search_bar'
+    = render 'shared/projects/search_bar', is_explore: is_explore, is_explore_trending: is_explore_trending, without_tabs: without_tabs
diff --git a/app/views/dashboard/projects/_nav.html.haml b/app/views/dashboard/projects/_nav.html.haml
index 2aff1f1f3a3..8f4a517d918 100644
--- a/app/views/dashboard/projects/_nav.html.haml
+++ b/app/views/dashboard/projects/_nav.html.haml
@@ -1,3 +1,8 @@
+
+- is_explore = local_assigns.fetch(:is_explore, false)
+- inactive_class = 'btn p-2'
+- active_class = 'btn p-2 active'
+- is_explore_trending = local_assigns.fetch(:is_explore_trending, false)
 .nav-block
   - if !Feature.enabled?(:project_list_filter_bar)
     %ul.nav-links.mobile-separator.nav.nav-tabs
@@ -6,8 +11,11 @@
       = nav_link(html_options: { class: ("active" if params[:personal].present?) }) do
         = link_to s_('DashboardProjects|Personal'), filter_projects_path(personal: true)
   - else
-    %ul.btn-group.button-filter-group.d-flex.m-0.p-0
-      = nav_link(html_options: { class: params[:personal].present? ? "btn p-2" : "btn p-2 active" }) do
-        = link_to s_('DashboardProjects|All'), dashboard_projects_path
-      = nav_link(html_options: { class: params[:personal].present? ? "btn p-2 active" : "btn p-2" }) do
-        = link_to s_('DashboardProjects|Personal'), filter_projects_path(personal: true)
+    -# %ul.btn-group.button-filter-group.d-flex.m-0.p-0
+    %div.btn-group.button-filter-group.d-flex.m-0.p-0
+      - if is_explore
+        = link_to s_('DashboardProjects|Trending'), trending_explore_projects_path, class: is_explore_trending ? active_class : inactive_class
+        = link_to s_('DashboardProjects|All'), explore_projects_path, class: is_explore_trending ? inactive_class : active_class
+      - else
+        = link_to s_('DashboardProjects|All'), dashboard_projects_path, class: params[:personal].present? ? inactive_class : active_class
+        = link_to s_('DashboardProjects|Personal'), filter_projects_path(personal: true), class: params[:personal].present? ? active_class : inactive_class
diff --git a/app/views/dashboard/projects/starred.html.haml b/app/views/dashboard/projects/starred.html.haml
index a0d85446e5f..a9075e462db 100644
--- a/app/views/dashboard/projects/starred.html.haml
+++ b/app/views/dashboard/projects/starred.html.haml
@@ -3,12 +3,13 @@
 - breadcrumb_title _("Projects")
 - page_title _("Starred Projects")
 - header_title _("Projects"), dashboard_projects_path
+- without_tabs = true
 
 = render_dashboard_gold_trial(current_user)
 
 %div{ class: container_class }
   = render "projects/last_push"
-  = render 'dashboard/projects_head'
+  = render 'dashboard/projects_head', without_tabs: without_tabs
 
   - if params[:filter_projects] || any_projects?(@projects)
     = render 'projects'