isotope && page agenda

web/app/themes/la_mine/functions.php

@@ -22,6 +22,12 @@
 	}
 	add_action( 'wp_footer', 'flickity' );
 	
+	function isotope(){
+		wp_enqueue_script( 'isotope',
+		get_template_directory_uri() . '/src/assets/js/isotope.pkgd.min.js', array() );
+	}
+	add_action( 'wp_footer', 'isotope' );
+
 	function customJs(){
 		wp_enqueue_script( 'script',
 		get_template_directory_uri() . '/src/assets/js/scripts.js', array() );

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

@@ -87,13 +87,13 @@ function isotope() {
   var $grid = $('.grid').isotope({
     percentPosition: true,
     masonry: {
-      columnWidth: '.item'
+      columnWidth: '.thumbnails'
     },
-    itemSelector: '.item',
+    itemSelector: '.thumbnails',
     stagger: 30
   });
 
-  $('.filter-button-group li').on( 'click', function(evt) {
+  $('.cat-list li').on( 'click', function(evt) {
     var filterValue = $(this).attr('data-filter');
     $grid.isotope({ filter: filterValue });
   });
@@ -117,7 +117,7 @@ $( document ).ready(function() {
   slides();
   // masonry();
   // paralax();
-  // isotope();
+  isotope();
   // drag();
-  // click_nav();
+  click_nav();
 });

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

@@ -19,10 +19,26 @@
         figcaption{
             position: absolute;
             text-align:center;
-            bottom: 0;
+            bottom: 3rem;
             left: 0;
             right: 0;
             z-index: 999;
+            color: $colorWhite;
+            h1{
+                text-transform: uppercase;
+                font-size: 2rem;
+                line-height: 1.2;
+            }
+            h2{
+                font-size: 1.5rem;
+                line-height: 1.2;
+            }
+            @media screen and (min-width: 576px) {
+                & > * {
+                    font-size: 2rem;
+                    line-height: 1.2;
+                }
+            }
         }
     }
 }

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

@@ -1,2 +1,3 @@
 @import "header.scss";
+@import "thumbnails.scss";
 @import "hero.scss";

web/app/themes/la_mine/src/assets/scss/configs/_variables.scss

@@ -2,7 +2,9 @@
 $colorWhite: white;
 $colorYellow:#ffcc00;
 $colorBlack:black;
+$colorBlue:#009ee0ff;
 
+$colorBlack:black;
 $heightLogo: 115px;
 $heightLogoHover: 100px;
 

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

@@ -32,9 +32,26 @@ li,ul,ol{
     @include reset-list;
 }
 
-footer, iframe, #content{
+footer, iframe{
     display: none!important;
 }
+
+.wrap-btn{
+    margin-top: 2rem;
+    @media screen and (min-width: 576px) {
+        margin-top: 5rem;
+    }
+    a.btn{
+        border: 5px solid black;
+        transform: rotate(0deg) scale(1);
+        transition: 0.3s transform ease;
+        &:hover{
+            transform: rotate(-15deg) scale(1.05);
+            transition: 0.3s transform ease;
+        }
+    }
+}
+
 // @import "bootstrap/scss/bootstrap-grid.scss";
 // @import "normalize.css/normalize.css"; 
 

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

@@ -0,0 +1,33 @@
+&.agenda{
+    main{
+        padding-top: 10rem;
+        section{
+            &.filter{
+                margin-bottom: 2rem;
+            }
+        }
+        .cat-list{
+            li{
+                border:  5px solid black;
+                padding: 0.5rem 1rem;
+                margin-left: 1rem;
+            }
+        }
+        .thumbnails{
+            margin-bottom: 2rem;
+            .wrap_content{
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                margin-top: -6rem;
+                height: 150px;
+            }
+            &:hover {
+                .wrap_content{
+                    margin-top: -7rem;
+                }    
+            }
+        }
+    }
+
+}

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

@@ -1,3 +1,153 @@
 &.accueil{
+    main{
+        & > section{
+            &:first-of-type{
+                padding-top: 5rem;
+            }
+            padding: 2.5rem 0;
+            @media screen and (min-width: 576px) {
+                &:first-of-type{
+                    padding-top: 10rem;
+                }
+                padding: 5rem 0;    
+            }
+            h4{
+                font-size: 1.2rem;
+                line-height: 1.2;
+                @media screen and (min-width: 576px) {
+                    font-size: 1.5rem;
+                    line-height: 1.2;
+                }                
+            }
+            &#section_proch{
+                & > div{
+                    & > .row{
+                        justify-content: center;
+                    }
+                }
+                .thumbnails{
+                    .wrap_content{
+                        margin-top: -6rem;
+                    }
+                    &:hover {
+                        .wrap_content{
+                            margin-top: -7rem;
+                        }    
+                    }
+                }
+            }
+            &#section_projets{
+                .projets{
+                    h3{
+                        text-align: center;
+                        color: red;
+                    }
+                    & > div{
+                        border:10px solid red;
+                        padding: 1rem; 
+                        h4{
+                            font-size: 1rem;
+                            line-height: 1.2;
+                            color: red;
+                        }
+                        & > div{
+                            p{
+                                &:last-of-type{
+                                    margin-bottom: 0;
+                                }
+                            }
+                        }
+                    }
+                    &:not(:last-of-type){
+                        margin-bottom: 2rem;
+                    }
+                }
+            }
+            &#section_tpsF{
+                & > div{
+                    & > .row{
+                        justify-content: center;
+                        &:first-of-type{
+                            min-height: 500px;
+                        }
+                    }
+                }
+                h3{
+                    color: $colorBlue;
+                    font-size: 1.5rem;
+                    line-height: 1.2;
 
+                }
+                article{
+                    height: auto;
+                }
+                .date{
+                    margin: 1rem;
+                    span{
+                        display: block;
+                        color: $colorBlue;
+                        font-size: 1rem;
+                        line-height: 1.2;
+                        time{
+                            color:inherit;
+                        }
+                    }
+                }
+                .thumbnails{
+                    .wrap_content{
+                        margin-top: -10rem;
+                    }
+                    &:hover {
+                        .wrap_content{
+                            margin-top: -11rem;
+                        }    
+                    }
+                }
+
+            }
+        }
+    }
+    a.btn{
+        display: block;
+        margin: auto;
+    }
+}
+.thumbnails{
+    &:not(:last-of-type){
+        margin-bottom: 3rem;
+        @media screen and (min-width: 576px) {
+            margin-bottom: 0rem;
+        }
+    }
+    figure{
+        position: relative;
+        overflow: hidden;
+        img{
+            transform: scale(1);
+            transition: 0.3s transform ease;
+        }
+    }
+    .wrap_content{
+        border: 5px solid black;
+        padding: 1rem;
+        position: relative;
+        margin: 0 2rem;
+        background: white;
+        transition: 0.2s margin-top ease;
+        text-align: center;
+        & * {
+            color : $colorBlack;
+        }   
+    }
+    &:hover {
+        figure{
+            img{
+                transform: scale(1.1);
+                transition: 1s transform ease;
+            }
+        }
+        .wrap_content{
+            transition: 0.2s margin-top ease;
+        }    
+    }
 }

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

@@ -1 +1,2 @@
 @import "home.scss";
+@import "agenda.scss";

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

@@ -9,7 +9,7 @@
 				{% include 'components/thumbnails/thumbnails.twig'%}
 			{% endfor %}
 		</div>
-		<div class="row">
+		<div class="row wrap-btn">
 			<a class="btn _all" rel="noreferrer" href="/agenda">Tout voir</a>
 		</div>
 	</div>

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

@@ -1,12 +1,12 @@
 {% extends "base.twig" %}
 {% block content %}
-{% include 'components/title_page.twig'  %}
+	{% include 'components/title_page.twig'  %}
-{% set now = 'now'|date('Ydj') %}
+	{% set now = 'now'|date('Ydj') %}
-	<section>
+	<section class="row filter">
-		<ul class="btn_archive d-flex flex-wrap button-group filter-button-group my-0">
+		<ul class="d-flex flex-wrap">
 			<li><a href="/archive">Archive</a></li>
 		</ul>
-		<ul class="cat-list d-flex flex-wrap button-group filter-button-group">
+		<ul class="cat-list col d-flex flex-wrap">
 			<li data-filter="*" >
 				Tous
 			</li>
@@ -23,18 +23,19 @@
 				{% endif %}
 			{% endfor %}
 		</ul>
+	</section>
+	<section class="row grid">		
+		{% for item in posts %}
+			{% set end = item.informations_fin_event|date("Ydj") %}
+			{% if now <= end %}
+				{% include 'components/thumbnails/thumbnails.twig'%}
+			{% endif %}
+		{% endfor %}
 
-		<div class="grid">
-			{% for item in posts %}
-				{% set end = item.informations_fin_event|date("Ydj") %}
-				{% if now <= end %}
-					{% include 'components/thumbnails/thumbnails.twig'%}
-				{% endif %}
-			{% endfor %}
-		</div>
 		<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/base.twig

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

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

@@ -4,12 +4,12 @@
   {% set cat = item.categories|first.slug %}
 {% endif %}
 
-<article class="thumbnails col {{cat}}">
+<article class="thumbnails col-12 col-md-6 col-lg-4 {{cat}}">
   <a rel="noreferrer" href="{{site.url}}/{{item.post_name}}">
 
     <figure>
       <span class="icone_cat {{cat}}"></span>
-      <img src="{{ Image(item.image_event).src }}">
+      <img src="{{ Image(item.image_event).src|resize(500,500) }}">
     </figure>
 
     <div class="wrap_content">

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

@@ -1,5 +1,5 @@
 <h3>Les Projets</h3>
-<h2>{{ post.meta('texte_chapeau_projet') }}</h2>
+<h4>{{ post.meta('texte_chapeau_projet') }}</h4>
 <div class="row">
 	<!--ajout chloe drag-->
 		{# <div id="drag_1" class="group_drag">
@@ -31,11 +31,11 @@
 		</div> #}
 	<!--fin ajout chloe drag-->
 	{% for item in projet %}
-		<div class="col-4">
+		<div class="projets col-12 col-md-6 col-lg">
 			<h3>{{item.title}}</h3>
-			<div class="row">
+			<div>
 				{{item.meta('text')|truncate(30)}}
-				<div class="col">
+				<div class="col px-0">
 					{% for projet in item.meta("projets") %}
 						<h4>{{projet.titre}}</h4>						
 						{{projet.text|truncate(20)}}
@@ -44,8 +44,7 @@
 			</div>
 		</div>
 	{% endfor %}
-	
+</div>
-	<div class="col">
+<div class="row wrap-btn">
-		<a rel="noreferrer" class="btn _all" href="/les-projets">Tout voir</a>
+	<a rel="noreferrer" class="btn _all" href="/les-projets">Tout voir</a>
-	</div>
 </div>

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

@@ -1,26 +1,27 @@
 <h3 class="titre">Les temps forts</h3>
 <div class="row">
 
-{% for item in tpsF %}
+	{% for item in tpsF %}
-	<div class="col-4 item tpsF_thumbnails">		
+		<article class="thumbnails col-12 col-md-6 col-lg {{cat}}">	
-		<figure>
+			<figure>
-			<img src="{{item.thumbnail.src }}" alt="{{item.thumbnail.alt}}" title="{{item.thumbnail.title}}">
+				<img src="{{item.thumbnail.src|resize(500,500) }}" alt="{{item.thumbnail.alt}}" title="{{item.thumbnail.title}}">
-		</figure>
+			</figure>
-		<div class="wrapper_content">
+			<div class="wrap_content">
-			<div class="_title">
 				<h3>{{item.title}}</h3>
-				<span>Prochaine Édition :
+				<div class="date">
-					<br><time datetime="{{item.next_edition|date("F Y") }}">{{item.next_edition|date("F Y") }}</time></br>
+					<span>Prochaine Édition :
-				</span>
+						<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>
 			</div>
-			<div class="_content">
+		</article>
-				{{item.text|truncate(20)}}
+
-			</div>
+	{% endfor %}
-		</div>
-	</div>
-{% endfor %}
 
 </div>
-<div class="row">
+<div class="row wrap-btn">
 	<a rel="noreferrer" class="btn _all" href="/les-temps-forts">Tout voir</a>
 </div>