js __more

user/themes/lecampus/js/site.js

@@ -193,7 +193,55 @@ function ajaxformulaire() {
 
 }
 
+function open_pack() {
+  var $button_more = $(".nos_pack .__thumbnails .__thumb");
+  $button_more.on('click', function(e) {
+    event.preventDefault();
+    var $more = $(this).siblings('.__more');
+
+    if ($(".__more").is(".open")) {
+      $(".__more").removeClass('open');
+    }
+    $more.toggleClass('open');
+  });
+
+// click, récupere position div dans le dom
+// affiche après la 4eme positions.
+
+  var $pack = $('.nos_pack .pack');
+  var nbrDiv = $pack.length;
+  var widtWind = $( window ).width();
+
+  if(widtWind > 1336){
+    var count = 4;
+  } else if (widtWind > 991) {
+    var count = 3;
+  } else if (widtWind > 430) {
+    var count = 2;
+  } else {
+    var count = 1;
+  }
+
+  console.log('count',count);
+
+  $pack.on('click',function(e) {
+      var nbrThis = $pack.index($(this));
+      var idThis = $(this).attr('id');
+      var $more = $('.__more#' + idThis);
+
+      console.log($more);
 
+      $('.__more').removeClass('visible');
+
+      if (nbrDiv <= count) {
+        var i = count;
+        $(".nos_pack .pack:nth-child(" + (i) + ")").after($more);
+        $more.addClass('visible');
+      }
+
+  })
+
+}
 
 jQuery(document).ready(function(){
   tarteaucitron.init({
@@ -229,4 +277,7 @@ jQuery(document).ready(function(){
   filteritem();
   map();
   burger();
+  if ($('section').is("#nos-packs")) {
+    open_pack();
+  }
 });

user/themes/lecampus/scss/theme/thumbnails/thumbnails.scss

@@ -1,3 +1,6 @@
+*{
+  box-sizing: border-box;
+}
 #nos-packs{
   .content{
     margin-top: 0;
@@ -15,12 +18,12 @@
       }
       .d-flex{
         display: inline-flex;
+        flex-wrap: wrap;
         width: 100%;
-        .__more{
-          display: none
-        }
         .__thumbnails{
           margin: 0 1rem;
+          width: calc((100% / 4) - 2rem);
+          min-width: 200px;
           .__title{
             text-align: center;
             p{
@@ -35,13 +38,11 @@
           .__thumb{
             position: relative;
             .__images{
-              width: 300px;
-              height: 300px;
               position: relative;
-              object-fit: cover;
               img{
                 width: 100%;
                 height: 100%;
+                object-fit: cover;
               }
             }
 
@@ -102,9 +103,28 @@
             margin-top:  1rem;
             font-size: 1rem;
             font-family: $now_alt_medium;
-
             text-align: center;
-
+            .triangle{
+              position: absolute;
+              bottom: 0;
+              left: 50%;
+              transform: translate(-50%,90%);
+              display : inline-block;
+              height : 0;
+              width : 0;
+              border-top : 20px solid red;
+              border-right : 15px solid transparent;
+              border-left : 15px solid transparent;
+              &.__blue{
+                  border-top : 20px solid $light-blue;
+              }
+              &.__green{
+                border-top : 20px solid $green;
+              }
+              &.__red{
+                border-top : 20px solid $red;
+              }
+            }
             &.__blue{
               background: $light-blue;
             }
@@ -140,6 +160,85 @@
         margin-bottom: 100px;
       }
 
+      .__more{
+        display: none;
+        margin: 2rem 1rem;
+        &.visible{
+          display: block;
+        }
+        .__details{
+          position: relative;
+        }
+        .__image-background{
+          width: 100%;
+          height: auto;
+          img{
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+        .__wrap-content{
+          z-index: 999;
+          width: 100%;
+          height: auto;
+          padding: 2rem;
+          display: flex;
+          justify-content: flex-end;
+          .__content{
+            background: white;
+            width: 50%;
+            height: auto;
+            padding: 2rem;
+            .__title{
+              h6{
+                margin:0;
+                font-size: 1.3rem;
+                color: $light-blue;
+                font-family: $now_alt_medium;
+              }
+            }
+            .__txt{
+              p{
+                font-size: 1rem;
+                font-family: $now_alt_medium;
+              }
+              &.__color{
+                color: $light-blue;
+                margin-bottom: 1rem;
+              }
+            }
+            .__btn{
+              display: inline-flex;
+              margin-top: 1rem;
+              & > div{
+                background: $light-blue;
+                margin: 0;
+                transition: 0.3s transform ease, 0.3s box-shadow ease;
+                &:hover{
+                  transform: scale(1.015);
+                  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
+                  transition: 0.3s transform ease, 0.3s box-shadow ease;
+                }
+                &:not(:first-child){
+                  margin: 0 1rem;
+                }
+              }
+              a{
+                font-family: $now_alt_medium;
+                font-size: 0.9rem;
+                color: white;
+                padding: 0.5rem 1.5rem;
+              }
+
+            }
+          }
+        }
+        &.open{
+          display: block;
+        }
+      }
+
     }
 
   }

user/themes/lecampus/templates/components/buttons/btn.html.twig

@@ -1,6 +1,7 @@
 {% if btn == 'more' %}
     <div class="__btn __learn-more {{color}}">
     En savoir plus
+    <div class="triangle {{color}}"></div>
     </div>
   {% elseif btn == 'devis' %}
     <div class="__btn __devis __color">

user/themes/lecampus/templates/components/learn_more.html.twig

@@ -3,23 +3,21 @@
 {% set image_basename_imgB = image_parts.basename %}
 {% set image_page_imgB = image_parts.dirname == '.' ? module : module.find(image_parts.dirname) %}
 
-<div class="__image-background">
-  {{ image_page_imgB.media[image_basename_imgB].html() }}
-</div>
-
-<div class="__content">
-  <div class="__title">
-    {{item.titre}}
-  </div>
-  <div class="__txt __color">
-    {{item.txt_color}}
-  </div>
-  <div class="__txt">
-    {{item.txt_black}}
-  </div>
+<div class="__wrap-content" style="background-image: url('{{ image_page_imgB.media[image_basename_imgB].url() }}')" >
+  <div class="__content">
+    <div class="__title">
+      <h6>{{item.titre}}</h6>
+    </div>
+    <div class="__txt __color">
+      <p>{{item.txt_color}}</p>
+    </div>
+    <div class="__txt">
+      <p>{{item.txt_black}}</p>
+    </div>
 
-  <div>
-    {% include 'components/buttons/btn.html.twig' with { btn: 'devis' } %}
-    {% include 'components/buttons/btn.html.twig' with { btn: 'dl' } %}
+    <div class="__btn">
+      {% include 'components/buttons/btn.html.twig' with { btn: 'devis' } %}
+      {% include 'components/buttons/btn.html.twig' with { btn: 'dl' } %}
+    </div>
   </div>
 </div>

user/themes/lecampus/templates/components/thumbnails/thumbnails.html.twig

@@ -15,11 +15,11 @@
   {% set color = "__grey" %}
 {% endif %}
 
-  <div class="{{section}} __thumbnails">
+  <div id="{{titleHyp}}" class="{{section}}  __thumbnails">
     <div class="__title">
       <p>{{item.title}}</p>
     </div>
-    <div class="__thumb ">
+    <div class="__thumb">
 
       {% if section == 'pack' %}
         <a href="#">
@@ -42,19 +42,28 @@
 
     </div>
 
-    {% if section == 'pack' %}
-      {# dl Brochure #}
-      {% set image_parts = pathinfo(item.btn_url) %}
-      {% set image_basename_dl = image_parts.basename %}
-      {% set image_page_dl = image_parts.dirname == '.' ? module : module.find(image_parts.dirname) %}
-
-      <div class=" __more __color">
-        <div class="__details">
-          {% include 'components/learn_more.html.twig' %}
-        </div>
-      </div>
-    {% endif %}
 
   </div>
+{% endfor %}
+
+{% for item in module.header.list %}
+
+  {% set titleHyp = item.title|lower|hyphenize %}
+  {% if titleHyp == "bien-tre" %}
+    {% set color = "__blue" %}
+  {% elseif titleHyp == "nature" %}
+    {% set color = "__green" %}
+  {% elseif titleHyp == "gastronomie" %}
+    {% set color = "__red" %}
+  {% else %}
+    {% set color = "__grey" %}
+  {% endif %}
 
+  {% if section == 'pack' %}
+    <div id="{{titleHyp}}" class="__more  {{color}} ">
+    <div class="__details">
+    {% include 'components/learn_more.html.twig' %}
+    </div>
+    </div>
+  {% endif %}
 {% endfor %}

user/themes/lecampus/templates/nos-packs.html.twig

@@ -22,6 +22,15 @@
               <div class="packs d-flex">
                 {% include 'components/thumbnails/thumbnails.html.twig' with {section: 'pack'} %}
               </div>
+
+              {% for item in module.header.list %}
+                {# <div class=" __more {{titleHyp}} __color ">
+                  <div class="__details">
+                    {% include 'components/learn_more.html.twig' %}
+                  </div>
+                </div> #}
+              {% endfor %}
+
             </div>
           {% endif %}