template page nos-packs

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

@@ -10,12 +10,12 @@ form:
             header.media_order:
               label: Page Media (first one will be displayed next to your content)
 
-            header.section-lieux:
+            header.section:
               type: fieldset
               title: Nos lieux
               underline: true
               fields:
-                header.list_lieux:
+                header.list:
                   name: Les lieux à découvrir
                   type: list
                   style: vertical
@@ -28,7 +28,7 @@ form:
                     .title:
                       type: text
                       label: Titre du lieux
-                    .img-thumbnail:
+                    .img_thumb:
                       type: filepicker
                       folder: '@self'
                       preview_images: true

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

@@ -14,7 +14,7 @@ form:
               type: fieldset
               title: Nos packs
               fields:
-                header.list_packs:
+                header.list:
                   name: Les packs
                   type: list
                   style: vertical

user/themes/lecampus/package.json

@@ -24,12 +24,12 @@
     "url": "https://github.com/picturepan2/spectre/issues"
   },
   "devDependencies": {
-    "gulp": "latest",
-    "gulp-autoprefixer": "latest",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^6.1.0",
     "gulp-clean-css": "^3.9.4",
     "gulp-csscomb": "^3.0.8",
     "gulp-rename": "^1.2.2",
-    "gulp-sass": "^4.0.1"
+    "gulp-sass": "^4.1.0"
   },
   "browserslist": [
     "last 4 Chrome versions",
@@ -39,10 +39,11 @@
     "last 4 Opera versions",
     "Explorer >= 10"
   ],
+  "scripts": {
+    "dev": "gulp watch",
+    "build": "gulp build"
+  },
   "dependencies": {
-    "browserslist": "^4.6.1",
-    "caniuse-lite": "file:node_modules/caniuse-lite",
-    "gulp-sourcemaps": "^2.6.4",
-    "uglify-js": "^3.5.12"
+    "gulp-sourcemaps": "^2.6.4"
   }
 }

user/themes/lecampus/scss/theme.scss

@@ -14,6 +14,6 @@
 @import 'theme/form';
 @import 'theme/mobile';
 @import 'theme/cookies';
-
+@import 'theme/thumbnails/thumbnails';
 // Extra Skeleton Styling
 @import 'theme/blog';

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

@@ -0,0 +1,29 @@
+#nos-packs{
+  .content{
+    margin-top: 0;
+    .section{
+      margin: 100px 0;
+    }
+    .__intro{
+      text-align: center;
+    }
+    .d-flex{
+      display: inline-flex;
+      width: 100%;
+      .__title{
+        text-align: center;
+      }
+      .__btn{
+        text-align: center;
+      }
+      .__more{
+        display: none
+      }
+
+
+      .pack{
+      }
+    }
+
+  }
+}

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

@@ -0,0 +1,16 @@
+{% if btn == 'more' %}
+    <div class="__btn __learn-more">
+      <a href="#">En savoir plus</a>
+    </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/learn_more.html.twig

@@ -0,0 +1,25 @@
+{# 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="__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>
+    {% include 'components/buttons/btn.html.twig' with { btn: 'devis' } %}
+    {% include 'components/buttons/btn.html.twig' with { btn: 'dl' } %}
+  </div>
+</div>

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

@@ -0,0 +1,37 @@
+{% for item in module.header.list %}
+  {# img thumb #}
+  {% 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) %}
+
+  <div class="{{section}} {{color}}">
+
+    <div class="__title">
+      <p>{{item.title}}</p>
+    </div>
+
+    <div class="__thumb">
+      <div class="__images __hover">
+        {{ image_page_thumb.media[image_basename_thumb].html() }}
+      </div>
+    </div>
+
+    {% if section == 'pack' %}
+
+      {% include 'components/buttons/btn.html.twig' with { btn: 'more'} %}
+
+      {# 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 %}

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

@@ -1,33 +1,2 @@
-{% for item in header.list_packs %}
-  <div class="pack">
-    <div class="title-pack">
-    <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 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>
-        </div>
-      </div>
-    </div>
-  </div>
-{% endfor %}
+  {{content}}

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

@@ -1,65 +1 @@
 {{content}}
-
-{% for item in module.header.list_packs %}
-  {# img thumb #}
-  {% 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) %}
-
-  {# img more #}
-  {% 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) %}
-
-  {# 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="pack">
-    <div class="__title-pack">
-      <p>{{item.title}}</p>
-    </div>
-    <div class="__thumb">
-      <div class="__images __hover">
-        {{ image_page_thumb.media[image_basename_thumb].html() }}
-      </div>
-      <div class="__sub-title">
-        <h6>{{item.sous_title}}</h6>
-      </div>
-    </div>
-
-    <div class=" __more __color">
-      <div class="__btn">
-        <a href="#">En savoir plus</a>
-      </div>
-      <div class="__details __color">
-        <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-black">
-            {{item.txt_black}}
-          </div>
-          <div>
-            <div class="__btn __devis">
-              <a target="_blank" href="/demande-de-devis">Faire une demande de devis</a>
-            </div>
-            <div class="__btn __dl">
-              <a href="{{ image_page_imgB.media[image_basename_imgB].url() }}" download>
-                {{item.btn_txt}}
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-{% endfor %}

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

@@ -10,19 +10,33 @@
     </section>
 
     <section class="body-wrapper">
-        <div class="nos_pack">
+      <div class="content">
         {% for module in page.collection() %}
-          {{module.content}}
-          {% include 'modular/section-packs.html.twig' %}
-          {% include 'modular/section-lieux.html.twig' %}
-        {% endfor %}
-        </div>
 
-        <div class="nos_lieux">
-        </div>
-        <div class="dl_proposition">
+          {% if module.template == 'modular/section-packs' %}
+            <div class="section nos_pack">
+              <div class="__intro">
+                {{module.content}}
+              </div>
+
+              <div class="packs d-flex">
+                {% include 'components/thumbnails/thumbnails.html.twig' with {section: 'pack'} %}
+              </div>
+            </div>
+          {% endif %}
 
-        </div>
+          {% if module.template == 'modular/section-lieux' %}
+            <div class="section nos_lieux">
+              <div class="__intro">
+                {{module.content}}
+              </div>
+              <div class="lieux d-flex">
+              {% include 'components/thumbnails/thumbnails.html.twig' with {section: 'lieux'} %}
+              </div>
+            </div>
+          {% endif %}
+        {% endfor %}
+      </div>
     </section>
 
   </section>