bachir
/
drupal-erable
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

parallax ornements + modifs d'après kanboard

This commit is contained in:
Valentin 2023-12-20 06:48:35 +01:00
parent 34164911b4
commit 7a93f85fd3
13 changed files with 723 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

215
web/themes/erabletheme/css/styles.css
View File

@ -605,11 +605,12 @@ a {
}
.actu_full .retour_actus {
padding-top: 3vh;
padding-left: 3vw;
}
.actu_full .retour_actus a {
font-size: 0.8rem;
font-weight: 800;
color: #038788;
padding-left: 3vw;
cursor: pointer;
}
.actu_full .article_meta {
padding-left: 3vw;
@ -756,6 +757,7 @@ a {
right: -55vw;
top: -5vh;
z-index: 0;
transition: left 0.05s ease, top 0.05s ease;
}
.ornements_top_over > div {
position: absolute;
@ -763,6 +765,7 @@ a {
background-size: contain;
width: 100%;
height: 100%;
transition: left 0.05s ease, top 0.05s ease;
}
.ornements_top_over > div:first-of-type {
background-image: url(../assets/formes/forme_4.png);
@ -781,7 +784,7 @@ a {
@media (min-width: 760px) {
.ornements_top_over {
left: -40vw;
top: -10vw;
top: -16vw;
}
.ornements_top_over > div {
transform: scaleX(-1);
@ -802,12 +805,14 @@ a {
}
.ornements_top_under {
pointer-events: none;
display: none;
position: absolute;
width: 100vw;
height: 30vh;
left: -30vw;
top: 0vw;
transition: left 0.05s ease, top 0.05s ease;
}
.ornements_top_under > div {
position: absolute;
@ -816,6 +821,7 @@ a {
width: 100%;
height: 100%;
transform: scaleX(-1);
transition: left 0.05s ease, top 0.05s ease;
}
.ornements_top_under > div:first-of-type {
background-image: url(../assets/formes/forme_4.png);
@ -1006,6 +1012,7 @@ a {
}
.ornements_presentation_left {
pointer-events: none;
position: absolute !important;
height: 20vh;
width: 20vw;
@ -1055,6 +1062,7 @@ a {
}
.ornements_presentation_right {
pointer-events: none;
position: absolute !important;
height: 20vh;
width: 20vw;
@ -1073,8 +1081,14 @@ a {
.ornements_presentation_right > div:first-of-type {
background-image: url(../assets/formes/forme_1.png);
transform: rotate(-90deg);
bottom: -3vh;
right: -6vw;
right: -15vw;
bottom: -6vh;
}
@media (min-width: 760px) {
.ornements_presentation_right > div:first-of-type {
bottom: -3vh;
right: -6vw;
}
}
.ornements_presentation_right > div:nth-of-type(2) {
background-image: url(../assets/formes/forme_2.png);
@ -1082,6 +1096,177 @@ a {
right: -12vw;
}
.ornements_consultation_left {
pointer-events: none;
position: absolute !important;
height: 20vh;
width: 30vw;
bottom: -8vh;
left: 0;
z-index: 0;
overflow: hidden;
}
.ornements_consultation_left > div {
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 100%;
height: 100%;
}
.ornements_consultation_left > div:first-of-type {
background-image: url(../assets/formes/forme_4.png);
transform: rotate(180deg);
width: 200%;
height: 120%;
left: -30vw;
bottom: -10vh;
}
@media (min-width: 1080px) {
.ornements_consultation_left > div:first-of-type {
transform: rotate(0deg);
bottom: unset;
top: -5vh;
left: 0;
width: 60%;
}
}
.ornements_consultation_left > div:nth-of-type(2) {
background-image: url(../assets/formes/forme_5.png);
transform: rotate(180deg);
left: -12vw;
}
@media (min-width: 1080px) {
.ornements_consultation_left > div:nth-of-type(2) {
left: -20vw;
top: -5vh;
}
}
@media (min-width: 1080px) {
.ornements_consultation_left {
top: 0;
}
}
.ornements_consultation_right {
pointer-events: none;
position: absolute !important;
height: 20vh;
width: 30vw;
bottom: -8vh;
right: 0;
z-index: 0;
overflow: hidden;
}
.ornements_consultation_right > div {
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 100%;
height: 100%;
}
.ornements_consultation_right > div:first-of-type {
background-image: url(../assets/formes/forme_1.png);
transform: rotate(-90deg);
width: 80%;
height: 80%;
right: -8vw;
bottom: -2vh;
}
@media (min-width: 1080px) {
.ornements_consultation_right > div:first-of-type {
right: -3vw;
bottom: 6vh;
transform: rotate(180deg);
}
}
.ornements_consultation_right > div:nth-of-type(2) {
background-image: url(../assets/formes/forme_3.png);
transform: rotate(180deg);
right: -4vw;
width: 100%;
}
@media (min-width: 760px) {
.ornements_consultation_right > div:nth-of-type(2) {
width: 30%;
bottom: 3vh;
}
}
@media (min-width: 1080px) {
.ornements_consultation_right > div:nth-of-type(2) {
transform: none;
right: -4vw;
width: 60%;
}
}
@media (min-width: 1080px) {
.ornements_consultation_right {
bottom: unset;
top: 0;
right: 0;
}
}
.login, .user {
width: 100vw;
height: 50vh;
background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
padding-top: 15vh;
}
.login > h2, .user > h2 {
font-family: "Barlow", sans-serif;
color: black;
font-size: 1.6rem;
text-align: center;
}
.login > div, .user > div {
height: 100%;
}
.login > div > div:not(.hidden), .user > div > div:not(.hidden) {
margin-top: 5vh !important;
display: flex;
align-items: center;
justify-content: center;
}
.login > div > div:not(.hidden) form, .user > div > div:not(.hidden) form {
font-family: "Marianne", sans-serif;
}
.login > div > div:not(.hidden) form .form-item, .user > div > div:not(.hidden) form .form-item {
margin: 1.8rem 0;
}
.login > div > div:not(.hidden) form .form-item .form-checkbox, .user > div > div:not(.hidden) form .form-item .form-checkbox {
width: 1rem;
height: 1rem;
-webkit-appearance: auto;
}
.login > div > div:not(.hidden) form .form-item .form-required, .user > div > div:not(.hidden) form .form-item .form-required {
font-weight: 800;
padding-right: 1rem;
}
.login > div > div:not(.hidden) form .form-item .description, .user > div > div:not(.hidden) form .form-item .description {
margin-top: 0.3rem;
}
.login > div > div:not(.hidden) form input, .user > div > div:not(.hidden) form input {
border: solid 1px #038788;
}
.login > div > div:not(.hidden) form .button, .user > div > div:not(.hidden) form .button {
font-family: "Marianne", sans-serif;
font-weight: 800;
border: solid 1px #038788;
background-color: white;
cursor: pointer;
}
.login > div > div:not(.hidden) form .button:hover, .user > div > div:not(.hidden) form .button:hover {
background-color: rgba(255, 255, 255, 0.6);
}
.user .contextual-region > div {
display: flex;
font-family: "Marianne", sans-serif;
}
.user .contextual-region > div > h4 {
padding-right: 0.5rem;
}
/* PAGES */
.home_introduction {
position: relative;
@ -1171,6 +1356,7 @@ a {
}
.home_consultation {
position: relative;
background: linear-gradient(to bottom, #fcf9ee 80%, white 100%);
width: 100%;
padding: 4rem 0;
@ -1197,6 +1383,13 @@ a {
max-width: 50vw;
}
}
.home_consultation h2 + div h2, .home_consultation h2 + div h3 {
font-family: "Barlow", sans-serif;
color: black;
font-size: 1.6rem;
margin-left: 12.5vw;
max-width: 50vw;
}
.home_consultation article > div {
height: unset !important;
}
@ -1397,7 +1590,7 @@ a {
.content_gouvernance .views-row article .paragraph--type--membre-equipe {
height: auto;
display: grid;
grid-template-columns: 30vw 1fr;
grid-template-columns: 30vw auto 1fr;
grid-auto-rows: auto;
margin-bottom: 5vh;
}
@ -1416,25 +1609,27 @@ a {
width: 100%;
height: auto;
}
.content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(2) {
.content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(2),
.content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(3) {
font-family: "Marianne", sans-serif;
font-size: 1.3rem;
color: #038788;
font-weight: 800;
margin-bottom: 2vh;
align-self: center;
align-self: flex-start;
}
.content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(3) {
display: none;
padding-left: 0.5rem;
}
.content_gouvernance .views-row article .paragraph--type--membre-equipe > div:last-of-type {
font-family: "Marianne", sans-serif;
font-size: 1rem;
line-height: 1.4;
grid-column: 2/4;
}
@media (min-width: 760px) {
.content_gouvernance .views-row article .paragraph--type--membre-equipe {
grid-template-columns: 10vw 1fr;
grid-template-columns: 10vw auto 1fr;
}
.content_gouvernance .views-row article .paragraph--type--membre-equipe > div:first-of-type > div {
width: 10vw;

2
web/themes/erabletheme/css/styles.css.map
View File

File diff suppressed because one or more lines are too long

111
web/themes/erabletheme/js/erabletheme.js
View File

@ -128,6 +128,117 @@
let socialsContainer = document.createElement('li');
socialsContainer.append(socialsClone);
menuContainer.append(socialsContainer);
//
// Effets parallax
//
let ornements, scrollHeight;
function getElementsAndPositions() {
scrollHeight = document.body.scrollHeight;
ornements = {
topUnderFirst : {
el : document.querySelector('.ornements_top_under > div:first-of-type'),
values : window.innerWidth < 1080 ? { left : -45, top : -3 } : { left : -50, top : 1 },
mobileValues : { left : -45, top : -3 }
},
topUnderSecond : {
el : document.querySelector('.ornements_top_under > div:last-of-type'),
values : window.innerWidth < 1080 ? { left : -60, top : 0 } : { left : -56.5, top : 6 },
mobileValues : { left : -60, top : 0 }
},
topOver : {
el : document.querySelector('.ornements_top_over'),
values : { left : -40, top : -16 },
mobileValues : { right : -55, top : -5 }
},
bottomFirst : {
el : document.querySelector('.ornements_bottom_over > div:first-of-type'),
values : window.innerWidth < 1080 ? { left : -8, bottom : -4 } : { left : -20, bottom : 6 },
mobileValues : { left : -8, bottom : -4 }
},
bottomSecond : {
el : document.querySelector('.ornements_bottom_over > div:last-of-type'),
values : window.innerWidth < 1080 ? { left : 18, bottom : -11 } : { left : 25, bottom : -9 },
mobileValues : { left : -3, bottom : -15 }
}
}
}
function moveElementsOnScroll() {
ornements.topOver.el.style.left = `${ornements.topOver.values.left * (window.innerWidth / 100) - window.scrollY / 4}px`;
ornements.topOver.el.style.top = `${ornements.topOver.values.top * (window.innerHeight / 100) + window.scrollY / 1.1}px`;
ornements.topUnderFirst.el.style.left = `${ornements.topUnderFirst.values.left * (window.innerWidth / 100) - window.scrollY / 5}px`;
ornements.topUnderFirst.el.style.top = `${ornements.topUnderFirst.values.top * (window.innerHeight / 100) + window.scrollY / 1.3}px`;
ornements.topUnderSecond.el.style.left = `${ornements.topUnderSecond.values.left * (window.innerWidth / 100) - window.scrollY / 8}px`;
ornements.topUnderSecond.el.style.top = `${ornements.topUnderSecond.values.top * (window.innerHeight / 100) + window.scrollY / 1.2}px`;
ornements.bottomFirst.el.style.right = `${ornements.bottomFirst.values.left * (window.innerWidth / 100) - ((scrollHeight - (window.scrollY + window.innerHeight)) / 5)}px`;
ornements.bottomSecond.el.style.top = `${ornements.bottomFirst.values.bottom * (window.innerHeight / 100) + ((scrollHeight - (window.scrollY + window.innerHeight)) / 2)}px`;
}
function resetElementsPosition() {
ornements.topUnderFirst.el.style.left = `${ornements.topUnderFirst.values.left}vw`;
ornements.topUnderFirst.el.style.top = `${ornements.topUnderFirst.values.top}vh`;
ornements.topUnderSecond.el.style.left = `${ornements.topUnderSecond.values.left}vw`;
ornements.topUnderSecond.el.style.top = `${ornements.topUnderSecond.values.top}vh`;
ornements.topOver.el.style.left = `${ornements.topOver.values.left}vw`;
ornements.topOver.el.style.top = `${ornements.topOver.values.top}vh`;
ornements.bottomFirst.el.style.left = "unset",
ornements.bottomFirst.el.style.right = `${ornements.bottomFirst.values.left}vw`;
ornements.bottomFirst.el.style.bottom = `${ornements.bottomFirst.values.bottom}vh`;
ornements.bottomSecond.el.style.top = "unset";
ornements.bottomSecond.el.style.left = `${ornements.bottomSecond.values.left}vw`;
ornements.bottomSecond.el.style.bottom = `${ornements.bottomSecond.values.bottom}vh`;
}
function resetMobileElementsPosition() {
ornements.topUnderFirst.el.style.left = `${ornements.topUnderFirst.mobileValues.left}vw`;
ornements.topUnderFirst.el.style.top = `${ornements.topUnderFirst.mobileValues.top}vh`;
ornements.topUnderSecond.el.style.left = `${ornements.topUnderSecond.mobileValues.left}vw`;
ornements.topUnderSecond.el.style.top = `${ornements.topUnderSecond.mobileValues.top}vh`;
ornements.topOver.el.style.left = "unset";
ornements.topOver.el.style.right = `${ornements.topOver.mobileValues.right}vw`;
ornements.topOver.el.style.top = `${ornements.topOver.mobileValues.top}vh`;
ornements.bottomFirst.el.style.left = "unset",
ornements.bottomFirst.el.style.right = `${ornements.bottomFirst.mobileValues.left}vw`;
ornements.bottomFirst.el.style.bottom = `${ornements.bottomFirst.mobileValues.bottom}vh`;
ornements.bottomSecond.el.style.top = "unset";
ornements.bottomSecond.el.style.left = `${ornements.bottomSecond.mobileValues.left}vw`;
ornements.bottomSecond.el.style.bottom = `${ornements.bottomSecond.mobileValues.bottom}vh`;
}
function setupResize() {
getElementsAndPositions();
resetElementsPosition();
window.addEventListener("scroll", moveElementsOnScroll);
}
if (document.querySelector('.fullpage:not(.actus)')) {
if (window.innerWidth > 760) setupResize();
window.addEventListener('resize', () => {
window.scrollTo(0, 0);
window.removeEventListener("scroll", moveElementsOnScroll);
if (window.innerWidth > 760) {
setupResize();
} else if (ornements) {
resetMobileElementsPosition();
}
});
}
}
};

12
web/themes/erabletheme/scss/_gouvernance.scss
View File

@ -14,7 +14,7 @@
.paragraph--type--membre-equipe {
height: auto;
display: grid;
grid-template-columns: 30vw 1fr;
grid-template-columns: 30vw auto 1fr;
grid-auto-rows: auto;
margin-bottom: 5vh;
> div:first-of-type {
@ -33,21 +33,23 @@
}
}
> div:nth-of-type(2) {
> div:nth-of-type(2),
> div:nth-of-type(3) {
@include sous_titre();
margin-bottom: 2vh;
align-self: center;
align-self: flex-start;
}
> div:nth-of-type(3) {
display: none;
padding-left: 0.5rem;
}
> div:last-of-type {
@include main_text_content();
grid-column: 2 / 4;;
}
@media (min-width: $breakpoint_tablet) {
grid-template-columns: 10vw 1fr;
grid-template-columns: 10vw auto 1fr;
> div:first-of-type > div {
width: 10vw;
height: 10vw;

8
web/themes/erabletheme/scss/_home.scss
View File

@ -56,6 +56,7 @@
}
.home_consultation {
position: relative;
@include beige_gradient();
width: 100%;
padding: 4rem 0;
@ -70,6 +71,13 @@
max-width: 50vw;
}
}
h2 + div {
h2, h3 {
@include sous_titre_alt();
margin-left: 12.5vw;
max-width: 50vw;
}
}
article > div {
height: unset !important;
p {

9
web/themes/erabletheme/scss/partials/_articles.scss
View File

@ -4,11 +4,12 @@
}
.retour_actus {
padding-top: 3vh;
font-size: $sm_font_size;
font-weight: 800;
color: $teal;
padding-left: $x_margin;
cursor: pointer;
a {
font-size: $sm_font_size;
font-weight: 800;
color: $teal;
}
}
.article_meta {
padding-left: $x_margin;

61
web/themes/erabletheme/scss/partials/_login.scss Normal file
View File

@ -0,0 +1,61 @@
.login, .user {
width: 100vw;
height: 50vh;
@include beige_gradient();
padding-top: 15vh;
> h2 {
@include sous_titre_alt();
text-align: center;
}
> div {
height: 100%;
> div:not(.hidden) {
// height: 100%;
margin-top: 5vh !important;
display: flex;
align-items: center;
justify-content: center;
form {
font-family: 'Marianne', sans-serif;
.form-item {
margin: 1.8rem 0;
.form-checkbox {
width: 1rem;
height: 1rem;
-webkit-appearance: auto;
}
.form-required {
font-weight: 800;
padding-right: 1rem;
}
.description {
margin-top: 0.3rem;
}
}
input {
border: solid 1px $teal;
}
.button {
font-family: 'Marianne', sans-serif;
font-weight: 800;
border: solid 1px $teal;
background-color: white;
cursor: pointer;
}
.button:hover {
background-color: rgba(255, 255, 255, 0.6);
}
}
}
}
}
.user {
.contextual-region > div {
display: flex;
font-family: 'Marianne', sans-serif;
> h4 {
padding-right: 0.5rem;
}
}
}

115
web/themes/erabletheme/scss/partials/_ornements.scss
View File

@ -6,12 +6,14 @@
right: -55vw;
top: -5vh;
z-index: 0;
transition: left 0.05s ease, top 0.05s ease;
> div {
position: absolute;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
transition: left 0.05s ease, top 0.05s ease;
}
> div:first-of-type {
background-image: url(../assets/formes/forme_4.png);
@ -29,7 +31,7 @@
}
@media (min-width: $breakpoint_tablet) {
left: -40vw;
top: -10vw;
top: -16vw;
> div {
transform: scaleX(-1);
left: -55vw;
@ -50,12 +52,14 @@
}
.ornements_top_under {
pointer-events: none;
display: none;
position: absolute;
width: 100vw;
height: 30vh;
left: -30vw;
top: 0vw;
transition: left 0.05s ease, top 0.05s ease;
> div {
position: absolute;
background-repeat: no-repeat;
@ -63,6 +67,7 @@
width: 100%;
height: 100%;
transform: scaleX(-1);
transition: left 0.05s ease, top 0.05s ease;
}
> div:first-of-type {
background-image: url(../assets/formes/forme_4.png);
@ -248,10 +253,10 @@
}
.ornements_presentation_left {
pointer-events: none;
position: absolute !important;
height: 20vh;
width: 20vw;
// background-color: red;
bottom: 0;
left: 0;
z-index: 0;
@ -296,6 +301,7 @@
}
.ornements_presentation_right {
pointer-events: none;
position: absolute !important;
height: 20vh;
width: 20vw;
@ -313,12 +319,113 @@
> div:first-of-type {
background-image: url(../assets/formes/forme_1.png);
transform: rotate(-90deg);
bottom: -3vh;
right: -6vw;
right: -15vw;
bottom: -6vh;
@media (min-width: $breakpoint_tablet) {
bottom: -3vh;
right: -6vw;
}
}
> div:nth-of-type(2) {
background-image: url(../assets/formes/forme_2.png);
bottom: -12vh;
right: -12vw;
}
}
.ornements_consultation_left {
pointer-events: none;
position: absolute !important;
height: 20vh;
width: 30vw;
bottom: -8vh;
left: 0;
z-index: 0;
overflow: hidden;
> div {
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 100%;
height: 100%;
}
> div:first-of-type {
background-image: url(../assets/formes/forme_4.png);
transform: rotate(180deg);
width: 200%;
height: 120%;
left: -30vw;
bottom: -10vh;
@media (min-width: $breakpoint_desktop) {
transform: rotate(0deg);
bottom: unset;
top: -5vh;
left: 0;
width: 60%;
}
}
> div:nth-of-type(2) {
background-image: url(../assets/formes/forme_5.png);
transform: rotate(180deg);
left: -12vw;
@media (min-width: $breakpoint_desktop) {
left: -20vw;
top: -5vh;
}
}
@media (min-width: $breakpoint_desktop) {
top:0;
}
}
.ornements_consultation_right {
pointer-events: none;
position: absolute !important;
height: 20vh;
width: 30vw;
bottom: -8vh;
right: 0;
z-index: 0;
overflow: hidden;
> div {
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 100%;
height: 100%;
}
> div:first-of-type {
background-image: url(../assets/formes/forme_1.png);
transform: rotate(-90deg);
width: 80%;
height: 80%;
right: -8vw;
bottom: -2vh;
@media (min-width: $breakpoint_desktop) {
right: -3vw;
bottom: 6vh;
transform: rotate(180deg);
}
}
> div:nth-of-type(2) {
background-image: url(../assets/formes/forme_3.png);
transform: rotate(180deg);
right: -4vw;
width: 100%;
@media (min-width: $breakpoint_tablet) {
width: 30%;
bottom: 3vh;
}
@media (min-width: $breakpoint_desktop) {
transform: none;
right: -4vw;
width: 60%;
}
}
@media (min-width: $breakpoint_desktop) {
bottom: unset;
top: 0;
right: 0;
}
}

1
web/themes/erabletheme/scss/styles.scss
View File

@ -13,6 +13,7 @@
@import "partials/_articles";
@import "partials/_articles_teaser";
@import "partials/_ornements.scss";
@import "partials/_login.scss";
/* PAGES */

8
web/themes/erabletheme/templates/block--views-block--home-blocks-block-2.html.twig
View File

@ -30,6 +30,14 @@
#}
<div{{ attributes }}>
<div class="home_consultation">
<div class="ornements_consultation_left">
<div></div>
<div></div>
</div>
<div class="ornements_consultation_right">
<div></div>
<div></div>
</div>
{% block content %}
{{ content }}
{% endblock %}

2
web/themes/erabletheme/templates/node/node--actualite--full.html.twig
View File

@ -84,7 +84,7 @@
</div>
<div class="retour_actus">
← Retour aux actualités
<a href="/actualites">← Retour aux actualités</a>
</div>
<div class="article_meta">

102
web/themes/erabletheme/templates/page/page--user--1.html.twig Normal file
View File

@ -0,0 +1,102 @@
{#
/**
* @file
* Default theme implementation to display a single page.
*
* The doctype, html, head and body tags are not in this template. Instead they
* can be found in the html.html.twig template in this directory.
*
* Available variables:
*
* General utility variables:
* - base_path: The base URL path of the Drupal installation. Will usually be
* "/" unless you have installed Drupal in a sub-directory.
* - is_front: A flag indicating if the current page is the front page.
* - logged_in: A flag indicating if the user is registered and signed in.
* - is_admin: A flag indicating if the user has permission to access
* administration pages.
*
* Site identity:
* - front_page: The URL of the front page. Use this instead of base_path when
* linking to the front page. This includes the language domain or prefix.
*
* Page content (in order of occurrence in the default page.html.twig):
* - messages: Status and error messages. Should be displayed prominently.
* - node: Fully loaded node, if there is an automatically-loaded node
* associated with the page and the node ID is the second argument in the
* page's path (e.g. node/12345 and node/12345/revisions, but not
* comment/reply/12345).
*
* Regions:
* - page.header: Items for the header region.
* - page.primary_menu: Items for the primary menu region.
* - page.secondary_menu: Items for the secondary menu region.
* - page.highlighted: Items for the highlighted content region.
* - page.help: Dynamic help text, mostly for admin pages.
* - page.content: The main content of the current page.
* - page.sidebar_first: Items for the first sidebar.
* - page.sidebar_second: Items for the second sidebar.
* - page.footer_top: Items for the footer region.
* - page.footer_left: Items for the footer region.
* - page.footer_center: Items for the footer region.
* - page.footer_right: Items for the footer region.
* - page.footer_bottom: Items for the footer region.
* - page.breadcrumb: Items for the breadcrumb region.
*
* @see template_preprocess_page()
* @see html.html.twig
*
* @ingroup themeable
*/
#}
<div class="layout-container">
<header role="banner">
{{ page.header }}
</header>
{{ page.primary_menu }}
{{ page.secondary_menu }}
{{ page.breadcrumb }}
{{ page.highlighted }}
{{ page.help }}
<main role="main">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
<div class="layout-content user">
<h2>Connecté à l'espace d'administration</h2>
{{ page.content }}
</div>{# /.layout-content #}
{% if page.sidebar_first %}
<aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }}
</aside>
{% endif %}
{% if page.sidebar_second %}
<aside class="layout-sidebar-second" role="complementary">
{{ page.sidebar_second }}
</aside>
{% endif %}
</main>
<footer role="contentinfo">
<section id="footer_top">{{ page.footer_top }}</section>
<section id="footer_middle">
<section id="footer_left">{{ page.footer_left }}</section>
<div id="footer_section">
<section id="footer_center">{{ page.footer_center }}</section>
<section id="footer_right">{{ page.footer_right }}</section>
</div>
</section>
<section id="footer_bottom">{{ page.bottom }}</section>
</footer>
</div>{# /.layout-container #}

102
web/themes/erabletheme/templates/page/page--user--login.html.twig Normal file
View File

@ -0,0 +1,102 @@
{#
/**
* @file
* Default theme implementation to display a single page.
*
* The doctype, html, head and body tags are not in this template. Instead they
* can be found in the html.html.twig template in this directory.
*
* Available variables:
*
* General utility variables:
* - base_path: The base URL path of the Drupal installation. Will usually be
* "/" unless you have installed Drupal in a sub-directory.
* - is_front: A flag indicating if the current page is the front page.
* - logged_in: A flag indicating if the user is registered and signed in.
* - is_admin: A flag indicating if the user has permission to access
* administration pages.
*
* Site identity:
* - front_page: The URL of the front page. Use this instead of base_path when
* linking to the front page. This includes the language domain or prefix.
*
* Page content (in order of occurrence in the default page.html.twig):
* - messages: Status and error messages. Should be displayed prominently.
* - node: Fully loaded node, if there is an automatically-loaded node
* associated with the page and the node ID is the second argument in the
* page's path (e.g. node/12345 and node/12345/revisions, but not
* comment/reply/12345).
*
* Regions:
* - page.header: Items for the header region.
* - page.primary_menu: Items for the primary menu region.
* - page.secondary_menu: Items for the secondary menu region.
* - page.highlighted: Items for the highlighted content region.
* - page.help: Dynamic help text, mostly for admin pages.
* - page.content: The main content of the current page.
* - page.sidebar_first: Items for the first sidebar.
* - page.sidebar_second: Items for the second sidebar.
* - page.footer_top: Items for the footer region.
* - page.footer_left: Items for the footer region.
* - page.footer_center: Items for the footer region.
* - page.footer_right: Items for the footer region.
* - page.footer_bottom: Items for the footer region.
* - page.breadcrumb: Items for the breadcrumb region.
*
* @see template_preprocess_page()
* @see html.html.twig
*
* @ingroup themeable
*/
#}
<div class="layout-container">
<header role="banner">
{{ page.header }}
</header>
{{ page.primary_menu }}
{{ page.secondary_menu }}
{{ page.breadcrumb }}
{{ page.highlighted }}
{{ page.help }}
<main role="main">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
<div class="layout-content login">
<h2>Connexion à l'espace d'administration</h2>
{{ page.content }}
</div>{# /.layout-content #}
{% if page.sidebar_first %}
<aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }}
</aside>
{% endif %}
{% if page.sidebar_second %}
<aside class="layout-sidebar-second" role="complementary">
{{ page.sidebar_second }}
</aside>
{% endif %}
</main>
<footer role="contentinfo">
<section id="footer_top">{{ page.footer_top }}</section>
<section id="footer_middle">
<section id="footer_left">{{ page.footer_left }}</section>
<div id="footer_section">
<section id="footer_center">{{ page.footer_center }}</section>
<section id="footer_right">{{ page.footer_right }}</section>
</div>
</section>
<section id="footer_bottom">{{ page.bottom }}</section>
</footer>
</div>{# /.layout-container #}