popin biographie

This commit is contained in:
2021-04-06 10:21:37 +02:00
parent 20a00006d8
commit e8db05cb6e
18 changed files with 336 additions and 355 deletions
@@ -842,50 +842,15 @@ ul.pagination {
display: block; display: block;
margin-left: 40%; margin-left: 40%;
margin-right: 15%; } margin-right: 15%; }
.titre_bsn h1 {
.titre_bsn h1 { text-align: left;
text-align: left; padding-bottom: 3rem; }
padding-bottom: 3rem; }
#background {
background-color: #d5d2d1;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(8, 5vw);
grid-gap: 15px; }
#background img {
width: 100% !important;
height: 100%;
object-fit: cover; }
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 5; }
.item-2 {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 5; }
.item-3 {
grid-column-start: 5;
grid-column-end: 1;
grid-row-start: 9;
grid-row-end: 6; }
.item-4 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3; }
.programmes { .programmes {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
background: url("/user/themes/epau-antimatter/images/14360_default_big.jpg") 0px 0px no-repeat, url("/user/themes/epau-antimatter/images/10361_web_01.jpg") 1200px 300px no-repeat, url("/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG") 0px 700px no-repeat, url("/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg") right no-repeat;
/* On bottom, like z-index: 1; */
background-color: #d5d2d1; background-color: #d5d2d1;
justify-content: center; justify-content: center;
padding-left: 15%; padding-left: 15%;
@@ -898,23 +863,23 @@ ul.pagination {
padding: 1.5rem; padding: 1.5rem;
background-color: white; background-color: white;
margin: 0.4rem; } margin: 0.4rem; }
.programme h4 {
text-transform: uppercase;
line-height: 1.2; }
.programme img {
max-height: 15%; }
.programme p {
font-family: "Sarabun", sans-serif;
font-weight: 500;
font-style: italic; }
.programme h4 { .programme:hover {
text-transform: uppercase;
line-height: 1.2; }
.programme img {
max-height: 15%; }
.programme p {
font-family: "Sarabun", sans-serif;
font-weight: 500;
font-style: italic; }
.programmes :hover {
background-color: #000; background-color: #000;
color: #ffffff;
transition: 0.2s ease-in-out; } transition: 0.2s ease-in-out; }
.programme:hover p {
color: #fff; }
.programme:hover h4 {
color: #fff; }
.gouvernance { .gouvernance {
background-color: #000; background-color: #000;
@@ -932,16 +897,15 @@ ul.pagination {
.mozaique_personnes { .mozaique_personnes {
background-color: #d5d2d1; } background-color: #d5d2d1; }
.mozaique_personnes h3 {
.mozaique_personnes h3 { padding-top: 3rem;
padding-top: 3rem; padding-left: 15%;
padding-left: 15%; padding-right: 15%;
padding-right: 15%; font-family: "Sarabun";
font-family: "Sarabun"; font-weight: 800;
font-weight: 800; font-size: 1rem;
font-size: 1rem; line-height: 20px;
line-height: 20px; text-align: left; }
text-align: left; }
.mozaique { .mozaique {
display: flex; display: flex;
@@ -956,35 +920,29 @@ ul.pagination {
font-family: "Sarabun", sans-serif; font-family: "Sarabun", sans-serif;
width: 30rem; width: 30rem;
height: 30rem; } height: 30rem; }
.info h5 {
font-weight: 900;
font-size: 1.3rem;
margin: 0;
padding-top: 1rem;
padding-left: 1rem; }
.info h6 {
font-weight: 300;
font-size: 1.1rem;
font-style: italic;
margin: 0;
padding-left: 1rem;
padding-bottom: 1rem; }
.info:hover { .info:hover {
background-color: #000; background-color: #000;
color: #fff; color: #fff;
transition: 0.2s ease-in-out; } transition: 0.2s ease-in-out; }
.info h5 {
font-weight: 900;
font-size: 1.3rem;
margin: 0;
padding-top: 1rem;
padding-left: 1rem; }
.info h6 {
font-weight: 300;
font-size: 1.1rem;
font-style: italic;
margin: 0;
padding-left: 1rem;
padding-bottom: 1rem; }
.portrait { .portrait {
background: transparent !important; } background: transparent !important; }
.portrait img {
.portrait img { width: 5rem !important; }
max-width: 15rem !important; }
img.portrait {
width: 20%; }
.bouton { .bouton {
border: solid; border: solid;
@@ -993,7 +951,7 @@ img.portrait {
align-self: flex-end; align-self: flex-end;
margin-right: 2rem; } margin-right: 2rem; }
#modal { .modal {
position: fixed; position: fixed;
z-index: 1; z-index: 1;
top: 0; top: 0;
@@ -1002,41 +960,30 @@ img.portrait {
left: 0; left: 0;
display: none; } display: none; }
#modal.open { .modal.open {
display: block; } display: block; }
#modal .mask { .modal .container {
background: none !important;
opacity: 1;
position: absolute; position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; }
#modal .container {
position: relative;
background: white !important; background: white !important;
top: 50%; top: 50%;
left: 25%; left: 50%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
width: 50%; width: 50%;
height: content; height: content;
min-height: 50px; min-height: 50px;
border: solid; } border: solid;
#modal .container .message {
padding: 5% 10% 5% 5%; }
#modal .container a.close {
position: absolute;
right: 5%;
top: 5%;
color: black;
font-size: 30px; }
#modal .container a.close:hover {
color: black; } color: black; }
.modal .container .message {
padding: 5% 10% 5% 5%; }
.modal .container a.close {
position: absolute;
right: 5%;
top: 5%;
color: black;
font-size: 30px; }
.modal .container a.close:hover {
color: black; }
.modular.header-image #header { .modular.header-image #header {
background-color: rgba(255, 255, 255, 0); background-color: rgba(255, 255, 255, 0);
Binary file not shown.

Before

Width:  |  Height:  |  Size: 167 KiB

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 247 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 313 KiB

After

Width:  |  Height:  |  Size: 446 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 332 KiB

After

Width:  |  Height:  |  Size: 135 KiB

+18 -40
View File
@@ -36,49 +36,27 @@ jQuery(document).ready(function($){
}); });
// Responsive Menu // Responsive Menu
// POPIN Biographies
// * Grab data attributes from twig with JQuery $(".bouton").click(function(event){
// */ console.log(event);
// $(() => { //
// var mods = document.querySelectorAll('.modal');
// // Select elements by their data attribute mods.forEach((m, i) => {
// const $personneElements = $('[data-personne-id]'); m.classList.remove('open')
// });
// // Map over each element and extract the data value //
// const $personneIds = var btn = event.currentTarget;
// $.map($personneElements, item => $(item).data('personneId')); console.log('btn', btn);
// var mod = btn.parentNode.querySelector('.modal');
// // You'll now have array containing string values mod.classList.add('open')
// console.log($personneIds); // eg: ["1", "2", "3"]
// });
// {% set script %} });
// // ton js
// var mavariable = {{ twigvar }};
// {% endset %}
// {% do assets.addInlineJs(script) %}
$(".modal .mask, .modal a.close").click(function(event){
// $ (".modal").removeClass("open");
// // POPIN Biographies return false;
// var id = $('#biographie').data('id'); });
// if id > 0{
// $(".bouton").click(function(){
// $("#modal .message").html(#biographie);
// $("#modal").addClass("open");
// // $("#body").addClass("grey");
// });
// }
// $(".bouton").click(function(){
// $("#modal .message").html();
// $("#modal").addClass("open");
// // $("#body").addClass("grey");
// });
//
// $("#modal .mask, #modal a.close").click(function(){
// $("#modal").removeClass("open");
// return false;
// });
}); });
@@ -1,28 +0,0 @@
// $( function() {
// $( "#popin" ).dialog({
// autoOpen: false,
// show: {
// effect: "blind",
// duration: 1000
// },
// hide: {
// effect: "explode",
// duration: 1000
// }
// });
//
// $( "#opener" ).on( "click", function() {
// $( "#popin" ).dialog( "open" );
// });
// } );
// $(".bouton").click(function(){
// $("#modal .message").html();
// $("#modal").addClass("open");
// });
//
// $("#modal .mask, #modal a.close").click(function(){
// $("#modal").removeClass("open");
// return false;
// });
@@ -0,0 +1,2 @@
@import "breakpoints";
@import "utilities";
@@ -0,0 +1,30 @@
// Breakpoints
@mixin breakpoint($breakpoints, $media: all) {
@each $breakpoint in $breakpoints {
@if $breakpoint == large-desktop-range {
@media only #{$media} and (min-width: $large-desktop-container) { @content; }
}
@else if $breakpoint == desktop-range {
@media only #{$media} and (min-width: $desktop-container) and (max-width: $large-desktop-container - 0.062) { @content; }
}
@else if $breakpoint == tablet-range {
@media only #{$media} and (min-width: $tablet-container) and (max-width: $desktop-container - 0.062) { @content; }
}
@else if $breakpoint == large-mobile-range {
@media only #{$media} and (min-width: $large-mobile-container + 0.063) and (max-width: $tablet-container - 0.062) { @content; }
}
@else if $breakpoint == small-mobile-range {
@media only #{$media} and (max-width: $large-mobile-container) { @content; }
}
@else if $breakpoint == no-mobile {
@media only #{$media} and (min-width: $tablet-container) { @content; }
}
@else if $breakpoint == mobile-only {
@media only #{$media} and (max-width: $tablet-container - 0.062) { @content; }
}
@else if $breakpoint == desktop-only {
@media only #{$media} and (max-width: $desktop-container - 0.062) { @content; }
}
}
}
@@ -0,0 +1,30 @@
// List Reset
%list-reset {
margin: 0;
padding: 0;
list-style: none;
}
// Vertical Centering
%vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
// Columns
@mixin columns($columns) {
width: percentage(1/$columns);
}
// Float with margin variable
@mixin float($direction, $margin: 0) {
float: $direction;
margin-#{opposite-direction($direction)}: $margin;
}
@@ -46,21 +46,21 @@
#header.scrolled #navbar ul.navigation li a { #header.scrolled #navbar ul.navigation li a {
color: black !important; color: black !important;
font-size: 0.95rem; font-size: 0.95rem;
transition:0.6s ease-in-out; transition:0.6s ease-in-out;
} }
#logo { #logo {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
#logo img { #logo img {
padding: 0.5rem; padding: 0.5rem;
} }
h1::after {
}
.callout { .callout {
padding-top: 0.5rem; padding-top: 0.5rem;
@@ -79,61 +79,71 @@
display: block; display: block;
margin-left: 40%; margin-left: 40%;
margin-right: 15%; margin-right: 15%;
h1 {
text-align: left;
padding-bottom: 3rem;
}
} }
.titre_bsn h1 {
text-align: left;
padding-bottom: 3rem;
}
// fond images en grille pour parallax // fond images en grille pour parallax
#background { // #background {
background-color: #d5d2d1; // background-color: #d5d2d1;
display: grid; // display: grid;
grid-template-columns: repeat(5, 1fr); // grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(8, 5vw); // grid-template-rows: repeat(8, 5vw);
grid-gap: 15px; // grid-gap: 15px;
} // }
//
// #background img {
// max-width: 100% !important;
// max-height: 100% !important;
// // object-fit: cover;
// }
#background img { // .item-1 {
width: 100% !important; // grid-column-start: 1;
height: 100%; // grid-column-end: 3;
object-fit: cover; // grid-row-start: 1;
} // grid-row-end: 5;
// }
.item-1 { //
grid-column-start: 1; // .item-2 {
grid-column-end: 3; // grid-column-start: 3;
grid-row-start: 1; // grid-column-end: 5;
grid-row-end: 5; // grid-row-start: 1;
} // grid-row-end: 5;
// }
.item-2 { //
grid-column-start: 3; // .item-3 {
grid-column-end: 5; // grid-column-start: 5 ;
grid-row-start: 1; // grid-column-end: 1;
grid-row-end: 5; // grid-row-start: 9;
} // grid-row-end: 6;
// }
.item-3 { //
grid-column-start: 5 ; // .item-4 {
grid-column-end: 1; // grid-column-start: 1;
grid-row-start: 9; // grid-column-end: 3;
grid-row-end: 6; // grid-row-start: 1;
} // grid-row-end: 3;
// }
.item-4 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.programmes { .programmes {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
background:
url("/user/themes/epau-antimatter/images/14360_default_big.jpg") 0px 0px no-repeat, /* On top, like z-index: 4; */
url("/user/themes/epau-antimatter/images/10361_web_01.jpg") 1200px 300px no-repeat, /* like z-index: 3; */
url("/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG") 0px 700px no-repeat, /* like z-index: 2; */
url("/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg") right no-repeat; /* On bottom, like z-index: 1; */
background-color: #d5d2d1; background-color: #d5d2d1;
justify-content: center; justify-content: center;
padding-left: 15%; padding-left: 15%;
@@ -143,34 +153,42 @@
padding-bottom: 8rem; padding-bottom: 8rem;
} }
.programme { .programme {
max-width: 35%; max-width: 35%;
// min-width: // min-width:
padding: 1.5rem; padding: 1.5rem;
background-color: white; background-color: white;
margin: 0.4rem; margin: 0.4rem;
} h4 {
.programme h4 {
text-transform: uppercase; text-transform: uppercase;
line-height: 1.2; line-height: 1.2;
} }
.programme img { img {
max-height: 15%; max-height: 15%;
} }
.programme p { p {
font-family: $font-family-default; font-family: $font-family-default;
font-weight: 500; font-weight: 500;
font-style: italic; font-style: italic;
} }
.programmes :hover { }
background-color: #000;
color: #ffffff;
transition:0.2s ease-in-out; .programme:hover {
} background-color: #000;
transition:0.2s ease-in-out;
p {
color: #fff;
}
h4 {
color: #fff;
}
}
// .parallax { // .parallax {
// display: block; // display: block;
@@ -257,20 +275,22 @@
.mozaique_personnes { .mozaique_personnes {
background-color: #d5d2d1; background-color: #d5d2d1;
h3 {
padding-top: 3rem;
padding-left: 15%;
padding-right: 15%;
font-family: "Sarabun";
font-weight: 800;
font-size: 1rem;
line-height: 20px;
text-align: left;
} }
.mozaique_personnes h3 {
padding-top: 3rem;
padding-left: 15%;
padding-right: 15%;
font-family: "Sarabun";
font-weight: 800;
font-size: 1rem;
line-height: 20px;
text-align: left;
} }
// .personne { // .personne {
// // display: flex; // // display: flex;
// // flex-direction: row; // // flex-direction: row;
@@ -316,6 +336,21 @@
width: 30rem; width: 30rem;
height: 30rem; height: 30rem;
h5 {
font-weight: 900;
font-size: 1.3rem;
margin: 0;
padding-top: 1rem;
padding-left: 1rem;
}
h6 {
font-weight: 300;
font-size: 1.1rem;
font-style: italic;
margin: 0;
padding-left: 1rem;
padding-bottom: 1rem;
}
} }
// comment faire pour donner une largueur à .info 2 fois plus grande que .portrait? les img de .portrait ne semblent pas vouloir bouger... // comment faire pour donner une largueur à .info 2 fois plus grande que .portrait? les img de .portrait ne semblent pas vouloir bouger...
@@ -327,35 +362,15 @@
transition:0.2s ease-in-out; transition:0.2s ease-in-out;
} }
.info h5 {
font-weight: 900;
font-size: 1.3rem;
margin: 0;
padding-top: 1rem;
padding-left: 1rem;
}
.info h6 {
font-weight: 300;
font-size: 1.1rem;
font-style: italic;
margin: 0;
padding-left: 1rem;
padding-bottom: 1rem;
}
.portrait { .portrait {
// max-width:50% !important; // max-width:50% !important;
background: transparent !important; background: transparent !important;
}
.portrait img { img {
max-width: 15rem !important; width: 5rem !important;
} }
img.portrait {
width: 20%;
} }
@@ -375,7 +390,7 @@ img.portrait {
// pop in biographie // pop in biographie
#modal{ .modal {
position: fixed; position: fixed;
z-index: 1; z-index: 1;
top: 0; top: 0;
@@ -384,48 +399,65 @@ img.portrait {
left: 0; left: 0;
display: none; display: none;
} }
#modal.open{ .modal.open{
display: block; display: block;
} }
#modal .mask{ // #modal .mask{
background: none !important; // background: none !important;
opacity: 1; // opacity: 1;
position: absolute; // position: absolute;
top: 0; // top: 0;
right: 0; // right: 0;
bottom: 0; // bottom: 0;
left: 0; // left: 0;
//
} // }
// #body .grey { // #body .grey {
// opacity: 0.5; // opacity: 0.5;
// } // }
#modal .container{ .modal .container{
position: relative; position: absolute;
background: white !important; background: white !important;
top: 50%; top: 50%;
left: 25%; left: 50%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
width: 50%; width: 50%;
height: content; height: content;
min-height: 50px; min-height: 50px;
border: solid; border: solid;
color: black;
.message{
padding: 5% 10% 5% 5%;
}
a.close{
position: absolute;
right: 5%;
top:5%;
color: black;
font-size: 30px;
}
a.close:hover{
color: black;
}
} }
#modal .container .message{ // .modal .container .message{
padding: 5% 10% 5% 5%; // padding: 5% 10% 5% 5%;
//
// }
} // .modal .container a.close{
// position: absolute;
#modal .container a.close{ // right: 5%;
position: absolute; // top:5%;
right: 5%; // color: black;
top:5%; // font-size: 30px;
color: black; // }
font-size: 30px; // .modal .container a.close:hover{
} // color: black;
#modal .container a.close:hover{ // }
color: black;
}
@@ -1,4 +1,9 @@
<div class="modular-row features {{ page.header.class}}"> <div class="modular-row features {{ page.header.class}}">
<div class="after-h1">
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
<!-- Simple rect element -->
<rect x="0" y="0" width="100" height="3" />
</div>
{{ content|raw }} {{ content|raw }}
@@ -1,28 +1,12 @@
<script>
var message = {{ page.media[personne.biographie].url|e }};
$(".bouton").click(function(){
$("#modal .message").html('message');
$("#modal").addClass("open");
// $("#body").addClass("grey");
});
$("#modal .mask, #modal a.close").click(function(){
$("#modal").removeClass("open");
return false;
});
</script>
<div id="mozaique_personnes{{ page.header.class}}"> <div id="mozaique_personnes{{ page.header.class}}">
{{ content|raw }} {{ content|raw }}
{% for personne in page.header.personnes %}
{% for personne in page.header.personnes %}
<!-- {{ dump(personne) }} -->
<!-- <div class="personne"> --> <!-- <div class="personne"> -->
<div class="mozaique"> <div class="mozaique">
<div class="portait"> <div class="portait">
@@ -38,8 +22,7 @@ $("#modal .mask, #modal a.close").click(function(){
<h6>{{ personne.fonction }}</h6> <h6>{{ personne.fonction }}</h6>
{% endif %} {% endif %}
<button class="bouton">Voir biographie</button> <button class="bouton">Voir biographie</button>
</div> <div class="modal">
<div id="modal">
<div class="mask"> <div class="mask">
<div class="container"> <div class="container">
<div class="message"> <div class="message">
@@ -53,6 +36,8 @@ $("#modal .mask, #modal a.close").click(function(){
</div> </div>
</div> </div>
</div>
</div> </div>
@@ -61,4 +46,24 @@ $("#modal .mask, #modal a.close").click(function(){
{% endfor %} {% endfor %}
</div> </div>
<!--
<script>
// var .message = {{ personne.biographie }};
$(".bouton").click(function(event){
$("#modal .message").html();
$("#modal").addClass("open");
// $("#body").addClass("grey");
});
$("#modal .mask, #modal a.close").click(function(){
$("#modal").removeClass("open");
return false;
});
</script> -->
@@ -1,35 +1,8 @@
<!-- <div class="background">
<img src="{/pages/02._programmes/10361_web_01.jpg}">
</div>
-->
<div id="background">
<figure class="item-1">
<img src="/user/themes/epau-antimatter/images/14360_default_big.jpg" class="background__img" alt="Image 1">
</figure>
<figure class="item-2">
<img src="/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG" class="background__img" alt="Image 2">
</figure>
<figure class="item-3">
<img src="/user/themes/epau-antimatter/images/10361_web_01.jpg" class="background__img" alt="Image 3">
</figure>
<figure class="item-4">
<img src="/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg" class="background__img" alt="Image 4">
</figure>
</div>
<div class="programmes{{ page.header.class}}"> <div class="programmes{{ page.header.class}}">
<!-- <div class="parallax-window" data-parallax="scroll" data-image-src="{/pages/02._programmes/10361_web_01.jpg}"></div> -->
{{ content|raw }} {{ content|raw }}
{#
<div class="paralax-bg">
</div>
#}
{% for programme in page.header.programmes %} {% for programme in page.header.programmes %}
<div class="programme"> <div class="programme">
@@ -1,6 +1,13 @@
<div class="titre_nsb"> <div class="titre_nsb">
{{ content|raw }} {{ content|raw }}
<div class="after-h1">
<svg width="50%" height="0.5rem">
<rect width="100%" height="100%" style="fill:rgb(0,0,0);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
</div>
</div> </div>
<div class="features {{ page.header.class}}"> <div class="features {{ page.header.class}}">
@@ -25,6 +32,6 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
@@ -32,9 +32,9 @@
{% do assets.addJs('jquery', 101) %} {% do assets.addJs('jquery', 101) %}
{% do assets.addJs('theme://js/modernizr.custom.71422.js', 100) %} {% do assets.addJs('theme://js/modernizr.custom.71422.js', 100) %}
{% do assets.addJs('theme://js/antimatter.js') %} {% do assets.addJs('theme://js/antimatter.js') %}
{% do assets.addJs('theme://js/slidebars.min.js') %} {% do assets.addJs('theme://js/slidebars.min.js') %}
{% do assets.addJs('theme://js/parallax.min.js') %}
{% do assets.addJs('theme://js/script-bio.js') %}
{% endblock %} {% endblock %}
{% block assets deferred %} {% block assets deferred %}