Merge branch '25925-fix-tag-sorting-and-filtering-options' into 'master'

Set default sort for tags to Last updated and fix nav controls spacing

Closes #25925

See merge request !8263

app/assets/stylesheets/framework/lists.scss

@@ -199,6 +199,7 @@ ul.content-list {
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
+    align-items: center;
     white-space: nowrap;
   }
 

app/assets/stylesheets/framework/nav.scss

@@ -116,8 +116,8 @@
     padding-top: 16px;
     padding-bottom: 11px;
     display: inline-block;
-    width: 50%;
     line-height: 28px;
+    white-space: normal;
 
     /* Small devices (phones, tablets, 768px and lower) */
     @media (max-width: $screen-xs-max) {
@@ -158,7 +158,6 @@
   }
 
   .nav-controls {
-    width: 50%;
     display: inline-block;
     float: right;
     text-align: right;
@@ -167,7 +166,9 @@
 
     > .btn,
     > .btn-container,
-    > .dropdown {
+    > .dropdown,
+    > input,
+    > form {
       margin-right: $gl-padding-top;
       display: inline-block;
       vertical-align: top;
@@ -182,19 +183,21 @@
       float: none;
     }
 
-    > form {
-      display: inline-block;
-    }
-
     .icon-label {
       display: none;
     }
 
-    input {
+    .btn,
+    .dropdown,
+    .dropdown-toggle,
+    input,
+    form {
       height: 35px;
+    }
+
+    input {
       display: inline-block;
       position: relative;
-      margin-right: $gl-padding-top;
 
       /* Medium devices (desktops, 992px and up) */
       @media (min-width: $screen-md-min) { width: 200px; }
@@ -218,6 +221,7 @@
       .btn,
       form,
       .dropdown,
+      .dropdown-toggle,
       .dropdown-menu-toggle,
       .form-control {
         margin: 0 0 10px;
@@ -272,6 +276,10 @@
       padding: 17px 0;
     }
   }
+
+  pre {
+    width: 100%;
+  }
 }
 
 .layout-nav {
@@ -427,33 +435,38 @@
 }
 
 @media (max-width: $screen-xs-max) {
-  .top-area .nav-controls {
-    $controls-margin: $btn-xs-side-margin - 2px;
+  .top-area {
+    flex-flow: row wrap;
 
-    &.controls-flex {
-      display: flex;
-      flex-flow: row wrap;
-      align-items: center;
-      justify-content: center;
-      padding: 0 0 $gl-padding-top;
-    }
+    .nav-controls {
+      $controls-margin: $btn-xs-side-margin - 2px;
+      flex: 0 0 100%;
+
+      &.controls-flex {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        justify-content: center;
+        padding: 0 0 $gl-padding-top;
+      }
 
-    .controls-item,
-    .controls-item:last-child {
-      flex: 1 1 35%;
-      display: block;
-      width: 100%;
-      margin: $controls-margin;
+      .controls-item,
+      .controls-item-full,
+      .controls-item:last-child {
+        flex: 1 1 35%;
+        display: block;
+        width: 100%;
+        margin: $controls-margin;
 
-      .btn,
-      .dropdown {
-        margin: 0;
+        .btn,
+        .dropdown {
+          margin: 0;
+        }
       }
-    }
 
-    .controls-item-full {
-      @extend .controls-item;
-      flex: 1 1 100%;
+      .controls-item-full {
+        flex: 1 1 100%;
+      }
     }
   }
 }

app/controllers/projects/tags_controller.rb

@@ -8,7 +8,7 @@ class Projects::TagsController < Projects::ApplicationController
   before_action :authorize_admin_project!, only: [:destroy]
 
   def index
-    params[:sort] = params[:sort].presence || 'name'
+    params[:sort] = params[:sort].presence || sort_value_recently_updated
 
     @sort = params[:sort]
     @tags = TagsFinder.new(@repository, params).execute

app/views/projects/tags/index.html.haml

@@ -2,17 +2,17 @@
 - page_title "Tags"
 = render "projects/commits/head"
 
-%div{ class: container_class }
-  .top-area
-    .nav-text
+%div.flex-list{ class: container_class }
+  .top-area.flex-row
+    .nav-text.row-main-content
       Tags give the ability to mark specific points in history as being important
 
-    .nav-controls
+    .nav-controls.row-fixed-content
       = form_tag(filter_tags_path, method: :get) do
         = search_field_tag :search, params[:search], { placeholder: 'Filter by tag name', id: 'tag-search', class: 'form-control search-text-input input-short', spellcheck: false }
 
       .dropdown
-        %button.dropdown-toggle.btn{ type: 'button', data: { toggle: 'dropdown'} }
+        %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown'} }
           %span.light
             = projects_sort_options_hash[@sort]
           = icon('chevron-down')