home & anchor

This commit is contained in:
ouidade 2024-03-03 15:53:34 +01:00
parent 814340e2ac
commit 1118fcbda0
8 changed files with 652 additions and 15 deletions

View File

@ -324,6 +324,142 @@ header {
text-transform: uppercase; }
/*pages*/
#home {
width: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px; }
#home .layout-content {
grid-row: 1;
order: 2;
padding-top: 3rem;
padding-bottom: 6rem; }
@media (max-width: 500px) {
#home .layout-content {
padding-top: 0; } }
#home .layout-content .content_container {
display: flex; }
#home .layout-content .content_container #block-quartiers-de-demain-titredepage {
display: none; }
#home .layout-content .content_container article.node-type-static {
width: 100%; }
#home .layout-content .content_container article.node-type-static .field_body {
padding-left: 20%;
padding-right: 20%; }
@media (max-width: 640px) {
#home .layout-content .content_container article.node-type-static .field_body {
padding-left: 10%;
padding-right: 10%; } }
#home .layout-content .content_container article.node-type-static .field_body h2 {
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 0; }
#home .layout-content .content_container article.node-type-static .field_body img {
width: 100%;
height: auto; }
#home .layout-content .content_container article.node-type-static .field_body p {
margin-top: 0; }
#home .layout-content .content_container article.node-type-static .paragraph {
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 20%;
padding-right: 20%; }
@media (max-width: 640px) {
#home .layout-content .content_container article.node-type-static .paragraph {
padding-left: 10%;
padding-right: 10%; } }
#home .layout-content .content_container article.node-type-static .field_field_textes .field_field_title {
text-transform: uppercase;
font-size: 1rem;
font-weight: 400; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_title {
color: #0732c2; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3 .field_field_title, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4 .field_field_title {
color: #f7002b; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--1, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--2, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--3, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--4, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--6, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 {
background-color: #e8ebf4; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7, #home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 {
text-align: center; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 {
display: flex;
flex-direction: column; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_title {
width: 60%;
margin: auto; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) {
display: flex;
flex-direction: row; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--7 .field_field_texte div:nth-child(2) p {
padding-right: 30px;
text-align: left;
color: #0732c2; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) {
display: flex;
flex-direction: row; }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--8 .field_field_texte div:nth-child(2) p {
padding-right: 30px;
text-align: left; }
#home .layout-content .content_container article.node-type-static .field_field_textes p {
margin-bottom: 0; }
#home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto {
height: auto;
float: inline-start;
padding-right: 0.5rem; }
#home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img {
width: 40px;
height: auto; }
@media (max-width: 891px) {
#home .layout-content .content_container article.node-type-static .field_field_textes .field_field_picto img {
width: 30px; } }
#home .layout-content .content_container article.node-type-static .field_field_textes #paragraph-id--9 img {
width: -moz-available;
height: auto;
cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in; }
#home aside {
position: relative;
grid-column: 1 /span 2;
grid-row: 1;
z-index: 100;
order: 1;
margin-top: 5rem; }
@media (max-width: 891px) {
#home aside {
margin-left: 5%;
margin-top: 9rem; } }
@media (max-width: 500px) {
#home aside {
width: 80%;
margin-top: 3rem; } }
#home aside .sidebar_first_container {
position: -webkit-sticky;
position: sticky;
top: 10rem;
font-weight: 400; }
#home aside .sidebar_first_container .field-content {
margin-bottom: 0.7rem; }
@media (max-width: 810px) {
#home aside .sidebar_first_container {
display: none; } }
#home aside .views-field-field-pieces-jointes .field-content {
display: flex;
flex-direction: column; }
#home aside .views-field-field-pieces-jointes .field-content .file--application-pdf {
display: inline-flex; }
#home aside .views-field-field-pieces-jointes .field-content .file--application-pdf a {
display: block;
font-size: small;
font-weight: 800; }
#home aside .views-field-field-pieces-jointes .field-content .file--application-pdf::before {
content: url(../images/noun-arrow-download.svg);
margin: auto;
padding-right: 00.5rem; }
#home aside .views-field-field-pieces-jointes .field-content span {
font-size: small;
font-weight: 800; }
#home aside .views-field-field-pieces-jointes .field-content span:nth-child(2) {
margin-left: 50px;
align-self: center; }
.partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage {
grid-column: 3 /span 9;
grid-row: 1;

View File

@ -40,22 +40,22 @@
});
// /////////////////
//// ancre dans texte au click parragraphe correspondant arrive en dessous du header
// // /////////////////
// //// ancre dans texte au click parragraphe correspondant arrive en dessous du header
(function($, window) {
var adjustAnchor = function() {
var $anchor = $('#block-quartiers-de-demain-views-block-statics-block-1'),
fixedElementHeight = 350;
if ($anchor.length > 0) {
$('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);
}
};
// (function($, window) {
// var adjustAnchor = function() {
// var $anchor = $('#block-quartiers-de-demain-views-block-statics-block-1'),
// fixedElementHeight = 350;
// if ($anchor.length > 0) {
// $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);
// }
// };
$(window).on('hashchange', function() {
adjustAnchor();
});
// $(window).on('hashchange', function() {
// adjustAnchor();
// });
})(jQuery, window);
// })(jQuery, window);

View File

@ -0,0 +1,200 @@
#home{
width: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
.layout-content{
// grid-column: 3 / 11;
grid-row: 1;
order: 2;
padding-top: 3rem;
padding-bottom: 6rem;
// width: 70%;
// margin: auto;
@media(max-width: 891px){
// width: 90%;
}
@media (max-width:500px) {
padding-top: 0;
}
.content_container{
display: flex;
#block-quartiers-de-demain-titredepage{
display: none;
}
article.node-type-static{
width: 100%;
.field_body{
padding-left: 20%;
padding-right: 20%;
@media (max-width:640px) {
padding-left: 10%;
padding-right: 10%;
}
// width: 80%;
h2{
font-size: $font-medium;
font-weight: 600;
margin-bottom: 0;
}
img{
width: 100%;
height: auto;
}
p{
margin-top: 0;
}
}
.paragraph{
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 20%;
padding-right: 20%;
@media (max-width:640px) {
padding-left: 10%;
padding-right: 10%;
}
}
.field_field_textes{
.field_field_title{
text-transform: uppercase;
font-size: $font-big;
font-weight: 400;
}
#paragraph-id--1, #paragraph-id--2, #paragraph-id--6, #paragraph-id--7, #paragraph-id--8{
.field_field_title{
color: $blue_QDD;
}
}
#paragraph-id--3, #paragraph-id--4{
.field_field_title{
color: $red_QDD;
}
}
#paragraph-id--1, #paragraph-id--2, #paragraph-id--3, #paragraph-id--4, #paragraph-id--6, #paragraph-id--8{
background-color: $bleu_fond_header;
}
#paragraph-id--7, #paragraph-id--8{
text-align: center;
}
#paragraph-id--7{
display: flex;
flex-direction: column;
.field_field_title{
width: 60%;
margin: auto;
}
.field_field_texte div:nth-child(2){
display: flex;
flex-direction: row;
p{
padding-right: 30px;
text-align: left;
color: $blue_QDD;
}
}
}
#paragraph-id--8{
.field_field_texte div:nth-child(2){
display: flex;
flex-direction: row;
p{
padding-right: 30px;
text-align: left;
}
}
}
p{
margin-bottom: 0;
// padding-bottom: 1.5rem;
}
.field_field_picto{
height: auto;
float: inline-start;
padding-right: 0.5rem;
img{
width: 40px;
height: auto;
@media(max-width: 891px){
width: 30px;
}
}
}
#paragraph-id--9{
img{
width: -moz-available;
height: auto;
cursor: url(/img/layout/backgrounds/zoom.cur), -moz-zoom-in;
}
}
}
}
}
}
aside{
position: relative;
grid-column: 1 /span 2;
grid-row: 1;
z-index: 100;
order: 1;
margin-top: 5rem;
@media(max-width:891px){
margin-left: 5%;
margin-top: 9rem;
}
@media (max-width:500px) {
width: 80%;
margin-top: 3rem;
}
.sidebar_first_container{
position: -webkit-sticky;
position: sticky;
top: 10rem;
font-weight: 400;
.field-content{
margin-bottom: 0.7rem;
}
@media (max-width: 810px){
display: none;
}
}
.views-field-field-pieces-jointes{
.field-content{
display: flex;
flex-direction: column;
.file--application-pdf{
display: inline-flex;
a{
display: block;
font-size: small;
font-weight: 800;
}
&::before{
content: url(../images/noun-arrow-download.svg);
margin: auto;
padding-right: 00.5rem;
}
}
span{
font-size: small;
font-weight: 800;
&:nth-child(2){
margin-left: 50px;
align-self: center;
}
}
}
}
}
}

View File

@ -26,7 +26,7 @@
/*pages*/
@import "pages/_home";
@import "pages/partenaires";
@import "pages/presentation";
@import "pages/static";

View File

@ -0,0 +1,61 @@
{#
/**
* @file
* Default theme implementation to display a paragraph.
*
* Available variables:
* - paragraph: Full paragraph entity.
* Only method names starting with "get", "has", or "is" and a few common
* methods such as "id", "label", and "bundle" are available. For example:
* - paragraph.getCreatedTime() will return the paragraph creation timestamp.
* - paragraph.id(): The paragraph ID.
* - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
* - paragraph.getOwnerId(): The user ID of the paragraph author.
* See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
* and methods for the paragraph object.
* - content: All paragraph items. Use {{ content }} to print them all,
* or print a subset such as {{ content.field_example }}. Use
* {{ content|without('field_example') }} to temporarily suppress the printing
* of a given child element.
* - attributes: HTML attributes for the containing element.
* The attributes.class element may contain one or more of the following
* classes:
* - paragraphs: The current template type (also known as a "theming hook").
* - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
* "Image" it would result in "paragraphs--type--image". Note that the machine
* name will often be in a short form of the human readable label.
* - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
* preview would result in: "paragraphs--view-mode--preview", and
* default: "paragraphs--view-mode--default".
* - view_mode: View mode; for example, "preview" or "full".
* - logged_in: Flag for authenticated user status. Will be true when the
* current user is a logged-in member.
* - is_admin: Flag for admin user status. Will be true when the current user
* is an administrator.
*
* @see template_preprocess_paragraph()
*
* @ingroup themeable
*/
#}
{%
set classes = [
'paragraph',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
not paragraph.isPublished() ? 'paragraph--unpublished',
]
%}
{%
set ancre_href = '#paragraph-id--' ~ paragraph.id()
%}
{% block paragraph %}
{# <div{{ attributes.addClass(classes) }}> #}
<div{{ attributes.addClass(classes) }}>
{# <a href="{{ ancre_href }}"> #}
{% block content %}
{{ content }}
{% endblock %}
</a>
</div>
{% endblock paragraph %}

View File

@ -0,0 +1,81 @@
{#
/**
* @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 = '#field-id--' ~ field.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> #}
<div{{ attributes.addClass(classes).setAttribute('id', 'field-id--' ~ field.id()) }}>{{ item.content }}</div>
{% endfor %}
{% endif %}
{% else %}
<div{{ attributes }}>
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
{% if multiple %}
<div>
{% endif %}
{% for item in items %}
<div{{ item.attributes }}>{{ item.content }}</div>
{% endfor %}
{% if multiple %}
</div>
{% endif %}
</div>
{% endif %}

View File

@ -0,0 +1,92 @@
{#
/**
* @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" >
<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="home">
<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">{{ page.footer_top }}</section> #}
<div class="footer">
<section id="footer-left">{{ page.footer_left }}</section>
<section id="footer-middle">{{ page.footer_middle }}</section>
<section id="footer-right">{{ page.footer_right }}</section>
</div>
{# <section id="footer-bottom">{{ page.footer_bottom }}</section> #}
</footer>
{# {% endif %} #}
</div>{# /.layout-container #}

View File

@ -0,0 +1,67 @@
{#
/**
* @file
* Default view template to display all the fields in a row.
*
* Available variables:
* - view: The view in use.
* - fields: A list of fields, each one contains:
* - content: The output of the field.
* - raw: The raw data for the field, if it exists. This is NOT output safe.
* - class: The safe class ID to use.
* - handler: The Views field handler controlling this field.
* - inline: Whether or not the field should be inline.
* - wrapper_element: An HTML element for a wrapper.
* - wrapper_attributes: List of attributes for wrapper element.
* - separator: An optional separator that may appear before a field.
* - label: The field's label text.
* - label_element: An HTML element for a label wrapper.
* - label_attributes: List of attributes for label wrapper.
* - label_suffix: Colon after the label.
* - element_type: An HTML element for the field content.
* - element_attributes: List of attributes for HTML element for field content.
* - has_label_colon: A boolean indicating whether to display a colon after
* the label.
* - element_type: An HTML element for the field content.
* - element_attributes: List of attributes for HTML element for field content.
* - row: The raw result from the query, with all data it fetched.
*
* @see template_preprocess_views_view_fields()
*
* @ingroup themeable
*/
#}
{% for field in fields -%}
{{ field.separator }}
{%- if field.wrapper_element -%}
<{{ field.wrapper_element }}{{ field.wrapper_attributes }}>
{%- endif %}
{%- if field.label -%}
{%- if field.label_element -%}
<{{ field.label_element }}{{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</{{ field.label_element }}>
{%- else -%}
{{ field.label }}{{ field.label_suffix }}
{%- endif %}
{%- endif %}
{%- if field.element_type -%}
<{{ field.element_type }}{{ field.element_attributes }}>
{# Vérifiez d'abord si le champ contient des données #}
{% if row._entity.static_parts is not empty %}
{# Accédez à l'ID du paragraphe #}
{% set paragraph_id = row._entity.static_parts.entity.id() %}
{% endif %}
{# Créez le lien d'ancrage avec l'ID du paragraphe #}
<a href="#{{ paragraph_id }}">{{ field.content }}</a>
</{{ field.element_type }}>
{%- else -%}
{{ field.content }}
{%- endif %}
{%- if field.wrapper_element -%}
</{{ field.wrapper_element }}>
{%- endif %}
{%- endfor %}