Add icon to sortable table

app/assets/stylesheets/admin.scss

@@ -372,6 +372,44 @@ $sidebar-active: #f4fcd0;
   color: $text-medium;
 }
 
+.icon-sortable {
+  font-family: "icons";
+  font-size: $small-font-size;
+  padding-right: $line-height / 2;
+  position: relative;
+
+  &::before,
+  &::after {
+    left: 6px;
+    opacity: 0.25;
+    position: absolute;
+  }
+
+  &::before {
+    content: "\57";
+    top: -2px;
+  }
+
+  &::after {
+    content: "\52";
+    bottom: -10px;
+  }
+
+  &.asc {
+
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  &.desc {
+
+    &::before {
+      opacity: 1;
+    }
+  }
+}
+
 // 02. Sidebar
 // -----------
 

app/helpers/budget_investments_helper.rb

@@ -1,6 +1,6 @@
 module BudgetInvestmentsHelper
   def budget_investments_advanced_filters(params)
-    params.map { |af| t("admin.budget_investments.index.filters.#{af}") }.join(', ')
+    params.map { |af| t("admin.budget_investments.index.filters.#{af}") }.join(", ")
   end
 
   def link_to_investments_sorted_by(column)
@@ -10,7 +10,7 @@ module BudgetInvestmentsHelper
     translation = t("admin.budget_investments.index.list.#{column}")
 
     link_to(
-      "#{translation} <span class='#{icon}'></span>".html_safe,
+      "#{translation} <span class='icon-sortable #{icon}'></span>".html_safe,
       admin_budget_budget_investments_path(sort_by: column, direction: direction)
     )
   end
@@ -18,9 +18,9 @@ module BudgetInvestmentsHelper
   def set_sorting_icon(direction, sort_by)
     if sort_by.to_s == params[:sort_by]
       if direction == "desc"
-        "icon-arrow-top"
+        "desc"
       else
-        "icon-arrow-down"
+        "asc"
       end
     else
       ""

spec/features/admin/budget_investments_spec.rb

@@ -641,7 +641,7 @@ feature 'Admin budget investments' do
         expect('B First Investment').to appear_before('A Second Investment')
         expect('A Second Investment').to appear_before('C Third Investment')
         within('th', text: 'ID') do
-          expect(page).to have_css(".icon-arrow-top")
+          expect(page).to have_css(".icon-sortable.desc")
         end
       end
 
@@ -651,7 +651,7 @@ feature 'Admin budget investments' do
         expect('A Second Investment').to appear_before('B First Investment')
         expect('B First Investment').to appear_before('C Third Investment')
         within('th', text: 'Title') do
-          expect(page).to have_css(".icon-arrow-top")
+          expect(page).to have_css(".icon-sortable.desc")
         end
       end
 
@@ -661,7 +661,7 @@ feature 'Admin budget investments' do
         expect('C Third Investment').to appear_before('A Second Investment')
         expect('A Second Investment').to appear_before('B First Investment')
         within('th', text: 'Supports') do
-          expect(page).to have_css(".icon-arrow-top")
+          expect(page).to have_css(".icon-sortable.desc")
         end
       end
     end
@@ -673,7 +673,7 @@ feature 'Admin budget investments' do
         expect('C Third Investment').to appear_before('A Second Investment')
         expect('A Second Investment').to appear_before('B First Investment')
         within('th', text: 'ID') do
-          expect(page).to have_css(".icon-arrow-down")
+          expect(page).to have_css(".icon-sortable.asc")
         end
       end
 
@@ -683,7 +683,7 @@ feature 'Admin budget investments' do
         expect('C Third Investment').to appear_before('B First Investment')
         expect('B First Investment').to appear_before('A Second Investment')
         within('th', text: 'Title') do
-          expect(page).to have_css(".icon-arrow-down")
+          expect(page).to have_css(".icon-sortable.asc")
         end
       end
 
@@ -693,7 +693,7 @@ feature 'Admin budget investments' do
         expect('B First Investment').to appear_before('A Second Investment')
         expect('A Second Investment').to appear_before('C Third Investment')
         within('th', text: 'Supports') do
-          expect(page).to have_css(".icon-arrow-down")
+          expect(page).to have_css(".icon-sortable.asc")
         end
       end
     end
@@ -705,7 +705,7 @@ feature 'Admin budget investments' do
         expect('B First Investment').to appear_before('A Second Investment')
         expect('A Second Investment').to appear_before('C Third Investment')
         within('th', text: 'ID') do
-          expect(page).to have_css(".icon-arrow-top")
+          expect(page).to have_css(".icon-sortable.desc")
         end
       end
 
@@ -715,7 +715,7 @@ feature 'Admin budget investments' do
         expect('A Second Investment').to appear_before('B First Investment')
         expect('B First Investment').to appear_before('C Third Investment')
         within('th', text: 'Title') do
-          expect(page).to have_css(".icon-arrow-top")
+          expect(page).to have_css(".icon-sortable.desc")
         end
       end
 
@@ -725,7 +725,7 @@ feature 'Admin budget investments' do
         expect('C Third Investment').to appear_before('A Second Investment')
         expect('A Second Investment').to appear_before('B First Investment')
         within('th', text: 'Supports') do
-          expect(page).to have_css(".icon-arrow-top")
+          expect(page).to have_css(".icon-sortable.desc")
         end
       end
     end
@@ -737,7 +737,7 @@ feature 'Admin budget investments' do
         expect('B First Investment').to appear_before('A Second Investment')
         expect('A Second Investment').to appear_before('C Third Investment')
         within('th', text: 'ID') do
-          expect(page).to have_css(".icon-arrow-top")
+          expect(page).to have_css(".icon-sortable.desc")
         end
       end
     end