grid programme

This commit is contained in:
2020-07-16 17:24:02 +02:00
parent ee476d177c
commit 08b0754135
134 changed files with 15445 additions and 25 deletions
File diff suppressed because one or more lines are too long
@@ -1,3 +1,3 @@
main a,main h2{color:#1d378eff}main #txt_present,main .blue{color:#1d378eff}main #block-views-block-slide-programme-block-1 .thumbnails a{color:#000}#block-popsu-colloque-local-tasks ul{display:flex;margin-top:2rem;margin-bottom:0;padding:0}#block-popsu-colloque-local-tasks ul li{margin:.5rem}#toolbar-administration{position:fixed;z-index:1000}*{box-sizing:border-box}body,html{font-size:16px;line-height:1.2}li,ol,ul{list-style:none}h1,h2,h3,h4{margin:0;padding:0}header{height:130px;padding:0 1rem}header div{height:inherit}#block-popsu-colloque-branding{position:relative;z-index:999;width:100%;padding:1rem 0 0 0}#block-popsu-colloque-branding>div>a{position:relative;display:inline-block;height:8rem;max-height:150px}#block-popsu-colloque-branding>div>a img{width:auto;height:100%;-o-object-fit:contain;object-fit:contain}#block-mainnavigation{display:flex;width:auto;padding-bottom:1rem;border-left:1px solid red;align-items:flex-end}#block-mainnavigation ul{flex-wrap:nowrap}#block-mainnavigation ul li{padding:0 1rem;border-right:1px solid #000}#block-mainnavigation ul li a{white-space:nowrap}.site_setting_entity img{width:50%;height:auto}.__img-hero{height:400px}.__img-hero img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}#txt_present>div{margin:2rem auto}/*! Flickity v2.2.1
main a,main h2{color:#1d378eff}main #txt_present,main .blue{color:#1d378eff}main #block-views-block-slide-programme-block-1 .thumbnails a{color:#000}#block-popsu-colloque-local-tasks ul{display:flex;margin-top:2rem;margin-bottom:0;padding:0}#block-popsu-colloque-local-tasks ul li{margin:.5rem}#toolbar-administration{position:fixed;z-index:1000}*{box-sizing:border-box}body,html{font-size:16px;line-height:1.2}li,ol,ul{list-style:none}h1,h2,h3,h4{margin:0;padding:0}header{height:130px;padding:0 1rem}header div{height:inherit}#block-popsu-colloque-branding{position:relative;z-index:999;width:100%;padding:1rem 0 0 0}#block-popsu-colloque-branding>div>a{position:relative;display:inline-block;height:8rem;max-height:150px}#block-popsu-colloque-branding>div>a img{width:auto;height:100%;-o-object-fit:contain;object-fit:contain}#block-mainnavigation{display:flex;width:auto;padding-bottom:1rem;border-left:1px solid red;align-items:flex-end}#block-mainnavigation ul{flex-wrap:nowrap}#block-mainnavigation ul li{padding:0 1rem;border-right:1px solid #000}#block-mainnavigation ul li a{white-space:nowrap}.site_setting_entity img{width:50%;height:auto}.__img-hero{height:400px}.__img-hero img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}#txt_present>div{margin:2rem auto}.programme .views section{margin:0 0 5rem 0}/*! Flickity v2.2.1
https://flickity.metafizzy.co
---------------------------------------------- */.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{position:relative;overflow:hidden;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;color:#333;border:none;background:rgba(255,255,255,.75)}.flickity-button:hover{cursor:pointer;background:#fff}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{cursor:auto;pointer-events:none;opacity:.3}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;transform:translateY(-50%);border-radius:50%}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{right:10px;left:auto}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;top:20%;left:20%;width:60%;height:60%}.flickity-page-dots{line-height:1;position:absolute;bottom:-25px;width:100%;margin:0;padding:0;list-style:none;text-align:center}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;cursor:pointer;opacity:.25;border-radius:50%;background:#333}.flickity-page-dots .dot.is-selected{opacity:1}#block-views-block-dernieres-publications-block-1 .views section:first-child,#block-views-block-slide-programme-block-1 .views section:first-child{display:flex;width:100%;justify-content:space-between;align-items:baseline}.flickity-button{background:0 0}.flickity-button:hover{background:0 0}.flickity-button-icon{fill:#000}.flickity-button:disabled{display:none}.side_notes img,article img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.side_notes{position:relative}.side_notes>*{position:absolute;width:300px}.side_notes .d-flex{flex-direction:column}.thumbnails{width:calc(100% / 4);min-width:250px;height:auto;margin:1rem 0;transition:.3s transform ease,.3s box-shadow ease;transform:scale(1);background:#fff;box-shadow:none}.thumbnails a{display:block;height:100%}.thumbnails:hover{transition:.3s all ease;transform:scale(1.05);box-shadow:0 0 13px 0 #1d378eff}.thumbnails>.__wrap{padding:1rem}.thumbnails .__media{margin-right:1rem}.thumbnails .__media figcaption{height:100%}.thumbnails .__media figcaption img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.thumbnails .d-flex{padding:1rem}.thumbnails figcaption{height:100px}.thumbnails figcaption img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
---------------------------------------------- */.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{position:relative;overflow:hidden;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;color:#333;border:none;background:rgba(255,255,255,.75)}.flickity-button:hover{cursor:pointer;background:#fff}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{cursor:auto;pointer-events:none;opacity:.3}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;transform:translateY(-50%);border-radius:50%}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{right:10px;left:auto}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;top:20%;left:20%;width:60%;height:60%}.flickity-page-dots{line-height:1;position:absolute;bottom:-25px;width:100%;margin:0;padding:0;list-style:none;text-align:center}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;cursor:pointer;opacity:.25;border-radius:50%;background:#333}.flickity-page-dots .dot.is-selected{opacity:1}#block-views-block-dernieres-publications-block-1 .views section:first-child,#block-views-block-slide-programme-block-1 .views section:first-child{display:flex;width:100%;justify-content:space-between;align-items:baseline}#block-views-block-dernieres-publications-block-1 .views section .thumbnails,#block-views-block-slide-programme-block-1 .views section .thumbnails{margin:1rem}#block-views-block-dernieres-publications-block-1 .views section .flickity-slider,#block-views-block-slide-programme-block-1 .views section .flickity-slider{margin-left:1rem}.flickity-button{background:0 0}.flickity-button:hover{background:0 0}.flickity-button-icon{fill:#000}.flickity-button:disabled{display:none}.side_notes img,article img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.side_notes{position:relative}.side_notes>*{position:absolute;width:300px}.side_notes .d-flex{flex-direction:column}.thumbnails{width:calc(100% / 4);min-width:250px;height:auto;margin:1rem 0;transition:.3s transform ease,.3s box-shadow ease;transform:scale(1);background:#fff;box-shadow:none}.thumbnails a{display:block;height:100%}.thumbnails:hover{transition:.3s all ease;transform:scale(1.05);box-shadow:0 0 13px 0 #1d378eff}.thumbnails>.__wrap{padding:1rem}.thumbnails .__media{margin-right:1rem}.thumbnails .__media figure{height:100%}.thumbnails .__media figure img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.thumbnails .d-flex{padding:1rem}.thumbnails figure{height:100px}.thumbnails figure img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.programme .row{margin:0}.programme .thumbnails{width:100%;margin:0}.programme .thumbnails figure{height:250px}@media screen and (min-width:960px){.programme .row{margin:1rem calc(-1rem)}.programme .thumbnails{width:calc(50% - 1rem * 2);margin:0 1rem}.programme .thumbnails figure{height:250px}}
@@ -14,3 +14,11 @@ img{
margin: 2rem auto;
}
}
.programme{
.views{
section{
margin: 0 0 5rem 0;
}
}
}
@@ -8,6 +8,20 @@
justify-content: space-between;
align-items: baseline;
}
// .__day{
// border-right: 1px solid $color1;
// margin-right: 1rem;
// padding-right: 1rem;
// }
.thumbnails{
&:first-child{
// margin-left: 2rem;
}
margin: 1rem;
}
.flickity-slider{
margin-left: 1rem;
}
}
}
}
@@ -31,7 +31,7 @@
}
.__media{
margin-right: 1rem;
figcaption{
figure{
height: 100%;
img{
width: 100%;
@@ -40,13 +40,13 @@
}
}
}
.d-flex{
.d-flex{
padding: 1rem;
}
}
.thumbnails{
figcaption{
figure{
height: 100px;
img{
width: 100%;
@@ -55,3 +55,32 @@
}
}
}
.programme{
.row{
margin: 0;
}
.thumbnails{
width: 100%;
margin: 0;
figure{
height: 250px;
}
}
}
@media screen and (min-width: 960px) {
.programme{
.row{
margin: $gutter1 calc(-#{$gutter1});
}
.thumbnails{
width: calc( 50% - #{$gutter1} * 2);
margin: 0 $gutter1;
figure{
height: 250px;
}
}
}
}
@@ -1,3 +1,6 @@
$color1: red;
$color2: #1d378eff;
$col_black: black;
$gutter1 : 1rem;
@@ -0,0 +1,41 @@
{#
/**
* @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}}">
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content }}
{% endblock %}
</div>
@@ -0,0 +1,18 @@
<figure class="__img">
{{fields.field_image.content}}
</figure>
<div class="__wrap">
<div class="d-flex m-0">
<time datetime="{{fields.field_heure_du_moment.content}}" class="__date mr-1">
{{fields.field_heure_du_moment.content}}
</time>
{% if fields.field_type_de_moment.content %}
<div class="type_moment">
|{{ fields.field_type_de_moment.content }}
</div>
{% endif %}
</div>
<div class="__content">
{{fields.title.content}}
</div>
</div>
@@ -0,0 +1,82 @@
{#
/**
* @file
* Default theme implementation to display a single page.
*
* The doctype, html, head and body tags are not in this template. Instead they
* can be found in the html.html.twig template in this 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):
* - messages: Status and error messages. Should be displayed prominently.
* - 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.primary_menu: Items for the primary menu region.
* - page.secondary_menu: Items for the secondary menu region.
* - page.highlighted: Items for the highlighted content region.
* - page.help: Dynamic help text, mostly for admin pages.
* - page.content: The main content of the current page.
* - page.sidebar_first: Items for the first sidebar.
* - page.sidebar_second: Items for the second sidebar.
* - page.footer: Items for the footer region.
* - page.breadcrumb: Items for the breadcrumb region.
*
* @see template_preprocess_page()
* @see html.html.twig
*
* @ingroup themeable
*/
#}
<div class="layout-container">
<header role="banner">
{{ page.header }}
</header>
{{ page.primary_menu }}
{{ page.secondary_menu }}
{{ page.breadcrumb }}
{{ page.highlighted }}
{{ page.help }}
<main role="main" class="d-flex container 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_second %}
<aside class="layout-sidebar-second col-2" role="complementary">
{{ page.sidebar_second }}
</aside>
{% endif %}
</main>
{% if page.footer %}
<footer role="contentinfo">
{{ page.footer }}
</footer>
{% endif %}
</div>{# /.layout-container #}
@@ -0,0 +1,35 @@
{#
/**
* @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
*/
#}
{% include 'themes/custom/popsu_colloque/template/components/thumbnails.html.twig' %}
@@ -32,15 +32,4 @@
*/
#}
<figcaption class="__img">
{{fields.field_image.content}}
</figcaption>
<div class="__wrap">
<time datetime="{{fields.field_heure_du_moment.content}}" class="__date">
{{fields.field_heure_du_moment.content}}
</time>
<div class="__content">
{{fields.title.content}}
</div>
</div>
{% include 'themes/custom/popsu_colloque/template/components/thumbnails.html.twig' %}
@@ -0,0 +1,36 @@
{#
/**
* @file
* Default theme implementation to display a view of unformatted rows.
*
* Available variables:
* - title: The title of this group of rows. May be empty.
* - rows: A list of the view's row items.
* - attributes: The row's HTML attributes.
* - content: The row's content.
* - view: The view object.
* - default_row_class: A flag indicating whether default classes should be
* used on rows.
*
* @see template_preprocess_views_view_unformatted()
*
* @ingroup themeable
*/
#}
<section>
{% if title %}
<h3>{{ title }}</h3>
{% endif %}
<div class="row">
{% for row in rows %}
{%
set row_classes = [
default_row_class ? 'thumbnails',
]
%}
<div{{ row.attributes.addClass(row_classes) }}>
{{- row.content -}}
</div>
{% endfor %}
</div>
</section>
@@ -17,10 +17,12 @@
* @ingroup themeable
*/
#}
{# <div class="__day"> #}
{% if title %}
<h3>{{ title }}</h3>
{# <h3>{{ title }}</h3> #}
{% endif %}
<div class="__slide">
{# <div class="d-flex"> #}
{% for row in rows %}
{%
set row_classes = [
@@ -31,4 +33,5 @@
{{- row.content -}}
</article>
{% endfor %}
</div>
{# </div> #}
{# </div> #}
@@ -0,0 +1,69 @@
{#
/**
* @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">
{{ title_prefix }}
{{ title }}
{{ title_suffix }}
{% if header %}
<section>
<h2>{{ header }}</h2>
</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>
@@ -0,0 +1,75 @@
{#
/**
* @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">
{{ title_prefix }}
{{ title }}
{{ title_suffix }}
{% if header %}
<section>
<h2>{{ header }}</h2>
<div class="more_link">
<a class="blue" href="{{more['#url']}}">{{ more['#title'] }}<span>+</span></a>
</div>
</section>
{% endif %}
{{ exposed }}
{{ attachment_before }}
{% if rows -%}
<section>
<div class="__slide">
{{ rows }}
</div>
</section>
{% elseif empty -%}
{{ empty }}
{% endif %}
{{ pager }}
{{ attachment_after }}
{% if footer %}
<footer>
{{ footer }}
</footer>
{% endif %}
{{ feed_icons }}
</div>