page offer & packs responsive

user/themes/lecampus/blueprints/modular/section-offres.yaml

@@ -15,7 +15,7 @@ form:
               title: Offres
               underline: true
               fields:
-                header.list_offres:
+                header.list:
                   name: type d'offres
                   type: list
                   style: vertical
@@ -28,7 +28,7 @@ form:
                     .title:
                       type: text
                       label: Titre
-                    .a_file:
+                    .img_thumb:
                       type: filepicker
                       folder: '@self'
                       preview_images: true

user/themes/lecampus/js/site.js

@@ -194,40 +194,42 @@ function ajaxformulaire() {
 }
 
 function open_pack() {
-  var $pack = $(".nos_pack .pack:not('#envie')");
+  var $pack = $(".nos_pack .pack .__thumb");
   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) {
+  if(widtWind <= 530){
+    var count = 1;
+  } else if (widtWind <= 1024) {
     var count = 2;
+  } else if (widtWind <= 1200) {
+    var count = 3;
   } else {
-    var count = 1;
+    var count = 4;
   }
-
   $pack.on('click',function(e) {
+
+    var href = $(this).find('a').attr('href') ;
+    if ( href == '#') {
       e.preventDefault();
-      var nbrThis = $pack.index($(this));
-      var idThis = $(this).attr('id');
-      var $more = $('.__more#' + idThis);
-
-      $('.__more').removeClass('visible');
-      $('.triangle').removeClass('visible');
-
-      if (nbrDiv <= count) {
-        var i = count;
-        $(".nos_pack .pack:nth-child(" + (i) + ")").after($more);
-        $more.addClass('visible');
-        $(this).find('.triangle').addClass('visible')
-      }
+    }
+
+    var idThis = $(this).parent('.pack').attr('id');
+    var $more = $('.__more#' + idThis);
+
+    $('.__more').removeClass('visible');
+    $('.triangle').removeClass('visible');
+
+      var i = count;
+
+      $more.addClass('visible');
+      $(this).find('.triangle').addClass('visible')
+
   })
 
   var $close = $('.__more .close');
   $close.on('click' , function(e) {
-    e.preventDefault();
+    console.log('clsick');
     $(this).parents('.__more').removeClass('visible');
     $('.triangle').removeClass('visible');
   })

user/themes/lecampus/scss/theme/_blog.scss

@@ -288,7 +288,7 @@
       .card-content{
         overflow: hidden;
         height: 7.7rem;
-        
+
         h2{
           font-size: 0.9rem;
         }
@@ -398,19 +398,21 @@
   // background-size: cover;
   height: auto;
   border-top: 10px solid $green;
+  width: 100%;
   .entete_c{
     @include inlineflex;
+    flex-direction: column;
     text-align: center;
     width: 70%;
     margin: 50px auto;
     position: relative;
 
     h1{
-      width: auto;
+      width: max-content;
+      max-width: 100%;
       margin-bottom: 20px;
       background: $red;
       border-radius: 30px;
-      width: auto;
       padding: 10px 20px;
     }
   }
@@ -1102,7 +1104,7 @@
 }
 
 #devis{
-  &.item, &.sublog, &.item-article{
+  &.item, &.sublog, &.item-article, &.nos-offres ,&.nos-packs{
     background: $red;
     height: auto;
     padding: 20px 0;

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

@@ -23,33 +23,41 @@
         .__thumbnails{
           margin: 0 1rem;
           width: calc((100% / 4) - 2rem);
+          display: flex;
+          flex-direction: column;
+          align-self: baseline;
           .__title{
             text-align: center;
-            p{
+            margin-bottom: 1rem;
+            .__d-inline{
+              display: inline-block;
               border-bottom: 3px solid #b5cb3a;
               width: max-content;
-              margin: 0 auto 1rem auto;
-              padding: 0 1.5rem 0.2rem 1.5rem;
-              font-size: 1rem;
-              font-family: $now_alt_medium;
+              max-width: 100%;
+              padding-bottom: 0.5rem;
+              span{
+                display: block;
+                text-align: center;
+                padding: 0 1.5rem 0.2rem 1.5rem;
+                font-size: 0.8rem;
+                font-family: $now_alt_medium;
+              }
             }
           }
           .__thumb{
             position: relative;
             .__images{
               position: relative;
-              height: 250px;
+              height: 200px;
+              overflow: hidden;
               img{
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
               }
             }
-
           }
-
         }
-
       }
       .dl_brochure{
         width: 100%;
@@ -65,7 +73,7 @@
       }
       &.nos_pack{
         .__thumbnails{
-          .__thumb{
+          .__thumb.__hover{
             transition: 0.3s transform ease;
             a{
               outline: none;
@@ -78,11 +86,18 @@
                 box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
                 transition: 0.3s box-shadow ease;
               }
+              .__images{
+                transition: 0.5s filter ease;
+                filter: grayscale(0%);
+                img{
+                  filter: grayscale(100%);
+                  transition: 0.5s filter ease;
+                }
+
+              }
             }
           }
           .__images{
-            transition: 0.5s filter ease;
-            filter: grayscale(0%);
             .__sub-title{
               opacity: 0;
               position: absolute;
@@ -94,7 +109,7 @@
               padding: 1rem;
               transition: 0.5s transform ease, 1s opacity ease;
               p{
-                font-size: 1.2rem;
+                font-size: 1rem;
                 font-family: $now_alt_medium;
               }
             }
@@ -105,7 +120,7 @@
             display: block;
             padding: 0.7rem 0;
             margin-top:  1rem;
-            font-size: 1rem;
+            font-size: 0.8rem;
             font-family: $now_alt_medium;
             text-align: center;
             .triangle{
@@ -151,10 +166,6 @@
 
           &:hover{
           .__images{
-            img{
-              filter: grayscale(100%);
-              transition: 0.5s filter ease;
-            }
             .__sub-title{
               opacity: 1;
               transform: translateY(-50%);
@@ -169,10 +180,33 @@
       &:last-child{
         margin-bottom: 100px;
       }
-
+      .__thumbnails{
+        &:nth-child(1){
+          .__more{
+            width: calc(100% * 4 + 6rem);
+          }
+        }
+        &:nth-child(2){
+          .__more{
+            width: calc(100% * 4 + 6rem);
+            transform: translateX(calc((-100% / 4) - 0.5rem));
+          }
+        }
+        &:nth-child(3){
+          .__more{
+            width: calc(100% * 4 + 6rem);
+            transform: translateX(calc((-100% / 2) - 1rem));
+          }
+        }
+      }
       .__more{
         display: none;
-        margin: 2rem 1rem;
+        position: relative;
+        left: 0;
+        right: 0;
+        // width: calc(100% * 4 - 6rem);
+        margin: 0;
+        margin: 2rem 0rem;
         .__txt.black{
           p{
             color: black!important;
@@ -245,6 +279,7 @@
 
             }
             .__title{
+              text-align: left;
               h6{
                 margin:0;
                 font-size: 1.3rem;
@@ -253,7 +288,7 @@
             }
             .__txt{
               p{
-                font-size: 1rem;
+                font-size: 0.9rem;
                 font-family: $now_alt_medium;
               }
               &.__color{
@@ -264,24 +299,28 @@
             .__btn{
               display: inline-flex;
               margin-top: 1rem;
+              width: 100%;
               & > div{
+                width: 50%;
                 background: $light-blue;
                 margin: 0;
                 transition: 0.3s transform ease, 0.3s box-shadow ease;
+                padding: 0.5rem 1.5rem;
                 &: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;
+                  margin-left: 1rem;
                 }
               }
               a{
                 font-family: $now_alt_medium;
-                font-size: 0.9rem;
+                font-size: 0.7rem;
                 color: white;
-                padding: 0.5rem 1.5rem;
+                // margin: 0 1rem;
+                // padding: 0.5rem 1.5rem;
               }
 
             }
@@ -296,3 +335,143 @@
 
   }
 }
+
+@media screen and (max-width: 1200px) {
+  #nos-packs, #nos-offres{
+    .content{
+      .section{
+        .__intro{
+          margin: 70px 0;
+          p{
+            padding: 0!important;
+          }
+        }
+        .d-flex{
+          .__thumbnails{
+            width: calc((100% / 3) - 2rem);
+            margin-bottom: 2rem;
+            .__more{
+              width: calc(100% * 3 + 4rem);
+            .__content{
+              width: 100%;
+            }
+          }
+          &:nth-child(2){
+            .__more{
+              transform: translateX(calc((-100% / 3) - 0.5rem));
+            }
+          }
+          &:nth-child(3){
+            .__more{
+              transform: translateX(calc((-100% / 1.5) - 1rem));
+            }
+          }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  #nos-packs, #nos-offres{
+    .content{
+      .section{
+        .__intro{
+          margin: 50px 0;
+        }
+        .d-flex{
+          .__thumbnails{
+            width: calc((100% / 2) - 2rem);
+            margin-bottom: 2rem;
+              .__more{
+                width: calc(100% * 2 + 2rem);
+              .__content{
+                width: 100%;
+              }
+            }
+            &:nth-child(2){
+              .__more{
+                transform: translateX(calc((-100% / 2) - 1rem));
+              }
+            }
+            &:nth-child(3){
+              .__more{
+                transform: translateX(-0%);
+              }
+            }
+
+          }
+
+        }
+
+      }
+
+    }
+
+}
+
+}
+
+@media screen and (max-width: 530px) {
+  #nos-packs, #nos-offres{
+    .content{
+      .section{
+        .__intro{
+          margin: 20px 0;
+        }
+        .d-flex{
+          .__thumbnails{
+            width: calc((100%) - 2rem);
+            margin-bottom: 2rem;
+            .__title{
+              margin-bottom: 0.5rem;
+              .__d-inline{
+                padding-bottom: 0.2rem;
+                span{
+                  padding: 0 1.5rem;
+                  font-size: 1rem;
+                }
+              }
+            }
+            .__more{
+              width: calc(100%);
+              .__details{
+                padding: 1rem;
+                .__content{
+                  width: 100%;
+                  padding: 1rem;
+                  p{
+                    padding: 0!important;
+                  }
+                  .close{
+                    top: 0.5rem;
+                    right: 0.5rem;
+                  }
+                }
+              }
+            .__btn{
+              flex-direction: column;
+              & > div{
+                margin: auto 0 1rem 0!important;
+                width: 100%;
+              }
+            }
+          }
+          &:nth-child(2){
+            .__more{
+              transform: translateX(0%);
+            }
+          }
+          &:nth-child(3){
+            .__more{
+              transform: translateX(-0%);
+            }
+          }
+
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,21 +1,30 @@
-{% if btn == 'more' %}
-    <div class="__btn __learn-more {{color}}">
+{% if btn == 'more' and section == 'pack' %}
+
+  <div class="__btn __learn-more {{color}}">
     En savoir plus
     <div class="triangle {{color}}"></div>
-    </div>
-  {% elseif btn == 'envie' %}
-    <div class="__btn __learn-more __grey">
-      {{module.header.btn_txt_envie}}
-    </div>
-  {% elseif btn == 'devis' %}
-    <div class="__btn __devis __color">
-      <a target="_blank" href="/demande-de-devis">Faire une demande de devis</a>
-    </div>
-  {% elseif btn == 'dl' %}
-    <div class="__btn __dl __color">
-      <a href="{{ image_page_imgB.media[image_basename_imgB].url() }}" download>
-        {{item.btn_txt}}
-      </a>
-    </div>
-  {% else %}
+  </div>
+
+{% elseif btn == 'envie' %}
+
+  <div class="__btn __learn-more __grey">
+    {{module.header.btn_txt_envie}}
+  </div>
+
+{% elseif btn == 'devis' %}
+
+  <div class="__btn __devis __color">
+    <a target="_blank" href="/demande-de-devis">Faire une demande de devis</a>
+  </div>
+
+{% elseif btn == 'dl' %}
+
+  <div class="__btn __dl __color">
+    <a href="{{ image_page_imgB.media[image_basename_imgB].url() }}" download>
+      {{item.btn_txt}}
+    </a>
+  </div>
+
+{% else %}
+
 {% endif %}

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

@@ -0,0 +1,8 @@
+<div class="close">
+  <svg height="14.998837" width="15" >
+    <g transform="matrix(2.8345935,0,0,2.8345935,-66.055662,-122.48714)">
+      <path d="m 23.509451,43.41759 4.879659,4.879249" style="fill:none;stroke:#79797b;stroke-width:0.412105;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path style="fill:none;stroke:#79797b;stroke-width:0.412105;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M 23.509451,48.296839 28.38911,43.41759" />
+    </g>
+  </svg>
+</div>

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

@@ -1,43 +0,0 @@
-{# img thumb #}
-{% set image_parts = pathinfo(item.imb_background) %}
-{% set image_basename_imgB = image_parts.basename %}
-{% set image_page_imgB = image_parts.dirname == '.' ? module : module.find(image_parts.dirname) %}
-
-<div class="__wrap-content" style="background-image: url('{{ image_page_imgB.media[image_basename_imgB].url() }}')" >
-  <div class="__content">
-  <div class="close">
-  <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-  <svg
-     height="14.998837"
-     width="15"
-     >
-    <g
-       transform="matrix(2.8345935,0,0,2.8345935,-66.055662,-122.48714)">
-      <path
-         d="m 23.509451,43.41759 4.879659,4.879249"
-         style="fill:none;stroke:#79797b;stroke-width:0.412105;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-      <path
-         style="fill:none;stroke:#79797b;stroke-width:0.412105;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-         d="M 23.509451,48.296839 28.38911,43.41759"
-         />
-    </g>
-  </svg>
-
-
-  </div>
-    <div class="__title">
-      <h6>{{item.titre}}</h6>
-    </div>
-    <div class="__txt">
-      <p>{{item.txt_color}}</p>
-    </div>
-    <div class="__txt black">
-      <p>{{item.txt_black}}</p>
-    </div>
-
-    <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/learn_more/img_more.html.twig

@@ -0,0 +1,16 @@
+{% set image_parts = pathinfo(item.imb_background) %}
+{% set image_basename_imgB = image_parts.basename %}
+{% set image_page_imgB = image_parts.dirname == '.' ? module : module.find(image_parts.dirname) %}
+
+<div class="__wrap-content" style="background-image: url('{{ image_page_imgB.media[image_basename_imgB].url() }}')" >
+
+  <div class="__content">
+    {% include 'components/buttons/icone_close.html.twig' %}
+    {% include 'components/learn_more/txt_more.html.twig' with { btn: 'devis' } %}
+
+    <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/learn_more/more.html.twig

@@ -0,0 +1,21 @@
+{# {% 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 %}
+
+  <div id="{{titleHyp}}" class="__more  {{color}} ">
+    <div class="__details">
+
+    {% include 'components/learn_more/img_more.html.twig' %}
+
+    </div>
+  </div>
+{# {% endfor %} #}

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

@@ -0,0 +1,9 @@
+<div class="__title">
+  <h6>{{item.titre}}</h6>
+</div>
+<div class="__txt">
+  <p>{{item.txt_color}}</p>
+</div>
+<div class="__txt black">
+  <p>{{item.txt_black}}</p>
+</div>

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

@@ -0,0 +1,24 @@
+{% if list == "true" %}
+
+  {% set image_parts = pathinfo(item.img_thumb) %}
+  {% set image_basename_thumb = image_parts.basename %}
+  {% set image_page_thumb = image_parts.dirname == '.' ? module : module.find(image_parts.dirname) %}
+
+  {{ image_page_thumb.media[image_basename_thumb].html() }}
+
+  <div class="__sub-title">
+    <p>{{item.sous_title}}</p>
+  </div>
+
+{% else %}
+
+  {% set image_parts = pathinfo(module.header.img_thumb_envie) %}
+  {% set image_basename_thumb = image_parts.basename %}
+  {% set image_page_thumb = image_parts.dirname == '.' ? module : module.find(image_parts.dirname) %}
+
+  {{ image_page_thumb.media[image_basename_thumb].html() }}
+  <div class="__sub-title">
+    <p>{{module.header.sous_title_envie}}</p>
+  </div>
+
+{% endif %}

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

@@ -4,49 +4,78 @@
   {% set image_basename_thumb = image_parts.basename %}
   {% set image_page_thumb = image_parts.dirname == '.' ? module : module.find(image_parts.dirname) %}
 
-{% 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 %}
+  {% set titleHyp = item.title|lower|hyphenize %}
 
-  <div id="{{titleHyp}}" class="{{section}}  __thumbnails">
+  {% if titleHyp == "bien-tre" %}
+    {% set color = "__blue" %}
+  {% elseif titleHyp == "nature" %}
+    {% set color = "__green" %}
+  {% elseif titleHyp == "gastronomie" %}
+    {% set color = "__red" %}
+  {% else %}
+    {% set color = "__grey" %}
+  {% endif %}
+
+  <div id="{{titleHyp}}" class="{{section}} __thumbnails">
     <div class="__title">
-      <p>{{item.title}}</p>
+      <div class="__d-inline">
+        <span>{{item.title}}</span>
+      </div>
     </div>
-    <div class="__thumb">
+
+    <div class="__thumb __hover">
 
       {% if section == 'pack' %}
         <a href="#">
-      {% endif %}
-
-        <div class="__images ">
-          {{ image_page_thumb.media[image_basename_thumb].html() }}
-          <div class="__sub-title">
-            <p>{{item.sous_title}}</p>
+          <div class="__images">
+            {% include 'components/thumbnails/img_tbn.html.twig' with { list: 'true'}  %}
           </div>
-        </div>
+          {% include 'components/buttons/btn.html.twig' with { btn: 'more'} %}
+        </a>
 
-      {% if section == 'pack' %}
+      {% else %}
+
+        <div class="__images">
+          {% include 'components/thumbnails/img_tbn.html.twig' with { list: 'true'}  %}
+        </div>
         {% include 'components/buttons/btn.html.twig' with { btn: 'more'} %}
-      {% endif %}
 
-      {% if section == 'pack' %}
-        </a>
       {% endif %}
 
     </div>
+    {% if section == 'pack' %}
+      {% include 'components/learn_more/more.html.twig' %}
+    {% endif %}
+
   </div>
+
 {% endfor %}
 
-{% for item in module.header.list %}
+{% if section == 'pack' %}
+  <div id="envie" class="{{section}} __thumbnails">
+
+    <div class="__title">
+      <div class="__d-inline">
+        <span>{{module.header.title_envie}}</span>
+      </div>
+    </div>
+
+    <div class="__thumb">
+      <a target="_blank" href="{{module.header.btn_url_envie}}">
+        <div class="__images ">
+          {% include 'components/thumbnails/img_tbn.html.twig'  with { list: 'false'} %}
+        </div>
+        {% include 'components/buttons/btn.html.twig' with { btn: 'envie'} %}
+      </a>
+    </div>
+
+  </div>
+{% endif %}
+
+{% for item in module.header.list_offres %}
 
   {% set titleHyp = item.title|lower|hyphenize %}
+
   {% if titleHyp == "bien-tre" %}
     {% set color = "__blue" %}
   {% elseif titleHyp == "nature" %}
@@ -57,11 +86,23 @@
     {% set color = "__grey" %}
   {% endif %}
 
-  {% if section == 'pack' %}
-    <div id="{{titleHyp}}" class="__more  {{color}} ">
-    <div class="__details">
-    {% include 'components/learn_more.html.twig' %}
+  <div id="{{titleHyp}}" class="{{section}} __thumbnails">
+    {% set image_parts = pathinfo(item.a_file) %}
+    {% set image_basename_thumb = image_parts.basename %}
+    {% set image_page_thumb = image_parts.dirname == '.' ? module : module.find(image_parts.dirname) %}
+
+    <div class="__title">
+      <div class="__d-inline">
+        <span>{{item.title}}</span>
+      </div>
     </div>
+
+    <div class="__thumb">
+      <div class="__images ">
+        {{ image_page_thumb.media[image_basename_thumb].html() }}
+      </div>
     </div>
-  {% endif %}
+
+  </div>
+
 {% endfor %}

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

@@ -0,0 +1,34 @@
+{% 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 %}
+
+  <div id="{{titleHyp}}" class="{{section}} __thumbnails">
+    {% set image_parts = pathinfo(item.a_file) %}
+    {% set image_basename_thumb = image_parts.basename %}
+    {% set image_page_thumb = image_parts.dirname == '.' ? module : module.find(image_parts.dirname) %}
+
+    <div class="__title">
+      <div class="__d-inline">
+        <span>{{item.title}}</span>
+      </div>
+    </div>
+
+    <div class="__thumb">
+      <div class="__images ">
+      {% include 'components/thumbnails/img_tbn.html.twig' with { list: 'true'}  %}
+      </div>
+    </div>
+
+  </div>
+
+{% endfor %}

user/themes/lecampus/templates/modular/section-offres.html.twig

@@ -1,38 +1 @@
 {{content}}
-
-{% for item in module.header.list_offres %}
-
-<div id="{{titleHyp}}" class="{{section}}  __thumbnails">
-{% set image_parts = pathinfo(item.a_file) %}
-{% set image_basename_thumb = image_parts.basename %}
-{% set image_page_thumb = image_parts.dirname == '.' ? module : module.find(image_parts.dirname) %}
-
-
-  <div class="__title">
-    <p>{{item.title}}</p>
-  </div>
-  <div class="__thumb">
-
-    {% if section == 'pack' %}
-      <a href="#">
-    {% endif %}
-
-      <div class="__images ">
-        {{ image_page_thumb.media[image_basename_thumb].html() }}
-        <div class="__sub-title">
-          <p>{{item.sous_title}}</p>
-        </div>
-      </div>
-
-    {% if section == 'pack' %}
-      {% include 'components/buttons/btn.html.twig' with { btn: 'more'} %}
-    {% endif %}
-
-    {% if section == 'pack' %}
-      </a>
-    {% endif %}
-
-  </div>
-</div>
-
-{% endfor %}

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

@@ -17,7 +17,7 @@
             {{module.content}}
           </div>
           <div class="packs d-flex">
-          {% include 'modular/section-offres.html.twig' %}
+          {% include 'components/thumbnails/thumbnails_offre.html.twig' %}
           </div>
         </div>
         {% endfor %}
@@ -25,3 +25,11 @@
     </section>
   </section>
 {% endblock %}
+
+{% block devis %}
+{% include 'partials/devis.html.twig' %}
+{% endblock %}
+
+{% block newsletter %}
+  {% include 'partials/newsletters.html.twig' %}
+{% endblock %}

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

@@ -21,34 +21,6 @@
 
               <div class="packs d-flex">
                 {% include 'components/thumbnails/thumbnails.html.twig' with {section: 'pack'} %}
-
-                <div id="envie" class="{{section}}  __thumbnails">
-                  <div class="__title">
-                    <p>{{module.header.title_envie}}</p>
-                  </div>
-
-                  <div class="__thumb">
-
-                    <a target="_blank" href="{{module.header.btn_url_envie}}">
-
-                      {% set image_parts = pathinfo(module.header.img_thumb_envie) %}
-                      {% set image_basename_thumb = image_parts.basename %}
-                      {% set image_page_thumb = image_parts.dirname == '.' ? module : module.find(image_parts.dirname) %}
-
-                      <div class="__images ">
-                        {{ image_page_thumb.media[image_basename_thumb].html() }}
-                        <div class="__sub-title">
-                          <p>{{module.header.sous_title_envie}}</p>
-                        </div>
-                      </div>
-
-                      {% include 'components/buttons/btn.html.twig' with { btn: 'envie'} %}
-
-                    </a>
-
-                  </div>
-                </div>
-
               </div>
 
             </div>
@@ -59,23 +31,34 @@
               <div class="__intro">
                 {{module.content}}
               </div>
+
               <div class="lieux d-flex">
               {% include 'components/thumbnails/thumbnails.html.twig' with {section: 'lieux'} %}
               </div>
 
-          {% set image_parts = pathinfo(page.header.btn_url) %}
-          {% set image_basename_url = image_parts.basename %}
-          {% set image_page_url = image_parts.dirname == '.' ? page : page.find(image_parts.dirname) %}
+              <div class="dl_brochure">
+                {% set image_parts = pathinfo(page.header.btn_url) %}
+                {% set image_basename_url = image_parts.basename %}
+                {% set image_page_url = image_parts.dirname == '.' ? page : page.find(image_parts.dirname) %}
 
-          <div class="dl_brochure">
-            <a target="_blank" href="{{ image_page_url.media[image_basename_url].url() }}" download>{{page.header.btn_txt}}</a>
-          </div>
+                <a target="_blank" href="{{ image_page_url.media[image_basename_url].url() }}" download>{{page.header.btn_txt}}</a>
+              </div>
 
             </div>
           {% endif %}
         {% endfor %}
+
       </div>
     </section>
 
   </section>
 {% endblock %}
+
+
+{% block newsletter %}
+  {% include 'partials/newsletters.html.twig' %}
+{% endblock %}
+
+{% block devis %}
+  {% include 'partials/devis.html.twig' %}
+{% endblock %}