From 3b8edf8e671fcef3c21d3b5a4db1231c6f13b918 Mon Sep 17 00:00:00 2001
From: Harrys Ravalomanana <hra@esokia.com>
Date: Wed, 4 Dec 2019 17:24:12 +0400
Subject: [PATCH] PHRAS-2848

---
 .../jquery-mobile/_jquery-validator.scss      | 82 ++++++++++++++++++-
 templates/mobile/lightbox/index.html.twig     | 72 ++++++++--------
 2 files changed, 121 insertions(+), 33 deletions(-)

diff --git a/resources/www/lightbox/styles/jquery-mobile/_jquery-validator.scss b/resources/www/lightbox/styles/jquery-mobile/_jquery-validator.scss
index a64f197f32..4edfa60d29 100644
--- a/resources/www/lightbox/styles/jquery-mobile/_jquery-validator.scss
+++ b/resources/www/lightbox/styles/jquery-mobile/_jquery-validator.scss
@@ -217,7 +217,7 @@ a.active_choice {
     font-size: 15px;
   }
 }
-#validation, #basket {
+#validation, #baskets {
   .ui-content {
     padding-left: 0;
     padding-right: 0;
@@ -231,5 +231,85 @@ a.active_choice {
   text-shadow: none;
   color: #fff;
   font-weight: 700;
+  #baskets & {
+    background: $basketColor;
+  }
+  span {
+    float: right;
+  }
 }
 
+.feed-list {
+  li {
+    height: 71px;
+    padding-left: 109px!important;
+    padding-right: 80px!important;
+    border-color: #d4d4d4!important;
+  }
+  .lightbox-img {
+    width: 90px;
+    height: 90px;
+    background-color: #ededed;
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: flex;
+    flex-wrap: wrap;
+    img {
+      display: flex;
+      align-items: center;
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+    }
+  }
+  h3 {
+    display: flex!important;
+    align-items: center;
+    height: 71px;
+    margin: 0!important;
+    font-size: 15px;
+    font-weight: bold!important;
+    a {
+      position: relative;
+      color: #313131!important;
+      width: 100%;
+      &:after {
+        content: "\e96c";
+        font-family: icomoon;
+        position: absolute;
+        right: 0;
+        font-size: 20px;
+        line-height: 1;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
+  }
+  span {
+    font-size: 17px;
+    color: #fff!important;
+    display: inline-block;
+    text-shadow: none!important;
+    top: 0;
+    width: 52px;
+    right: 0;
+    line-height: 25px;
+    padding: 31px 0px;
+    margin: 0;
+    border-radius: 0;
+    &.validation {
+      background: $feedbackColor!important;
+    }
+    &.baskets {
+      background: $basketColor!important;
+    }
+  }
+
+}
+.lightbox-msg {
+  font-size: 14px;
+  color: #313131;
+  padding: 6px 0 6px 30px;
+}
diff --git a/templates/mobile/lightbox/index.html.twig b/templates/mobile/lightbox/index.html.twig
index 418df10caa..5fb65f9f58 100644
--- a/templates/mobile/lightbox/index.html.twig
+++ b/templates/mobile/lightbox/index.html.twig
@@ -99,24 +99,28 @@
         {{ 'Validations' | trans }}
         <span>{{_self.valid_baskets_length(baskets_collection)}}</span>
       </p>
-      <p>
+      <p class="lightbox-msg">
         {{ 'Voici vos validations en cours' | trans }}
       </p>
-    <ul data-role="listview"  style="width:100%;margin: 0;">
-            {% for basket in baskets_collection | sort | reverse%}
-              {% if basket.getValidation() %}
-                {% set basket_length = basket.getElements().count() %}
-                <li>
-                  {% if basket.getElements().first() %}
-                  <img src="{{ basket.getElements().first().getRecord(app).get_thumbnail.get_url()}}" />
-                  {% endif %}
-                  <h3><a href="{{ path('lightbox_validation', { 'basket' : basket.getId() }) }}">{{basket.getName()}}</a></h3>
-                  <p>{{ basket.getDescription() }}</p>
-                  <span class="ui-li-count">{{ basket_length }}</span>
-                </li>
-              {% endif %}
-            {% endfor %}
-    </ul>
+        <div class="feed-list">
+            <ul data-role="listview"  style="width:100%;margin: 0;">
+                    {% for basket in baskets_collection | sort | reverse%}
+                      {% if basket.getValidation() %}
+                        {% set basket_length = basket.getElements().count() %}
+                        <li>
+                          {% if basket.getElements().first() %}
+                              <div class="lightbox-img">
+                                <img src="{{ basket.getElements().first().getRecord(app).get_thumbnail.get_url()}}" />
+                              </div>
+                                  {% endif %}
+                          <h3><a href="{{ path('lightbox_validation', { 'basket' : basket.getId() }) }}">{{basket.getName()}}</a></h3>
+                          <p>{{ basket.getDescription() }}</p>
+                          <span class="ui-li-count validation">{{ basket_length }}</span>
+                        </li>
+                      {% endif %}
+                    {% endfor %}
+            </ul>
+        </div>
   </div>
     <div data-role="footer">
 
@@ -136,24 +140,28 @@
         {{ 'Paniers' | trans }}
         <span>{{_self.baskets_length(baskets_collection)}}</span>
     </p>
-    <p>
+    <p class="lightbox-msg">
       {{ 'Voici vos paniers' | trans }}
     </p>
-    <ul data-role="listview"  style="width:100%;margin: 0;">
-            {% for basket in baskets_collection %}
-              {% if basket.getValidation() is empty %}
-                {% set basket_length = basket.getElements().count() %}
-                <li>
-                  {% if basket.getElements().first() %}
-                  <img src="{{ basket.getElements().first().getRecord(app).get_thumbnail.get_url()}}" />
-                  {% endif %}
-                  <h3><a href="{{ path('lightbox_validation', { 'basket' : basket.getId() }) }}">{{ basket.getName() }}</a></h3>
-                  <p>{{ basket.getDescription() }}</p>
-                  <span class="ui-li-count">{{basket_length}}</span>
-                </li>
-              {% endif %}
-            {% endfor %}
-    </ul>
+        <div class="feed-list">
+            <ul data-role="listview"  style="width:100%;margin: 0;">
+                    {% for basket in baskets_collection %}
+                      {% if basket.getValidation() is empty %}
+                        {% set basket_length = basket.getElements().count() %}
+                        <li>
+                          {% if basket.getElements().first() %}
+                            <div class="lightbox-img">
+                                <img src="{{ basket.getElements().first().getRecord(app).get_thumbnail.get_url()}}" />
+                            </div>
+                          {% endif %}
+                          <h3><a href="{{ path('lightbox_validation', { 'basket' : basket.getId() }) }}">{{ basket.getName() }}</a></h3>
+                          <p>{{ basket.getDescription() }}</p>
+                          <span class="ui-li-count baskets">{{basket_length}}</span>
+                        </li>
+                      {% endif %}
+                    {% endfor %}
+            </ul>
+        </div>
   </div>
     <div data-role="footer">