raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-02-28 01:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move filters into new column on desktop

Browse Source
This commit is contained in:
Matt-Yorkley
2020-04-19 13:32:11 +02:00
parent 3ca491683a
commit 532e27b7e1
5 changed files with 37 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/templates/filter_selector.html.haml
View File

@@ -1,4 +1,3 @@
%ul
%active-selector{ ng: { repeat: "selector in allSelectors", show: "ifDefined(selector.fits, true)" } }
%render-svg{path: "{{selector.object.icon}}", ng: { if: "selector.object.icon"} }
%span{"ng-bind" => "::selector.object.name"}

25
app/assets/stylesheets/darkswarm/_shop-filters.css.scss
View File

@@ -14,7 +14,7 @@
@include border-radius(0);
padding: 0;
margin: 0 0 0.25rem 0.25rem;
margin: 0 0.25rem 0.25rem 0;
&:hover, &:focus {
background: transparent;
@@ -140,25 +140,6 @@
.filter-shopfront {
&.taxon-selectors, &.property-selectors {
background: transparent;
single-line-selectors {
overflow-x: hidden;
white-space: nowrap;
.f-dropdown {
overflow-x: auto;
white-space: normal;
}
}
ul {
margin: 0;
display: inline-block;
}
ul, ul li {
list-style: none;
}
}
// Shopfront taxons
@@ -170,4 +151,8 @@
&.property-selectors {
@include filter-selector(#666, #ccc, #777);
}
ul {
margin: 0;
}
}

8
app/views/shop/products/_filters.html.haml
View File

@@ -1,5 +1,5 @@
.filter-shopfront.taxon-selectors.text-right{ng: {show: 'supplied_taxons != null'}}
%single-line-selectors{ selectors: "taxonSelectors", objects: "supplied_taxons", "active-selectors" => "activeTaxons"}
.filter-shopfront.taxon-selectors{ng: {show: 'supplied_taxons != null'}}
%filter-selector{ 'selector-set' => "taxonSelectors", objects: "supplied_taxons", "active-selectors" => "activeTaxons"}
.filter-shopfront.property-selectors.text-right{ng: {show: 'supplied_properties != null'}}
%single-line-selectors{ selectors: "propertySelectors", objects: "supplied_properties", "active-selectors" => "activeProperties"}
.filter-shopfront.property-selectors{ng: {show: 'supplied_properties != null'}}
%filter-selector{ 'selector-set' => "propertySelectors", objects: "supplied_properties", "active-selectors" => "activeProperties"}

52
app/views/shop/products/_form.html.haml
View File

@@ -19,36 +19,38 @@
= t :products_with
%span.applied-search "{{ query }}"
.row
.small-12.medium-6.large-5.columns
.small-12.columns
%input#search.text{"ng-model" => "query",
placeholder: t(:products_search),
"ng-debounce" => "200",
"ofn-disable-enter" => true}
.small-12.medium-6.large-6.large-offset-1.columns
= render partial: "shop/products/filters"
.row
%div.pad-top{ "infinite-scroll" => "loadMore()", "infinite-scroll-distance" => "1", "infinite-scroll-disabled" => 'Products.loading' }
%product.animate-repeat{"ng-controller" => "ProductNodeCtrl", "ng-repeat" => "product in Products.products track by product.id", "id" => "product-{{ product.id }}"}
= render "shop/products/summary"
%shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"}
.medium-12.large-10.columns
%div.pad-top{ "infinite-scroll" => "loadMore()", "infinite-scroll-distance" => "1", "infinite-scroll-disabled" => 'Products.loading' }
%product.animate-repeat{"ng-controller" => "ProductNodeCtrl", "ng-repeat" => "product in Products.products track by product.id", "id" => "product-{{ product.id }}"}
= render "shop/products/summary"
%shop-variant{variant: 'variant', "ng-repeat" => "variant in product.variants | orderBy: ['name_to_display','unit_value'] track by variant.id", "id" => "variant-{{ variant.id }}", "ng-class" => "{'out-of-stock': !variant.on_demand && variant.on_hand == 0}"}
%product{"ng-show" => "Products.loading"}
.row.summary
.small-12.columns.text-center
= t :products_loading
.row
.small-12.columns.text-center
%img.spinner{ src: "/assets/spinning-circles.svg" }
%product{"ng-show" => "Products.loading"}
.row.summary
.small-12.columns.text-center
= t :products_loading
.row
.small-12.columns.text-center
%img.spinner{ src: "/assets/spinning-circles.svg" }
%div{"ng-show" => "Products.products.length == 0 && !Products.loading"}
.row.summary
.small-12.columns
%p.no-results
= t :search_no_results_html, query: "<strong>{{query}}</strong>".html_safe
.row
.small-12.columns
%form{action: main_app.cart_path}
%i.ofn-i_011-spinner.cart-spinner{"ng-show" => "Cart.dirty"}
%input.small.button.primary.right.add_to_cart{type: :submit, value: "{{ Cart.dirty ? '#{t(:products_updating_cart)}' : (Cart.empty() ? '#{t(:products_cart_empty)}' : '#{t(:products_edit_cart)}' ) }}", "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" }
%div{"ng-show" => "Products.products.length == 0 && !Products.loading"}
.row.summary
.small-12.columns
%p.no-results
= t :search_no_results_html, query: "<strong>{{query}}</strong>".html_safe
.row
.small-12.columns
%form{action: main_app.cart_path}
%i.ofn-i_011-spinner.cart-spinner{"ng-show" => "Cart.dirty"}
%input.small.button.primary.right.add_to_cart{type: :submit, value: "{{ Cart.dirty ? '#{t(:products_updating_cart)}' : (Cart.empty() ? '#{t(:products_cart_empty)}' : '#{t(:products_edit_cart)}' ) }}", "ng-disabled" => "Cart.dirty || Cart.empty()", "ng-class" => "{ dirty: Cart.dirty }" }
.hide-for-medium-down.large-2.columns
%h5= t(:products_filter_by)
= render partial: "shop/products/filters"

1
config/locales/en.yml
View File

@@ -1653,6 +1653,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using
products_or: "OR"
products_with: with
products_search: "Search by product or producer"
products_filter_by: "Filter by"
products_loading: "Loading products..."
products_updating_cart: "Updating cart..."
products_cart_empty: "Cart empty"