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) {
+function isotope() {
-var iso = new Isotope( elem, {
+
-  itemSelector: '.item',
+  var $grid = $('.grid').isotope({
-  layoutMode: 'fitRows'
+    itemSelector: '.item'
   });
 
-var filtersElem = document.querySelector('.filter-button-group');
+  $('.filter-button-group li').on( 'click', function(evt) {
-filtersElem.addEventListener( 'click', function( event ) {
+    var filterValue = $(this).attr('data-filter');
-  var filterValue = event.target.getAttribute('data-filter');
+    $grid.isotope({ filter: filterValue });
-  iso.arrange({ 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,14 +8,19 @@
 	// $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() );
+	}
+
+	add_action('wp_enqueue_scripts', 'includejquery');
+
 
 	function theme_js(){
 
-
-	wp_enqueue_script( 'bootstrap',
-	get_template_directory_uri() . '/asset/dist/js/bootstrap.js',
-	array() );
-
 		wp_enqueue_script( 'flickity',
 		get_template_directory_uri() . '/asset/dist/js/flickity.pkgd.min.js',
 		array() );

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

@@ -5,17 +5,15 @@
 		<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>
+					{{cat.name}}
 				</li>
 		  {% endfor %}
 		</ul>
 
-		<div class="row align-items-start grid">
+		<div class="grid">
-			<!-- <div class="col-md"> -->
 			{% 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,23 +1,29 @@
 {% extends "base.twig" %}
 {% block content %}
 	<div class="content-wrapper">
-
 		<div class="Btn retour">
 			<a href="/agenda">Retour</a>
-		</div>
 			<div class="fleche"></div>
-		<article class="post-type row">
+		</div>
-			<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">
+			<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">
@@ -48,6 +54,12 @@
 				<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>
@@ -71,25 +83,26 @@
 
 				<div class="partager">
 					<h3>{{post.titre_partage}}</h3>
-								<a href="{{post.meta('liens_reseaux_sociaux').lien_page_facebook}}">
+					<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 href="{{post.meta('liens_reseaux_sociaux').lien_page_twitter}}">
+						<a target="_blank" href="https://twitter.com/intent/tweet?text={{post.link}}">
 							<img src="{{ Image(post.meta('liens_reseaux_sociaux').logo_twitter).src }}" />
 						</a>
-								<a href="{{post.meta('liens_reseaux_sociaux').lien_mail}}">
+
+						<a href="mailto:?subject={{post.link}}" title="Share by Email">
 							<img src="{{ Image(post.meta('liens_reseaux_sociaux').logo_mail).src }}" />
 						</a>
 					</div>
-
-							<div class="tarif">
-								<h3>{{post.titre_tarif}}</h3>
-								<p>{{post.type_tarif}}</p>
 				</div>
 
-			</section>
+
+			</div>
 		</article>
 	</div>
+
+
 {% if other %}
 	<div class="other">
 				<div class="header_other">