PHRAS-2829 #comment fix lightbox mobile #time 8h

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

@@ -1,4 +1,5 @@
 $iconsPath: '../../../assets/common/images/icons/';
+
 ul.image_set{
   padding:0;
   margin:0;
@@ -55,7 +56,6 @@ a.active_choice{
   background: #d0021b;
   border-top-left-radius: 100px;
 }
-}
 
 .thumb_wrapper {
   text-align:center;
@@ -76,3 +76,7 @@ a.active_choice{
   }
 
 }
+
+.ui-footer .ui-title, .ui-header .ui-title {
+  font-size: 18px;
+}

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

@@ -1,5 +1,28 @@
 @import './jquery-mobile/jquery-validator';
 
+@font-face {
+  font-family: 'icomoon';
+  src: url("../../common/fonts/PhraseanetIcomoon/fonts/icomoon.eot?xt8hfo");
+  src: url("../../common/fonts/PhraseanetIcomoon/fonts/icomoon.eot?xt8hfo#iefix") format("embedded-opentype"), url("../../common/fonts/PhraseanetIcomoon/fonts/icomoon.ttf?xt8hfo") format("truetype"), url("../../common/fonts/PhraseanetIcomoon/fonts/icomoon.woff?xt8hfo") format("woff"), url("../../common/fonts/PhraseanetIcomoon/fonts/icomoon.svg?xt8hfo#icomoon") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 .nav_button {
   width: 90%;
   margin: 0px auto;
@@ -27,12 +50,13 @@
 }
 
 .report-modal, .ui-dialog .ui-dialog-content {
-  background: linear-gradient(#3c3c3c,#111);
+  background: linear-gradient(#3c3c3c, #111);
 }
 
 .ui-bar-c, .ui-body-c, .ui-btn-down-c, .ui-btn-hover-c, .ui-btn-up-c, .ui-overlay-c {
   text-shadow: none;
 }
+
 @import '../../_shared/styles/variables';
 $lightboxPath: '../images/';
 $imagesPath: '/assets/vendors/jquery-ui/images/dark-hive/';
@@ -164,6 +188,14 @@ img {
   top: 0;
   left: 0;
   border-radius: 0;
+  background-color: rgba(216, 216, 216, 0.7);
+  font-weight: 700;
+  z-index: 99;
+  color: #333333;
+  position: absolute;
+  width: 22px;
+  padding: 2px 0;
+  font-size: 12px;
 }
 
 #report .CHIM.diapo {
@@ -365,8 +397,16 @@ li.userchoice {
 }
 
 .basket_report_user_wrapper {
-  background-color: #bebebe;
+  margin: 0;
-  margin: 0 0 5px;
+  border-bottom: 1px solid #b2b2b2;
+  border-radius: 0;
+  display: inline-block;
+  padding: 10px 15px;
+  width: 100%;
+  box-sizing: border-box;
+  background: #e5e5e5;
+  text-shadow: none;
+  float: left;
 }
 
 .ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text {
@@ -481,12 +521,12 @@ hr {
     padding: 1em 1em;
   }
 }
+
 .videoTips {
   width: 100%;
   height: 100%;
 }
 
-
 #basket_infos {
   margin-bottom: 20px;
   .mobile_aggreement_box {
@@ -496,24 +536,33 @@ hr {
 
 .ui-button-icon.ui-icon.ui-icon-closethick {
   background-position: -73px 0px;
-  background-color: rgba(0,0,0,.9);
+  background-color: rgba(0, 0, 0, .9);
   padding: 0;
 }
 
+.btn-container {
+  padding: 0 20px;
+}
+
 button.confirm_report {
-  background: #38c!important;
+  background: #38c !important;
-  color: #fff!important;
+  color: #fff !important;
-  font-size: 12.5px;
+  font-size: 16px;
   font-weight: bold;
-  padding: 11px;
+  padding: 6px;
   display: inline-block;
-  border: 1px solid rgba(255,255,255,.3);
+  border: 1px solid #38c;
   text-shadow: 0 1px 0 #111;
   border-radius: 16px;
+  font-family: Roboto, sans-serif;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2) !important;
 }
+
 .report_wrapper {
   position: relative;
+  margin-bottom: 20px;
 }
+
 .report_btn {
   position: absolute;
   top: -41px;
@@ -525,7 +574,7 @@ button.confirm_report {
   padding: 8px 13px;
   min-width: 110px;
   border-radius: 4px;
-  color: #fff!important;
+  color: #fff !important;
   text-decoration: none;
   text-align: center;
   transition: all 0.3s;
@@ -542,15 +591,17 @@ button.confirm_report {
     }
   }
 }
+
 .report_list {
   display: none;
 }
-.report_summary_backup , .report_list_backup {
+
+.report_summary_backup, .report_list_backup {
   display: none;
 }
 
-
 .chim-wrapper-block {
+  margin-bottom: 15px;
   .chim-block {
     margin: 0;
   }
@@ -560,10 +611,13 @@ button.confirm_report {
     min-width: 296px;
   }
   .chim-left {
-    float: left;
+    display: inline-block;
-    margin-right: 10px;
+    width: 100%;
-    width:30%;
+    background: #ededed;
+    text-align: center;
+    position: relative;
     .diapo {
+      display: inline-block;
       div {
         max-width: 100%;
       }
@@ -571,8 +625,20 @@ button.confirm_report {
   }
 
   .chim-right {
+    width: 100%;
+    .validate-icon {
       float: left;
-    width: calc(70% - 10px);
+      height: 25px;
+      vertical-align: middle;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    h3 {
+      font-size: 16px;
+      margin: 0;
+      padding-top: 3px;
+    }
   }
 }
 
@@ -585,9 +651,66 @@ button.confirm_report {
   min-height: 26px;
   padding: 10px 0;
 }
-.ui-listview >.ui-li-static {
+
+.ui-listview.lightbox-list-view {
+  & > .ui-li-static {
     padding: .7em 1em;
     text-overflow: inherit;
     white-space: inherit;
+  }
+  & > li {
+    border-color: #b2b2b2;
+    background: none;
+    p {
+      text-overflow: inherit;
+      white-space: inherit;
+      line-height: 15px;
+      font-size: 13px;
+      color: #141414;
+    }
+  }
+  h3 {
+    font-family: Roboto, sans-serif;;
+    font-size: 16px;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 0.94;
+    letter-spacing: normal;
+    color: #141414;
+  }
+
+}
+
+.ui-footer.ui-bar-inherit {
+  border: 0;
+}
+
+.center-image {
+  text-align: center;
+}
+
+/*validate page*/
+.validate-icon {
+  float: left;
+  position: absolute;
+  .icomoon {
+    color: #fff;
+    font-size: 17px;
+    padding: 3px;
+    border-radius: 50px;
+    display: inline-block;
+  }
+  .icon-disagree {
+    background: #cd2f2f;
+  }
+  .icon-agree {
+    background: #8bc34a;
+  }
+
+}
+.validate-info {
+  float: left;
+  padding-left: 36px;
 }
 

templates/mobile/lightbox/basket_element.html.twig

@@ -63,7 +63,7 @@
           {% endif %}
           <div style="clear: both;"></div>
       </div>
-      {{ thumbnail.format100percent(record.get_preview()) }}
+      <div class="center-image">{{ thumbnail.format100percent(record.get_preview()) }}</div>
     {% 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;">

templates/mobile/lightbox/sc_note.html.twig

@@ -1,14 +1,21 @@
 {% for validationDatas in basket_element.getValidationDatas() %}
   <li>
-    <h3 style="text-align:left;">
+    <div class="validate-icon">
-      {% if validationDatas.getAgreement() is not null %}
+        {% if basket_element.getBasket().getValidation().getParticipant(app.getAuthenticatedUser()).getCanSeeOthers() or validationDatas.getParticipant().getUser() == app.getAuthenticatedUser() %}
-      <img style="vertical-align:middle;"
+           {% if validationDatas.getAgreement() == true %}<span class="icomoon icon-agree">&#xe95f;</span>{% else %}<span class="icomoon icon-disagree">&#xe971;</span>{% endif %}
-           src="/assets/lightbox/images/{% if validationDatas.getAgreement() == true %}agree.png{% else %}disagree.png{% endif %}" />
         {% endif %}
+    </div>
+    <div class="validate-info">
+      <h3>
         {{ validationDatas.getParticipant().getUser().getDisplayName() }}
       </h3>
-    {% if validationDatas.getNote() != '' %}
+        {% if basket_element.getBasket().getValidation().getParticipant(app.getAuthenticatedUser()).getCanSeeOthers() or validationDatas.getParticipant().getUser() == app.getAuthenticatedUser() %}
+
+          {% if validationDatas.getNote() != '' and validationDatas.getAgreement() == true %}
         <p style="text-align:left;">{{ 'validation:: note' | trans }} : {{ validationDatas.getNote()|nl2br }} </p>
         {% endif %}
+      {% endif %}
+
+    </div>
   </li>
 {% endfor %}

templates/mobile/lightbox/validate.html.twig

@@ -66,7 +66,11 @@
             <div id="report" class="summary_block">
                 <ul class="image_set">
                     {% for basket_element in basket.getElements() %}
+
                         <li class="image_box" id="sselcontid_{{basket_element.getId()}}">
+                            <div class="display_id">
+                                {{basket_element.getOrd()}}
+                            </div>
                             {% if basket_element.getBasket().getValidation() and basket_element.getBasket().getValidation().getParticipant(app.getAuthenticatedUser()).getCanAgree() %}
                                 <div class="valid_choice valid_choice_{{basket_element.getId()}} {% if basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() == true %}agree{% elseif basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() == false and basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() is not null %}disagree{% endif %}">
                                     </div>

templates/web/lightbox/basket_content_report.html.twig

@@ -18,20 +18,28 @@
                 <div class="chim-right">
                     {% for validationDatas in basket_element.getValidationDatas()%}
                         <div class="basket_report_user_wrapper ui-corner-all">
-                            <div class="basket_report_user">
                                 {% if validationDatas.getAgreement() == true %}
-                                    {% set imguser = '<img src="/assets/lightbox/images/agree.png" />' %}
+                                    {% set imguser = '<span class="icomoon icon-agree">&#xe95f;</span>' %}
                                     {% set styleuser = '' %}
                                 {% elseif validationDatas.getAgreement() is null %}
-                                    {% set imguser = '' %}
+                                    {% set imguser = '&nbsp;' %}
                                     {% set styleuser = 'margin-left:18px;' %}
                                 {% else %}
-                                    {% set imguser = '<img src="/assets/lightbox/images/disagree.png" />' %}
+                                    {% set imguser = '<span class="icomoon icon-disagree">&#xe971;</span>' %}
                                     {% set styleuser = '' %}
                                 {% endif %}
-                                <b style="{{styleuser}}">{{imguser|raw}} {{validationDatas.getParticipant().getUser().getDisplayName()}}</b>
+
+                             <div class="validate-icon">
+                                 {% if basket_element.getBasket().getValidation().getParticipant(app.getAuthenticatedUser()).getCanSeeOthers() or validationDatas.getParticipant().getUser() == app.getAuthenticatedUser() %}
+                                     {{imguser|raw}}
+                                 {% endif %}
+                            </div>
+                            <div class="validate-info">
+                                <h3> {{validationDatas.getParticipant().getUser().getDisplayName()}}</h3>
                                 {% if validationDatas.getNote() != '' %}
-                                     : {{validationDatas.getNote()|nl2br}}
+                                    {% if basket_element.getBasket().getValidation().getParticipant(app.getAuthenticatedUser()).getCanSeeOthers() or validationDatas.getParticipant().getUser() == app.getAuthenticatedUser() %}
+                                        <p> {{validationDatas.getNote()|nl2br}}</p>
+                                    {% endif %}
                                 {% endif %}
                             </div>
                         </div>
@@ -40,7 +48,6 @@
             </div>
         </div>
     </div>
-    <div><hr/></div>
     {% endfor %}
 </div>