raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-05 02:41:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add description to product listing

Browse Source 
It's truncated to one line and a click reveals the modal.
This commit is contained in:
Maikel Linke
2020-04-21 14:09:58 +10:00
parent afed46531c
commit fe1618cada
3 changed files with 41 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/darkswarm/controllers/products/product_node_controller.js.coffee
View File

@@ -1,6 +1,6 @@
Darkswarm.controller "ProductNodeCtrl", ($scope, $modal, FilterSelectorsService) ->
$scope.enterprise = $scope.product.supplier # For the modal, so it's consistent
$scope.productPropertySelectors = FilterSelectorsService.createSelectors()
$scope.triggerProductModal = ->
$scope.productPropertySelectors = FilterSelectorsService.createSelectors()
$modal.open(templateUrl: "product_modal.html", scope: $scope)

42
app/assets/stylesheets/darkswarm/_shop-product-rows.scss
View File

@@ -112,22 +112,24 @@
padding-left: 0.9375rem;
}
small {
font-size: 80%;
}
.product-producer {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-style: italic;
small a {
color: $teal-500;
a {
color: $teal-500;
&:hover, &:focus, &:active {
color: $teal-600;
text-decoration: underline;
&:hover, &:focus, &:active {
color: $teal-600;
text-decoration: underline;
}
}
}
h3 {
font-size: 1.5rem;
margin: 0;
}
h3 a {
@@ -138,6 +140,28 @@
text-decoration: underline;
}
}
.product-description {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-properties {
margin: .5em 0;
li {
margin: 0 0.25rem 0 0;
a {
padding: 0.1em 0.625em;
&.has-tip {
font-weight: normal;
}
}
}
}
}
}
}

11
app/views/shop/products/_summary.html.haml
View File

@@ -4,13 +4,16 @@
%img{"ng-src" => "{{::product.primaryImageOrMissing}}", "ng-click" => "triggerProductModal()"}
.row.summary
.small-10.medium-10.large-11.columns.summary-header
.small-10.medium-10.large-11.summary-header
%h3
%a{"ng-click" => "triggerProductModal()", href: 'javascript:void(0)'}
%span{"ng-bind" => "::product.name"}
%small
%em
= t :products_from
%p.product-description{ng: {bind: "::product.description", click: "triggerProductModal()"}}
.product-producer
= t :products_from
%span
%enterprise-modal
%span{"ng-bind" => "::enterprise.name"}
.product-properties.filter-shopfront.property-selectors
%filter-selector{ 'selector-set' => "productPropertySelectors", objects: "[product] | propertiesWithValuesOf" }