From a3b4a4bbca50a79532f6fc5e3df83754258ec8ae Mon Sep 17 00:00:00 2001
From: Noah Lancien <noah.lancien@ldc.fr>
Date: Thu, 13 Feb 2025 12:46:34 +0100
Subject: [PATCH] fix: feedback on user basket

---
 .../sable/js/components/BasketButtons.vue     |  6 ++++-
 .../front/sable/js/components/BasketRecap.vue | 25 +++++++++++--------
 .../front/sable/sass/fo/pages/_command.scss   |  7 +++++-
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/resources/views/front/sable/js/components/BasketButtons.vue b/resources/views/front/sable/js/components/BasketButtons.vue
index 9804656..843f08a 100644
--- a/resources/views/front/sable/js/components/BasketButtons.vue
+++ b/resources/views/front/sable/js/components/BasketButtons.vue
@@ -18,6 +18,10 @@
                 type: Number,
                 default : 0
             },
+            shouldCardBeGreen: {
+                type: Boolean,
+                default: true
+            },
         },
         computed: {
             panier() { return this.$store.state.panier; },
@@ -72,7 +76,7 @@
                         foundQtty = element.cartItem.qty;
                     }
                 });
-                if(this.$el.closest('.card')) {
+                if(this.$el.closest('.card') && this.shouldCardBeGreen) {
                     if(foundQtty) {
                         this.$el.closest('.card').classList.add("card-activate");
                     } else {
diff --git a/resources/views/front/sable/js/components/BasketRecap.vue b/resources/views/front/sable/js/components/BasketRecap.vue
index d8178c6..a20364a 100644
--- a/resources/views/front/sable/js/components/BasketRecap.vue
+++ b/resources/views/front/sable/js/components/BasketRecap.vue
@@ -32,14 +32,16 @@
                                     >
                                 </div>
                                 <div class="card-body d-flex flex-column justify-content-between justify-content-lg-center align-items-start w-75 h-100 ps-2">
-                                    <a :href="'/produit/'+item.product.slug"
-                                        class="text-decoration-none"
-                                        :title="item.product.name" target="_self">
-                                        <p class="title-small font-Barlow-bold stretched-link text-dark m-0">
-                                            {{ item.product.name }}
-                                        </p>
-                                    </a>
-                                    <div v-if="item.product.description" class="card-text" v-html="item.product.description"></div>
+                                    <div class="me-5">
+                                        <a :href="'/produit/'+item.product.slug"
+                                            class="text-decoration-none"
+                                            :title="item.product.name" target="_self">
+                                            <p class="title-small font-Barlow-bold stretched-link text-dark m-0">
+                                                {{ item.product.name }}
+                                            </p>
+                                        </a>
+                                    </div>
+                                    <div v-if="item.product.description" class="card-text d-none d-lg-block" v-html="item.product.description"></div>
                                     <p v-if="item.product.weight_variable" class="fst-italic text-muted">
                                         *Produit vendu au kilo : {{ currencyFormatter(item.product.calculatedPrices.priceKgTtc) }}/kg
                                     </p>
@@ -48,10 +50,13 @@
                                     </p>
                                     <div class="card-action d-flex justify-content-between align-items-center w-100">
                                         <div class="card-price d-flex flex-row justify-content-center align-items-center">
-                                            <span class="card-price-new d-block d-lg-none ms-1">
+                                            <span class="card-price-new d-block d-lg-none ms-1 fw-bold">
                                                 {{ currencyFormatter(item.product.calculatedPrices.discountedPriceTtc * item.cartItem.qty) }}
                                             </span>
                                         </div>
+                                        <div class="d-lg-none">
+                                            <BasketButtons :productId="item.product.id" :shouldCardBeGreen="false" />
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -59,7 +64,7 @@
                         </td>
                         <!-- END CARD -->
                         <td class="d-none d-lg-table-cell title-small border-0 text-center align-middle font-Barlow-extra-bold">
-                            <BasketButtons :productId="item.product.id" />
+                            <BasketButtons :productId="item.product.id" :shouldCardBeGreen="false" />
                         </td>
                         <td class="d-none d-lg-table-cell title-small border-0 text-center align-middle font-Barlow-extra-bold">
                             <template v-if="item.product.weight_variable">
diff --git a/resources/views/front/sable/sass/fo/pages/_command.scss b/resources/views/front/sable/sass/fo/pages/_command.scss
index 080894b..508f06e 100644
--- a/resources/views/front/sable/sass/fo/pages/_command.scss
+++ b/resources/views/front/sable/sass/fo/pages/_command.scss
@@ -41,6 +41,7 @@
         .btn-cross {
             right: .5rem;
             top: .5rem;
+            z-index: 1;
         }
     }
 
@@ -49,6 +50,7 @@
         z-index: $zindex-fixed;
     }
 }
+
 // LLLLLLLLLLL                     GGGGGGGGGGGGG
 // L:::::::::L                  GGG::::::::::::G
 // L:::::::::L                GG:::::::::::::::G
@@ -65,7 +67,9 @@
 // L::::::::::::::::::::::L   GG:::::::::::::::G
 // L::::::::::::::::::::::L     GGG::::::GGG:::G
 // LLLLLLLLLLLLLLLLLLLLLLLL        GGGGGG   GGGG
-@include media-breakpoint-up(lg) { //992px
+@include media-breakpoint-up(lg) {
+
+    //992px
     #command {
         .order {
             background-color: transparent;
@@ -112,6 +116,7 @@
             &-total {
                 font-size: 1em;
                 position: initial;
+
                 td:not(.font-Barlow-extra-bold) {
                     font-family: 'Barlow_Regular';
                 }