Merge branch 'master' into PHRAS-2196-api-stories-pagination

package.json

@@ -65,7 +65,7 @@
     "normalize-css": "^2.1.0",
     "npm": "^6.0.0",
     "npm-modernizr": "^2.8.3",
-    "phraseanet-production-client": "0.34.84-d",
+    "phraseanet-production-client": "0.34.85-d",
     "requirejs": "^2.3.5",
     "tinymce": "^4.0.28",
     "underscore": "^1.8.3",

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

@@ -1,5 +1,6 @@
 $iconsPath: '../../../assets/common/images/icons/';
-
+$feedbackColor : #8bc34a;
+$basketColor : #2196f3 ;
 ul.image_set {
   padding: 0;
   margin: 0;
@@ -10,6 +11,7 @@ ul.image_set{
   display: flex;
   flex-wrap: wrap;
 }
+
 li.image_box a img {
   position: relative;
   border: none;
@@ -18,12 +20,14 @@ li.image_box a img{
   top: 0 !important;
   object-fit: contain;
 }
+
 li.image_box a {
   padding: 0;
   text-shadow: 0;
   margin: 0;
   width: 100%;
 }
+
 li.image_box {
   width: 18%;
   position: relative;
@@ -45,6 +49,7 @@ li.image_box{
     }
   }
 }
+
 @media screen and (max-width: 767px) {
   li.image_box {
     width: 32%;
@@ -62,6 +67,7 @@ a.no.active_choice{
   background-color: red;
   color: #fff;
 }
+
 a.active_choice {
   background-color: #53b401;
   color: #fff;
@@ -80,6 +86,7 @@ a.active_choice{
   background: #7ed321;
   border-top-left-radius: 100px;
 }
+
 .valid_choice.disagree {
   background: #d0021b;
   border-top-left-radius: 100px;
@@ -109,7 +116,6 @@ a.active_choice{
   font-size: 18px;
 }
 
-
 .ui-listview .ui-li-has-thumb .ui-li-thumb, .ui-listview .ui-li-has-thumb > .ui-btn > img:first-child, .ui-listview .ui-li-has-thumb > img:first-child {
   top: 50%;
   transform: translateY(-50%);
@@ -117,13 +123,199 @@ a.active_choice{
 
 /*user status*/
 .menu-bar-item {
-  background: #000;
+  background: #f0f0f0;
-  padding: 12px;
+  padding: 12px 15px;
-  text-align: center;
+  text-align: left;
-  a {
+  position: relative;
-    color: #fff!important;
+  .icomoon {
+    font-size: 17px;
+    position: absolute;
+    left: 23px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .ui-link {
+    color: #4f4f4f !important;
     text-decoration: none !important;
-    font-weight: normal;
+    .text {
+      padding-left: 31px;
+      color: #4f4f4f !important;
+      text-decoration: none !important;
+      font-weight: 700;
+      font-size: 13px;
+    }
   }
 }
 
+/*new design of lightbox*/
+/*main nav */
+#lightbox-menu {
+  li {
+    margin-bottom: 30px;
+    .ui-li-count {
+      border-radius: 3px !important;
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+      border: 0;
+      color: #fff;
+      text-shadow: none;
+      padding: 18px 23px;
+      top: 0;
+      right: 0;
+      margin: 0;
+      font-size: 22px;
+      min-width: 25px;
+      background: $feedbackColor;
+    }
+    &.ui-first-child {
+      margin-top: 15px;
+    }
+    &.ui-last-child {
+      a {
+        &:before {
+          background: $basketColor;
+        }
+        &:hover, &:active, &:focus {
+          color: $basketColor;
+        }
+      }
+      .ui-li-count {
+        background: $basketColor;
+      }
+    }
+
+  }
+  a {
+    padding: 22px 25px;
+    font-size: 20px;
+    border-radius: 3px !important;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.19);
+    background-color: #eeeeee;
+    &:hover, &:active, &:focus {
+      color: $feedbackColor;
+    }
+    &:after {
+      content: none !important;
+    }
+    &:before {
+      content: "";
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: 4px;
+      bottom: 0;
+      background: $feedbackColor;
+      left: 0;
+      border-radius: 3px;
+    }
+  }
+}
+
+.lightbox-bottom-btn {
+  margin-top: 50px;
+  .ui-btn {
+    font-size: 15px;
+  }
+}
+#validation, #baskets {
+  .ui-content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+.basket-title {
+  background: $feedbackColor;
+  padding: 12px 30px;
+  font-size: 17px;
+  margin: 0;
+  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;
+    text-overflow: inherit!important;
+    white-space: inherit!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;
+      width: 90px;
+      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;
+    text-overflow: inherit!important;
+    white-space: inherit!important;
+    a {
+      position: relative;
+      color: #313131!important;
+      width: 100%;
+      padding-right: 18px;
+      &: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;
+}

templates/mobile/common/menubar.html.twig

@@ -3,13 +3,13 @@
 {% if app.getAuthenticator().isAuthenticated() %}
     <div class="menu-bar-item">
         {% if app.getAuthenticatedUser().isGuest %}
-            <span class="icomoon icon-agree">&#xe957;</span>
+            <span class="icomoon icon-agree">&#xe950;</span>
-            <span>{{ 'Guest' | trans }}</span>
+            <span class="text">{{ 'Guest' | trans }}</span>
         {% else %}
             <a target="_blank" href="{{ path('account') }}"
                title="{{ 'login:: Mon compte' | trans }}">
-                <span class="icomoon icon-agree">&#xe957;</span>
+                <span class="icomoon icon-agree">&#xe950;</span>
-                <span>{{ app.getAuthenticatedUser().getDisplayName() }}</span>
+                <span class="text">{{ app.getAuthenticatedUser().getDisplayName() }}</span>
             </a>
         {% endif %}
     </div>

templates/mobile/lightbox/basket_element.html.twig

@@ -69,10 +69,10 @@
         {% 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;">
-              <input onclick="window.location.reload();"  {% if basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() == true%}checked="checked"{% endif %} type="radio" name="radio-view" id="radio-view-yes_{{basket_element.getId()}}" value="yes"  />
+              <input {% if basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() == true%}checked="checked"{% endif %} type="radio" name="radio-view" id="radio-view-yes_{{basket_element.getId()}}" value="yes"  />
                 <label class="agreement_radio" style="width:110px;text-align:center;"
                        for="radio-view-yes_{{ basket_element.getId() }}">{{ 'validation:: OUI' | trans }}</label>
-              <input onclick="window.location.reload();" {% if basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() == false and basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() is not null %}checked="checked"{% endif %} type="radio" name="radio-view" id="radio-view-no_{{basket_element.getId()}}" value="no"  />
+              <input {% if basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() == false and basket_element.getUserValidationDatas(app.getAuthenticatedUser()).getAgreement() is not null %}checked="checked"{% endif %} type="radio" name="radio-view" id="radio-view-no_{{basket_element.getId()}}" value="no"  />
                 <label class="agreement_radio" style="width:110px;text-align:center;"
                        for="radio-view-no_{{ basket_element.getId() }}">{{ 'validation:: NON' | trans }}</label>
             </fieldset>

templates/mobile/lightbox/index.html.twig

@@ -44,17 +44,17 @@
         {% include 'common/menubar.html.twig' %}
     </div>
     <div data-role="content">
-    <ul data-role="listview" style="width:100%;margin: 0;">
+    <ul id="lightbox-menu" data-role="listview" style="width:100%;margin: 0;">
-      <li>
+      <li class="lightbox-item">
         <a href="#validation">{{ 'Validations' | trans }}</a>
         <span class="ui-li-count">{{_self.valid_baskets_length(baskets_collection)}}</span>
       </li>
-      <li>
+        <li class="lightbox-item">
         <a href="#baskets">{{ 'Paniers' | trans }}</a>
         <span class="ui-li-count">{{_self.baskets_length(baskets_collection)}}</span>
       </li>
     </ul>
-    <div style="margin:2em 0 0 0">
+    <div class="lightbox-bottom-btn">
       <a href="{{ path ('logout') }}" data-role="button" rel="external">{{ 'Deconnexion' | trans }}</a>
     </div>
   </div>
@@ -89,31 +89,39 @@
 <div id="validation" data-role="page">
     <div data-role="header">
         <a rel="external" href="#home" data-icon="arrow-l">{{ 'Back' | trans }}</a>
-     <h1>{{ 'Validations' | trans }}</h1>
+     <h1>{{ module_name }}</h1>
   </div>
     <div class="lightbox-user-info">
         {% include 'common/menubar.html.twig' %}
     </div>
     <div data-role="content">
-    <p>
+      <p class="basket-title">
+        {{ 'Validations' | trans }}
+        <span>{{_self.valid_baskets_length(baskets_collection)}}</span>
+      </p>
+      <p class="lightbox-msg">
         {{ 'Voici vos validations en cours' | trans }}
       </p>
+        <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>
+                          {#<p>{{ basket.getDescription() }}</p>#}
-                  <span class="ui-li-count">{{ basket_length }}</span>
+                          <span class="ui-li-count validation">{{ basket_length }}</span>
                         </li>
                       {% endif %}
                     {% endfor %}
             </ul>
         </div>
+  </div>
     <div data-role="footer">
 
   </div>
@@ -122,31 +130,39 @@
 <div id="baskets" data-role="page">
     <div data-role="header">
         <a rel="external" href="#home" data-icon="arrow-l">{{ 'Back' | trans }}</a>
-     <h1>{{ 'Paniers' | trans }}</h1>
+        <h1>{{module_name}}</h1>
   </div>
     <div class="lightbox-user-info">
         {% include 'common/menubar.html.twig' %}
     </div>
     <div data-role="content">
-    <p>
+    <p class="basket-title">
+        {{ 'Paniers' | trans }}
+        <span>{{_self.baskets_length(baskets_collection)}}</span>
+    </p>
+    <p class="lightbox-msg">
       {{ 'Voici vos paniers' | trans }}
     </p>
+        <div class="feed-list">
             <ul data-role="listview"  style="width:100%;margin: 0;">
-            {% for basket in baskets_collection %}
+                    {% for basket in baskets_collection | sort | reverse %}
                       {% 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>
+                          {#<p>{{ basket.getDescription() }}</p>#}
-                  <span class="ui-li-count">{{basket_length}}</span>
+                          <span class="ui-li-count baskets">{{basket_length}}</span>
                         </li>
                       {% endif %}
                     {% endfor %}
             </ul>
         </div>
+  </div>
     <div data-role="footer">
 
   </div>

yarn.lock

@@ -7577,10 +7577,10 @@ phraseanet-common@^0.4.5-d:
     js-cookie "^2.1.0"
     pym.js "^1.3.1"
 
-phraseanet-production-client@0.34.84-d:
+phraseanet-production-client@0.34.85-d:
-  version "0.34.84-d"
+  version "0.34.85-d"
-  resolved "https://registry.yarnpkg.com/phraseanet-production-client/-/phraseanet-production-client-0.34.84-d.tgz#ccf091b51209c6d42fd3dc1e4f05f6bbefe44ea5"
+  resolved "https://registry.yarnpkg.com/phraseanet-production-client/-/phraseanet-production-client-0.34.85-d.tgz#e62f42f3464b664a56c2f0af3d7f5e7f3fcff802"
-  integrity sha512-ZZZOIR7a+4AVwkx0s3e3P23sobQjWVFXrX3FnB6BhEC3qpR0b44bH1Dc7n53ciL5UQMmTNUNYoVTMpMfHpNrFA==
+  integrity sha512-V1tlEq24RMoGWnH7wHV5N/hCUxNfCiDgNaobcwfQMi/Hhdi0Xm3a1qX135w4B5xWZKilSfKNMIateiFI46xadw==
   dependencies:
     "@mapbox/mapbox-gl-language" "^0.9.2"
     "@turf/turf" "^5.1.6"