header fix

This commit is contained in:
2020-07-27 12:39:59 +02:00
parent e9761aa6ca
commit 34741c345d
31 changed files with 605 additions and 267 deletions
+1 -1
View File
@@ -5,7 +5,7 @@
parameters: parameters:
http.response.debug_cacheability_headers: true http.response.debug_cacheability_headers: true
twig.config: twig.config:
debug: false debug: true
auto_reload: true auto_reload: true
services: services:
cache.backend.null: cache.backend.null:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -3,6 +3,7 @@ footer{
width: 100%; width: 100%;
height: auto; height: auto;
padding: 2rem 0; padding: 2rem 0;
margin-top:2rem;
h2{ h2{
font-size: 1rem; font-size: 1rem;
text-transform: uppercase; text-transform: uppercase;
@@ -85,7 +85,7 @@
/* style the items (options), including the selected item: */ /* style the items (options), including the selected item: */
.select-items div,.select-selected { .select-items div,.select-selected {
color: #ffffff; color: #ffffff;
padding: 8px 16px; padding: 8px 30px 8px 16px;
border: 1px solid transparent; border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer; cursor: pointer;
@@ -1,76 +1,138 @@
header{ header{
padding: 0; max-height: 100px;
height: 100px; .row{
// display: none; background: white;
div { max-height: inherit;
height: inherit; justify-content: space-between;
} #block-popsu-colloque-branding{
} max-height: inherit;
& > div{
#block-popsu-colloque-branding{ max-height: inherit;
width: 100%; a{
position: relative; display: block;
// z-index: 999; max-height: inherit;
padding:0; img{
@media screen and (min-width: 992px) { width: 100%;
padding:0 1rem; max-height: inherit;
} object-fit: contain;
&.is-active{ padding-bottom: 0.5rem;
z-index: 10000; padding-top: 0.5rem;
} @media screen and (min-width: 450px) {
& > div { width: auto;
display: flex; }
padding:1rem 0.5rem; }
& > a{ }
display: inline-block; }
position: relative; &.is-active{
img{ z-index: 10000;
width: auto; }
height: 100%; }
object-fit: contain; #block-renderedsitesettingsblock-2{
@media screen and (min-width: 768px) { width: auto;
border-left: 1px solid $color1;
padding: 0;
display: none;
@media screen and (min-width: 1200px) {
display: flex;
}
.site_setting_entity{
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem 0 0rem;
h1{
max-width: 100%;
color: $color2;
padding-right: 1rem;
text-transform: uppercase;
text-align: right;
align-self: stretch;
margin: auto 0;
width: 100%; width: 100%;
}
.__info_colloque{
width: 100%;
align-self: stretch;
margin: auto 0;
height: 7vw;
height: auto;
&>div{
&:first-child{
white-space: nowrap;
border-bottom: 2px solid $color1;
}
}
} }
} }
} }
} #block-mainnavigation{
} max-width: max-content;
width: max-content;
#block-renderedsitesettingsblock-2{ .burger{
width: auto; padding-top: 0.25rem;
border-left: 1px solid $color1; z-index: 9999;
padding: 0; }
display: none; .nav-main{
min-width: 520px; display: none;
@media screen and (min-width: 768px) { @media screen and (min-width: 1200px) {
display: block; display: block;
} ul{
.site_setting_entity{ margin-bottom: 0;
display: flex; li{
align-items: center; margin: 0 0.5rem;
justify-content: center; }
padding: 0 1rem; }
h1{ }
max-width: 100%; &.is-active{
color: $color2; display: block;
padding-right: 1rem; position: fixed;
text-transform: uppercase; width: 100vw;
text-align: right; height: 100vh;
align-self: stretch; left: 0;
margin: auto 0; top: 0;
width: 100%; background: white;
z-index: 9999;
} @media screen and (min-width: 576px) {
.__info_colloque{ height: auto;
width: 100%; ul{
align-self: stretch; margin: 130px 0 50px 0;
margin: auto 0; }
height: 7vw; li{
height: auto; font-size: 1.7rem;
&>div{ line-height: 3rem;
&:first-child{ padding: 0 15px;
white-space: nowrap; }
border-bottom: 2px solid $color1; }
ul{
display: flex;
justify-content: center;
flex-direction: column;
height: 100%;
align-items: center;
li{
font-size: 1.5rem;
line-height: 3rem;
padding: 0 15px;
@media screen and (min-width: 360px) {
width: 100%;
&::before{
display: inline-block;
content: " ";
width: 0%;
transition: width 1s ease;
height: 1px;
background: $color1;
}
&:hover{
&::before{
width: 10%;
transition: all 1s ease;
}
}
}
}
}
} }
} }
} }
@@ -78,18 +140,13 @@ header{
} }
#block-mainnavigation{ #block-mainnavigation{
width: 100%;
border-left: 1px solid $color1; border-left: 1px solid $color1;
padding: 0rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
@media screen and (min-width: 1200px) {
min-width: auto;
padding: 2rem;
}
.burger{ .burger{
display: block; display: block;
margin: auto;
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
display: none; display: none;
} }
@@ -103,84 +160,25 @@ header{
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
display: flex; display: flex;
} }
@media screen and (max-width: 1200px) {
&.is-active{
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
z-index: 999;
ul{
display: flex;
justify-content: center;
flex-direction: column;
height: 100%;
align-items: center;
li{
width: 100%;
font-size: 2rem;
line-height: 3rem;
display: inline-flex;
align-items: center;
padding: 0 5%;
&::before{
display: block;
content: " ";
width: 0%;
transition: width 1s ease;
height: 1px;
background: $color1;
}
&:hover{
&::before{
width: 10%;
transition: all 1s ease;
}
}
a{
min-width: max-content;
margin: 0 1rem;
}
}
}
}
}
ul{
flex-wrap: nowrap;
li{
padding: 0 0.5rem;
&:not(:last-child){
border-right: 1px solid $col_black;
}
a{
white-space: nowrap;
}
}
}
} }
} }
header.front{ header.front{
#block-popsu-colloque-branding{ #block-popsu-colloque-branding{
width: 100%; width: 21rem;
position: relative; position: relative;
z-index: 999; z-index: 9999;
padding: 1rem 0 0 0; a{
& > div { max-height: 8rem!important;
& > a{ }
display: inline-block; &.is-active{
height: 8rem; overflow: inherit;
max-height: 150px; &>div{
position: relative; max-height: 115px;
img{
width: auto;
height: 100%;
object-fit: contain;
}
} }
} }
} }
#block-renderedsitesettingsblock-2{
display: none;
}
} }
@@ -4,14 +4,25 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
li{ li{
margin-right: 1rem; // margin-right: 1rem;
width: 100%;
text-align: center;
@media screen and (min-width: 576px) {
width: auto!important;
}
&:first-child{
margin-right: 1rem;
}
a{ a{
display: block; display: block;
padding: 1rem 1rem; padding: 0.5rem 1rem;
border: 1px solid $color2; border: 1px solid $color2;
color: $color2; color: $color2;
background: white; background: white;
transition: color 0.3s ease, background 0.3s ease; transition: color 0.3s ease, background 0.3s ease;
@media screen and (min-width: 576px) {
// padding: 1rem 1rem;
}
&:hover{ &:hover{
text-decoration: none; text-decoration: none;
color: white; color: white;
@@ -20,7 +20,7 @@ main{
} }
main:not(.home){ main:not(.home){
padding-top: 0rem; padding-top: 2rem;
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
padding: 5rem 0!important; padding: 5rem 0!important;
} }
@@ -77,7 +77,7 @@ article{
.__head{ .__head{
div{ div{
& > div{ & > div{
// padding: 0 0.5rem; padding: 0 0.5rem;
} }
} }
} }
@@ -15,9 +15,49 @@
} }
#block-views-block-slide-programme-block-1{ #block-views-block-slide-programme-block-1{
.date{
font-size: 1.5rem;
font-family: 'truenoregular';
text-transform: uppercase;
}
.__slide{ .__slide{
.flickity-viewport{
overflow: initial;
}
a{
height: 100%;
background: white;
@include shadow;
}
article{ article{
min-height: calc(100% - 30px ); height: 325px;
background: none;
display: flex;
margin-top: 3rem;
margin-bottom: 1.5rem;
&.__wrap{
background: white;
}
&.last::after{
display: inline-block;
content: " ";
width: 3px;
height: auto;
margin: -2.5rem 0 0 0;
background: $color1;
position: relative;
left: 0.5rem;
}
&.first{
flex-direction: column;
span{
position: absolute;
top: -2.5rem;
width: max-content;
font-size: 1.5rem;
font-family: 'truenoregular';
}
}
} }
} }
} }
@@ -33,7 +73,31 @@
display: block; display: block;
} }
.flickity-slider{ .flickity-slider{
margin-left: 1rem; // margin-left: 1rem;
}
}
}
}
.paragraph--type--role-de-l-intervenant{
margin-bottom: 2rem;
.__slide{
&:after {
content: 'flickity';
display: none;
@media screen and ( min-width: 768px ) {
content: '';
}
}
.flickity-viewport{
overflow: initial;
}
.flickity-slider > div{
width: 70%;
padding: 0 0.5rem;
@media screen and ( min-width: 768px ) {
width: 100%;
} }
} }
} }
@@ -1,10 +1,18 @@
// thumbnails global // thumbnails global
section{
& > div:not(.__slide){
article.thumbnails.programme{
@include shadow;
}
}
}
.thumbnails{ .thumbnails{
width: 100%; width: 100%;
height: auto; height: auto;
background: white; background: white;
margin: $gutter1; margin: $gutter1;
&:not(.bibliographie){ &:not(.bibliographie):not(.programme){
@include shadow; @include shadow;
} }
figure{ figure{
@@ -38,6 +46,11 @@
} }
&.bibliographie{ &.bibliographie{
background: white!important;
padding: 0.5rem;
&.link_ext{
@include shadow;
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2); width: calc(100% / 2 - #{$gutter1} * 2);
} }
@@ -47,12 +60,18 @@
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
width: calc(100% / 4 - #{$gutter1} * 2); width: calc(100% / 4 - #{$gutter1} * 2);
} }
a{ & > div * {
& > div * { color: $col_black;
display: inline; &.__auteur *{
background: white; font-size: 1.4rem;
color: $color2;
} }
&.__body{
margin:1rem 0;
}
}
a{
text-decoration: underline;
color: $color1;
} }
} }
} }
@@ -60,7 +79,11 @@
// thumbnails slides // thumbnails slides
.__slide{ .__slide{
.thumbnails{ .thumbnails{
max-width: 380px; // max-width: 380px;
width: calc(100% - 30px);
a{
width: calc(100%);
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2); width: calc(100% / 2 - #{$gutter1} * 2);
} }
@@ -9,8 +9,8 @@
// Settings // Settings
// ================================================== // ==================================================
$hamburger-padding-x : 15px !default; $hamburger-padding-x : 0px !default;
$hamburger-padding-y : 15px !default; $hamburger-padding-y : 0px !default;
$hamburger-layer-width : 30px !default; $hamburger-layer-width : 30px !default;
$hamburger-layer-height : 3px !default; $hamburger-layer-height : 3px !default;
$hamburger-layer-spacing : 6px !default; $hamburger-layer-spacing : 6px !default;
@@ -8,16 +8,14 @@
@font-face { @font-face {
font-family: 'cormorantBold'; font-family: 'cormorantBold';
src: url('../fonts/Cormorant-Bold-webfont.woff2') format('woff2'), src: url('../fonts/Cormorant-Bold-webfont.woff') format('woff');
url('../fonts/Cormorant-Bold-webfont.woff') format('woff');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'cormorantBoldItalic'; font-family: 'cormorantBoldItalic';
src: url('../fonts/Cormorant-BoldItalic-webfont.woff2') format('woff2'), src: url('../fonts/Cormorant-BoldItalic-webfont.woff') format('woff');
url('../fonts/Cormorant-BoldItalic-webfont.woff') format('woff');
font-weight: lighter; font-weight: lighter;
font-style: normal; font-style: normal;
} }
@@ -145,7 +143,7 @@ main{
letter-spacing: $letter_spacingH; letter-spacing: $letter_spacingH;
color: $lightgrey; color: $lightgrey;
} }
.__ressources{ .__ressources{
h4{ h4{
text-transform: uppercase; text-transform: uppercase;
+100 -8
View File
@@ -54,12 +54,58 @@
} }
function slide() { function slide() {
var $slide = $('main .__slide'); var $slide = $('main section .__slide');
var thumbnails = $('.__slide article.programme.is-selected');
var $head_date = $('#block-views-block-slide-programme-block-1 section.first:before');
$slide.each(function() { $slide.each(function() {
$(this).flickity({ $(this).flickity({
cellAlign: 'left', cellAlign: 'left',
pageDots: false, pageDots: false,
contain: true contain: true,
on: {
ready: function() {
var dates = {},
date;
var $cells = this.cells;
// console.log('$cells',$cells);
$('.__slide article.programme[data-date]').each(function(i, el){
date = $(el).data('date');
if (dates.hasOwnProperty(date)) {
dates[date] += 1;
$(this).addClass('last');
}
else {
dates[date] = 1;
$(this).addClass('first');
var dateValue = $(this).data('date');
console.log('dateValue',dateValue);
// $(this).html(dateValue );
$("<span>"+dateValue+"</span>").prependTo($(this));
}
});
// var date = this.cells.element.dataset.date;
// var date = this.cells;
// for (var i = 0; i < date.length; i++) {
// console.log("cc",date[i].element.dataset.date);
// $head_date.append( "<div>"+date[i].element.dataset.date+"</div>" );
// }
},
// change: function(index, e) {
// var date_change = this.cells[index].element.dataset.date;
//
// if ($head_date.html() != date_change) {
// $head_date.html( "<div>"+date_change+"</div>" );
// }
//
// }
}
}) })
}); });
@@ -75,6 +121,25 @@
}) })
}); });
var $slide_paragrpahe = $('main .paragraph .__slide');
$slide_paragrpahe.each(function() {
$(this).flickity({
cellAlign: 'left',
pageDots: false,
prevNextButtons: false,
contain: true,
watchCSS: true,
})
});
// function date() {
// var thumbnails = $('.__slide article.programme');
// $.each(thumbnails, function(i){
// date = thumbnails[i].dataset.date;
// })
// }
// date();
} }
function burger() { function burger() {
@@ -89,12 +154,27 @@
} }
function replaceAny(){ function replaceAny(){
var $any_value = $('#edit-field-theme-target-id option').attr('value'); var $selects = $(".js-form-type-select .form-select");
if ($any_value == "All") {
var $any_content = $('#edit-field-theme-target-id option:first-child').html(); $.each( $selects , function(i) {
var newhtml = $any_content.replace("- Any -", "Thèmes"); var selectOptionAll = $(this).find("option[value='All']");
$('#edit-field-theme-target-id option:first-child').html(newhtml); var optionContent = selectOptionAll.html();
}
if ($(this).attr('id') == 'edit-field-theme-target-id') {
var newhtml = optionContent.replace("- Any -", "Thèmes");
} else if ($(this).attr('id') == 'edit-field-type-de-publication-target-id' ) {
var newhtml = optionContent.replace("- Any -", "Publications");
} else {
// nothing
}
selectOptionAll.html(newhtml);
});
} }
function select_custom() { function select_custom() {
@@ -182,12 +262,24 @@
} }
function remove_isactive() {
$( window ).resize(function() {
var width = $(window).width();
if (width <= '1185') {
$('header .is-active').removeClass("is-active");
$('body.is-active').removeClass("is-active");
}
});
}
$( document ).ready(function() { $( document ).ready(function() {
notes(); notes();
slide(); slide();
burger(); burger();
replaceAny(); replaceAny();
select_custom(); select_custom();
remove_isactive();
}); });
})(jQuery); })(jQuery);
@@ -27,7 +27,7 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<div{{ attributes }}> <div{{ attributes }} class="col-3 col-sm-2 col-xl">
{% block content %} {% block content %}
<div class="nav-main"> <div class="nav-main">
{{ content }} {{ content }}
@@ -27,7 +27,7 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<div{{ attributes }} class="col-md-3 col-lg-3 col-xl-2"> <div{{ attributes }} class="col-9 col-sm-10 col-xl-auto">
{{ title_prefix }} {{ title_prefix }}
{% if label %} {% if label %}
<h2{{ title_attributes }}>{{ label }}</h2> <h2{{ title_attributes }}>{{ label }}</h2>
@@ -1,5 +1,5 @@
<div class="head"> <div class="head">
<h3>{{ header }}</h3> {{ header }}
<div class="more_link"> <div class="more_link">
<a class="blue" href="{{more['#url']}}">{{ more['#title'] }}<span>+</span></a> <a class="blue" href="{{more['#url']}}">{{ more['#title'] }}<span>+</span></a>
</div> </div>
@@ -4,25 +4,32 @@
{% set class = "d-flex d-md-block" %} {% set class = "d-flex d-md-block" %}
{% endif %} {% endif %}
{% set url = url('<current>') %}
{% set title = label[0]['#context']['value'] %}
<div class="__rs {{class}}"> <div class="__rs {{class}}">
<div class="__mail"> <div class="__mail">
<a href="#"> <a target="_blank" href="mailto:?Subject= {{title}} {{url}}">
<img src="/themes/custom/popsu_colloque/images/mail.svg" alt="Mail"> <img src="/themes/custom/popsu_colloque/images/mail.svg" alt="Mail">
</a> </a>
</div> </div>
<div class="__facebook"> <div class="__facebook">
<a href="#"> <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u={{url}}">
<img src="/themes/custom/popsu_colloque/images/facebook.svg" alt="facebook"> <img src="/themes/custom/popsu_colloque/images/facebook.svg" alt="facebook">
</a> </a>
</div> </div>
<div class="__twitter"> <div class="__twitter">
<a href="#"> <a target="_blank" href="https://twitter.com/intent/tweet?text={{title}}%20{{url}}%20@popsu_colloque">
<img src="/themes/custom/popsu_colloque/images/twitter.svg" alt="twitter"> <img src="/themes/custom/popsu_colloque/images/twitter.svg" alt="twitter">
</a> </a>
</div> </div>
<div class="__linkedin"> <div class="__linkedin">
<a href="#"> <a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url={{url}}/&title=&summary=&source=">
<img src="/themes/custom/popsu_colloque/images/linkedin.svg" alt="linkedin"> <img src="/themes/custom/popsu_colloque/images/linkedin.svg" alt="linkedin">
</a> </a>
</div> </div>
</div> </div>
@@ -45,7 +45,7 @@
%} %}
<h4>{{ label }}</h4> <h4>{{ label }}</h4>
<div class="d-lg-flex flex-wrap d-block pb-4"> <div class="row flex-wrap pb-4 col-12 px-0 mx-auto">
{% for item in items %} {% for item in items %}
{{ item.content }} {{ item.content }}
{% endfor %} {% endfor %}
@@ -0,0 +1,72 @@
{#
/**
* @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 = [
label_display == 'visually_hidden' ? 'visually-hidden',
]
%}
{% if label_hidden %}
{% if multiple %}
<div{{ attributes }} class="__slide">
{% 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 %}
@@ -33,7 +33,7 @@
<css-placeholder token="{{ placeholder_token }}"> <css-placeholder token="{{ placeholder_token }}">
<js-placeholder token="{{ placeholder_token }}"> <js-placeholder token="{{ placeholder_token }}">
</head> </head>
<body{{ attributes }} class="container-fluid px-0"> <body{{ attributes }}>
{# {#
Keyboard navigation/accessibility link to main content section in Keyboard navigation/accessibility link to main content section in
page.html.twig. page.html.twig.
@@ -32,7 +32,7 @@
{% import _self as menus %} {% import _self as menus %}
{% if items %} {% if items %}
{% if menu_level == 0 %} {% if menu_level == 0 %}
<ul{{ attributes }} class="row m-0 pl-0"> <ul{{ attributes }} class="d-flex px-0">
{% else %} {% else %}
<ul> <ul>
{% endif %} {% endif %}
@@ -77,7 +77,7 @@
<article{{ attributes }} class="row"> <article{{ attributes }} class="row">
<div class="__wrapper col-sm-12 col-md-9"> <div class="__wrapper col-sm-12 col-md-9 px-0">
<div class="__img-hero"> <div class="__img-hero">
{{content.field_image}} {{content.field_image}}
</div> </div>
@@ -87,11 +87,11 @@
<h2>{{label}}</h2> <h2>{{label}}</h2>
</div> </div>
<div class="__wrap_side col-md-12 col-lg-2 mt-3"> <div class="__wrap_side col-md-12 col-lg-1 mt-3">
{% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' with { page : 'moments' } %} {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' with { page : 'moments' } %}
</div> </div>
<div class="__wrap_content col-12 col-lg-10 my-3"> <div class="__wrap_content col-12 col-lg-11 my-3">
<div class="__head mb-5"> <div class="__head mb-5">
<div class="d-flex flex-wrap"> <div class="d-flex flex-wrap">
{{ content.field_date_du_programme }} | {{ content.field_date_du_programme }} |
@@ -80,13 +80,13 @@
<div class="__wrapper col-sm-12 col-md-9 col-lg-8"> <div class="__wrapper col-sm-12 col-md-9 col-lg-8">
{% if content.field_ajouter_un_media[0]['#paragraph'].field_video %} {% if content.field_ajouter_un_media[0]['#paragraph'].field_video %}
<div class="__hero"> <div class="__hero mb-4">
{{content.field_ajouter_un_media}} {{content.field_ajouter_un_media}}
</div> </div>
{% endif %} {% endif %}
<div class="__wrap_content d-flex"> <div class="__wrap_content d-flex flex-wrap flex-lg-nowrap">
{% if content.field_ajouter_un_media[0]['#paragraph'].field_image %} {% if content.field_ajouter_un_media[0]['#paragraph'].field_image %}
<div class="__hero"> <div class="__hero col-12 col-md-12 col-lg-4 px-0 pr-lg-4 m-0 my-4 mx-sm-0 my-lg-0">
{{content.field_ajouter_un_media}} {{content.field_ajouter_un_media}}
</div> </div>
{% endif %} {% endif %}
@@ -72,19 +72,29 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<article{{ attributes }} class="thumbnails bibliographie">
<div>
<a href="{{url}}">
<div>
{{content.field_auteur}}
</div>
<div>
{{ label }}
</div>
<div>
{{ content|without('field_auteur') }}
</div>
</a> {% set urlExt = content.field_lien_externe[0]['#title'] %}
{% if urlExt %}
{% set class = 'link_ext' %}
{% endif %}
<article{{ attributes }} class="thumbnails bibliographie {{class}}">
<div>
{% if urlExt %}
<a target="_blank" href="{{urlExt}}">
{% endif %}
<div class="__auteur">
{{content.field_auteur}}
</div>
<div>
{{ label }}
</div>
<div class="__body">
{{ content.body }}
</div>
{% if urlExt %}
</a>
{% endif %}
</div> </div>
</article> </article>
@@ -82,6 +82,7 @@
</div> </div>
<div class="__wrap"> <div class="__wrap">
<div class="__content"> <div class="__content">
{{content.field_auteur|raw}}
{{ label|raw }} {{ label|raw }}
{{content.field_complement_d_info|raw}} {{content.field_complement_d_info|raw}}
</div> </div>
@@ -46,7 +46,7 @@
*/ */
#} #}
<div class="layout-container"> <div class="layout-container">
<header role="banner" class="front"> <header role="banner" class="front container-fluid">
{{ page.header }} {{ page.header }}
</header> </header>
@@ -15,7 +15,7 @@
*/ */
#} #}
{% if content %} {% if content %}
<div{{ attributes }} class="d-flex align-items-stretch"> <div{{ attributes }} class="row">
{{ content }} {{ content }}
</div> </div>
{% endif %} {% endif %}
@@ -37,9 +37,9 @@
default_row_class ? 'thumbnails programme', default_row_class ? 'thumbnails programme',
] ]
%} %}
<div{{ row.attributes.addClass(row_classes) }}> <article{{ row.attributes.addClass(row_classes) }}>
{{- row.content -}} {{- row.content -}}
</div> </article>
{% endfor %} {% endfor %}
</div> </div>
</section> </section>
@@ -17,14 +17,16 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
{% if title %}
{% endif %}
{% for row in rows %} {% for row in rows %}
{% {%
set row_classes = [ set row_classes = [
default_row_class ? 'views-row', default_row_class ? 'views-row',
] ]
%} %}
<article class="thumbnails programme"> <article class="thumbnails programme" data-date="{{title}}">
{{- row.content -}} {{- row.content -}}
</article> </article>
{% endfor %} {% endfor %}
@@ -34,7 +34,7 @@
#} #}
<div class="views col"> <div class="views col px-0">
{{ title_prefix }} {{ title_prefix }}
{{ title }} {{ title }}
@@ -34,7 +34,7 @@
#} #}
<div class="views col"> <div class="views col px-0">
{{ title_prefix }} {{ title_prefix }}
{{ title }} {{ title }}
@@ -51,9 +51,9 @@
{% if rows -%} {% if rows -%}
<section> <section>
<div class="__slide"> <div class="__slide">
{{ rows }} {{ rows }}
</div> </div>
</section> </section>
{% elseif empty -%} {% elseif empty -%}
{{ empty }} {{ empty }}