From fe1618cadaec417a08f62ceb88713766ec0b900a Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Tue, 21 Apr 2020 14:09:58 +1000
Subject: [PATCH] Add description to product listing

It's truncated to one line and a click reveals the modal.
---
 .../product_node_controller.js.coffee         |  2 +-
 .../darkswarm/_shop-product-rows.scss         | 42 +++++++++++++++----
 app/views/shop/products/_summary.html.haml    | 11 +++--
 3 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/darkswarm/controllers/products/product_node_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/products/product_node_controller.js.coffee
index fb8ac8d288..5a723fb8b1 100644
--- a/app/assets/javascripts/darkswarm/controllers/products/product_node_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/products/product_node_controller.js.coffee
@@ -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)
diff --git a/app/assets/stylesheets/darkswarm/_shop-product-rows.scss b/app/assets/stylesheets/darkswarm/_shop-product-rows.scss
index d0bc482e8d..bb01a365c9 100644
--- a/app/assets/stylesheets/darkswarm/_shop-product-rows.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-product-rows.scss
@@ -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;
+                }
+              }
+            }
+          }
         }
       }
     }
diff --git a/app/views/shop/products/_summary.html.haml b/app/views/shop/products/_summary.html.haml
index 376de32898..44ac2e67fa 100644
--- a/app/views/shop/products/_summary.html.haml
+++ b/app/views/shop/products/_summary.html.haml
@@ -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" }