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

css page pour candidater

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-11-08 10:37:03 +01:00
parent 0181f810a6
commit 84833b97dd
5 changed files with 286 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css
View File

@@ -1,106 +1,94 @@
@font-face {
font-family: 'gilroy-semibold';
src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
}
#sites-map-container {
background-color: transparent;
text-align: center;
position: relative;
width: 155%;
/* Prend toute la largeur du conteneur parent */
max-width: 800px;
/* Optionnel : Limiter la largeur maximale */
margin: 0 auto;
/* Centrer le conteneur */
height: auto;
/* Permet à la hauteur de s'ajuster automatiquement */
}
@media (max-width: 810px) {
font-family: 'gilroy-semibold';
src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
}
#sites-map-container {
width: 80%;
/* Prend toute la largeur du conteneur parent */
}
}
@media (max-width: 530px) {
#sites-map-container {
width: 100%;
/* Prend toute la largeur du conteneur parent */
height: 485px;
}
}
@media (max-width: 400px) {
#sites-map-container {
width: 100%;
/* Prend toute la largeur du conteneur parent */
height: 430px;
}
}
/* Changer la couleur au survol (hover) */
#sites-map-container .site-link:hover {
cursor: pointer;
}
/* Styles du popup (caché par défaut) */
#sites-map-container #popup {
font-family: 'gilroy-light';
display: none;
position: absolute;
z-index: 1000;
text-align: left;
padding-left: 1rem;
pointer-events: none;
}
@media (max-width: 1090px) {
background-color: transparent;
text-align: center;
position: relative;
width: 155%;
max-width: 800px;
margin: 0 auto;
height: auto;
}
@media (max-width: 810px) {
#sites-map-container {
width: 80%;
}
}
@media (max-width: 530px) {
#sites-map-container {
width: 100%;
height: 485px;
}
}
@media (max-width: 400px) {
#sites-map-container {
width: 100%;
height: 430px;
}
}
#sites-map-container .site-link:hover {
cursor: pointer;
}
#sites-map-container #popup {
bottom: 20px;
}
}
/* Position du popup à droite lorsque l'écran est plus grand que 1090px */
@media (min-width: 1090px) {
#sites-map-container #popup {
top: 50%;
/* Centrer verticalement */
left: 80%;
/* Placer le popup à droite de la carte */
transform: translateY(-50%);
/* Ajuster pour centrer verticalement */
width: 300px;
}
}
#sites-map-container strong {
color: #f7002b;
font-family: 'gilroy-bold';
}
#sites-map-container a {
display: none;
align-items: center;
color: white;
background: black;
text-transform: uppercase;
font-size: 0.8rem;
padding-left: 0.5rem;
text-decoration: none;
margin-top: 0.7rem;
height: 1.3rem;
}
#sites-map-container a:after {
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
}
#popup-content {
width: 300px;
padding-right: 30px;
}
#popup-content p {
font-size: 0.7rem;
}
@media (max-width: 810px) {
font-family: 'gilroy-light';
display: none;
position: absolute;
z-index: 1000;
text-align: left;
padding-left: 1rem;
pointer-events: none;
}
@media (max-width: 1090px) {
#sites-map-container #popup {
bottom: 20px;
}
}
@media (min-width: 1090px) {
#sites-map-container #popup {
top: 50%;
left: 80%;
transform: translateY(-50%);
width: 300px;
}
}
#sites-map-container strong {
color: #f7002b;
font-family: 'gilroy-bold';
}
#sites-map-container a {
display: none;
align-items: center;
color: white;
background: black;
text-transform: uppercase;
font-size: 0.8rem;
padding-left: 0.5rem;
text-decoration: none;
margin-top: 0.7rem;
height: 1.3rem;
}
#sites-map-container a:after {
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
}
#popup-content {
width: 300px;
background-color: white;
border-radius: 5px;
padding: 0.5rem;
padding-left: 1rem;
}
}
padding-right: 30px;
}
#popup-content p {
font-size: 0.7rem;
}
@media (max-width: 810px) {
#popup-content {
width: 300px;
background-color: white;
border-radius: 5px;
padding: 0.5rem;
padding-left: 1rem;
}
}

49
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@@ -2754,6 +2754,55 @@ body {
padding-left: 0.2rem;
}
#pour_candidater .node-type-static {
width: 80%;
}
#pour_candidater #sites-map-container {
width: 50%;
}
#pour_candidater .field_field_title {
color: rgb(7, 50, 194);
font-size: 1.2rem;
}
@media (max-width: 500px) {
#pour_candidater .field_field_title {
width: 80%;
}
}
#pour_candidater .paragraph--type--static-parts {
width: 65%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
font-family: "gilroy-regular";
}
@media (max-width: 500px) {
#pour_candidater .paragraph--type--static-parts {
width: 90%;
}
}
#pour_candidater .paragraph--type--static-parts .field_field_title {
color: rgb(7, 50, 194);
font-size: 1.2rem;
}
@media (max-width: 500px) {
#pour_candidater .paragraph--type--static-parts .field_field_title {
width: 80%;
}
}
#pour_candidater .paragraph--type--static-parts .colone-picto svg {
display: none;
}
#pour_candidater .field_body {
width: 65%;
margin: auto;
padding: 1rem;
font-family: "gilroy-regular";
text-align: start;
}
.node-type-static main {
background-color: #f6f7f3;
}

50
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/pour_candidater.scss Normal file
View File

@@ -0,0 +1,50 @@
#pour_candidater{
.node-type-static{
width: 80%;
}
#sites-map-container{
width: 50% ;
}
.field_field_title{
color: $blue_QDD;
font-size: 1.2rem;
@media(max-width: 500px){
width: 80%;
}
}
.paragraph--type--static-parts{
width: 65%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
font-family: "gilroy-regular";
@media(max-width: 500px){
width: 90%;
}
.field_field_title{
color: $blue_QDD;
font-size: 1.2rem;
@media(max-width: 500px){
width: 80%;
}
}
.colone-picto{
svg{
display: none;
}
}
}
.field_body{
width: 65%;
margin: auto;
padding: 1rem;
font-family: "gilroy-regular";
text-align: start;
}
}

2
web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss
View File

@@ -43,7 +43,7 @@
@import "pages/home";
@import "pages/consultation";
@import "pages/partenaires";
// @import "pages/presentation";
@import "pages/pour_candidater";
@import "pages/static";
@import "pages/actualite";
@import "pages/node-type-site";

97
web/themes/custom/quartiers_de_demain/templates/page--node--33.html.twig Normal file
View File

@@ -0,0 +1,97 @@
{#
/**
* @file
* Claro's theme implementation to display a single Drupal page.
*
* The doctype, html, head, and body tags are not in this template. Instead
* they can be found in the html.html.twig template normally located in the
* core/modules/system 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):
* - 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.pre_content: Items for the pre-content region.
* - page.breadcrumb: Items for the breadcrumb region.
* - page.highlighted: Items for the highlighted region.
* - page.help: Dynamic help text, mostly for admin pages.
* - page.content: The main content of the current page.
*
* @see template_preprocess_page()
* @see html.html.twig
*/
#}
<div class="layout-container pour_candidater" >
<header role="banner">
{{ page.header_left }}
{{ page.header_right }}
{{ page.header_nav }}
</header>
{{ page.primary_menu }}
{{ page.secondary_menu }}
{{ page.breadcrumb }}
{{ page.highlighted }}
{{ page.help }}
<main role="main" id="pour_candidater">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
<div class="layout-content">
{{ 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>
{# {% if page.footer_top or page.footer_left or page.footer_middle or page.footer_right or page.footer_bottom %} #}
<footer role="contentinfo">
{# <section id="footer-top"> #}
<span class="totop"><a href="#" id="toTop"><i class="arrow-up"></i></a></span>
{# </section> #}
<div class="footer">
<section id="footer-left">{{ page.footer_left }}</section>
<div class='first-row'>
<section id="footer-middle">{{ page.footer_middle }}</section>
<section id="footer-right">{{ page.footer_right }}</section>
</div>
</div>
{# <section id="footer-bottom">{{ page.footer_bottom }}</section> #}
</footer>
{# {% endif %} #}
</div>{# /.layout-container #}