Compare commits

...

2 Commits

Author SHA1 Message Date
ouidade e0358a0838 Merge branch 'master' of gitea-figureslibres.io:bachir/drupal-quartiersdedemain 2024-02-27 13:32:33 +01:00
ouidade 90a3afe6e8 preprocess page partenaires 2024-02-27 13:30:59 +01:00
12 changed files with 541 additions and 45 deletions

View File

@ -98,6 +98,7 @@
font-family: "Marianne", sans-serif; font-family: "Marianne", sans-serif;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: 0.6rem;
top: 0%; top: 0%;
left: 0%; left: 0%;
overflow: hidden; overflow: hidden;
@ -108,6 +109,34 @@
.layout-container footer { .layout-container footer {
flex: 0 0 100%; } flex: 0 0 100%; }
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
margin: 0;
padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
ul { ul {
list-style-type: none; } list-style-type: none; }
@ -215,24 +244,36 @@ header {
.footer { .footer {
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
grid-gap: 10px; grid-template-rows: repeat(1, 1fr);
background-color: white; background-color: white;
padding-top: 3rem; padding-top: 3rem;
font-family: "Marianne"; font-size: 0.6rem; }
font-weight: 800; .footer section {
font-size: 1.1rem; width: fit-content; }
text-transform: lowercase; } .footer h2, .footer ul {
margin: 0; }
.footer #footer-left { .footer #footer-left {
grid-column: 1 /span 3; } grid-column: 1 /span 5;
.footer #footer-left #block-quartiers-de-demain-logoepau { grid-row: 1; }
.footer #footer-left .footer_left_container {
display: flex;
flex-direction: row; }
.footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau {
height: 150px; } height: 150px; }
.footer #footer-left img { .footer #footer-left .footer_left_container img {
width: 150px; width: 150px;
height: auto; } height: auto; }
.footer #footer-middle { .footer #footer-middle {
grid-column: 6 /span 7; } grid-column: 6 /span 7;
grid-row: 1; }
.footer #footer-middle #block-quartiers-de-demain-pieddepage-2-menu {
display: none; }
.footer #footer-right { .footer #footer-right {
grid-column: 9 /span 12; } grid-column: 9 /span 12;
grid-row: 1;
font-size: 0.6rem; }
.footer #footer-right #block-quartiers-de-demain-socialmedialinks {
flex-direction: column; }
@media (max-width: 891px) { @media (max-width: 891px) {
.footer div { .footer div {
flex-wrap: wrap; } } flex-wrap: wrap; } }
@ -240,10 +281,50 @@ header {
.footer div { .footer div {
flex-direction: column; } } flex-direction: column; } }
#block-quartiers-de-demain-pieddepage-2-menu {
display: none; }
#block-quartiers-de-demain-socialmedialinks {
flex-direction: column; }
/*pages*/ /*pages*/
.partenaires .content_container {
display: grid;
grid-template-columns: repeat(12, 1fr); }
.partenaires .content_container #block-quartiers-de-demain-titredepage {
grid-column: 3 /span 9;
grid-row: 1;
margin-top: 3rem;
margin-bottom: 3rem; }
.partenaires .content_container #block-quartiers-de-demain-titredepage h1 {
text-transform: uppercase;
color: #f7002b;
font-size: 1.6rem; }
.partenaires .content_container .views-element-container {
grid-column: 3 /span 9;
grid-row: 2; }
.node-type-partenaire {
width: 100%;
padding-bottom: 3rem;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(auto-fill); }
@media (max-width: 810px) {
.node-type-partenaire {
display: flex;
flex-direction: column; } }
.node-type-partenaire .field--name-field-logo {
grid-column: 1 / 2;
grid-row: 2;
margin-top: 2rem;
padding-right: 1rem; }
.node-type-partenaire .field--name-field-titre {
grid-column: 2 / 8;
grid-row: 1;
font-weight: 800; }
.node-type-partenaire .field--name-field-texte {
grid-column: 2 / 8;
grid-row: 2; }
.node-type-partenaire .field--name-field-lien {
grid-column: 2 / 8;
grid-row: 3; }
a {
font-weight: 800; }
a svg {
display: none; }

View File

@ -49,6 +49,17 @@ function quartiers_de_demain_preprocess_region(&$variables) {
} }
/* implements template_preprocess_field() */
function quartiers_de_demain_preprocess_field(&$variables) {
$node = \Drupal::routeMatch()->getParameter('node');
if (isset($variables['field_name'])) {
$variables['attributes']['class'][] = 'field_'.$variables['field_name'];
}
}
/** /**
* Prepares variables for block templates. * Prepares variables for block templates.
* *

View File

@ -9,6 +9,7 @@ $width-menu-slidedown : 550px;
font-family: $font-family-default; font-family: $font-family-default;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
font-size: $font-normal;
top: 0%; top: 0%;
left: 0%; left: 0%;
// width: 100%; // width: 100%;

View File

@ -1,3 +1,7 @@
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
ul{ ul{
list-style-type: none; list-style-type: none;
} }
@ -25,3 +29,5 @@ svg.mailto{
svg.ext{ svg.ext{
display: none; display: none;
} }

View File

@ -8,6 +8,7 @@ $white-button: rgb(255, 255, 255);
$white-header:rgb(255, 255, 255); $white-header:rgb(255, 255, 255);
$yellow-puca: #fdc300; $yellow-puca: #fdc300;
$bleu_fond_header: rgb(232, 235, 244); $bleu_fond_header: rgb(232, 235, 244);
$red_QDD: rgb(247, 0, 43);

View File

@ -4,6 +4,12 @@ $font-family-header: "Marianne", sans-serif;
$font-family-chapeau: "Marianne", sans-serif; $font-family-chapeau: "Marianne", sans-serif;
$font-extra: 2.3rem;
$font-large: 1.6rem;
$font-big: 1rem;
$font-medium: .8rem;
$font-normal: .6rem;
$font-small: .45rem;

View File

@ -0,0 +1,120 @@
.partenaires{
.content_container{
display: grid;
grid-template-columns: repeat(12, 1fr);
#block-quartiers-de-demain-titredepage{
grid-column: 3 /span 9;
grid-row: 1;
margin-top: 3rem;
margin-bottom: 3rem;
h1{
text-transform: uppercase;
color: $red_QDD ;
font-size: $font-large;
}
}
.views-element-container{
grid-column: 3 /span 9;
grid-row: 2;
}
}
}
// .field--name-field-partenaires{
// padding-top: 3rem;
.node-type-partenaire{
width: 100%;
padding-bottom: 3rem;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(auto-fill);
@media (max-width: 810px){
display: flex;
flex-direction: column;
}
.field--name-field-logo{
grid-column: 1 / 2;
grid-row: 2;
margin-top: 2rem;
padding-right: 1rem;
}
.field--name-field-titre{
grid-column: 2 / 8;
grid-row: 1;
font-weight: 800;
}
.field--name-field-texte{
grid-column: 2 / 8;
grid-row: 2;
}
.field--name-field-lien{
grid-column: 2 / 8;
grid-row: 3;
}
}
a{
font-weight: 800;
svg{
display: none;
}
}
// }
// .field--name-field-equipes{
// padding-top: 3rem;
// .paragraph--type--equipe{
// width: 100%;
// .paragraph--type--personne{
// width: 100%;
// padding-bottom: 3rem;
// display: grid;
// grid-template-columns: repeat(7, 1fr);
// grid-template-rows: repeat(auto-fill);
// @media (max-width: 810px){
// display: flex;
// flex-direction: column;
// }
// .field--name-field-photo{
// grid-column: 1 / 2;
// grid-row: 1 / span 3;
// // margin-top: 2rem;
// padding-right: 1rem;
// img{
// border-radius: 50%;
// }
// }
// .field--name-field-prenom{
// grid-column: 2 / span 3;
// grid-row: 1;
// font-weight: 800;
// }
// .field--name-field-nom{
// grid-column: 2 / span 3;
// grid-row: 2;
// }
// .field--name-field-fonction{
// grid-column: 2 / 8;
// grid-row: 3;
// }
// }
// }
// a{
// font-weight: 800;
// svg{
// display: none;
// }
// }
// }

View File

@ -1,34 +1,47 @@
.footer{ .footer{
display: grid; display: grid;
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
grid-gap: 10px; grid-template-rows: repeat(1, 1fr);
// grid-gap: 10px;
background-color: $white-header; background-color: $white-header;
padding-top: 3rem; padding-top: 3rem;
font-family: "Marianne"; font-size: $font-normal;
font-weight: 800; section{width: fit-content;}
font-size: 1.1rem; h2, ul{margin: 0;}
text-transform: lowercase;
#footer-left{ #footer-left{
grid-column: 1 /span 3; grid-column: 1 /span 5;
grid-row: 1;
.footer_left_container{
display: flex;
flex-direction: row;
#block-quartiers-de-demain-logorepu{ #block-quartiers-de-demain-logorepu{
} }
#block-quartiers-de-demain-logoepau{ #block-quartiers-de-demain-logoepau{
height: $header-height; height: $header-height;
} }
img{ img{
width: $header-height; width: $header-height;
height: auto; height: auto;
} }
} }
}
#footer-middle{ #footer-middle{
grid-column: 6 /span 7; grid-column: 6 /span 7;
grid-row: 1;
#block-quartiers-de-demain-pieddepage-2-menu{
display: none;
}
} }
#footer-right{ #footer-right{
grid-column: 9 /span 12; grid-column: 9 /span 12;
grid-row: 1;
font-size: $font-normal;
#block-quartiers-de-demain-socialmedialinks{
flex-direction: column;
}
} }
div{ div{
@ -46,10 +59,3 @@
} }
#block-quartiers-de-demain-pieddepage-2-menu{
display: none;
}
#block-quartiers-de-demain-socialmedialinks{
flex-direction: column;
}

View File

@ -18,6 +18,7 @@
/*partials*/ /*partials*/
@import "partials/header"; @import "partials/header";
@import "partials/footer"; @import "partials/footer";
@ -25,4 +26,4 @@
/*pages*/ /*pages*/
@import "pages/partenaires.scss";

View File

@ -0,0 +1,76 @@
{#
/**
* @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',
]
%}
{% 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>
{% endif %}
{% for item in items %}
<div{{ item.attributes }}>{{ item.content }}</div>
{% endfor %}
{% if multiple %}
</div>
{% endif %}
</div>
{% endif %}

View File

@ -0,0 +1,95 @@
{#
/**
* @file
* Default theme implementation to display a node.
*
* Available variables:
* - node: The node entity with limited access to object properties and methods.
* Only method names starting with "get", "has", or "is" and a few common
* methods such as "id", "label", and "bundle" are available. For example:
* - node.getCreatedTime() will return the node creation timestamp.
* - node.hasField('field_example') returns TRUE if the node bundle includes
* field_example. (This does not indicate the presence of a value in this
* field.)
* - node.isPublished() will return whether the node is published or not.
* Calling other methods, such as node.delete(), will result in an exception.
* See \Drupal\node\Entity\Node for a full list of public properties and
* methods for the node object.
* - label: (optional) The title of the node.
* - content: All node 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.
* - author_picture: The node author user entity, rendered using the "compact"
* view mode.
* - metadata: Metadata for this node.
* - date: (optional) Themed creation date field.
* - author_name: (optional) Themed author name field.
* - url: Direct URL of the current node.
* - display_submitted: Whether submission information should be displayed.
* - attributes: HTML attributes for the containing element.
* The attributes.class element may contain one or more of the following
* classes:
* - node: The current template type (also known as a "theming hook").
* - node--type-[type]: The current node type. For example, if the node is an
* "Article" it would result in "node--type-article". Note that the machine
* name will often be in a short form of the human readable label.
* - node--view-mode-[view_mode]: The View Mode of the node; for example, a
* teaser would result in: "node--view-mode-teaser", and
* full: "node--view-mode-full".
* The following are controlled through the node publishing options.
* - node--promoted: Appears on nodes promoted to the front page.
* - node--sticky: Appears on nodes ordered above other non-sticky nodes in
* teaser listings.
* - node--unpublished: Appears on unpublished nodes visible only to site
* admins.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - content_attributes: Same as attributes, except applied to the main
* content tag that appears in the template.
* - author_attributes: Same as attributes, except applied to the author of
* the node 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.
* - view_mode: View mode; for example, "teaser" or "full".
* - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
* - page: Flag for the full page state. Will be true if view_mode is 'full'.
* - readmore: Flag for more state. Will be true if the teaser content of the
* node cannot hold the main body content.
* - 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_node()
*
* @ingroup themeable
*/
#}
<article{{ attributes }}>
{{ title_prefix }}
{% if label and not page %}
<h2{{ title_attributes }}>
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
</h2>
{% endif %}
{{ title_suffix }}
{% if display_submitted %}
<footer>
{{ author_picture }}
<div{{ author_attributes }}>
{% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}
{{ metadata }}
</div>
</footer>
{% endif %}
{# <div{{ content_attributes }}> #}
{{ content }}
{# </div> #}
</article>

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 partenaires">
<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">
<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 #}