page single

This commit is contained in:
Kevin Tessier 2020-06-28 17:51:56 +02:00
parent 55b454b9ff
commit 6f8b0a5a9f
9 changed files with 304 additions and 219 deletions

View File

@ -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();
});

File diff suppressed because one or more lines are too long

View File

@ -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%;

View File

@ -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() );
}
add_action('wp_enqueue_scripts', 'includejquery');
function theme_js(){
wp_enqueue_script( 'flickity',
get_template_directory_uri() . '/asset/dist/js/flickity.pkgd.min.js',
array() );
wp_enqueue_script( 'bootstrap',
get_template_directory_uri() . '/asset/dist/js/bootstrap.js',
array() );
wp_enqueue_script( 'flickity-fade',
get_template_directory_uri() . '/asset/dist/js/flickity-fade.js',
array() );
wp_enqueue_script( 'flickity',
get_template_directory_uri() . '/asset/dist/js/flickity.pkgd.min.js',
array() );
wp_enqueue_script( 'masonry',
get_template_directory_uri() . '/asset/dist/js/masonry.pkgd.min.js',
array() );
wp_enqueue_script( 'flickity-fade',
get_template_directory_uri() . '/asset/dist/js/flickity-fade.js',
array() );
wp_enqueue_script( 'isotope',
get_template_directory_uri() . '/asset/dist/js/isotope.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( 'script',
get_template_directory_uri() . '/asset/dist/index.js',
array() );
wp_enqueue_script( 'script',
get_template_directory_uri() . '/asset/dist/index.js',
array() );
}

View File

@ -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 %}

View File

@ -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">

View File

@ -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">

View File

@ -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 %}