detail css

This commit is contained in:
2020-07-20 20:21:08 +02:00
parent edd9e6e68a
commit e60eb9787e
26 changed files with 533 additions and 127 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
@@ -1,8 +1,8 @@
#block-popsu-colloque-submenu{
margin: 3rem auto;
ul{
display: flex;
padding: 0;
margin: 0;
li{
margin-right: 1rem;
a{
@@ -7,9 +7,9 @@ header{
}
main:not(.home){
margin-top: 0rem;
padding-top: 0rem;
@media screen and (min-width: 768px) {
margin-top: 5rem!important;
padding-top: 5rem!important;
}
}
@@ -59,12 +59,8 @@ article{
.__head{
div{
& > div{
margin-right: 0.5rem;
// padding: 0 0.5rem;
}
& > div:not(:first-child){
margin-left: 0.5rem;
}
}
}
}
@@ -113,3 +109,14 @@ blockquote{
}
}
}
// page moment
.container{
.__ressources{
section{
.row{
padding: 0rem 0rem 2rem 0rem;
}
}
}
}
@@ -8,9 +8,22 @@
@media screen and (min-width: 768px) {
.__rs{
&:not(.moment){
margin: auto;
& > div{
margin: 0 auto 0.5rem auto;
}
}
}
}
@media screen and (min-width: 992px) {
.__rs{
&.moment{
margin: auto;
& > div{
margin: 0 auto 0.5rem auto;
}
}
}
}
@@ -32,9 +32,6 @@
.head{
display: block;
}
.thumbnails{
margin: 1rem;
}
.flickity-slider{
margin-left: 1rem;
}
@@ -1,13 +1,16 @@
header{
display: none;
}
// thumbnails global
.thumbnails{
width: 100%;
height: auto;
background: white;
margin: 0.5rem 0;
@include shadow;
margin: $gutter1;
&:not(.bibliographie){
@include shadow;
}
figure{
height: 150px;
margin: 0;
@@ -21,7 +24,18 @@ header{
// thumbnails publications
&.publications{
.__media{
padding: 1rem 0 1rem 1rem;
padding: 0.5rem 0 0.5rem 0.5rem;
// .__img{
// height: 150px;
// width: 100%;
// img{
// width: auto;
// height: 100%;
// }
// }
}
.__wrap{
padding: 0.5rem;
}
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2);
@@ -39,6 +53,15 @@ header{
.__slide{
.thumbnails{
max-width: 380px;
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2);
}
@media screen and (min-width: 992px) {
width: calc(100% / 3 - #{$gutter1} * 2);
}
@media screen and (min-width: 1200px) {
width: calc(100% / 4 - #{$gutter1} * 2);
}
}
}
@@ -59,6 +82,69 @@ header{
}
}
}
// page moment
.__ressources{
.__publications{
.publications{
.__media{
padding: 0.5rem 0 0.5rem 0.5rem;
}
.__wrap{
padding: 0.5rem;
}
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1});
}
@media screen and (min-width: 992px) {
width: calc(100% / 2 - #{$gutter1});
}
@media screen and (min-width: 1200px) {
width: calc(100% / 2 - #{$gutter1});
}
}
}
.__bibliographie{
.thumbnails{
background: transparent;
a{
& > div{
div, span, p{
display: inline;
background: white;
}
}
}
}
}
}
// thumbnails participant
.thumbnails_participants{
figure{
& > div{
width: 100px;
height: 100px;
margin-left: 0.5rem;
img{
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}
}
figcaption{
&.__info{
padding: 4rem 0.5rem 0.5rem 0.5rem;
margin-top: -3rem;
background: white;
.__name{
text-transform: uppercase;
}
}
}
}
}
// @media screen and (min-width: 992px) {
// .programme{
// .row{
@@ -193,36 +279,7 @@ header{
// }
// }
//
// .thumbnails_participants{
// figure{
// & > div{
// width: 100px;
// height: 100px;
// margin-left: 0.5rem;
//
// img{
// border-radius: 50%;
// width: 100%;
// height: 100%;
// object-fit: cover;
// }
// }
// figcaption{
// &.__info{
// padding: 4rem 0.5rem 0.5rem 0.5rem;
// margin-top: -3rem;
// background: white;
// .__name{
// text-transform: uppercase;
// }
// .__qualite{
//
// }
// }
// }
// }
// }
//
// article{
// .__publications{
// & > div{
@@ -33,3 +33,20 @@
box-shadow: 0px 0px 13px 0px $color2;
}
}
@mixin shadow_participants{
figure img{
box-shadow: none;
transition: 0.3s transform ease, 0.3s box-shadow ease;
}
figure{
&:hover{
& > div img{
transform: scale(1.05);
transition: 0.3s all ease;
box-shadow: 0px 0px 13px 0px $color2;
}
}
}
}
@@ -155,23 +155,9 @@ a{
}
}
.thumbnails_participants{
*{
color: $color2;
}
.__name{
font-family: 'truenoregular';
font-size: 1rem;
}
.__qualite{
font-family: 'truenoregular';
font-size: 1rem;
font-style: italic;
}
}
// Page programme
.container{
&.programme{
h3{
@@ -182,6 +168,37 @@ a{
}
}
// page publication
article{
&.publications{
.__wrap_content{
.__head{
& *{
color: $color2;
}
.__auteur{
div{
font-family: 'cormorantBold';
font-size: 1.5rem;
}
}
.__titre{
span{
font-family: 'cormorantBoldItalic';
font-size: 1.5rem;
}
}
.__info{
margin: 1rem 0;
div{
font-family: 'cormorantBold';
font-size: 1rem;
}
}
}
}
}
}
.thumbnails{
time, .type_moment{
font-family: 'truenoregular';
@@ -208,6 +225,59 @@ a{
}
}
}
&.bibliographie{
background: transparent;
div,p{
font-family: 'cormorantBold';
font-size: 1.2rem;
}
span{
font-family: 'cormorantBoldItalic';
font-size: 1.2rem;
}
}
}
// page shadow_participants
article{
&.participant_full{
.__auteur{
h2{
font-family: 'truenoregular';
font-size: 2rem;
letter-spacing: normal;
}
}
.status{
div{
font-family: 'truenoregular';
font-style: italic;
font-size: 0.8rem;
text-align: center;
@media screen and (min-width: 768px) {
text-align: left;
}
}
}
}
}
// thumbnails_participants
.thumbnails_participants{
@include shadow_participants;
*{
color: $color2;
}
.__name{
font-family: 'truenoregular';
font-size: 1rem;
}
.__qualite{
font-family: 'truenoregular';
font-size: 0.8rem;
font-style: italic;
}
}
.paragraph--type--role-de-l-intervenant{
@@ -226,7 +296,7 @@ a{
div{
font-family: 'truenoregular';
font-size: 1rem;
text-transform: uppercase;
// text-transform: uppercase;
}
}
}
@@ -5,7 +5,7 @@ $lightgrey: #6f6d7dff;
$fond: #1d378e0d;
$underline:#d2d2ebff;
$gutter1 : 1rem;
$gutter1 : 0.5rem;
$croix_or: '../images/croix_filetsable.svg';
@@ -0,0 +1,44 @@
{#
/**
* @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.
* - 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
*/
#}
{% set id = [elements][0].content['#view_id'] %}
<div class="container {{id}}">
{% if id == 'programme' %}
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content }}
{% endblock %}
</div>
@@ -29,7 +29,6 @@
#}
{% set id = [elements][0].content['#view_id'] %}
<div class="container {{id}}">
{% if id == 'programme' %}
{{ title_prefix }}
@@ -41,4 +40,3 @@
{% block content %}
{{ content }}
{% endblock %}
</div>
@@ -0,0 +1,38 @@
{#
/**
* @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.
* - 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 class="col-sm-12 col-md-3">
{% block content %}
{{ content }}
{% endblock %}
</div>
</article>
</div>
@@ -1,4 +1,10 @@
<div class="__rs d-flex d-md-block">
{% if page == 'moments' %}
{% set class = "d-flex d-lg-block moment" %}
{% else %}
{% set class = "d-flex d-md-block" %}
{% endif %}
<div class="__rs {{class}}">
<div class="__mail">
<a href="#">
<img src="/themes/custom/popsu_colloque/images/mail.svg" alt="Mail">
@@ -45,7 +45,7 @@
%}
<h4>{{ label }}</h4>
<div class="d-lg-flex d-block">
<div class="d-lg-flex d-block pb-4">
{% for item in items %}
{{ item.content }}
{% endfor %}
@@ -45,7 +45,7 @@
%}
<h4>{{ label }}</h4>
<div class="d-lg-flex d-block">
<div class="row flex-wrap">
{% for item in items %}
{{ item.content }}
{% endfor %}
@@ -0,0 +1,29 @@
{#
/**
* @file
* Default theme implementation for a select element.
*
* Available variables:
* - attributes: HTML attributes for the <select> tag.
* - options: The <option> element children.
*
* @see template_preprocess_select()
*
* @ingroup themeable
*/
#}
{% spaceless %}
<select{{ attributes }}>
{% for option in options %}
{% if option.type == 'optgroup' %}
<optgroup label="{{ option.label }}">
{% for sub_option in option.options %}
<option value="{{ sub_option.value }}"{{ sub_option.selected ? ' selected="selected"' }}>{{ sub_option.label }}</option>
{% endfor %}
</optgroup>
{% elseif option.type == 'option' %}
<option value="{{ option.value }}"{{ option.selected ? ' selected="selected"' }}>{{ option.label }}</option>
{% endif %}
{% endfor %}
</select>
{% endspaceless %}
@@ -71,25 +71,29 @@
*
* @ingroup themeable
*/
#}
<article{{ attributes }} class="d-flex flex-wrap">
<article{{ attributes }} class="row">
<div class="__wrapper col-sm-12 col-md-9">
<div class="__img-hero">
{{content.field_image}}
</div>
<div class="__wrapper row mt-4">
<div class="__title col-12 mb-5">
<div class="__wrapper row">
<div class="__title col-12 my-3 my-lg-5">
<h2>{{label}}</h2>
</div>
<div class="__wrap_side col-sm-12 col-md-1 px-0 mt-3">
{% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
<div class="__wrap_side col-md-12 col-lg-2 mt-3">
{% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' with { page : 'moments' } %}
</div>
<div class="__wrap_content col-sm-12 col-md-11 px-0 my-3">
<div class="__wrap_content col-12 col-lg-10 my-3">
<div class="__head mb-5">
<div class="d-flex">
<div class="d-flex flex-wrap">
{{ content.field_date_du_programme }} |
{{ content.field_heure_du_moment }} |
{{ content.field_type_de_moment }}
@@ -102,13 +106,14 @@
</div>
</div>
<div class="__ressources">
<div class="__publications">
<section class="__publications">
{{content.field_publications}}
</div>
<div class="__bibliographie">
</section>
<section class="__bibliographie">
{{content.field_bibliographie}}
</div>
</section>
</div>
</div>
<div class="__wrap_side col-sm-12 col-md-3">
@@ -89,7 +89,7 @@
</figure>
</div>
<div class="__wrap_content col-sm-12 col-md-9 mx-auto">
<div class="__wrap_content col-md-12 col-lg-9 mx-auto">
<div class="content">
{{content.body}}
</div>
@@ -81,7 +81,7 @@
</div>
<div class="__wrapper row mt-5">
<div class="__wrap_side col-sm-12 col-md-1 pr-0 mt-0 mb-3">
{% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
{% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' with { page : 'presentation' } %}
</div>
<div class="__wrap_content col-sm-12 col-md-8">
{{content.body}}
@@ -72,13 +72,13 @@
* @ingroup themeable
*/
#}
<article class="d-flex">
<div class="__wrap_side col-sm-12 col-md-1 px-0 mt-3">
<article class="d-sm-flex flex-wrap d-block publications">
<div class="__wrap_side col-sm-12 col-md-12 col-lg-1">
{% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
{{content.field_telecharger_la_ressource}}
</div>
<div class="__wrapper col-sm-12 col-md-11 px-0 my-3">
<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">
{{content.field_ajouter_un_media}}
@@ -95,10 +95,10 @@
<div class="__auteur">
{{content.field_auteur}}
</div>
<div>
<div class="__titre">
{{label}}
</div>
<div class="my-3">
<div class="__info">
{{content.field_complement_d_info}}
</div>
</div>
@@ -108,5 +108,3 @@
</div>
</div>
</div>
</article>
@@ -72,7 +72,7 @@
* @ingroup themeable
*/
#}
<article{{ attributes }}>
<article{{ attributes }} class="thumbnails bibliographie">
<div>
<a href="{{url}}">
<div>
@@ -72,18 +72,20 @@
* @ingroup themeable
*/
#}
<article{{ attributes }}>
<article{{ attributes }} class=" thumbnails publications">
<div{{ content_attributes }}>
<a href="{{ url }}">
<figure class="d-flex">
<div class="d-flex">
<div class="__media">
{{content.field_ajouter_un_media}}
</div>
<figcaption class="__info">
{{ label|raw }}
{{content.field_complement_d_info|raw}}
</figcaption>
</figure>
<div class="__wrap">
<div class="__content">
{{ label|raw }}
{{content.field_complement_d_info|raw}}
</div>
</div>
</div>
</a>
</div>
</article>
@@ -0,0 +1,70 @@
{#
/**
* @file
* Default theme implementation for main view template.
*
* Available variables:
* - attributes: Remaining HTML attributes for the element.
* - css_name: A CSS-safe version of the view name.
* - css_class: The user-specified classes names, if any.
* - header: The optional header.
* - footer: The optional footer.
* - rows: The results of the view query, if any.
* - empty: The content to display if there are no rows.
* - pager: The optional pager next/prev links to display.
* - exposed: Exposed widget form/info to display.
* - feed_icons: Optional feed icons to display.
* - more: An optional link to the next page of results.
* - title: Title of the view, only used when displaying in the admin preview.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the view title.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the view title.
* - attachment_before: An optional attachment view to be displayed before the
* view content.
* - attachment_after: An optional attachment view to be displayed after the
* view content.
* - dom_id: Unique id for every view being printed to give unique class for
* Javascript.
*
* @see template_preprocess_views_view()
*
* @ingroup themeable
*/
#}
<div class="views col">
{{ title_prefix }}
{{ title }}
{{ title_suffix }}
{% if header %}
<section class="wrap_head">
{% include 'themes/custom/popsu_colloque/template/components/header_slide.html.twig' with { croix : true } %}
</section>
{% endif %}
{{ exposed }}
{{ attachment_before }}
{% if rows -%}
<section>
{{ rows }}
</section>
{% elseif empty -%}
{{ empty }}
{% endif %}
{{ pager }}
{{ attachment_after }}
{% if footer %}
<footer>
{{ footer }}
</footer>
{% endif %}
{{ feed_icons }}
</div>
@@ -34,7 +34,7 @@
#}
<div class="views">
<div class="views col">
{{ title_prefix }}
{{ title }}