Repository: saleor/saleor

Issue:
Improve "Sort by" label appearance
"Sort by" label is rendered differently on the `demo` branch and on `master`. This is probably due to the fact that on demo it's rendered as React component and on master as Django template. However, we have to make sure that the markup and styling is the same in both cases.

Demo:
![image](https://user-images.githubusercontent.com/5421321/33717732-59419f6e-db5b-11e7-93a0-e0baada82979.png)
- missing space between the colon and the field name

Master:
![image](https://user-images.githubusercontent.com/5421321/33717836-a86de732-db5b-11e7-9508-92a620a9699a.png)
- missing colon
- too much space between the label and the icon

Also, I think that the arrow icon could be a little bit smaller; currently it's visually too heavy compared to the text.




Discussion:
The one from master looks like an i18n trap to me unless we have separate "sot by name", "sort by price" etc. strings. A hypothetical German translation (which is probably wrong because of my poor German but does a good job of highlighting the problem) could require it to say "nach Namen sortieren" where the active option is the middle word.
We don't, there is translation for "Sort by" and field names translations come from models.
Then I propose using `_("Sort by: %s")` where %s would be replaced by the name that comes from the backend.
We have it in the template currently: https://github.com/mirumee/saleor/blob/master/templates/category/index.html#L52
Template has:

```django
{% trans 'Sort by' context 'Category page filters' %}
<strong>
    {{ now_sorted_by }}
</strong>
```

While it should probably have:

```django
{% blocktrans with sorting_field=now_sorted_by context 'Category page current sort order indicator' trimmed %}
Sort by: <strong>{{ sorting_field }}</strong>
{% endblocktrans %}
```

(Not sure if we should be using `<strong>` there as it seems to be a decorative bold more than an emphasis.)
{{ now_sorted_by }} is translated in saleor.product.filter.py
@koradon that's not really relevant though?

Resolving patch:
diff --git a/saleor/core/utils/filters.py b/saleor/core/utils/filters.py
--- a/saleor/core/utils/filters.py
+++ b/saleor/core/utils/filters.py
@@ -9,12 +9,12 @@ def get_sort_by_choices(filter_set):
             filter_set.filters['sort_by'].field.choices[1::2]]
 
 
-def get_now_sorted_by(filter_set, fields, default_sort='name'):
+def get_now_sorted_by(filter_set, default_sort='name'):
     sort_by = filter_set.form.cleaned_data.get('sort_by')
     if sort_by:
-        sort_by = fields[sort_by[0].strip('-')]
+        sort_by = sort_by[0].strip('-')
     else:
-        sort_by = fields[default_sort]
+        sort_by = default_sort
     return sort_by
 
 
diff --git a/saleor/product/views.py b/saleor/product/views.py
--- a/saleor/product/views.py
+++ b/saleor/product/views.py
@@ -124,7 +124,7 @@ def category_index(request, path, category_id):
         product_filter.qs, settings.PAGINATE_BY, request.GET.get('page'))
     products_and_availability = list(products_with_availability(
         products_paginated, request.discounts, request.currency))
-    now_sorted_by = get_now_sorted_by(product_filter, SORT_BY_FIELDS)
+    now_sorted_by = get_now_sorted_by(product_filter)
     arg_sort_by = request.GET.get('sort_by')
     is_descending = arg_sort_by.startswith('-') if arg_sort_by else False
     ctx = {'category': category, 'filter': product_filter,


Test patch: