valentin_le_moign/lamine_wp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

isotope && page agenda

Browse Source
This commit is contained in:
Kevin Tessier 2020-09-08 23:58:13 +02:00
parent 6690a1ec7d
commit 93c5e32689
18 changed files with 372 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
web/app/themes/la_mine/dist/assets/css/index.css vendored
View File

File diff suppressed because one or more lines are too long

2
web/app/themes/la_mine/dist/assets/css/index.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
web/app/themes/la_mine/functions.php
View File

@ -21,6 +21,12 @@
get_template_directory_uri() . '/src/assets/js/flickity.pkgd.min.js', array() );
}
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',

10
web/app/themes/la_mine/src/assets/js/scripts.js
View File

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

18
web/app/themes/la_mine/src/assets/scss/components/_hero.scss
View File

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

1
web/app/themes/la_mine/src/assets/scss/components/_index.scss
View File

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

0
web/app/themes/la_mine/src/assets/scss/components/_thumbnails.scss Normal file
View File

2
web/app/themes/la_mine/src/assets/scss/configs/_variables.scss
View File

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

19
web/app/themes/la_mine/src/assets/scss/index.scss
View File

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

33
web/app/themes/la_mine/src/assets/scss/pages/_agenda.scss Normal file
View File

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

154
web/app/themes/la_mine/src/assets/scss/pages/_home.scss
View File

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

3
web/app/themes/la_mine/src/assets/scss/pages/_index.scss
View File

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

2
web/app/themes/la_mine/templates/accueil.twig
View File

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

27
web/app/themes/la_mine/templates/agenda.twig
View File

@ -1,12 +1,12 @@
{% extends "base.twig" %}
{% block content %}
{% include 'components/title_page.twig' %}
{% set now = 'now'|date('Ydj') %}
<section>
<ul class="btn_archive d-flex flex-wrap button-group filter-button-group my-0">
{% include 'components/title_page.twig' %}
{% set now = 'now'|date('Ydj') %}
<section class="row filter">
<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 %}

2
web/app/themes/la_mine/templates/base.twig
View File

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

4
web/app/themes/la_mine/templates/components/thumbnails/thumbnails.twig
View File

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

15
web/app/themes/la_mine/templates/partial/section_projets.twig
View File

@ -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 class="col">
<a rel="noreferrer" class="btn _all" href="/les-projets">Tout voir</a>
</div>
</div>
<div class="row wrap-btn">
<a rel="noreferrer" class="btn _all" href="/les-projets">Tout voir</a>
</div>

35
web/app/themes/la_mine/templates/partial/section_tpsF.twig
View File

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