carroussel actus
This commit is contained in:
ouidade
parent
a0e5c1d028
commit
f2891d2beb
|
|
@ -1075,6 +1075,77 @@ footer span.totop #toTop .arrow-up::before {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#actus-caroussel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
#actus-caroussel .__timeline-arrows {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
#actus-caroussel .__timeline-arrows button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
#actus-caroussel .__timeline-arrows button:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
#actus-caroussel .__timeline-arrows button svg {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
#actus-caroussel h2 {
|
||||
width: fit-content;
|
||||
}
|
||||
#actus-caroussel .content-actus .view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
width: 100vw;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row {
|
||||
width: 25%;
|
||||
padding: 1rem;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images {
|
||||
-moz-border-radius: 9px; /* pour Mozilla */
|
||||
-khtml-border-radius: 9px; /* pour Safari et Chrome */
|
||||
-webkit-border-radius: 9px; /* pour Safari sur Mac */
|
||||
border-radius: 9px; /* CSS3 */
|
||||
background-color: red;
|
||||
height: 160px;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_images img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 160px;
|
||||
object-fit: cover;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_type_d_actualite {
|
||||
text-transform: uppercase;
|
||||
color: red;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row .node-type-actualite .field_field_date {
|
||||
color: red;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row .node-type-actualite .field_title h2 {
|
||||
margin: 0;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row .node-type-actualite .field_title h2 a {
|
||||
font-size: 0.8rem;
|
||||
color: rgb(7, 50, 194);
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row .node-type-actualite .field_body p {
|
||||
margin: 0;
|
||||
}
|
||||
#actus-caroussel .content-actus .views-row:nth-child(odd) {
|
||||
position: relative;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
/*pages*/
|
||||
#home .content_container #block-quartiers-de-demain-titredepage {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
#actus-caroussel{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.__timeline-arrows{
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
|
||||
button{
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
&:hover{
|
||||
opacity: 0.5;
|
||||
}
|
||||
svg{
|
||||
padding: 0.5rem;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
h2{
|
||||
width: fit-content;
|
||||
}
|
||||
// html.js.sr body div.dialog-off-canvas-main-canvas div.layout-container.home main#home div.layout-content div.content_container div.layout.layout--onecol div.layout__region.layout__region--content div.block-region-content div#actus-caroussel.views-element-container div.content-actus div div.js-view-dom-id-b0034e5565032847800e2aa5b7dc6211f2b856c751ed2284dfe542976a01c20c
|
||||
.content-actus{
|
||||
.view{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
width: 100vw;
|
||||
|
||||
}
|
||||
.views-row{
|
||||
width: 25%;
|
||||
padding: 1rem;
|
||||
.node-type-actualite{
|
||||
.field_field_images{
|
||||
-moz-border-radius: 9px; /* pour Mozilla */
|
||||
-khtml-border-radius: 9px; /* pour Safari et Chrome */
|
||||
-webkit-border-radius: 9px; /* pour Safari sur Mac */
|
||||
border-radius: 9px; /* CSS3 */
|
||||
background-color: red;
|
||||
height: 160px;
|
||||
margin-bottom: 0.6rem;
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 160px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.field_field_type_d_actualite{
|
||||
text-transform: uppercase;
|
||||
color: red;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.field_field_date{
|
||||
color: red;
|
||||
}
|
||||
.field_title{
|
||||
h2{
|
||||
margin: 0;
|
||||
a{
|
||||
font-size: 0.8rem;
|
||||
color: $blue_QDD;
|
||||
}
|
||||
}
|
||||
}
|
||||
.field_body{
|
||||
p{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.views-row:nth-child(odd){
|
||||
position: relative;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -28,6 +28,7 @@
|
|||
@import "partials/slick-theme";
|
||||
@import "partials/slick";
|
||||
@import "partials/timeline";
|
||||
@import "partials/actu-caroussel-home";
|
||||
|
||||
// @import "partials/slick_custom";
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
{#
|
||||
/**
|
||||
* @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.
|
||||
* - in_preview: Whether the plugin is being rendered in preview mode.
|
||||
* - 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 id="actus-caroussel"{{ attributes }}>
|
||||
{{ title_prefix }}
|
||||
{% if label %}
|
||||
<h2{{ title_attributes }}>{{ label }}</h2>
|
||||
{% endif %}
|
||||
{{ title_suffix }}
|
||||
<div class="__timeline-arrows">
|
||||
<button id='arrowPrev' class="arrow arrow__prev">
|
||||
{% include active_theme_path() ~ '/dist/assets/img/prev.svg' %}
|
||||
</button>
|
||||
<button id='arrowNext' class="arrow arrow__next">
|
||||
{% include active_theme_path() ~ '/dist/assets/img/next.svg' %}
|
||||
</button>
|
||||
</div>
|
||||
{% block content %}
|
||||
<div class='content-actus'> {{ content }}</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
{#
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
#}
|
||||
{%
|
||||
set classes = [
|
||||
dom_id ? 'js-view-dom-id-' ~ dom_id,
|
||||
'view',
|
||||
]
|
||||
%}
|
||||
<div{{ attributes.addClass(classes) }}>
|
||||
{{ title_prefix }}
|
||||
{{ title }}
|
||||
{{ title_suffix }}
|
||||
|
||||
{% if header %}
|
||||
<header>
|
||||
{{ header }}
|
||||
</header>
|
||||
{% endif %}
|
||||
|
||||
{{ exposed }}
|
||||
{{ attachment_before }}
|
||||
|
||||
{% if rows -%}
|
||||
{{ rows }}
|
||||
{% elseif empty -%}
|
||||
{{ empty }}
|
||||
{% endif %}
|
||||
{{ pager }}
|
||||
|
||||
{{ attachment_after }}
|
||||
{{ more }}
|
||||
|
||||
{% if footer %}
|
||||
<footer>
|
||||
{{ footer }}
|
||||
</footer>
|
||||
{% endif %}
|
||||
|
||||
{{ feed_icons }}
|
||||
</div>
|
||||
Loading…
Reference in New Issue