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

meetup + faq + pages forms

Browse Source
This commit is contained in:
Valentin
2024-03-29 21:29:59 +01:00
parent 9e171e69a6
commit 746c347042
36 changed files with 3819 additions and 1227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
web/themes/erabletheme/scss/_consultation.scss Normal file
View File

@@ -0,0 +1,56 @@
#block-erabletheme-unequestion {
position: relative;
display: grid;
grid-template-columns: 0.5fr 1fr;
grid-template-rows: repeat(2, 1fr);
align-items: center;
width: 50vw;
margin-left: 1.5vw;
@include main_text_content();
background-color: $teal;
color: white;
font-weight: 800;
padding-bottom: 2rem;
padding-top: 1.5rem;
padding-right: 0.5rem;
@media (min-width: $breakpoint_tablet) {
position: absolute;
width: 40vw;
left: 1.5vw;
bottom: -25vh;
}
@media (min-width: $breakpoint_desktop) {
left: unset;
right: 1.5vw;
width: 22vw;
bottom: unset;
top: 24vh;
padding-right: 1rem;
}
> h2 {
grid-column: 2;
}
> div {
grid-column: 2;
a {
color: white;
text-decoration: underline;
}
}
}
#block-erabletheme-unequestion::before {
content: "?";
grid-column: 1;
grid-row: 1/3;
justify-self: center;
align-self: center;
border: solid 1px white;
width: 3rem;
height: 3rem;
border-radius: 1.5rem;
font-size: 1.6rem;
display: flex;
justify-content: center;
align-items: center;
margin-right: 0.5rem;
}

107
web/themes/erabletheme/scss/_faq.scss Normal file
View File

@@ -0,0 +1,107 @@
.faq-fullpage {
@include main_text_content();
padding: 0 $x_margin;
.faq-description {
margin-bottom: 5vh;
}
.faq-question {
padding: 0;
margin-top: 1rem;
border-top: solid 1px $dark_green;
padding-top: 1rem;
padding-bottom: 0.5rem;
> span > a {
color: $teal;
font-weight: 800;
display: flex;
align-items: center;
}
> span > a::after {
content: "↓";
}
}
.faq-qa-visible {
> span > a::after {
content: "↑";
}
}
.faq-answer {
a[href="#top"] {
display: block;
padding-top: 1rem;
padding-bottom: 0.5rem;
margin-left: -40px;
color: $teal;
}
}
.faq-question-answer:last-of-type {
border-bottom: solid 1px $dark_green;
padding-bottom: 0.5rem;
}
.ornements_top_over {
top: -15vh;
}
.ornements_bottom_over {
bottom: -30vh !important;
}
}
#block-erabletheme-votrequestionnexistepas {
position: relative;
display: grid;
grid-template-columns: 0.5fr 1fr;
grid-template-rows: repeat(2, 1fr);
align-items: center;
width: 50vw;
margin-left: 1.5vw;
@include main_text_content();
background-color: $teal;
color: white;
font-weight: 800;
padding-bottom: 2rem;
padding-top: 1.5rem;
padding-right: 0.5rem;
@media (min-width: $breakpoint_tablet) {
grid-template-columns: 0.3fr 1fr;
position: absolute;
width: 40vw;
left: 1.5vw;
bottom: -25vh;
}
@media (min-width: $breakpoint_desktop) {
left: unset;
right: 1.5vw;
width: 22vw;
bottom: unset;
top: 24vh;
padding-right: 1rem;
}
> h2 {
grid-column: 2;
}
> div {
grid-column: 2;
a {
color: white;
text-decoration: underline;
}
}
}
#block-erabletheme-votrequestionnexistepas::before {
content: "?";
grid-column: 1;
grid-row: 1/3;
justify-self: center;
align-self: center;
border: solid 1px white;
width: 3rem;
height: 3rem;
border-radius: 1.5rem;
font-size: 1.6rem;
display: flex;
justify-content: center;
align-items: center;
margin-right: 0.5rem;
}

2
web/themes/erabletheme/scss/_fullpage.scss
View File

@@ -94,7 +94,7 @@
margin-bottom: 8vh;
}
@media (min-width: $breakpoint_tablet) {
margin-top: 12vh;
margin-top: 2vh;
padding-top: 0;
width: 75vw;
margin-left: 12.5vw;

319
web/themes/erabletheme/scss/_meetup.scss Normal file
View File

@@ -0,0 +1,319 @@
.fullpage.meetup {
@media (min-width: $breakpoint_tablet) {
width: auto;
margin-left: $x_margin;
margin-right: $x_margin;
}
> h2 {
border-bottom: solid 1px $teal;
padding: 0;
padding-bottom: 4vh;
margin-left: $x_margin;
margin-right: $x_margin;
margin-bottom: 4vh;
height: auto;
@media (min-width: $breakpoint_desktop) {
width: calc(75% - $x_margin * 2);
}
}
> header {
@include main_text_content();
> div:first-of-type {
margin-left: $x_margin;
margin-right: $x_margin;
@media (min-width: $breakpoint_tablet) {
width: calc(75% - $x_margin * 2);
}
}
> div:last-of-type {
background-color: $teal;
width: 40%;
height: 16vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
margin-top: 4vh;
margin-left: calc(60% - $x_margin);
@media (min-width: $breakpoint_desktop) {
position: absolute;
top: 3vh;
right: 4vh;
width: 20%;
}
> div {
padding-bottom: 1rem;
> a {
font-weight: 800;
color: white;
text-decoration: underline;
}
> a::after {
content: "\2003 →";
}
}
}
> div:last-of-type::before {
content: "+";
color: white;
border: solid 1px white;
width: 3rem;
height: 3rem;
border-radius: 1.5rem;
font-size: 1.6rem;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 10px;
margin-top: 1rem;
}
}
> .meetup_list {
display: grid;
margin: 3vh $x_margin;
margin-top: 8vh;
grid-template-columns: 1fr;
gap: 2rem;
@media (min-width: $breakpoint_tablet) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: $breakpoint_desktop) {
grid-template-columns: repeat(3, 1fr);
}
> .views-row{
margin-bottom: 2vh;
> article {
padding: unset !important;
padding-top: 0.5rem !important;
padding-bottom: 1rem !important;
padding-right: 0.5rem !important;
display: grid;
grid-template-columns: 0.5fr 1fr;
grid-template-rows: repeat(6, auto);
background-color: white;
> p, > a, > div, > a > h2 {
@include main_text_content();
padding: 0.2rem 0;
}
> img {
grid-column: 1;
grid-row: 1/7;
width: 10rem;
height: 10rem;
border-radius: 5rem;
align-self: center;
justify-self: center;
padding: 1rem;
margin-right: 1rem;
}
> p.occupation {
grid-column: 2;
grid-row: 1/2;
> a {
color: $teal;
text-transform: uppercase;
font-weight: 800;
}
}
> a.author {
grid-column: 2;
grid-row: 2/3;
color: black;
text-transform: uppercase;
font-weight: 800;
}
> a.offre-title {
grid-column: 2;
grid-row: 3/4;
> h2 {
margin: unset;
padding: unset;
font-weight: 800;
}
}
> p.address {
grid-column: 2;
grid-row: 4/5;
margin-bottom: 1.5rem;
.country {
display: none;
}
}
> div.date-offre {
grid-column: 2;
grid-row: 6/7;
> a {
color: black;
}
}
> .legende {
display: none !important;
}
}
}
}
.ornements_top_over {
top: -15vh;
}
.ornements_bottom_over {
right: 11vw;
}
}
.fullpage.meetup-offre {
@include main_text_content();
> .retour-meetup {
padding-top: 3vh;
padding-left: $x_margin;
a {
font-size: $sm_font_size;
font-weight: 800;
color: $teal;
}
}
> h2 {
@include main_title();
margin-bottom: 3vh;
width: auto;
}
> .offre-content {
> div {
border-top: solid 1px $teal;
padding-top: 4vh;
margin-left: $x_margin;
margin-right: $x_margin;
width: calc(100% - $x_margin * 2);
> div > div > div {
display: grid;
grid-template-columns: 0.3fr 1fr 1fr;
grid-template-rows: repeat(8, auto);
.views-row {
margin-bottom: unset;
}
> div:first-of-type {
padding: unset !important;
grid-column: 1/2;
grid-row: 1/6;
justify-self: center;
align-self: center;
> img {
width: 15rem;
height: 15rem;
border-radius: 7.5rem;
padding: 1rem;
margin-right: 2rem;
}
}
> .offre-structure {
> h2 {
display: none;
}
grid-column: 2/4;
grid-row: 1/2;
text-transform: uppercase;
color: $teal;
font-weight: 800;
}
> .offre-localisation {
> h2 {
display: none;
}
.country {
display: none;
}
grid-column: 2/4;
grid-row: 3/4;
font-weight: 800;
color: $teal;
}
> .offre-title {
grid-column: 2/4;
grid-row: 4/5;
font-size: $xl_font_size;
font-weight: 800;
margin-bottom: 2rem;
}
> .offre-nom {
grid-column: 2/4;
grid-row: 2/3;
text-transform: uppercase;
}
> .offre-contact {
grid-column: 2/4;
grid-row: 5/6;
@media (min-width: $breakpoint_desktop) {
grid-column: 2/3;
grid-row: 5/7;
}
span > a {
display: block;
margin-right: 2rem;
background-color: $teal;
line-height: 1.1;
padding: 0.7rem 1rem;
color: white;
font-weight: 800;
font-size: $sm_font_size;
}
}
> .offre-time {
> h2, > div {
display: inline-block;
}
align-self: center;
grid-column: 2/4;
grid-row: 6/7;
font-size: $sm_font_size;
margin-top: 1rem;
margin-bottom: 0.5rem;
@media (min-width: $breakpoint_desktop) {
margin-top: 0;
grid-column: 3/4;
grid-row: 5/7;
}
}
> .offre-description {
grid-column: 1/4;
grid-row: 7/8;
border-top: solid 1px $teal;
margin-top: 2vh;
padding-top: 6vh;
margin-bottom: 4vh;
}
> .file_fixed, > .liens_fixed {
grid-row: 8/9;
> h2 {
display: none;
}
> div {
padding: 0 calc($x_margin / 2);
text-align: right;
margin: 2rem 0;
@include fluo_button();
a {
display: inline-block;
}
@media (min-width: $breakpoint_desktop) {
margin-bottom: 0 !important;
margin: 0;
position: fixed;
left: 75vw;
bottom: 10vh;
> div {
height: 3vh;
}
a {
max-width: calc(25vw - $x_margin * 2);
}
}
}
}
> .file_fixed span:last-of-type {
display: none;
}
}
}
}
}

8
web/themes/erabletheme/scss/global/_global.scss
View File

@@ -1,8 +1,8 @@
main[role="main"] {
margin-top: 12vh;
margin-top: 10vh;
@media (min-width: $breakpoint_desktop) {
margin-top: 22vh;
margin-top: calc(10vh + 3rem);
}
}
@@ -12,4 +12,8 @@ strong {
em {
font-style: italic;
}
#block-erabletheme-titredepage {
display: none;
}

4
web/themes/erabletheme/scss/global/variables/_colors.scss
View File

@@ -5,4 +5,8 @@ $dark_green: #314e41;
@mixin beige_gradient() {
background: linear-gradient(to bottom, $beige 80%, white 100%);
}
@mixin white_beige_gradient() {
background: linear-gradient(to bottom, white 0%, $beige 10%, $beige 80%, white 100%);
}

72
web/themes/erabletheme/scss/partials/_forms.scss Normal file
View File

@@ -0,0 +1,72 @@
main.main-login, main.main-user, main.main-register, main.main-contact, main.main-ask {
min-height: 50vh;
.login, .user, .register, .contact, .ask {
padding-top: 5vh;
width: 100vw;
@include white_beige_gradient();
> h2 {
@include sous_titre_alt();
text-align: center;
}
h1 {
@include sous_titre_alt();
text-align: center;
margin-top: 3rem;
margin-bottom: 2rem;
}
> div {
height: 100%;
> div:not(.hidden) {
margin-top: 5vh !important;
display: flex;
align-items: center;
justify-content: center;
form {
width: 95%;
@media screen and (min-width: $breakpoint_desktop) {
padding: 0 20vw;
}
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, textarea {
margin-top: 0.5rem;
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;
}
}
}

74
web/themes/erabletheme/scss/partials/_header.scss
View File

@@ -23,7 +23,6 @@ body.toolbar-fixed header[role="banner"] {
box-shadow: none;
}
> div {
height: 10vh;
display: grid;
grid-template-columns: repeat(16, 1fr);
> div{
@@ -151,6 +150,9 @@ body.toolbar-fixed header[role="banner"] {
padding: 0;
align-items: center;
flex-direction: column;
@media screen and (min-width: $breakpoint_desktop) {
padding-top: 3rem;
}
> li {
width: 100%;
display: flex;
@@ -224,45 +226,51 @@ body.toolbar-fixed header[role="banner"] {
}
ul.active {
padding: 30px 0;
padding-top: 3rem;
max-height: 100vh;
}
}
#block-erabletheme-navigationprincipale {
display: none;
grid-column: 1 / 17;
grid-row: 2;
background-color: white;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
@media (min-width: $breakpoint_desktop) {
display: block;
margin-top: 0 !important;
}
}
}
#block-erabletheme-navigationprincipale {
position: fixed;
width: 100%;
margin-top: 10vh;
display: none;
grid-column: 1 / 17;
grid-row: 2;
background-color: white;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
@media (min-width: $breakpoint_desktop) {
display: block;
}
ul {
width: 100%;
display: flex;
padding: 1rem 10vw;
justify-content: space-around;
border-top: solid 1px $dark_green;
li {
font-family: 'Marianne', sans-serif;
font-size: $m_font_size;
a {
font-weight: 800;
padding: 4px 6px;
color: black;
background-color: rgba(255, 255, 255, 0);
transition: background-color 0.3s ease;
}
ul {
width: 100%;
display: flex;
padding: 1rem 10vw;
justify-content: space-around;
border-top: solid 1px $dark_green;
li {
font-family: 'Marianne', sans-serif;
font-size: $m_font_size;
a {
font-weight: 800;
padding: 4px 6px;
color: black;
background-color: rgba(255, 255, 255, 0);
transition: background-color 0.3s ease;
}
a:hover {
background-color: $fluo_green;
}
a.is-active {
background-color: $fluo_green;
}
}
a:hover {
background-color: $fluo_green;
}
a.is-active {
background-color: $fluo_green;
}
}
}
}
}

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

@@ -1,61 +0,0 @@
.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;
}
}
}

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

@@ -13,11 +13,14 @@
@import "partials/_articles";
@import "partials/_articles_teaser";
@import "partials/_ornements.scss";
@import "partials/_login.scss";
@import "partials/_forms.scss";
/* PAGES */
@import "_home.scss";
@import "_fullpage.scss";
@import "_gouvernance.scss";
@import "_partenaires.scss";
@import "_partenaires.scss";
@import "_consultation.scss";
@import "_meetup.scss";
@import "_faq.scss";