From aa614d3e504eaa28cd8490c6e28e4a7f923cfbed Mon Sep 17 00:00:00 2001
From: Michael Babker <michael.babker@gmail.com>
Date: Tue, 12 Jun 2018 09:26:08 -0500
Subject: [PATCH] Improve use of Semantic's cards in frontend

---
 src/Sylius/Behat/Page/Shop/Product/IndexPage.php |  8 ++++----
 .../views/Product/Index/_main.html.twig          |  6 ++----
 .../views/Product/_horizontalList.html.twig      | 16 ++++------------
 3 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/Sylius/Behat/Page/Shop/Product/IndexPage.php b/src/Sylius/Behat/Page/Shop/Product/IndexPage.php
index e930c9c54f4..041d4595dbd 100644
--- a/src/Sylius/Behat/Page/Shop/Product/IndexPage.php
+++ b/src/Sylius/Behat/Page/Shop/Product/IndexPage.php
@@ -32,7 +32,7 @@ public function countProductsItems()
     {
         $productsList = $this->getDocument()->find('css', '#products');
 
-        $products = $productsList->findAll('css', '.column > .card');
+        $products = $productsList->findAll('css', '.card');
 
         return count($products);
     }
@@ -44,7 +44,7 @@ public function getFirstProductNameFromList()
     {
         $productsList = $this->getDocument()->find('css', '#products');
 
-        return $productsList->find('css', '.column:first-child .content > a')->getText();
+        return $productsList->find('css', '.card:first-child .content > a')->getText();
     }
 
     /**
@@ -54,7 +54,7 @@ public function getLastProductNameFromList()
     {
         $productsList = $this->getDocument()->find('css', '#products');
 
-        return $productsList->find('css', '.column:last-child .content > a')->getText();
+        return $productsList->find('css', '.card:last-child .content > a')->getText();
     }
 
     /**
@@ -119,7 +119,7 @@ public function isProductOnPageWithName($name)
     public function hasProductsInOrder(array $productNames)
     {
         $productsList = $this->getDocument()->find('css', '#products');
-        $products = $productsList->findAll('css', '.column  .content > .sylius-product-name');
+        $products = $productsList->findAll('css', '.card  .content > .sylius-product-name');
 
         foreach ($productNames as $key => $value) {
             if ($products[$key]->getText() !== $value) {
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Product/Index/_main.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Product/Index/_main.html.twig
index ebeb3d8c92b..aaac8402c8c 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Product/Index/_main.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Product/Index/_main.html.twig
@@ -15,11 +15,9 @@
 {{ sonata_block_render_event('sylius.shop.product.index.before_list', {'products': resources.data}) }}
 
 {% if resources.data|length > 0 %}
-    <div class="ui three column stackable grid" id="products">
+    <div class="ui three cards" id="products">
         {% for product in resources.data %}
-            <div class="column">
-                {% include '@SyliusShop/Product/_box.html.twig' %}
-            </div>
+            {% include '@SyliusShop/Product/_box.html.twig' %}
         {% endfor %}
     </div>
     <div class="ui hidden divider"></div>
diff --git a/src/Sylius/Bundle/ShopBundle/Resources/views/Product/_horizontalList.html.twig b/src/Sylius/Bundle/ShopBundle/Resources/views/Product/_horizontalList.html.twig
index 03d7873fe8f..a9cbdcd9f76 100644
--- a/src/Sylius/Bundle/ShopBundle/Resources/views/Product/_horizontalList.html.twig
+++ b/src/Sylius/Bundle/ShopBundle/Resources/views/Product/_horizontalList.html.twig
@@ -1,13 +1,5 @@
-<div class="ui four column stackable grid">
-    <div class="row">
-        {% for product in products %}
-            <div class="column">
-                {% include '@SyliusShop/Product/_box.html.twig' %}
-            </div>
-    {% if 0 == loop.index % 4 %}
-    </div>
-    <div class="row">
-    {% endif %}
-        {% endfor %}
-    </div>
+<div class="ui four doubling cards">
+    {% for product in products %}
+        {% include '@SyliusShop/Product/_box.html.twig' %}
+    {% endfor %}
 </div>