1 files changed, 20 insertions, 24 deletions

diff --git a/app/views/projects/forks/index.html.haml b/app/views/projects/forks/index.html.haml
index ba4e40a8675..d6f421e8ad6 100644
--- a/app/views/projects/forks/index.html.haml
+++ b/app/views/projects/forks/index.html.haml
@@ -1,40 +1,36 @@
+- sort_value = @sort || sort_value_recently_created
+- sort_title = forks_sort_options_hash[sort_value]
+
 .top-area
   .nav-text
     - full_count_title = "#{@public_forks_count} public, #{@internal_forks_count} internal, and #{@private_forks_count} private"
     #{pluralize(@total_forks_count, 'fork')}: #{full_count_title}
 
-  .nav-controls
-    = form_tag request.original_url, method: :get, class: 'project-filter-form', id: 'project-filter-form' do |f|
-      = search_field_tag :filter_projects, nil, placeholder: _('Search forks'), class: 'projects-list-filter project-filter-form-field form-control input-short',
+  .gl-display-flex.gl-sm-flex-direction-column.gl-md-align-items-center
+    = form_tag request.original_url, method: :get, class: 'project-filter-form gl-display-flex gl-mt-3 gl-md-mt-0', id: 'project-filter-form' do |f|
+      = search_field_tag :filter_projects, nil, placeholder: _('Search forks'), class: 'projects-list-filter project-filter-form-field form-control input-short gl-flex-grow-1',
         spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' }
 
-    .dropdown
-      %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
-        %span.light= _("sort:")
-        - if @sort.present?
-          = sort_options_hash[@sort]
-        - else
-          = sort_title_recently_created
-        = sprite_icon('chevron-down', css_class: 'dropdown-menu-toggle-icon gl-top-3')
-      %ul.dropdown-menu.dropdown-menu-right
-        %li
-          - excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id]
-          = link_to page_filter_path(sort: sort_value_recently_created, without: excluded_filters) do
-            = sort_title_recently_created
-          = link_to page_filter_path(sort: sort_value_oldest_created, without: excluded_filters) do
-            = sort_title_oldest_created
-          = link_to page_filter_path(sort: sort_value_recently_updated, without: excluded_filters) do
-            = sort_title_recently_updated
-          = link_to page_filter_path(sort: sort_value_oldest_updated, without: excluded_filters) do
-            = sort_title_oldest_updated
+    .dropdown.gl-display-inline.gl-md-ml-3.issue-sort-dropdown.gl-mt-3.gl-md-mt-0
+      .btn-group{ role: 'group' }
+        .btn-group{ role: 'group' }
+          %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'gl-button btn btn-default' }
+            = sort_title
+            = sprite_icon('chevron-down', css_class: "dropdown-menu-toggle-icon gl-top-3")
+          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
+            %li
+              - excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id]
+              = sortable_item(sort_title_created_date, page_filter_path(sort: sort_value_recently_created, without: excluded_filters), sort_title)
+              = sortable_item(sort_title_latest_activity, page_filter_path(sort: sort_value_latest_activity, without: excluded_filters), sort_title)
+        = forks_sort_direction_button(sort_value)
 
     - if current_user && can?(current_user, :fork_project, @project)
       - if current_user.already_forked?(@project) && current_user.manageable_namespaces.size < 2
-        = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: _('Go to your fork'), class: 'btn gl-button btn-confirm' do
+        = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: _('Go to your fork'), class: 'btn gl-button btn-confirm gl-md-ml-3' do
           = sprite_icon('fork', size: 12)
           %span= _('Fork')
       - else
-        = link_to new_project_fork_path(@project), title: _("Fork project"), class: 'btn gl-button btn-confirm' do
+        = link_to new_project_fork_path(@project), title: _("Fork project"), class: 'btn gl-button btn-confirm gl-md-ml-3 gl-mt-3 gl-md-mt-0' do
           = sprite_icon('fork', size: 12)
           %span= _('Fork')