PHRAS-2848 #comment Lightbox mobile design refacto #time 8h

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,113 @@ 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, #basket {
+  .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;
+}
+

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/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,12 +89,16 @@
 <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 class="basket-title">
+        {{ 'Validations' | trans }}
+        <span>{{_self.valid_baskets_length(baskets_collection)}}</span>
+      </p>
       <p>
         {{ 'Voici vos validations en cours' | trans }}
       </p>
@@ -122,12 +126,16 @@
 <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 class="basket-title">
+        {{ 'Paniers' | trans }}
+        <span>{{_self.baskets_length(baskets_collection)}}</span>
+    </p>
     <p>
       {{ 'Voici vos paniers' | trans }}
     </p>