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:
http.response.debug_cacheability_headers: true
twig.config:
debug: false
debug: true
auto_reload: true
services:
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%;
height: auto;
padding: 2rem 0;
margin-top:2rem;
h2{
font-size: 1rem;
text-transform: uppercase;
@@ -85,7 +85,7 @@
/* style the items (options), including the selected item: */
.select-items div,.select-selected {
color: #ffffff;
padding: 8px 16px;
padding: 8px 30px 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
@@ -1,76 +1,138 @@
header{
padding: 0;
height: 100px;
// display: none;
div {
height: inherit;
}
}
#block-popsu-colloque-branding{
width: 100%;
position: relative;
// z-index: 999;
padding:0;
@media screen and (min-width: 992px) {
padding:0 1rem;
}
&.is-active{
z-index: 10000;
}
& > div {
display: flex;
padding:1rem 0.5rem;
& > a{
display: inline-block;
position: relative;
img{
width: auto;
height: 100%;
object-fit: contain;
@media screen and (min-width: 768px) {
max-height: 100px;
.row{
background: white;
max-height: inherit;
justify-content: space-between;
#block-popsu-colloque-branding{
max-height: inherit;
& > div{
max-height: inherit;
a{
display: block;
max-height: inherit;
img{
width: 100%;
max-height: inherit;
object-fit: contain;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
@media screen and (min-width: 450px) {
width: auto;
}
}
}
}
&.is-active{
z-index: 10000;
}
}
#block-renderedsitesettingsblock-2{
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%;
}
.__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-renderedsitesettingsblock-2{
width: auto;
border-left: 1px solid $color1;
padding: 0;
display: none;
min-width: 520px;
@media screen and (min-width: 768px) {
display: block;
}
.site_setting_entity{
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
h1{
max-width: 100%;
color: $color2;
padding-right: 1rem;
text-transform: uppercase;
text-align: right;
align-self: stretch;
margin: auto 0;
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;
.burger{
padding-top: 0.25rem;
z-index: 9999;
}
.nav-main{
display: none;
@media screen and (min-width: 1200px) {
display: block;
ul{
margin-bottom: 0;
li{
margin: 0 0.5rem;
}
}
}
&.is-active{
display: block;
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
background: white;
z-index: 9999;
@media screen and (min-width: 576px) {
height: auto;
ul{
margin: 130px 0 50px 0;
}
li{
font-size: 1.7rem;
line-height: 3rem;
padding: 0 15px;
}
}
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{
width: 100%;
border-left: 1px solid $color1;
padding: 0rem;
display: flex;
align-items: center;
justify-content: flex-end;
@media screen and (min-width: 1200px) {
min-width: auto;
padding: 2rem;
}
.burger{
display: block;
margin: auto;
@media screen and (min-width: 1200px) {
display: none;
}
@@ -103,84 +160,25 @@ header{
@media screen and (min-width: 1200px) {
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{
#block-popsu-colloque-branding{
width: 100%;
width: 21rem;
position: relative;
z-index: 999;
padding: 1rem 0 0 0;
& > div {
& > a{
display: inline-block;
height: 8rem;
max-height: 150px;
position: relative;
img{
width: auto;
height: 100%;
object-fit: contain;
}
z-index: 9999;
a{
max-height: 8rem!important;
}
&.is-active{
overflow: inherit;
&>div{
max-height: 115px;
}
}
}
#block-renderedsitesettingsblock-2{
display: none;
}
}
@@ -4,14 +4,25 @@
padding: 0;
margin: 0;
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{
display: block;
padding: 1rem 1rem;
padding: 0.5rem 1rem;
border: 1px solid $color2;
color: $color2;
background: white;
transition: color 0.3s ease, background 0.3s ease;
@media screen and (min-width: 576px) {
// padding: 1rem 1rem;
}
&:hover{
text-decoration: none;
color: white;
@@ -20,7 +20,7 @@ main{
}
main:not(.home){
padding-top: 0rem;
padding-top: 2rem;
@media screen and (min-width: 768px) {
padding: 5rem 0!important;
}
@@ -77,7 +77,7 @@ article{
.__head{
div{
& > div{
// padding: 0 0.5rem;
padding: 0 0.5rem;
}
}
}
@@ -15,9 +15,49 @@
}
#block-views-block-slide-programme-block-1{
.date{
font-size: 1.5rem;
font-family: 'truenoregular';
text-transform: uppercase;
}
.__slide{
.flickity-viewport{
overflow: initial;
}
a{
height: 100%;
background: white;
@include shadow;
}
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;
}
.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
section{
& > div:not(.__slide){
article.thumbnails.programme{
@include shadow;
}
}
}
.thumbnails{
width: 100%;
height: auto;
background: white;
margin: $gutter1;
&:not(.bibliographie){
&:not(.bibliographie):not(.programme){
@include shadow;
}
figure{
@@ -38,6 +46,11 @@
}
&.bibliographie{
background: white!important;
padding: 0.5rem;
&.link_ext{
@include shadow;
}
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2);
}
@@ -47,12 +60,18 @@
@media screen and (min-width: 1200px) {
width: calc(100% / 4 - #{$gutter1} * 2);
}
a{
& > div * {
display: inline;
background: white;
color: $color2;
& > div * {
color: $col_black;
&.__auteur *{
font-size: 1.4rem;
}
&.__body{
margin:1rem 0;
}
}
a{
text-decoration: underline;
color: $color1;
}
}
}
@@ -60,7 +79,11 @@
// thumbnails slides
.__slide{
.thumbnails{
max-width: 380px;
// max-width: 380px;
width: calc(100% - 30px);
a{
width: calc(100%);
}
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2);
}
@@ -9,8 +9,8 @@
// Settings
// ==================================================
$hamburger-padding-x : 15px !default;
$hamburger-padding-y : 15px !default;
$hamburger-padding-x : 0px !default;
$hamburger-padding-y : 0px !default;
$hamburger-layer-width : 30px !default;
$hamburger-layer-height : 3px !default;
$hamburger-layer-spacing : 6px !default;
@@ -8,16 +8,14 @@
@font-face {
font-family: 'cormorantBold';
src: url('../fonts/Cormorant-Bold-webfont.woff2') format('woff2'),
url('../fonts/Cormorant-Bold-webfont.woff') format('woff');
src: url('../fonts/Cormorant-Bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'cormorantBoldItalic';
src: url('../fonts/Cormorant-BoldItalic-webfont.woff2') format('woff2'),
url('../fonts/Cormorant-BoldItalic-webfont.woff') format('woff');
src: url('../fonts/Cormorant-BoldItalic-webfont.woff') format('woff');
font-weight: lighter;
font-style: normal;
}
@@ -145,7 +143,7 @@ main{
letter-spacing: $letter_spacingH;
color: $lightgrey;
}
.__ressources{
h4{
text-transform: uppercase;
+100 -8
View File
@@ -54,12 +54,58 @@
}
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() {
$(this).flickity({
cellAlign: 'left',
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() {
@@ -89,12 +154,27 @@
}
function replaceAny(){
var $any_value = $('#edit-field-theme-target-id option').attr('value');
if ($any_value == "All") {
var $any_content = $('#edit-field-theme-target-id option:first-child').html();
var newhtml = $any_content.replace("- Any -", "Thèmes");
$('#edit-field-theme-target-id option:first-child').html(newhtml);
}
var $selects = $(".js-form-type-select .form-select");
$.each( $selects , function(i) {
var selectOptionAll = $(this).find("option[value='All']");
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() {
@@ -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() {
notes();
slide();
burger();
replaceAny();
select_custom();
remove_isactive();
});
})(jQuery);
@@ -27,7 +27,7 @@
* @ingroup themeable
*/
#}
<div{{ attributes }}>
<div{{ attributes }} class="col-3 col-sm-2 col-xl">
{% block content %}
<div class="nav-main">
{{ content }}
@@ -27,7 +27,7 @@
* @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 }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
@@ -1,5 +1,5 @@
<div class="head">
<h3>{{ header }}</h3>
{{ header }}
<div class="more_link">
<a class="blue" href="{{more['#url']}}">{{ more['#title'] }}<span>+</span></a>
</div>
@@ -4,25 +4,32 @@
{% set class = "d-flex d-md-block" %}
{% endif %}
{% set url = url('<current>') %}
{% set title = label[0]['#context']['value'] %}
<div class="__rs {{class}}">
<div class="__mail">
<a href="#">
<a target="_blank" href="mailto:?Subject= {{title}} {{url}}">
<img src="/themes/custom/popsu_colloque/images/mail.svg" alt="Mail">
</a>
</div>
<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">
</a>
</div>
<div class="__twitter">
<a href="#">
<img src="/themes/custom/popsu_colloque/images/twitter.svg" alt="twitter">
</a>
<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">
</a>
</div>
<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">
</a>
</div>
</div>
@@ -45,7 +45,7 @@
%}
<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 %}
{{ item.content }}
{% 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 }}">
<js-placeholder token="{{ placeholder_token }}">
</head>
<body{{ attributes }} class="container-fluid px-0">
<body{{ attributes }}>
{#
Keyboard navigation/accessibility link to main content section in
page.html.twig.
@@ -32,7 +32,7 @@
{% import _self as menus %}
{% if items %}
{% if menu_level == 0 %}
<ul{{ attributes }} class="row m-0 pl-0">
<ul{{ attributes }} class="d-flex px-0">
{% else %}
<ul>
{% endif %}
@@ -77,7 +77,7 @@
<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">
{{content.field_image}}
</div>
@@ -87,11 +87,11 @@
<h2>{{label}}</h2>
</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' } %}
</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="d-flex flex-wrap">
{{ content.field_date_du_programme }} |
@@ -80,13 +80,13 @@
<div class="__wrapper col-sm-12 col-md-9 col-lg-8">
{% if content.field_ajouter_un_media[0]['#paragraph'].field_video %}
<div class="__hero">
<div class="__hero mb-4">
{{content.field_ajouter_un_media}}
</div>
{% 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 %}
<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}}
</div>
{% endif %}
@@ -72,19 +72,29 @@
* @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>
</article>
@@ -82,6 +82,7 @@
</div>
<div class="__wrap">
<div class="__content">
{{content.field_auteur|raw}}
{{ label|raw }}
{{content.field_complement_d_info|raw}}
</div>
@@ -46,7 +46,7 @@
*/
#}
<div class="layout-container">
<header role="banner" class="front">
<header role="banner" class="front container-fluid">
{{ page.header }}
</header>
@@ -15,7 +15,7 @@
*/
#}
{% if content %}
<div{{ attributes }} class="d-flex align-items-stretch">
<div{{ attributes }} class="row">
{{ content }}
</div>
{% endif %}
@@ -37,9 +37,9 @@
default_row_class ? 'thumbnails programme',
]
%}
<div{{ row.attributes.addClass(row_classes) }}>
<article{{ row.attributes.addClass(row_classes) }}>
{{- row.content -}}
</div>
</article>
{% endfor %}
</div>
</section>
@@ -17,14 +17,16 @@
* @ingroup themeable
*/
#}
{% if title %}
{% endif %}
{% for row in rows %}
{%
set row_classes = [
default_row_class ? 'views-row',
]
%}
<article class="thumbnails programme">
<article class="thumbnails programme" data-date="{{title}}">
{{- row.content -}}
</article>
{% endfor %}
@@ -34,7 +34,7 @@
#}
<div class="views col">
<div class="views col px-0">
{{ title_prefix }}
{{ title }}
@@ -34,7 +34,7 @@
#}
<div class="views col">
<div class="views col px-0">
{{ title_prefix }}
{{ title }}
@@ -51,9 +51,9 @@
{% if rows -%}
<section>
<div class="__slide">
{{ rows }}
</div>
<div class="__slide">
{{ rows }}
</div>
</section>
{% elseif empty -%}
{{ empty }}