ouidade/dev-epau.archi.fr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

popin biographie

Browse Source
This commit is contained in:
ouidade
2021-04-06 10:21:37 +02:00
parent 20a00006d8
commit e8db05cb6e
18 changed files with 336 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/epau-antimatter/css-compiled/template.css
+58 -111
View File
@@ -842,50 +842,15 @@ ul.pagination {
display: block;
margin-left: 40%;
margin-right: 15%; }
.titre_bsn h1 {
text-align: left;
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; }
.titre_bsn h1 {
text-align: left;
padding-bottom: 3rem; }
.programmes {
display: flex;
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;
justify-content: center;
padding-left: 15%;
@@ -898,23 +863,23 @@ ul.pagination {
padding: 1.5rem;
background-color: white;
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 {
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 {
.programme:hover {
background-color: #000;
color: #ffffff;
transition: 0.2s ease-in-out; }
.programme:hover p {
color: #fff; }
.programme:hover h4 {
color: #fff; }
.gouvernance {
background-color: #000;
@@ -932,16 +897,15 @@ ul.pagination {
.mozaique_personnes {
background-color: #d5d2d1; }
.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; }
.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; }
.mozaique {
display: flex;
@@ -956,35 +920,29 @@ ul.pagination {
font-family: "Sarabun", sans-serif;
width: 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 {
background-color: #000;
color: #fff;
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 {
background: transparent !important; }
.portrait img {
max-width: 15rem !important; }
img.portrait {
width: 20%; }
.portrait img {
width: 5rem !important; }
.bouton {
border: solid;
@@ -993,7 +951,7 @@ img.portrait {
align-self: flex-end;
margin-right: 2rem; }
#modal {
.modal {
position: fixed;
z-index: 1;
top: 0;
@@ -1002,41 +960,30 @@ img.portrait {
left: 0;
display: none; }
#modal.open {
.modal.open {
display: block; }
#modal .mask {
background: none !important;
opacity: 1;
.modal .container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; }
#modal .container {
position: relative;
background: white !important;
top: 50%;
left: 25%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 50%;
height: content;
min-height: 50px;
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 {
border: solid;
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 {
background-color: rgba(255, 255, 255, 0);
user/themes/epau-antimatter/images/10361_web_01.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 167 KiB

After

Width:  |  Height:  |  Size: 87 KiB

user/themes/epau-antimatter/images/14360_default_big.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 247 KiB

user/themes/epau-antimatter/images/IMG_20190809_173115.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 MiB

user/themes/epau-antimatter/images/OSC_5209.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 MiB

user/themes/epau-antimatter/images/hyperliens_marseille_.PNG
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 313 KiB

After

Width:  |  Height:  |  Size: 446 KiB

user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 332 KiB

After

Width:  |  Height:  |  Size: 135 KiB

user/themes/epau-antimatter/js/antimatter.js
+18 -40
View File
@@ -36,49 +36,27 @@ jQuery(document).ready(function($){
});
// Responsive Menu
// POPIN Biographies
// * Grab data attributes from twig with JQuery
// */
// $(() => {
//
// // Select elements by their data attribute
// const $personneElements = $('[data-personne-id]');
//
// // Map over each element and extract the data value
// const $personneIds =
// $.map($personneElements, item => $(item).data('personneId'));
//
// // You'll now have array containing string values
// console.log($personneIds); // eg: ["1", "2", "3"]
// });
$(".bouton").click(function(event){
console.log(event);
//
var mods = document.querySelectorAll('.modal');
mods.forEach((m, i) => {
m.classList.remove('open')
});
//
var btn = event.currentTarget;
console.log('btn', btn);
var mod = btn.parentNode.querySelector('.modal');
mod.classList.add('open')
// {% set script %}
// // ton js
// var mavariable = {{ twigvar }};
// {% endset %}
// {% do assets.addInlineJs(script) %}
});
//
// // POPIN Biographies
// 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;
// });
$(".modal .mask, .modal a.close").click(function(event){
$ (".modal").removeClass("open");
return false;
});
});
user/themes/epau-antimatter/js/script-bio.js
-28
View File
@@ -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;
// });
user/themes/epau-antimatter/scss/nucleus/functions/mixins/_base.scss
+2
View File
@@ -0,0 +1,2 @@
@import "breakpoints";
@import "utilities";
user/themes/epau-antimatter/scss/nucleus/functions/mixins/_breakpoints.scss
+30
View File
@@ -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; }
}
}
}
user/themes/epau-antimatter/scss/nucleus/functions/mixins/_utilities.scss
+30
View File
@@ -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;
}
user/themes/epau-antimatter/scss/template/_custom.scss
+157 -125
View File
@@ -46,21 +46,21 @@
#header.scrolled #navbar ul.navigation li a {
color: black !important;
font-size: 0.95rem;
transition:0.6s ease-in-out;
}
#logo {
display: flex;
flex-direction: row;
}
#logo img {
padding: 0.5rem;
}
h1::after {
}
.callout {
padding-top: 0.5rem;
@@ -79,61 +79,71 @@
display: block;
margin-left: 40%;
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
#background {
background-color: #d5d2d1;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(8, 5vw);
grid-gap: 15px;
}
// #background {
// background-color: #d5d2d1;
// display: grid;
// grid-template-columns: repeat(5, 1fr);
// grid-template-rows: repeat(8, 5vw);
// grid-gap: 15px;
// }
//
// #background img {
// max-width: 100% !important;
// max-height: 100% !important;
// // object-fit: cover;
// }
#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;
}
// .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 {
display: flex;
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;
justify-content: center;
padding-left: 15%;
@@ -143,34 +153,42 @@
padding-bottom: 8rem;
}
.programme {
max-width: 35%;
// min-width:
padding: 1.5rem;
background-color: white;
margin: 0.4rem;
.programme {
max-width: 35%;
// min-width:
padding: 1.5rem;
background-color: white;
margin: 0.4rem;
}
.programme h4 {
h4 {
text-transform: uppercase;
line-height: 1.2;
}
.programme img {
img {
max-height: 15%;
}
.programme p {
p {
font-family: $font-family-default;
font-weight: 500;
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 {
// display: block;
@@ -257,20 +275,22 @@
.mozaique_personnes {
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 {
// // display: flex;
// // flex-direction: row;
@@ -316,6 +336,21 @@
width: 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...
@@ -327,35 +362,15 @@
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 {
// max-width:50% !important;
background: transparent !important;
}
.portrait img {
max-width: 15rem !important;
}
img {
width: 5rem !important;
}
img.portrait {
width: 20%;
}
@@ -375,7 +390,7 @@ img.portrait {
// pop in biographie
#modal{
.modal {
position: fixed;
z-index: 1;
top: 0;
@@ -384,48 +399,65 @@ img.portrait {
left: 0;
display: none;
}
#modal.open{
.modal.open{
display: block;
}
#modal .mask{
background: none !important;
opacity: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
// #modal .mask{
// background: none !important;
// opacity: 1;
// position: absolute;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
//
// }
// #body .grey {
// opacity: 0.5;
// }
#modal .container{
position: relative;
.modal .container{
position: absolute;
background: white !important;
top: 50%;
left: 25%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 50%;
height: content;
min-height: 50px;
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{
padding: 5% 10% 5% 5%;
// .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;
}
// .modal .container a.close{
// position: absolute;
// right: 5%;
// top:5%;
// color: black;
// font-size: 30px;
// }
// .modal .container a.close:hover{
// color: black;
// }
user/themes/epau-antimatter/templates/modular/features.html.twig
+5
View File
@@ -1,4 +1,9 @@
<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 }}
user/themes/epau-antimatter/templates/modular/personnes.html.twig
+25 -20
View File
@@ -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}}">
{{ content|raw }}
{% for personne in page.header.personnes %}
{% for personne in page.header.personnes %}
<!-- {{ dump(personne) }} -->
<!-- <div class="personne"> -->
<div class="mozaique">
<div class="portait">
@@ -38,8 +22,7 @@ $("#modal .mask, #modal a.close").click(function(){
<h6>{{ personne.fonction }}</h6>
{% endif %}
<button class="bouton">Voir biographie</button>
</div>
<div id="modal">
<div class="modal">
<div class="mask">
<div class="container">
<div class="message">
@@ -53,6 +36,8 @@ $("#modal .mask, #modal a.close").click(function(){
</div>
</div>
</div>
</div>
@@ -61,4 +46,24 @@ $("#modal .mask, #modal a.close").click(function(){
{% endfor %}
</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> -->
user/themes/epau-antimatter/templates/modular/programmes.html.twig
+1 -28
View File
@@ -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="parallax-window" data-parallax="scroll" data-image-src="{/pages/02._programmes/10361_web_01.jpg}"></div> -->
{{ content|raw }}
{#
<div class="paralax-bg">
</div>
#}
{% for programme in page.header.programmes %}
<div class="programme">
user/themes/epau-antimatter/templates/modular/ressources.html.twig
+8 -1
View File
@@ -1,6 +1,13 @@
<div class="titre_nsb">
{{ 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 class="features {{ page.header.class}}">
@@ -25,6 +32,6 @@
</div>
{% endfor %}
</div>
</div>
</div>
user/themes/epau-antimatter/templates/partials/base.html.twig
+2 -2
View File
@@ -32,9 +32,9 @@
{% do assets.addJs('jquery', 101) %}
{% do assets.addJs('theme://js/modernizr.custom.71422.js', 100) %}
{% do assets.addJs('theme://js/antimatter.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 %}
{% block assets deferred %}