page single

web/app/themes/la_mine/asset/dist/index.js

@@ -57,16 +57,19 @@ hamburgers.addEventListener("click", function() {
   nav.classList.toggle("is-active");
 });
 
-var elem = document.querySelector('.grid');
-if (elem != null) {
-var iso = new Isotope( elem, {
-  itemSelector: '.item',
-  layoutMode: 'fitRows'
-});
 
-var filtersElem = document.querySelector('.filter-button-group');
-filtersElem.addEventListener( 'click', function( event ) {
-  var filterValue = event.target.getAttribute('data-filter');
-  iso.arrange({ filter: filterValue });
-});
+function isotope() {
+
+  var $grid = $('.grid').isotope({
+    itemSelector: '.item'
+  });
+
+  $('.filter-button-group li').on( 'click', function(evt) {
+    var filterValue = $(this).attr('data-filter');
+    $grid.isotope({ filter: filterValue });
+  });
 }
+
+$( document ).ready(function() {
+  isotope();
+});

web/app/themes/la_mine/asset/dist/style.css

@@ -110,8 +110,11 @@ header > .nav-wrapper{
   /* END BURGER */
 /* END HEADER */
 
-
-
+/* START BODY */
+body > .content-wrapper{
+  margin-top: 200px;
+}
+/* END BODY */
 /* START BUTTON */
 .section_accueil .redirection_page{
   margin: 10px auto;
@@ -228,6 +231,7 @@ header > .nav-wrapper{
 /* START PAGE HOME */
   .section_accueil {
     position: relative;
+    padding: 100px 0;
   }
   .section_accueil .titre{
     white-space: nowrap;
@@ -270,12 +274,136 @@ header > .nav-wrapper{
   }
 /* END PAGE HOME */
 
+/* START PAGE AGENDA */
+.agenda .titre_page {
+  border-color: #ffcc00ff;
+}
+
+.agenda .cat-list{
+  padding: 50px 0;
+}
+
+.agenda .cat-list li{
+  cursor: pointer;
+  margin: 0 10px 20px 10px;
+  padding: 2px 8px;
+  border: 4px solid black;
+  height: 40px;
+  display: flex;
+  align-items: flex-end;
+  transition: all 0.2s ease;
+}
+
+.agenda .cat-list li:hover{
+  background: black;
+  color: white;
+  transition: all 0.2s ease;
+}
 
+.cat-list {
+  text-transform: uppercase;
+  font-weight: bold;
+  margin-top: 10px;
+}
 
+/* START END AGENDA */
 
+/* START PAGE SINGLE */
+.fleche {
+  position: relative;
+  left:-50px;
+  top:-10px;
+  background-image: url('../images/fleche.svg');
+  width: 50px;
+  height: 50px;
+  background-size: contain;
+}
+
+article .header{
+  margin-bottom: 40px;
+}
+
+article .titre_event{
+  text-transform: uppercase;
+  font-weight: bold;
+  text-align: center;
+  border: 8px solid #ffcc00ff;
+  padding: 0.5rem 0 0.2rem 0;
+  margin: 0!important;
+}
+
+.article-content .cat{
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.article-content .data{
+  border: 4px solid #ffcc00ff;
+  padding: 1em;
+  text-transform: uppercase;
+  font-weight: bold;
+  color: #ffcc00ff;
+}
+
+.article-content .inscription,
+.article-content .partager,
+.article-content .tarif{
+  margin-top: 40px;
+}
+
+.article-content h3:not(.titre_event) {
+  color: #ffcc00ff;
+  margin-bottom: 0;
+}
+
+.article-content .texte_details{
+  margin: 0;
+}
+.article-content .voir_event{
+  font-weight: bold;
+}
+
+.article-content .partager a{
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+article .__img_event img{
+  object-fit: cover;
+}
+
+.other{
+  margin-top: 200px;
+  position: relative;
+}
+.other .header_other{
+  position: absolute;
+  top: 0;
+  transform: translate(-50% ,-150%);
+  left: 0;
+}
+
+.voir_aussi {
+  text-transform: uppercase;
+  font-weight: bold;
+  border: 8px solid #ffcc00ff;
+  transform: rotate(-10deg);
+  padding: 0.5rem;
+}
+
+.cat p{
+  margin:0;
+}
 
+.wrapper__content {
+  margin-top: 20px;
+}
+/*fin page event*/
 
 
+/* END PAGE SINGLE */
 
 
 
@@ -540,88 +668,6 @@ header > .nav-wrapper{
 }
 /*fin collecte et form*/
 
-/*page event*/
-.fleche {
-  position: relative;
-  left:-50px;
-  top:-10px;
-  background-image: url('../images/fleche.svg');
-  width: 50px;
-  height: 50px;
-  background-size: contain;
-}
-
-.titre_event {
-  position: absolute;
-  top: -100px;
-  text-transform: uppercase;
-  font-weight: bold;
-  text-align: center;
-  align-items: center;
-  border: 8px solid blue;
-  /*transform: rotate(-10deg);*/
-  padding: 0.5rem;
-  background-color: white;
-}
-.header_other {
-  position: absolute;
-}
-.voir_aussi {
-  text-transform: uppercase;
-  font-weight: bold;
-  text-align: center;
-  align-items: center;
-  border: 8px solid blue;
-  transform: rotate(-10deg);
-  padding: 0.5rem;
-  background-color: white;
-}
-.__img_event{
-  position: relative;
-  top: 100px;
-}
-.__img_event img{
-  /*width: 50%;*/
-  object-fit: cover;
-}
-.cat, .cat-list {
-  color: blue;
-  text-transform: uppercase;
-  font-weight: bold;
-  /*font-size: 1.4em;*/
-  margin-top: 10px;
-  /*text-align: right;*/
-
-}
-.cat p{
-  margin:0;
-}
-.cat-list li{
-  margin: 0 50px 0 50px;
-}
-.partager img {
-  width: 50px;
-  height: auto;
-  margin-right: 2%;
-}
-.data {
-  /*display: flex;*/
-  border: 4px solid blue;
-  padding: 1em;
-  text-transform: uppercase;
-  font-weight: bold;
-  color: blue;
-}
-.wrapper__content {
-  margin-top: 20px;
-}
-.tarif h3, .partager h3, .inscription h3{
-  color: blue;
-}
-.tarif, .partager, .inscription {
-  margin-top: 8%;
-}
-/*fin page event*/
 
 /*page les projets*/
 .projet img {
@@ -708,10 +754,10 @@ header > .nav-wrapper{
     bottom: 60px;
     color: white;
   }
-
+/*
   .wrapper  section{
     margin-top: 200px;
-  }
+  } */
   .wrapper section > div {
     position: relative;
   }
@@ -746,12 +792,26 @@ header > .nav-wrapper{
 
 /*START MEDIA QUERIES*/
 @media screen and (min-width: 200px) and (max-width: 1088px) {
-    .titre_page, .titre {
+    .titre_page,
+    .titre {
       top: -150px;
       left: 50%;
       transform: rotate(-10deg) translateX(-50%);
     }
+    .other .header_other {
+      left: 50%;
+    }
+    .article-content{
+      margin-top: 30px;
+    }
+  }
+
+@media screen and (max-width : 768px){
+  article .__img_event{
+    max-height: 300px;
   }
+}
+
 @media screen and (min-width: 200px) and (max-width: 640px) {
     .image_sectionasso {
       display: none;
@@ -775,6 +835,7 @@ footer{
   background-color: rgba(240, 240, 240, 240);
   width: 100%;
   padding: 50px 10px;
+  margin-top: 100px;
 }
 
 /* footer .information > div > div{
@@ -813,6 +874,8 @@ footer .reseaux_sociaux img {
   }
   footer #mc_embed_signup_scroll label{
     margin-right: 10px;
+    white-space: nowrap;
+
   }
   footer #mc_embed_signup_scroll input{
     width: 100%;

web/app/themes/la_mine/functions.php

@@ -8,33 +8,38 @@
 	// $twig->addExtension(new IntlExtension());
 
 	// CUSTOM FUNCTION
+	// include custom jQuery
+	function includejquery() {
+		wp_deregister_script('jquery');
+		wp_enqueue_script( 'jquery',
+		get_template_directory_uri() . '/asset/dist/js/jquery-3.5.1.min.js',
+		array() );
+	}
 
-	function theme_js(){
+	add_action('wp_enqueue_scripts', 'includejquery');
 
 
-	wp_enqueue_script( 'bootstrap',
-	get_template_directory_uri() . '/asset/dist/js/bootstrap.js',
-	array() );
+	function theme_js(){
 
-	wp_enqueue_script( 'flickity',
-	get_template_directory_uri() . '/asset/dist/js/flickity.pkgd.min.js',
-	array() );
+		wp_enqueue_script( 'flickity',
+		get_template_directory_uri() . '/asset/dist/js/flickity.pkgd.min.js',
+		array() );
 
-	wp_enqueue_script( 'flickity-fade',
-	get_template_directory_uri() . '/asset/dist/js/flickity-fade.js',
-	array() );
+		wp_enqueue_script( 'flickity-fade',
+		get_template_directory_uri() . '/asset/dist/js/flickity-fade.js',
+		array() );
 
-	wp_enqueue_script( 'masonry',
-	get_template_directory_uri() . '/asset/dist/js/masonry.pkgd.min.js',
-	array() );
+		wp_enqueue_script( 'masonry',
+		get_template_directory_uri() . '/asset/dist/js/masonry.pkgd.min.js',
+		array() );
 
-	wp_enqueue_script( 'isotope',
-	get_template_directory_uri() . '/asset/dist/js/isotope.pkgd.min.js',
-	array() );
+		wp_enqueue_script( 'isotope',
+		get_template_directory_uri() . '/asset/dist/js/isotope.pkgd.min.js',
+		array() );
 
-	wp_enqueue_script( 'script',
-	get_template_directory_uri() . '/asset/dist/index.js',
-	array() );
+		wp_enqueue_script( 'script',
+		get_template_directory_uri() . '/asset/dist/index.js',
+		array() );
 
 	}
 

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

@@ -4,18 +4,16 @@
 	<section>
 		<ul class="cat-list d-flex flex-wrap button-group filter-button-group">
 		  {% for cat in terms %}
-			<li data-filter=".{{cat.slug}}">
-					|	<a href="#">{{cat.name}}</a>
-			</li>
+				<li data-filter=".{{cat.slug}}" >
+					{{cat.name}}
+				</li>
 		  {% endfor %}
 		</ul>
 
-		<div class="row align-items-start grid">
-			<!-- <div class="col-md"> -->
+		<div class="grid">
 			{% for item in posts %}
 				{% include 'components/thumbnails/thumbnails.twig'%}
 			{% endfor %}
-			<!-- </div> -->
 		</div>
 	</section>
 {% endblock %}

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

@@ -5,7 +5,8 @@
 	{% endblock %}
 	</head>
 {% endblock %}
-	<body class="container-fluid {{post.slug}}" data-template="base.twig">
+
+	<body class="container-fluid {{post.slug}} {{post.post_type}}" data-template="base.twig">
 		<header class="header d-flex ">
 			{% block header %}
 				<div class="logoLamine mr-auto">

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

@@ -1,6 +1,6 @@
 {% set cat = item.categories|last %}
 
-<div class="item thumbnails col-12 col-sm-6 col-lg-4 mb-4 {{cat.slug}}">
+<div class="item thumbnails col-12 col-sm-6 col-lg-4 mb-5 {{cat.slug}}">
   <a href="{{site.url}}/{{item.post_name}}">
 
     <div class="__images">

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

@@ -1,106 +1,119 @@
 {% extends "base.twig" %}
 {% block content %}
 	<div class="content-wrapper">
-
 		<div class="Btn retour">
 			<a href="/agenda">Retour</a>
+			<div class="fleche"></div>
 		</div>
-		<div class="fleche"></div>
-		<article class="post-type row">
-			<div class="__img_event col-md">
+
+		<article class="row">
+			<div class="header mobile col-12 d-md-none d-block">
+				<h3 class="titre_event">{{post.titre}}</h3>
+			</div>
+
+			<div class="__img_event col-md-6 col-12">
 				<img src="{{ Image(post.image_event).src }}" />
 			</div>
-			<section class="article-content col-md">
-					<div class="header">
-						<h3 class="titre_event">{{post.titre}}</h3>
+
+			<div class="article-content col-md-6 col-12 mt-3 my-md-0">
+				<div class="header d-none d-md-block">
+					<h3 class="titre_event">{{post.titre}}</h3>
 				</div>
 
-						<div class="cat {{post.category.slug}}">
-							|	{{post.category.name}} |
-						</div>
-					<div class="data">
-						<div class="__date">
-		          <div class="__day">
-		            {% set start = item.debut_event|date("Ydj") %}
-		            {% set end = item.fin_event|date("Ydj") %}
-		            {% if start == end %}
-		              <span class="start">
-		                Le <time>{{item.debut_event|date("l j F Y") }}</time>
-		                <br>de <time>{{item.debut_event|date("G:i")}}</time>
-		              </span>
-		              <span class="end">
-		                à <time>{{item.fin_event|date("G:i")}}</time></br>
-		              </span>
-		            {% else %}
-		              <span class="start">
-		                Du <time>{{item.debut_event|date("l j F Y") }}</time>
-		                à <time>{{item.debut_event|date("G:i")}}</time>
-		              </span>
-		              <span class="end">
-		                <br>Au <time>{{item.fin_event|date("j l F Y") }}</time></br>
-		                à <time>{{item.fin_event|date("G:i")}}</time>
-		              </span>
-		            {% endif %}
-		          </div>
-		        </div>
-			      <div class="lieu">{{post.lieu}}</div>
-					</div>
-					<div class="wrapper__content">
-						 {{ post.meta('description') }}
-					</div>
-						<div class="inscription">
-							{% if post.meta('inscription') %}
-							<h3>{{post.titre_inscription}}</h3>
-								{% for Items in post.meta('inscription') %}
-										{% for detail in Items.choose %}
-											{% if detail.acf_fc_layout == 'texte' %}
-												<p class="texte_details">{{ detail.texte }}</p>
-											{% endif %}
-											{% if detail.acf_fc_layout == 'lien' %}
-												<div class="Btn group_link">
-													<a href="{{detail.lien.lien_hello_asso}}">{{detail.lien.texte_lien_hello_asso}}</a>
-											  </div>
-											{% endif %}
-										{% endfor %}
+				<div class="cat {{post.category.slug}}">
+					|	{{post.category.name}} |
+				</div>
+
+				<div class="data">
+					<div class="__date">
+	          <div class="__day">
+	            {% set start = item.debut_event|date("Ydj") %}
+	            {% set end = item.fin_event|date("Ydj") %}
+	            {% if start == end %}
+	              <span class="start">
+	                Le <time>{{item.debut_event|date("l j F Y") }}</time>
+	                <br>de <time>{{item.debut_event|date("G:i")}}</time>
+	              </span>
+	              <span class="end">
+	                à <time>{{item.fin_event|date("G:i")}}</time></br>
+	              </span>
+	            {% else %}
+	              <span class="start">
+	                Du <time>{{item.debut_event|date("l j F Y") }}</time>
+	                à <time>{{item.debut_event|date("G:i")}}</time>
+	              </span>
+	              <span class="end">
+	                <br>Au <time>{{item.fin_event|date("j l F Y") }}</time></br>
+	                à <time>{{item.fin_event|date("G:i")}}</time>
+	              </span>
+	            {% endif %}
+	          </div>
+	        </div>
+		      <div class="lieu">{{post.lieu}}</div>
+				</div>
+				<div class="wrapper__content">
+					 {{ post.meta('description') }}
+				</div>
+
+				<div class="tarif">
+					<h3>{{post.titre_tarif}}</h3>
+					<p>{{post.type_tarif}}</p>
+				</div>
+
+				<div class="inscription">
+					{% if post.meta('inscription') %}
+					<h3>{{post.titre_inscription}}</h3>
+						{% for Items in post.meta('inscription') %}
+								{% for detail in Items.choose %}
+									{% if detail.acf_fc_layout == 'texte' %}
+										<p class="texte_details">{{ detail.texte }}</p>
+									{% endif %}
+									{% if detail.acf_fc_layout == 'lien' %}
+										<div class="Btn group_link">
+											<a href="{{detail.lien.lien_hello_asso}}">{{detail.lien.texte_lien_hello_asso}}</a>
+									  </div>
+									{% endif %}
 								{% endfor %}
-								{% endif %}
-						</div>
-							<div class="Btn voir_event">
-									<a href="{{post.meta('voir_evenement_facebook').lien_facebook}}">{{post.meta('voir_evenement_facebook').texte}}</a>
-							</div>
+						{% endfor %}
+						{% endif %}
+				</div>
+				<div class="Btn voir_event">
+						<a href="{{post.meta('voir_evenement_facebook').lien_facebook}}">{{post.meta('voir_evenement_facebook').texte}}</a>
+				</div>
 
-							<div class="partager">
-								<h3>{{post.titre_partage}}</h3>
-								<a href="{{post.meta('liens_reseaux_sociaux').lien_page_facebook}}">
-									<img src="{{ Image(post.meta('liens_reseaux_sociaux').logo_facebook).src }}" />
-								</a>
-								<a href="{{post.meta('liens_reseaux_sociaux').lien_page_twitter}}">
-									<img src="{{ Image(post.meta('liens_reseaux_sociaux').logo_twitter).src }}" />
-								</a>
-								<a href="{{post.meta('liens_reseaux_sociaux').lien_mail}}">
-									<img src="{{ Image(post.meta('liens_reseaux_sociaux').logo_mail).src }}" />
-								</a>
-							</div>
+				<div class="partager">
+					<h3>{{post.titre_partage}}</h3>
+					<div class="d-flex">
+						<a href="https://www.facebook.com/sharer/sharer.php?u={{post.link}}">
+							<img src="{{ Image(post.meta('liens_reseaux_sociaux').logo_facebook).src }}" />
+						</a>
+						<a target="_blank" href="https://twitter.com/intent/tweet?text={{post.link}}">
+							<img src="{{ Image(post.meta('liens_reseaux_sociaux').logo_twitter).src }}" />
+						</a>
 
-							<div class="tarif">
-								<h3>{{post.titre_tarif}}</h3>
-								<p>{{post.type_tarif}}</p>
-							</div>
+						<a href="mailto:?subject={{post.link}}" title="Share by Email">
+							<img src="{{ Image(post.meta('liens_reseaux_sociaux').logo_mail).src }}" />
+						</a>
+					</div>
+				</div>
 
-			</section>
+
+			</div>
 		</article>
 	</div>
-	{% if other %}
-		<div class="other">
-					<div class="header_other">
-							<h3 class="voir_aussi">Voir aussi</h3>
-					</div>
-					<div class="other-posts row">
-							{% for item in other %}
-								{% include 'components/thumbnails/thumbnails.twig' %}
-							{% endfor %}
-					</div>
-			</div>
-		{% endif %}
+
+
+{% if other %}
+	<div class="other">
+				<div class="header_other">
+						<h3 class="voir_aussi">Voir aussi</h3>
+				</div>
+				<div class="other-posts row">
+						{% for item in other %}
+							{% include 'components/thumbnails/thumbnails.twig' %}
+						{% endfor %}
+				</div>
+		</div>
+	{% endif %}
 
 {% endblock %}