fix agenda archive && thumbnails

This commit is contained in:
Tessier 2020-09-21 12:55:26 +02:00
parent 7f3fb7facb
commit 6de32791c3
20 changed files with 172 additions and 152 deletions

View File

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

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,28 +1,14 @@
function slides() { 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', cellAlign: 'left',
autoPlay: true, autoPlay: true,
prevNextButtons: false, 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'); var slide_tpsF = document.querySelectorAll('.tpsF .main-carousel');
if (slide_tpsF != null) { if (slide_tpsF != null) {
@ -133,5 +119,7 @@ $( document ).ready(function() {
isotope(); isotope();
// drag(); // drag();
click_nav(); click_nav();
if (window.width >= 578) {
scrollto(); scrollto();
}
}); });

View File

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

View File

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

View File

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

View File

@ -2,6 +2,12 @@
// ================================================== // ==================================================
.hamburger { .hamburger {
padding: $hamburger-padding-y $hamburger-padding-x; 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; display: inline-block;
cursor: pointer; cursor: pointer;

View File

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

View File

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

View File

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

View File

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

View File

@ -58,14 +58,14 @@
} }
&.is-selected .legendes{ &.is-selected .legendes{
opacity: 1; opacity: 1;
-webkit-transform: translateX(0px); transform: translateX(-50%);
-ms-transform: translateX(0px);
transform: translateX(0px);
-webkit-transition: all 1.3s; -webkit-transition: all 1.3s;
-o-transition: all 1.3s; -o-transition: all 1.3s;
transition: all 1.3s; transition: all 1.3s;
@media screen and (min-width: 576px) {
transform: translateX(0px);
}
} }
figcaption{ figcaption{
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);

View File

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

View File

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

View File

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

View File

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

View File

@ -11,10 +11,11 @@
<figure> <figure>
<span class="icone_cat {{cat}}"></span> <span class="icone_cat {{cat}}"></span>
<div class="overflow-hidden">
<img src="{{ Image(item.image_event).src|resize(500,500) }}"> <img src="{{ Image(item.image_event).src|resize(500,500) }}">
</figure> </div>
<div class="wrap_content"> <figcaption class="wrap_content">
<h5>{{title}}</h5> <h5>{{title}}</h5>
<div class="content"> <div class="content">
<div class="date"> <div class="date">
@ -44,6 +45,10 @@
</div> </div>
<div class="places">{{item.informations_lieu}}</div> <div class="places">{{item.informations_lieu}}</div>
</div> </div>
</div> </figcaption>
</figure>
</a> </a>
</article> </article>

View File

@ -3,9 +3,10 @@
{% for item in tpsF %} {% 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> <figure>
<div class="overflow-hidden">
<img src="{{item.thumbnail.src|resize(500,500) }}" 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> </div>
<div class="wrap_content"> <figcaption class="wrap_content">
<h3>{{item.title}}</h3> <h3>{{item.title}}</h3>
<div class="date"> <div class="date">
<span>Prochaine Édition : <span>Prochaine Édition :
@ -15,7 +16,9 @@
<div class="content"> <div class="content">
{{item.text|truncate(20)}} {{item.text|truncate(20)}}
</div> </div>
</div> </figcaption>
</figure>
</article> </article>
{% endfor %} {% endfor %}
</div> </div>