PHRAS-2829 lightbox-mobile nw design

resources/www/lightbox/styles/jquery-mobile/_jquery-validator.scss

@@ -25,6 +25,9 @@ li.image_box{
   margin:0px 15px 15px 0px;
   padding:0px;
   text-align:center;
+  .thumb_wrapper {
+    background: #ededed;
+  }
 }
 a.no.active_choice{
   background-color:red;
@@ -45,10 +48,13 @@ a.active_choice{
 }
 
 .valid_choice.agree{
-  background-image: url('#{$iconsPath}ok.png');
+  background: #7ed321;
+  border-top-left-radius: 100px;
 }
 .valid_choice.disagree{
-  background-image: url('#{$iconsPath}delete.png');
+  background: #d0021b;
+  border-top-left-radius: 100px;
+}
 }
 
 .thumb_wrapper {

resources/www/lightbox/styles/main-mobile.scss

@@ -585,4 +585,9 @@ button.confirm_report {
   min-height: 26px;
   padding: 10px 0;
 }
+.ui-listview >.ui-li-static {
+  padding: .7em 1em;
+  text-overflow: inherit;
+  white-space: inherit;
+}
 

templates/mobile/lightbox/basket_element.html.twig

@@ -50,7 +50,6 @@
          class="ui-btn-right jqm-home">{{ 'Home' | trans }}</a>
   </div>
   <div id="content" data-role="content">
-    {{ thumbnail.format100percent(record.get_preview()) }}
       <div class="nav_button">
           {% if prevId != NULL %}
               <a data-ajax="false" id="left-btn"
@@ -64,6 +63,7 @@
           {% endif %}
           <div style="clear: both;"></div>
       </div>
+      {{ thumbnail.format100percent(record.get_preview()) }}
     {% if basket_element.getBasket().getValidation() %}
       {% if basket_element.getBasket().getValidation().getParticipant(app.getAuthenticatedUser()).getCanAgree() %}
         <fieldset data-role="controlgroup" data-type="horizontal" style="text-align:center;">
@@ -81,7 +81,7 @@
         </a>
       </div>
       <div>
-        <ul data-role="listview" id="notes_{{basket_element.getId()}}">
+        <ul data-role="listview" class="lightbox-list-view" id="notes_{{basket_element.getId()}}">
           {% include 'lightbox/sc_note.html.twig' %}
         </ul>
       </div>

templates/mobile/lightbox/sc_note.html.twig

@@ -8,7 +8,7 @@
       {{ validationDatas.getParticipant().getUser().getDisplayName() }}
     </h3>
     {% if validationDatas.getNote() != '' %}
-    <p style="text-align:left;">{{ 'validation:: note' | trans }} : {{ validationDatas.getNote()|nl2br }}</p>
+    <p style="text-align:left;">{{ 'validation:: note' | trans }} : {{ validationDatas.getNote()|nl2br }} </p>
     {% endif %}
   </li>
 {% endfor %}

templates/mobile/lightbox/validate.html.twig

@@ -38,6 +38,7 @@
       {% set basket_length = basket.getElements().count() %}
       {% trans with {'%basket_length%' : basket_length} %}%basket_length% documents{% endtrans %}
     </p>
+        {% if basket.getValidation() %}
             <div class="report_wrapper">
                 <a id="report_summary" class="report_btn report_summary" href="#" onclick="$.ajax({
             type: 'GET',
@@ -60,7 +61,7 @@
                     {{ 'lightbox::list' | trans }}
                 </a>
             </div>
-
+        {% endif %}
             <input type="hidden" id="navigation" value="{{ basket.getId() }}">
             <div id="report" class="summary_block">
                 <ul class="image_set">
@@ -78,6 +79,8 @@
                     {% endfor %}
                 </ul>
             </div>
+    </div>
+
         <div class="btn-container">
             {% if basket.getValidation() and basket.getValidation().getParticipant(app.getAuthenticatedUser()).getCanAgree() %}
                 <button class="confirm_report" style="width:100%;" title="{{ 'validation::envoyer mon rapport' | trans }}">
@@ -89,6 +92,7 @@
     </div>
     <div class="report_list_backup" id="report_list_backup">&nbsp;</div>
     <div class="report_summary_backup " id="report_summary_backup">&nbsp;</div>
+
 </div>
 {% endblock %}