fix agenda archive && thumbnails

web/app/themes/la_mine/agenda.php

@@ -4,10 +4,14 @@
  */
 $context = Timber::context();
 $context['term_page'] = new Timber\Term();
+// $today = date('Y-m-d H:i:s');
 
 $args = array(
     'post_type' => 'post',
     'post_status'=>'publish',
+    'orderby' => 'meta_value',
+    'meta_key' => 'informations_debut_event',
+    'order' => 'ASC',
 );
 
 $context['post'] = Timber::get_post();

web/app/themes/la_mine/archive.php

@@ -5,9 +5,14 @@
 $context = Timber::context();
 $context['term_page'] = new Timber\Term();
 
+$today = date('Y-m-d H:i:s');
+
 $args = array(
     'post_type' => 'post',
     'post_status'=>'publish',
+    'orderby' => 'meta_value',
+    'meta_key' => 'informations_debut_event',
+    'order' => 'DESC',
 );
 
 $context['post'] = Timber::get_post();

web/app/themes/la_mine/src/assets/js/scripts.js

@@ -1,28 +1,14 @@
 function slides() {
-  $('body:not(.les-temps-forts) main .main-carousel').flickity({
+  $('body:not(.les-temps-forts) .hero .main-carousel').flickity({
+    cellAlign: 'left',
+    autoPlay: true,
+    prevNextButtons: false,
+  });
+  $('.privatiser.main-carousel').flickity({
     cellAlign: 'left',
     autoPlay: true,
     prevNextButtons: false,
   });
-
-  // console.log('carrousell');
-  // if (Home != null) {
-  //   var flkty = new Flickity( Home, {
-  //     cellAlign: 'left',
-  //     autoPlay: true,
-  //     prevNextButtons: false,
-  //     // fade: true,
-  //   });
-  // }
-
-  // var prive = document.querySelector('.prive .__slide');
-  // if (prive != null) {
-  //   var flkty = new Flickity( prive, {
-  //     // options
-  //     cellAlign: 'left',
-  //     autoPlay: true,
-  //   })
-  // }
 
   var slide_tpsF = document.querySelectorAll('.tpsF .main-carousel');
   if (slide_tpsF != null) {
@@ -133,5 +119,7 @@ $( document ).ready(function() {
   isotope();
   // drag();
   click_nav();
-  scrollto();
+  if (window.width >= 578) {
+    scrollto();
+  }
 });

web/app/themes/la_mine/src/assets/scss/components/_footer.scss

@@ -2,6 +2,7 @@ body{
     & > footer{
         box-shadow: inset 0px 10px 10px rgba(0, 0, 0, 0.05);
         padding-top: 2rem;
+        margin-top: 5rem;
         section{
             & > .row{
                 margin-bottom: 1rem;

web/app/themes/la_mine/src/assets/scss/components/_thumbnails.scss

@@ -1,32 +1,28 @@
 .thumbnails{
-  min-height: 520px;
-  @media screen and (min-width: 768px) {
-    min-height: 430px;
-  }
-  // margin-bottom: 2rem;
     a{
-        display: block;
         text-decoration: none;
     }
     figure{
-      overflow: hidden;
+      position: relative;
         img{
             transform: scale(1);
             transition: 1s transform ease;
         }
     }
     .wrap_content{
+        position: absolute;
         display: flex;
         flex-direction: column;
-        max-height: 11.3rem;
-        overflow: hidden;
+        justify-content: center;
         border: 5px solid black;
         padding: 1rem;
-        position: relative;
-        margin: -6rem 2rem;
+        margin: 0;
         background: white;
-        transition: 0.2s margin-top ease;
         text-align: center;
+        transform: translate(-50%, -50%);
+        width: calc(100% - 4rem);
+        left: 50%;
+        transition: 0.2s transform ease;
         & > * {
           color: black;
         }
@@ -41,13 +37,11 @@
         }
         .date{
           margin-bottom: 0.5rem;
+          line-height: 1;
             & > * {
                 font-family: 'universalis-regular';
                 font-size: 0.9rem;
-                line-height: 0.5;
-                time{
-                  line-height: 0.5;
-                }
+                line-height: inherit;
             }
         }
         .places{
@@ -59,15 +53,14 @@
     }
     &:hover {
         figure{
-          overflow: hidden;
             img{
                 transform: scale(1.1);
                 transition: 1s transform ease;
             }
-        }
-        .wrap_content{
-            margin-top: -7rem;
-            transition: 0.2s margin-top ease;
+            .wrap_content{
+              transform: translate(-50%,-60%);
+              transition: 0.2s transform ease;
+            }
         }
     }
 }

web/app/themes/la_mine/src/assets/scss/components/_title-page.scss

@@ -18,6 +18,7 @@
         line-height: 1;
         @media screen and (min-width: 576px) {
             transform: translateX(0%) rotate(-15deg);
+
         }
         @media screen and (min-width: 1200px) {
             transform: translateX(-50%) rotate(-15deg);

web/app/themes/la_mine/src/assets/scss/hamburgers/_base.scss

@@ -2,6 +2,12 @@
 // ==================================================
 .hamburger {
   padding: $hamburger-padding-y $hamburger-padding-x;
+
+  @media screen and (min-width: 576px) {
+    // $hamburger-padding-y           : 13px !default;
+    // $hamburger-padding-x           : 15px !default;
+    padding: 13px 15px;
+  }
   display: inline-block;
   cursor: pointer;
 

web/app/themes/la_mine/src/assets/scss/hamburgers/hamburgers.scss

@@ -9,8 +9,9 @@
 
 // Settings
 // ==================================================
-$hamburger-padding-x           : 15px !default;
-$hamburger-padding-y           : 13px !default;
+$hamburger-padding-x           : 13px !default;
+$hamburger-padding-y           : 15px !default;
+
 $hamburger-layer-width         : 20px !default;
 $hamburger-layer-height        : 2px !default;
 $hamburger-layer-spacing       : 4px !default;

web/app/themes/la_mine/src/assets/scss/index.scss

@@ -24,8 +24,13 @@
 
 
 body,html{
-    font-size: 16px;
-    line-height: 1.5;
+    font-size: 14px;
+    line-height: 1;
+    @media screen and (min-width: 576px) {
+      font-size: 16px;
+      line-height: 1.5;
+    }
+
 }
 // reboot perso
 figure{

web/app/themes/la_mine/src/assets/scss/pages/_agenda.scss

@@ -63,7 +63,7 @@
                 }
             }
             .thumbnails{
-              margin-bottom: 2rem;
+              margin-bottom: 5rem;
             }
         }
     }

web/app/themes/la_mine/src/assets/scss/pages/_home.scss

@@ -24,10 +24,11 @@
                     margin-bottom: 2rem;
                     transform: translateX(0%) rotate(-15deg);
                     font-family: 'millimetre-bold';
-                    font-size: 2rem;
+                    font-size: 1.5rem;
                     line-height: 1;
                     @media screen and (min-width: 576px) {
                         transform: translateX(0%) rotate(-15deg);
+                        font-size: 2rem;
                     }
                     @media screen and (min-width: 1200px) {
                         transform: translateX(-50%) rotate(-15deg);
@@ -52,7 +53,7 @@
                     & > .row{
                         justify-content: center;
                         &:first-of-type{
-                            min-height: 430px;
+                            margin-bottom: 100px;
                         }
                     }
                 }
@@ -65,6 +66,8 @@
                     }
                     & > .row{
                         position: relative;
+                        width: 100%;
+                        margin: auto;
                     }
                         figure {
                         position: absolute;
@@ -95,6 +98,7 @@
                     .container-fluid{
                         & > .row{
                             position: relative;
+
                         }
                             figure {
                             position: absolute;
@@ -142,7 +146,7 @@
                         font-size: 1.875rem;
                     }
                     & > div{
-                        border:10px solid $colorRed;
+                        border:5px solid $colorRed;
                         padding: 1rem;
                         height: calc(100% - 4rem);
                         h4{
@@ -173,13 +177,13 @@
                     & > .row{
                         justify-content: center;
                         &:first-of-type{
-                            min-height: 450px;
+                          margin-bottom: 50px;
                         }
                     }
                 }
                 article{
                     height: auto;
-                    min-height: 520px;
+                    min-height: 450px;
                     @media screen and (min-width: 576px) {
                       min-height: 450px;
                     }
@@ -193,7 +197,7 @@
                     }
                 }
                 .wrap_content{
-                  margin: -8rem 2rem!important;
+                  // margin: -8rem 2rem!important;
                 }
                 .content{
                     font-family: 'universalis-regular';

web/app/themes/la_mine/src/assets/scss/pages/_privatiser-lespace.scss

@@ -58,14 +58,14 @@
             }
             &.is-selected .legendes{
                 opacity: 1;
-                -webkit-transform: translateX(0px);
-                    -ms-transform: translateX(0px);
-                        transform: translateX(0px);
+                transform: translateX(-50%);
                 -webkit-transition: all 1.3s;
                 -o-transition: all 1.3s;
                 transition: all 1.3s;
+                @media screen and (min-width: 576px) {
+                  transform: translateX(0px);
+                }
             }
-
             figcaption{
                 left: 50%;
                 transform: translateX(-50%);
@@ -84,7 +84,7 @@
                 h6{
                     font-size: 1rem;
                     text-transform: uppercase;
-                    font-family: 'universalis-bold';                    
+                    font-family: 'universalis-bold';
                 }
                 &.legendes{
                     opacity: 0;
@@ -98,4 +98,4 @@
             }
         }
     }
-}
+}

web/app/themes/la_mine/src/assets/scss/pages/_single.scss

@@ -14,10 +14,15 @@
         h3{
             border: 5px solid $colorYellow;
             padding: 0.5rem;
-            width: max-content;
-            font-size: 2rem;
+            font-size: 1.5rem;
+            width: auto;
             line-height: 1;
             font-family: 'millimetre-bold';
+            @media screen and (min-width: 576px) {
+              width: max-content;
+              font-size: 2rem;
+
+            }
         }
     }
     .data{
@@ -54,7 +59,7 @@
         margin: 5rem 0;
         h3{
             font-family: 'millimetre-bold';
-            font-size: 2rem;
+            font-size: 1.5rem;
             line-height: 1;
             border: 5px solid $colorYellow;
             width: max-content;
@@ -70,7 +75,8 @@
             margin-bottom: 2rem;
             transform: translateX(0%) rotate(-15deg);
             @media screen and (min-width: 576px) {
-                transform: translateX(0%) rotate(-15deg);
+              font-size: 2rem;
+              transform: translateX(0%) rotate(-15deg);
             }
             @media screen and (min-width: 1200px) {
                 transform: translateX(-50%) rotate(-15deg);

web/app/themes/la_mine/templates/agenda.twig

@@ -1,7 +1,7 @@
 {% extends "base.twig" %}
 {% block content %}
 	{% include 'components/title_page.twig'  %}
-	{% set now = 'now'|date('Ydj') %}
+	{% set now = 'now'|date('Ymd') %}
 	<section class="row filter">
 		<ul class="d-flex col flex-wrap">
 			<li><a href="/archive">Archive</a></li>
@@ -10,10 +10,10 @@
 			<li data-filter="*" >
 				Tous
 			</li>
+
 			{% set newArray = [] %}
 			{% for cat in posts %}
-			{% set end = cat.informations_fin_event|date("Ydj") %}
-
+			{% set end = cat.informations_fin_event|date("Ymd") %}
 				{% set term = cat.categories|last.slug %}
 				{% if term not in newArray and now <= end %}
 					<li data-filter=".{{cat.categories|last.slug}}">
@@ -21,13 +21,13 @@
 					</li>
 					{% set newArray = newArray|merge([term]) %}
 				{% endif %}
-				
+
 			{% endfor %}
 		</ul>
 	</section>
-	<section class="grid">		
+	<section class="grid">
 		{% for item in posts %}
-			{% set end = item.informations_fin_event|date("Ydj") %}
+			{% set end = item.informations_fin_event|date("Ymd") %}
 			{% if now <= end %}
 				{% include 'components/thumbnails/thumbnails.twig'%}
 			{% endif %}
@@ -36,7 +36,7 @@
 		<div class="paralax" data-rellax-speed="-5">
 			<img src="{{theme.link}}/asset/images/objet_4.svg" alt="objet 4">
 		</div>
-		
+
 	</section>
 
 {% endblock %}

web/app/themes/la_mine/templates/archive.twig

@@ -1,7 +1,7 @@
 {% extends "base.twig" %}
 {% block content %}
 {% include 'components/title_page.twig'  %}
-{% set now = 'now'|date('Ydj') %}
+{% set now = 'now'|date('Ymd') %}
 
 	<section class="row filter">
 		<ul class="d-flex flex-wrap">
@@ -15,7 +15,7 @@
         {% set newArray = [] %}
         {% for cat in posts %}
           {% set term = cat.categories|last.slug %}
-          {% set end = cat.informations_fin_event|date("Ydj") %}
+          {% set end = cat.informations_fin_event|date("Ymd") %}
 
           {% if term not in newArray and now >= end %}
             <li data-filter=".{{cat.categories|last.slug}}" >
@@ -29,7 +29,7 @@
 
   <section class="row grid">
     {% for item in posts %}
-      {% set end = item.informations_fin_event|date("Ydj") %}
+      {% set end = item.informations_fin_event|date("Ymd") %}
       {% if now >= end %}
         {% include 'components/thumbnails/thumbnails.twig'%}
       {% endif %}

web/app/themes/la_mine/templates/base.twig

@@ -21,7 +21,7 @@
 			</figure>
 		{% endif %}
 
-		<main id="content" class="container" role="main">
+		<main id="content" class="container px-0" role="main">
 			{% if title %}
 				<h1>{{title}}</h1>
 			{% endif %}

web/app/themes/la_mine/templates/components/thumbnails/thumbnails.twig

@@ -11,39 +11,44 @@
 
     <figure>
       <span class="icone_cat {{cat}}"></span>
-      <img src="{{ Image(item.image_event).src|resize(500,500) }}">
-    </figure>
+      <div class="overflow-hidden">
+        <img src="{{ Image(item.image_event).src|resize(500,500) }}">
+      </div>
+
+      <figcaption class="wrap_content">
+        <h5>{{title}}</h5>
+        <div class="content">
+          <div class="date">
+            {% set start = item.informations_debut_event|date("Ydj") %}
+            {% set end = item.informations_fin_event|date("Ydj") %}
+            {% if start == end %}
+              <span class="start">
+                Le <time datetime="{{item.informations_debut_event|date("j F Y")}}">{{item.informations_debut_event|date("j F Y") }}</time>
+                de <time datetime="{{item.informations_debut_event|date("G:i")}}">{{item.informations_debut_event|date("G:i")}}</time>
+              </span>
+              <span class="end">
+                à <time datetime="{{item.informations_fin_event|date("G:i")}}">{{item.informations_fin_event|date("G:i")}}</time>
+              </span>
+
+            {% else %}
+
+              <span class="start">
+                Du <time datetime="{{item.informations_debut_event|date("j F Y") }}">{{item.informations_debut_event|date("j F Y") }}</time>
+                à <time datetime="{{item.informations_debut_event|date("G:i")}}">{{item.informations_debut_event|date("G:i")}}</time>
+              </span>
+              <span class="end">
+                <br>Au <time datetime="{{item.informations_fin_event|date("j F Y") }}">{{item.informations_fin_event|date("j F Y") }}</time>
+                à <time datetime="{{item.informations_fin_event|date("G:i")}}">{{item.informations_fin_event|date("G:i")}}</time></br>
+              </span>
 
-    <div class="wrap_content">
-      <h5>{{title}}</h5>
-      <div class="content">
-        <div class="date">
-          {% set start = item.informations_debut_event|date("Ydj") %}
-          {% set end = item.informations_fin_event|date("Ydj") %}
-          {% if start == end %}
-            <span class="start">
-              Le <time datetime="{{item.informations_debut_event|date("j F Y")}}">{{item.informations_debut_event|date("j F Y") }}</time>
-              de <time datetime="{{item.informations_debut_event|date("G:i")}}">{{item.informations_debut_event|date("G:i")}}</time>
-            </span>
-            <span class="end">
-              à <time datetime="{{item.informations_fin_event|date("G:i")}}">{{item.informations_fin_event|date("G:i")}}</time>
-            </span>
-
-          {% else %}
-
-            <span class="start">
-              Du <time datetime="{{item.informations_debut_event|date("j F Y") }}">{{item.informations_debut_event|date("j F Y") }}</time>
-              à <time datetime="{{item.informations_debut_event|date("G:i")}}">{{item.informations_debut_event|date("G:i")}}</time>
-            </span>
-            <span class="end">
-              <br>Au <time datetime="{{item.informations_fin_event|date("j F Y") }}">{{item.informations_fin_event|date("j F Y") }}</time>
-              à <time datetime="{{item.informations_fin_event|date("G:i")}}">{{item.informations_fin_event|date("G:i")}}</time></br>
-            </span>
-
-          {% endif %}
+            {% endif %}
+          </div>
+          <div class="places">{{item.informations_lieu}}</div>
         </div>
-        <div class="places">{{item.informations_lieu}}</div>
-      </div>
-    </div>
+      </figcaption>
+
+
+    </figure>
+
   </a>
 </article>

web/app/themes/la_mine/templates/partial/section_tpsF.twig

@@ -1,21 +1,24 @@
 <h3>Les temps forts</h3>
 <div class="row">
 	{% for item in tpsF %}
-		<article class="thumbnails col-12 col-md-6 col-lg {{cat}}">	
+		<article class="thumbnails col-12 col-md-6 col-lg {{cat}}">
 			<figure>
-				<img src="{{item.thumbnail.src|resize(500,500) }}" alt="{{item.thumbnail.alt}}" title="{{item.thumbnail.title}}">
-			</figure>
-			<div class="wrap_content">
-				<h3>{{item.title}}</h3>
-				<div class="date">
-					<span>Prochaine Édition :
-						<br><time datetime="{{item.next_edition|date("F Y") }}">{{item.next_edition|date("F Y") }}</time></br>
-					</span>
-				</div>
-				<div class="content">
-					{{item.text|truncate(20)}}
+				<div class="overflow-hidden">
+					<img src="{{item.thumbnail.src|resize(500,500) }}" alt="{{item.thumbnail.alt}}" title="{{item.thumbnail.title}}">
 				</div>
-			</div>
+				<figcaption class="wrap_content">
+					<h3>{{item.title}}</h3>
+					<div class="date">
+						<span>Prochaine Édition :
+							<br><time datetime="{{item.next_edition|date("F Y") }}">{{item.next_edition|date("F Y") }}</time></br>
+						</span>
+					</div>
+					<div class="content">
+						{{item.text|truncate(20)}}
+					</div>
+				</figcaption>
+
+			</figure>
 		</article>
 	{% endfor %}
 </div>