template nos-offres

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

@@ -19,6 +19,7 @@ form:
                   type: list
                   style: vertical
                   btnLabel: "Ajouter un pack"
+                  max: 3
                   fields:
                     .section-pack:
                       type: section
@@ -71,3 +72,24 @@ form:
                           folder: '@self'
                           preview_images: true
                           label: Selectionner le document
+            header.autre:
+              type: fieldset
+              title: Autre envie
+              fields:
+                header.title_envie:
+                  type: text
+                  label: Titre
+                header.sous_title_envie:
+                  type: text
+                  label: Texte de présentation
+                header.img_thumb_envie:
+                  type: filepicker
+                  folder: '@self'
+                  preview_images: true
+                  label: image background
+                header.btn_txt_envie:
+                  type: text
+                  label: Texte boutton
+                header.btn_url_envie:
+                  type: text
+                  label: Url

user/themes/lecampus/js/site.js

@@ -194,21 +194,7 @@ 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 $pack = $(".nos_pack .pack:not('#envie')");
   var nbrDiv = $pack.length;
   var widtWind = $( window ).width();
 
@@ -222,23 +208,28 @@ function open_pack() {
     var count = 1;
   }
 
-  console.log('count',count);
-
   $pack.on('click',function(e) {
+      e.preventDefault();
       var nbrThis = $pack.index($(this));
       var idThis = $(this).attr('id');
       var $more = $('.__more#' + idThis);
 
-      console.log($more);
-
       $('.__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 $close = $('.__more .close');
+  $close.on('click' , function(e) {
+    e.preventDefault();
+    $(this).parents('.__more').removeClass('visible');
+    $('.triangle').removeClass('visible');
   })
 
 }
@@ -277,7 +268,9 @@ jQuery(document).ready(function(){
   filteritem();
   map();
   burger();
+
   if ($('section').is("#nos-packs")) {
     open_pack();
   }
+
 });

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

@@ -1,7 +1,7 @@
 *{
   box-sizing: border-box;
 }
-#nos-packs{
+#nos-packs, #nos-offres{
   .content{
     margin-top: 0;
     width: 70%;
@@ -23,7 +23,6 @@
         .__thumbnails{
           margin: 0 1rem;
           width: calc((100% / 4) - 2rem);
-          min-width: 200px;
           .__title{
             text-align: center;
             p{
@@ -39,6 +38,7 @@
             position: relative;
             .__images{
               position: relative;
+              height: 250px;
               img{
                 width: 100%;
                 height: 100%;
@@ -67,6 +67,10 @@
         .__thumbnails{
           .__thumb{
             transition: 0.3s transform ease;
+            a{
+              outline: none;
+              border: 0;
+            }
             &:hover{
               transform: scale(1.015);
               transition: 0.3s transform ease, 0.3s box-shadow ease;
@@ -106,15 +110,21 @@
             text-align: center;
             .triangle{
               position: absolute;
+              z-index: -1;
               bottom: 0;
               left: 50%;
-              transform: translate(-50%,90%);
+              transform: translate(-50%,0%);
               display : inline-block;
               height : 0;
               width : 0;
-              border-top : 20px solid red;
+              border-top : 20px solid;
               border-right : 15px solid transparent;
               border-left : 15px solid transparent;
+              transition: 0.1s transform ease;
+              &.visible{
+                transform: translate(-50%,90%);
+                transition: 0.1s transform ease;
+              }
               &.__blue{
                   border-top : 20px solid $light-blue;
               }
@@ -163,6 +173,42 @@
       .__more{
         display: none;
         margin: 2rem 1rem;
+        .__txt.black{
+          p{
+            color: black!important;
+          }
+        }
+        &.__blue{
+          .__title{
+            color: $light-blue;
+          }
+          .__txt{
+            p{
+              color: $light-blue;
+            }
+          }
+
+          }
+        &.__green{
+          .__title{
+            color: $green;
+          }
+          .__txt{
+            p{
+              color: $green;
+            }
+          }
+        }
+        &.__red{
+          .__title{
+            color: $red;
+          }
+          .__txt{
+            p{
+              color: $red;
+            }
+          }
+        }
         &.visible{
           display: block;
         }
@@ -190,11 +236,18 @@
             width: 50%;
             height: auto;
             padding: 2rem;
+            position: relative;
+            .close{
+              position: absolute;
+              top: 1rem;
+              right: 1rem;
+              cursor: pointer;
+
+            }
             .__title{
               h6{
                 margin:0;
                 font-size: 1.3rem;
-                color: $light-blue;
                 font-family: $now_alt_medium;
               }
             }

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

@@ -3,6 +3,10 @@
     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>

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

@@ -5,13 +5,33 @@
 
 <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 __color">
+    <div class="__txt">
       <p>{{item.txt_color}}</p>
     </div>
-    <div class="__txt">
+    <div class="__txt black">
       <p>{{item.txt_black}}</p>
     </div>
 

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

@@ -41,8 +41,6 @@
       {% endif %}
 
     </div>
-
-
   </div>
 {% endfor %}
 

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

@@ -1,33 +1,38 @@
-{% for item in header.list_packs %}
-  <div class="pack">
-    <div class="title-pack">
+{{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">
-      <div class="__images __hover">img</div>
-      <div class="__sub-title">
-        <h6>{{item.sous_title}}</h6>
-      </div>
-    </div>
+  </div>
+  <div class="__thumb">
 
-    <div class=" __more __color">
-      <div class="__btn">
-        <a href="#">En savoir plus</a>
-      </div>
-      <div class="__details __color">
-        <div class="__image-background">img_background</div>
-        <div class="__content">
-          <div class="__txt">
-            {{item.text}}
-          </div>
-          <div class="__btn __devis">
-
-          </div>
-          <div class="__btn __dl">
-            <a href="{{btn_url}}">{{btn_txt}}</a>
-          </div>
+    {% 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>
-    </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

@@ -10,10 +10,17 @@
 
     <section class="body-wrapper">
       <div class="content">
-        {{content}}
-        <div class="nos_pack">
-          {% include 'modular/section_offres.html.twig' %}
+        {% for module in page.collection() %}
+        <div class="section nos_pack">
+
+          <div class="__intro">
+            {{module.content}}
+          </div>
+          <div class="packs d-flex">
+          {% include 'modular/section-offres.html.twig' %}
+          </div>
         </div>
+        {% endfor %}
       </div>
     </section>
   </section>

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

@@ -21,15 +21,35 @@
 
               <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 id="envie" class="{{section}}  __thumbnails">
+                  <div class="__title">
+                    <p>{{module.header.title_envie}}</p>
                   </div>
-                </div> #}
-              {% endfor %}
+
+                  <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>
           {% endif %}