From b59e1f43330724fc64689299c12d074d264719ba Mon Sep 17 00:00:00 2001
From: Baptiste Lemoine <baptiste.lemoine@ext.ercom.fr>
Date: Thu, 19 Jul 2018 18:26:54 +0200
Subject: [PATCH] horizontal scroll for categories

---
 .../logged/angular/listing-products.html.twig | 64 ++++++++++---------
 .../logged/angular/loaded-caisse.html.twig    |  5 +-
 .../views/logged/dashboard.html.twig          | 18 ++++--
 assets/css/pages/_dashboard.scss              | 28 +++++++-
 4 files changed, 73 insertions(+), 42 deletions(-)

diff --git a/app/Resources/views/logged/angular/listing-products.html.twig b/app/Resources/views/logged/angular/listing-products.html.twig
index 4c71634a..bed0d5b1 100755
--- a/app/Resources/views/logged/angular/listing-products.html.twig
+++ b/app/Resources/views/logged/angular/listing-products.html.twig
@@ -1,35 +1,39 @@
 {% verbatim %}
-<div class="row">
-<div class="category-listing" ng-repeat="c in categories">
+<div class="horizontal-land">
+    <div class="super-large" style="min-width: {{(1+categories.length) * 300}}px">
+        <div class="category-listing one-category col-xs-4 col-sm-3 " ng-repeat="c in categories">
 
-    <h2 ng-class="{'hidden':c.hidden}">
-        {{ c.name }}
-    </h2>
-    <span ng-repeat="p in c.products track by p.id"
-            class="product-box"
-            ng-class="{ 'btn-primary' : activeItemsSold.indexOf(p.id) !==-1}"
-            >
-        <button class="product-button"  ng-click="addProduct( p )">
-            <img class="product-image" src="{{p.image}}" alt="image" ng-if="p.image.length">
-            <span class="product-name">
-             {{ p.name }}
-            </span>
-            <span class="badge">
-                 {{ p.price }} €
-            </span>
-            <span class="badge badge-default" ng-if="show_config.stock_count">
-                 {{ p.stockCount }}
-            </span>
-            <span class="badge badge-success" ng-if="show_config.sold">
-                 <i class="fa fa-tick"></i>
-                 {{ countProductsSoldForActiveFestival[p.id] }}
-            </span>
-        </button>
-         <button class="express-button" ng-if="expressSelling" ng-click="expressSell(p)" title="achat express sans compléter les infos du client">
-            <i class="fa fa-shopping-cart"></i>
-        </button>
-    </span>
+            <h2 ng-class="{'hidden':c.hidden}">
+                {{ c.name }}
+            </h2>
+            <div class="product-listing" ng-if="! c.hidden">
+                <span ng-repeat="p in c.products track by p.id"
+                        class="product-box"
+                        ng-class="{ 'btn-primary' : activeItemsSold.indexOf(p.id) !==-1}"
+                        >
+                    <button class="product-button"  ng-click="addProduct( p )">
+                        <img class="product-image" src="{{p.image}}" alt="image" ng-if="p.image.length">
+                        <span class="product-name">
+                         {{ p.name }}
+                        </span>
+                        <span class="badge">
+                             {{ p.price }} €
+                        </span>
+                        <span class="badge badge-default" ng-if="show_config.stock_count">
+                             {{ p.stockCount }}
+                        </span>
+                        <span class="badge badge-success" ng-if="show_config.sold">
+                             <i class="fa fa-tick"></i>
+                             {{ countProductsSoldForActiveFestival[p.id] }}
+                        </span>
+                    </button>
+                     <button class="express-button" ng-if="expressSelling" ng-click="expressSell(p)" title="achat express sans compléter les infos du client">
+                        <i class="fa fa-shopping-cart"></i>
+                    </button>
+                </span>
+            </div>
+        </div>
 
-</div>
+    </div>
 </div>
 {% endverbatim %}
diff --git a/app/Resources/views/logged/angular/loaded-caisse.html.twig b/app/Resources/views/logged/angular/loaded-caisse.html.twig
index 3cef9f0e..8955e9ea 100755
--- a/app/Resources/views/logged/angular/loaded-caisse.html.twig
+++ b/app/Resources/views/logged/angular/loaded-caisse.html.twig
@@ -5,13 +5,12 @@
     <!--caisse IHM-->
     <div id="load_ok">
 
-        <div class="listing-products col-xs-12 col-sm-7">
+        <div class="listing-products col-xs-12 col-sm-12">
             {% include 'logged/angular/messages.html.twig' %}
             {% include 'logged/angular/listing-products.html.twig' %}
 
-
         </div>
-        <div class="sellings col-xs-12 col-sm-5">
+        <div class="sellings col-xs-12 col-sm-12">
             <div class="well" ng-class="{'bg-success text-success': sellingOk }">
 
                 {% include 'logged/angular/validate-button.html.twig' %}
diff --git a/app/Resources/views/logged/dashboard.html.twig b/app/Resources/views/logged/dashboard.html.twig
index 93bdab19..51c6c59b 100755
--- a/app/Resources/views/logged/dashboard.html.twig
+++ b/app/Resources/views/logged/dashboard.html.twig
@@ -9,7 +9,7 @@
                  ng-controller="CaisseCtrl as MainCtrl"
             >
                 <div class="row marged-v">
-                    <div class="col-xs-12 col-md-6">
+                    <div class="col-xs-12 col-md-12">
                         <button
                                 title="la vente express vous permet d'enregistrer une vente pour un seul article sans remplir le formulaire de détail"
                                 class="btn"
@@ -43,7 +43,7 @@
                         </button>
                     </div>
                     <div class="col-xs-12 col-md-6">
-                        <div class="client-now text-right">
+                        <div class="client-now text-right padded">
                             <i class="fa fa-user"></i>
                             Client actuel:
                             {% verbatim %}
@@ -69,23 +69,28 @@
                         </div>
                     </div>
                 </div>
+            </div>
 
+            <div class="row">
 
                 {% include 'logged/caisse-main.html.twig' %}
+            </div>
 
                 {% verbatim %}
-                    <div class="choice-categories" ng-if="categories.length">
+                    <div class="choice-categories well" ng-if="categories.length">
                         <h2>
+                        <i class="fa-eye fa"></i>
                             Visibilité des catégories
                         </h2>
 
                         <div
                                 ng-repeat="c in categories"
                         >
-                            <div class="btn"
+                            <div class="btn btn-block"
                                  ng-class="{'btn-success': !c.hidden}"
                                  ng-click="c.hidden = !c.hidden">
                                 {{ c.name }}
+                                <span ng-if="c.hidden">(caché)</span>
                             </div>
                         </div>
 
@@ -102,9 +107,10 @@
             <div id="history" class="tab-pane fade">
                 <h2>Historique</h2>
             </div>
-
-                                {% endverbatim %}
+{% endverbatim %}
             </div>
         </div>
+</div>
+    </div>
 
         {% endblock %}
diff --git a/assets/css/pages/_dashboard.scss b/assets/css/pages/_dashboard.scss
index 8823387f..bdfda7ec 100755
--- a/assets/css/pages/_dashboard.scss
+++ b/assets/css/pages/_dashboard.scss
@@ -4,14 +4,16 @@
     margin-right: 1rem;
     margin-bottom: 1rem;
     width: 100%;
+    float: left;
   }
   .product-button {
     width: 80%;
     text-overflow-ellipsis: "...";
   }
   .listing-products {
+
     .btn, button {
-      font-size: 2rem;
+      font-size: 1.6rem;
       background: white;
       padding: 1.5rem;
       -webkit-border-radius: 1rem;
@@ -37,13 +39,33 @@
 
 }
 
+// container of categories
+.horizontal-land {
+  overflow-x: auto;
+  overflow-y: hidden;
+  //width: 100%;
+  height: 80vh;
+  background: #ccc;
+  padding: 0.5rem;
+}
+
+// list of one category
+.one-category {
+  background: #dedede;
+  width: 300px;
+  margin: 0 4px;
+  height: calc(80vh - 1rem);
+  box-sizing: border-box;
+  display: inline-block;
+  //vertical-align: top;
+  white-space: nowrap;
+  //float: left;
+}
 .category-listing{
   border: solid 1px $grey;
   padding: 1rem;
   margin: 0.5rem;
   border-radius: 0.25rem;
-  width: calc(50% - 2rem);
-  float: left;
 }
 .validate_selling {
   margin: 0.25rem;