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

intégration design page site

This commit is contained in:
ouidade 2024-09-05 21:57:40 +02:00
parent 35995f755d
commit 975c9c5ec8
14 changed files with 558 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,6 +80,12 @@ h2 {
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "gilroy-light";
src: url("../fonts/Gilroy/gilroy-light-webfont.woff2") format("woff2"), url("../fonts/Gilroy/gilroy-light-webfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
/*marianne*/
@font-face {
font-family: "Marianne";
@ -2684,4 +2690,158 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
}
#page-node .content_container .node-type-actualite .field_body p {
font-size: 0.8rem;
}
.node-type-site .layout-content {
margin-top: 3rem;
max-width: 100vw;
}
.node-type-site .layout-content .content_container {
width: 90% !important;
}
.node-type-site .layout--threecol-25-50-25 {
flex-wrap: nowrap;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--first {
flex: 1 0 20%;
display: flex;
flex-direction: column;
align-items: center;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--first .block-region-first {
width: 100%;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) h2, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) .field--label-above, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) span:not(.file) {
display: none;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) .file--mime-application-pdf, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) .ext {
background-color: black;
color: white;
font-size: 0.4rem;
text-transform: uppercase;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) .file--mime-application-pdf a, .node-type-site .layout--threecol-25-50-25 .layout__region--first div:has(.field_field_documents) .ext a {
color: white;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second {
flex: 0 1 80%;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: 2.5rem;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_title,
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_numero,
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_sous_titre {
font-family: "gilroy-semibold";
font-size: 1.3rem;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_numero ::before {
content: url("../img/map_pointer.svg");
top: 0.8rem;
position: relative;
padding-right: 0.5rem;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_numero div::after {
content: "-";
padding-left: 0.4rem;
padding-right: 0.4rem;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_sous_titre {
font-size: 0.9rem;
padding-left: 1.5rem;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_sous_titre) {
flex: 0 0 100%;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .views-element-container {
margin-top: 1rem;
font-size: 0.5rem;
flex: 0 0 70%;
border-bottom: solid 1px rgb(247, 0, 43);
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .views-element-container .views-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .views-element-container .views-row .views-field {
flex: 0 0 50%;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .views-element-container .views-label {
color: rgb(247, 0, 43);
font-family: "gilroy-semibold";
text-transform: uppercase;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .views-element-container .field-content {
font-family: "gilroy-light";
border-bottom: solid 1px rgb(247, 0, 43);
margin-bottom: 0.3rem;
padding-bottom: 0.5rem;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .views-element-container .views-field-field-nom-de-la-commune-nb-d-hab .field-content {
border-bottom: none;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_mots_clefs) {
margin-top: 1rem;
flex: 0 0 25%;
padding-left: 1rem;
border-bottom: solid 1px rgb(247, 0, 43);
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_mots_clefs) .field_field_mots_clefs {
font-size: 0.5rem;
color: rgb(7, 50, 194);
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_parties) {
margin-top: 2rem;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_parties) .paragraph--type--site-parts .field_field_titre_site {
font-family: "gilroy-semibold";
font-size: 0.6rem;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second div:has(.field_field_parties) .paragraph--type--site-parts .field_field_texte_site p {
font-family: "gilroy-medium";
font-size: 0.6rem;
margin-top: 0;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama {
display: flex !important;
flex-direction: row !important;
justify-content: space-between;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama .cadre-img-zoom {
margin: auto;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama .cadre-img-zoom img {
object-fit: cover;
width: 300px;
height: 200px;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama .image-field-caption {
margin: 0;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--second .block-region-second .paragraph--type--site-diapo .field_field_images .diaporama .image-field-caption p {
font-size: 0.3rem;
font-family: "gilroy-light";
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div {
display: flex;
flex-direction: row;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .prev-site {
padding-right: 0.5rem;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .prev-site::before {
content: url("../img/prev.svg");
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .prev-site span {
display: none;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .next-site span {
display: none;
}
.node-type-site .layout--threecol-25-50-25 .layout__region--third .block-region-third div .next-site::before {
content: url("../img/next.svg");
}

BIN
web/themes/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-light-webfont.woff vendored Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/dist/assets/fonts/Gilroy/gilroy-light-webfont.woff2 vendored Normal file
View File

Binary file not shown.

23
web/themes/custom/quartiers_de_demain/dist/assets/img/map_pointer.svg vendored Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
version="1.1"
id="svg1"
width="31.091003"
height="43.889252"
viewBox="0 0 31.091003 43.889251"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="g1"
transform="translate(-577.77777,-402.47138)">
<path
id="path934"
d="m 22.40241,-7.12118 c -0.58735,1.38841 -1.42748,2.63555 -2.49877,3.70558 -1.07061,1.07139 -2.31695,1.9116 -3.70591,2.49901 C 14.76011,-0.30824 13.23327,0 11.66047,0 10.08632,0 8.55881,-0.30824 7.12119,-0.91659 5.73358,-1.504 4.48589,-2.34421 3.41595,-3.4156 2.34467,-4.48563 1.50453,-5.73277 0.91718,-7.12118 0.30821,-8.55961 0,-10.08659 0,-11.66021 c 0,-2.64298 1.87019,-6.90217 5.55785,-12.65927 2.70357,-4.22201 5.44566,-7.75455 5.47269,-7.78902 l 0.62926,-0.80844 0.6279,0.80844 c 0.02771,0.03447 2.77048,3.56633 5.47337,7.78902 3.68766,5.7571 5.55717,10.01629 5.55717,12.65927 0.0014,1.57362 -0.30685,3.1006 -0.91583,4.53903 z M 11.6598,-15.65916 c -2.49539,0 -4.51833,2.02381 -4.51833,4.52011 0,2.4963 2.02361,4.51943 4.51833,4.51943 2.49674,0 4.51901,-2.02313 4.51901,-4.51943 0,-2.4963 -2.02227,-4.52011 -4.51901,-4.52011 z"
style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1.3333333,0,0,-1.3333333,577.77777,402.47137)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

26
web/themes/custom/quartiers_de_demain/quartiers_de_demain.theme
View File

@ -104,4 +104,30 @@ function quartiers_de_demain_preprocess_links__language_block(&$variables){
$variables['links'][$langcode]['text'] = $langcode;
$variables['links'][$langcode]['link']['#title'] = $langcode;
}
}
function quartiers_de_demain_preprocess_block__block_region_second(&$variables) {
// Vérifie si les champs existent avant de les regrouper.
if (isset($variables['content']['field_field_numero']) && isset($variables['content']['field_title']) && isset($variables['content']['field_field_sous_titre'])) {
// Crée une nouvelle div parent pour les 3 premières div
$grouped_content = [
'#type' => 'container',
'#attributes' => ['class' => ['grouped-content']],
'children' => [
$variables['content']['field_field_numero'],
$variables['content']['field_title'],
$variables['content']['field_field_sous_titre'],
],
];
// Ajoute la nouvelle div parent au début du contenu
$variables['content']['grouped_content'] = $grouped_content;
// Supprime les éléments individuels de la structure principale
unset($variables['content']['field_field_numero']);
unset($variables['content']['field_title']);
unset($variables['content']['field_field_sous_titre']);
}
}

BIN
web/themes/custom/quartiers_de_demain/src/assets/fonts/Gilroy/gilroy-light-webfont.woff Normal file
View File

Binary file not shown.

BIN
web/themes/custom/quartiers_de_demain/src/assets/fonts/Gilroy/gilroy-light-webfont.woff2 Normal file
View File

Binary file not shown.

23
web/themes/custom/quartiers_de_demain/src/assets/img/map_pointer.svg Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
version="1.1"
id="svg1"
width="31.091003"
height="43.889252"
viewBox="0 0 31.091003 43.889251"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="g1"
transform="translate(-577.77777,-402.47138)">
<path
id="path934"
d="m 22.40241,-7.12118 c -0.58735,1.38841 -1.42748,2.63555 -2.49877,3.70558 -1.07061,1.07139 -2.31695,1.9116 -3.70591,2.49901 C 14.76011,-0.30824 13.23327,0 11.66047,0 10.08632,0 8.55881,-0.30824 7.12119,-0.91659 5.73358,-1.504 4.48589,-2.34421 3.41595,-3.4156 2.34467,-4.48563 1.50453,-5.73277 0.91718,-7.12118 0.30821,-8.55961 0,-10.08659 0,-11.66021 c 0,-2.64298 1.87019,-6.90217 5.55785,-12.65927 2.70357,-4.22201 5.44566,-7.75455 5.47269,-7.78902 l 0.62926,-0.80844 0.6279,0.80844 c 0.02771,0.03447 2.77048,3.56633 5.47337,7.78902 3.68766,5.7571 5.55717,10.01629 5.55717,12.65927 0.0014,1.57362 -0.30685,3.1006 -0.91583,4.53903 z M 11.6598,-15.65916 c -2.49539,0 -4.51833,2.02381 -4.51833,4.52011 0,2.4963 2.02361,4.51943 4.51833,4.51943 2.49674,0 4.51901,-2.02313 4.51901,-4.51943 0,-2.4963 -2.02227,-4.52011 -4.51901,-4.52011 z"
style="fill:#f7002b;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1.3333333,0,0,-1.3333333,577.77777,402.47137)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

9
web/themes/custom/quartiers_de_demain/src/assets/scss/global/_fonts.scss
View File

@ -89,6 +89,15 @@
}
@font-face {
font-family: 'gilroy-light';
src: url('../fonts/Gilroy/gilroy-light-webfont.woff2') format('woff2'),
url('../fonts/Gilroy/gilroy-light-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/*marianne*/

198
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss Normal file
View File

@ -0,0 +1,198 @@
.node-type-site{
.layout-content{
margin-top: 3rem;
max-width: 100vw;
.content_container{
width: 90% !important;
}
}
.layout--threecol-25-50-25{
flex-wrap: nowrap;
.layout__region--first{
flex: 1 0 20%;
display: flex;
flex-direction: column;
align-items: center;
.block-region-first{
width: 100%;
}
div{
// width: fit-content;
}
div:has(.field_field_documents){
h2, .field--label-above, span:not(.file){
display: none;
}
.file--mime-application-pdf, .ext{
background-color: black;
color: white;
font-size: 0.4rem;
text-transform: uppercase;
a{
color: white;
}
}
}
}
.layout__region--second{
flex: 0 1 80%;
.block-region-second{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: 2.5rem;
.field_title,
.field_field_numero,
.field_field_sous_titre{
font-family: "gilroy-semibold";
font-size: 1.3rem;
}
.field_field_numero{
::before{
content: url("../img/map_pointer.svg");
top: 0.8rem;
position: relative;
padding-right: 0.5rem;
}
div{
&::after{
content: "-";
padding-left: 0.4rem;
padding-right: 0.4rem;
}
}
}
.field_field_sous_titre{
font-size: 0.9rem;
padding-left: 1.5rem;
}
div:has(.field_field_sous_titre){
flex: 0 0 100%;
}
.views-element-container{
margin-top: 1rem;
font-size: 0.5rem;
flex: 0 0 70%;
border-bottom: solid 1px $red_QDD;
// padding-bottom: 0.5rem;
.views-row{
// width: 70%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.views-field{
flex: 0 0 50%;
}
}
.views-label{
color: $red_QDD ;
font-family: "gilroy-semibold";
text-transform: uppercase;
// margin-top: 0.2rem;
}
.field-content{
font-family: "gilroy-light";
border-bottom: solid 1px $red_QDD;
margin-bottom: 0.3rem;
padding-bottom: 0.5rem;
}
.views-field-field-nom-de-la-commune-nb-d-hab .field-content{
border-bottom: none;
}
}
div:has(.field_field_mots_clefs){
margin-top: 1rem;
flex: 0 0 25%;
padding-left: 1rem;
border-bottom: solid 1px $red_QDD;
.field_field_mots_clefs{
font-size: 0.5rem;
color: $blue_QDD;
}
}
div:has(.field_field_parties){
margin-top: 2rem;
.paragraph--type--site-parts{
.field_field_titre_site{
font-family: 'gilroy-semibold';
font-size: 0.6rem;
}
.field_field_texte_site p{
font-family: 'gilroy-medium';
font-size: 0.6rem;
margin-top: 0;
}
}
}
.paragraph--type--site-diapo{
.field_field_images {
.diaporama{
display: flex !important;
flex-direction: row !important;
justify-content: space-between;
.cadre-img-zoom{
margin: auto;
img{
object-fit: cover;
width: 300px;
height: 200px;
}
}
.image-field-caption{
margin: 0;
p{
font-size: 0.3rem;
font-family: 'gilroy-light';
}
}
}
}
}
}
}
.layout__region--third{
.block-region-third{
div{
display: flex;
flex-direction: row;
.prev-site{
padding-right: 0.5rem;
&::before{
content: url('../img/prev.svg');
}
span{
display: none;
}
}
.next-site{
span{
display: none;
}
&::before{
content: url('../img/next.svg');
}
}
}
}
}
}
}

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

@ -44,4 +44,5 @@
// @import "pages/presentation";
@import "pages/static";
@import "pages/actualite";
@import "pages/node-type-site";

40
web/themes/custom/quartiers_de_demain/templates/block--entity-field--node.html.twig Normal file
View File

@ -0,0 +1,40 @@
{#
/**
* @file
* Default theme implementation to display a block.
*
* Available variables:
* - plugin_id: The ID of the block implementation.
* - label: The configured label of the block if visible.
* - configuration: A list of the block's configuration values.
* - label: The configured label for the block.
* - label_display: The display settings for the label.
* - provider: The module or other provider that provided this block plugin.
* - Block plugin specific settings will also be stored here.
* - in_preview: Whether the plugin is being rendered in preview mode.
* - content: The content of this block.
* - attributes: array of HTML attributes populated by modules, intended to
* be added to the main container tag of this template.
* - id: A valid HTML ID and guaranteed unique.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
*
* @see template_preprocess_block()
*
* @ingroup themeable
*/
#}
<div{{ attributes }}>
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content }}
{% endblock %}
</div>

0
web/themes/custom/quartiers_de_demain/templates/block-region-second.html.twig Normal file
View File

78
web/themes/custom/quartiers_de_demain/templates/field--paragraph--site-diapo.html.twig Normal file
View File

@ -0,0 +1,78 @@
{#
/**
* @file
* Default theme implementation for a field.
*
* To override output, copy the "field.html.twig" from the templates directory
* to your theme's directory and customize it, just like customizing other
* Drupal templates such as page.html.twig or node.html.twig.
*
* Instead of overriding the theming for all fields, you can also just override
* theming for a subset of fields using
* @link themeable Theme hook suggestions. @endlink For example,
* here are some theme hook suggestions that can be used for a field_foo field
* on an article node type:
* - field--node--field-foo--article.html.twig
* - field--node--field-foo.html.twig
* - field--node--article.html.twig
* - field--field-foo.html.twig
* - field--text-with-summary.html.twig
* - field.html.twig
*
* Available variables:
* - attributes: HTML attributes for the containing element.
* - label_hidden: Whether to show the field label or not.
* - title_attributes: HTML attributes for the title.
* - label: The label for the field.
* - multiple: TRUE if a field can contain multiple items.
* - items: List of all the field items. Each item contains:
* - attributes: List of HTML attributes for each item.
* - content: The field item's content.
* - entity_type: The entity type to which the field belongs.
* - field_name: The name of the field.
* - field_type: The type of the field.
* - label_display: The display settings for the label.
*
* @see template_preprocess_field()
*
* @ingroup themeable
*/
#}
{%
set title_classes = [
'field',
'field--name-' ~ field_name|clean_class,
'field--type-' ~ field_type|clean_class,
'field--label-' ~ label_display,
label_display == 'visually_hidden' ? 'visually-hidden',
]
%}
{%
set ancre_href = '#paragraph-id--' ~ paragraph.id()
%}
{% if label_hidden %}
{% if multiple %}
<div{{ attributes }}>
{% for item in items %}
<div{{ item.attributes }}>{{ item.content }}</div>
{% endfor %}
</div>
{% else %}
{% for item in items %}
<div{{ attributes }}>{{ item.content }}</div>
{% endfor %}
{% endif %}
{% else %}
<div{{ attributes }}>
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
{% if multiple %}
<div class='diaporama'>
{% endif %}
{% for item in items %}
<div{{ item.attributes }}>{{ item.content }}</div>
{% endfor %}
{% if multiple %}
</div>
{% endif %}
</div>
{% endif %}