<article class="m-preview-article m-preview-article--media" data-preview-article>
<a href="#" class="m-preview-article__link"></a>
<div class="m-preview-article__wrapper">
<div class="m-preview-article__image-wrapper">
<img src="../../img/article-2.jpg" class="m-preview-article__image">
<div class="m-preview-article__media-cta">
<svg class="a-icon a-icon--negative" role="img" title="L’interview exclusif d’Adarsh Alem">
<use xlink:href="#video" />
</svg>
</div>
</div>
<div class="m-preview-article__content-wrapper">
<a href="#" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">L’interview exclusif d’Adarsh Alem</h1>
<p class="m-preview-article__excerpt">A Pully à Genève à Berne des expositions sont organisées en l'honneur du peintre mort il y a cent ans…</p>
</a>
<a href="#" class="m-preview-article__category-link">Reportages</a>
</div>
</div>
<hr class="m-preview-article__meta-divider">
<div class="m-preview-article__meta">
<p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">2 mars 2018</span> <a class="m-preview-article__author-link" href="#">Patrick Baumann</a></p>
<a href="#" class="m-preview-article__category-link">Reportages</a>
</div>
</article>
<article class="m-preview-article {{modifiers_classes}}" data-preview-article>
<a href="{{articlelink}}" class="m-preview-article__link"></a>
<div class="m-preview-article__wrapper">
{{!-- IMAGE --}}
<div class="m-preview-article__image-wrapper">
<img src="{{path image}}" class="m-preview-article__image">
{{!-- START VIDEO: add only if it's a video header --}} {{#if videolength}}
<div class="m-preview-article__media-cta">
{{> @a-icon name="video" title=title modifier="negative" }}
</div>
{{!-- END VIDEO --}} {{/if}}
{{!-- START GALLERY: add only if it's a video header --}} {{#if gallery}}
<div class="m-preview-article__media-cta">
{{#if weekly}}
{{> @a-icon name="gallery" title=title modifier="negative" }}
{{else}}
{{> @a-gallery-number count=numphotos }}
{{/if}}
</div>
{{!-- END GALLERY --}} {{/if}}
</div>
{{!-- CONTENT --}}
<div class="m-preview-article__content-wrapper">
<a href="{{articlelink}}" class="m-preview-article__content-link">
<h1 class="m-preview-article__title">{{title}}</h1>
<p class="m-preview-article__excerpt">{{excerpt}}</p>
</a>
<a href="{{categorylink}}" class="m-preview-article__category-link">{{category}}</a>
</div>
</div>
{{!-- METAS --}}
<hr class="m-preview-article__meta-divider">
<div class="m-preview-article__meta">
<p class="m-preview-article__date-author-wrap"><span class="m-preview-article__date">{{date}}</span> <a class="m-preview-article__author-link" href="{{authorlink}}">{{author}}</a></p>
<a href="{{categorylink}}" class="m-preview-article__category-link">{{category}}</a>
</div>
</article>
.m-preview-article {
$self: &;
position: relative;
@media (max-width: $sm-breakpoint - 1) {
&:last-child {
.u-t-divider {
display: none;
}
}
}
a {
text-decoration: none;
color: inherit;
}
&__wrapper {
position: relative;
display: flex;
align-items: stretch;
@include media($sm-breakpoint) {
flex-direction: column;
}
}
&__link {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
z-index: 2;
}
&__image-wrapper {
flex: 0 0 calc(50% - 8px);
position: relative;
display: block;
padding-top: 9 / 16 * 50%;
overflow: hidden;
min-height: calc((50vw - 8px) * .5625); // Firefox hack fix on mobile size
@include fluid-props(min-height, $sm-breakpoint, $fluid-max, 200px, 330px, false);
@include media($sm-breakpoint) {
flex-basis: auto;
padding-top: 0;
margin-right: 0;
}
&::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
opacity: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
@include size(100%, 50%);
transition: opacity $transition-mid ease-out;
}
}
&__image {
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
@include object-fit(cover, center);
transform: scale(1);
transition: transform $transition-slow ease;
}
&__content-wrapper {
display: block;
flex: 0 0 50%;
padding-left: 16px;
@include media($sm-breakpoint) {
flex-basis: auto;
padding: 0;
}
.m-preview-article__category-link {
display: inline;
@include media($sm-breakpoint) {
display: none;
}
}
}
.u-t-divider {
display: block;
float: none;
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
}
&__title {
@include fluid-props(font-size, $fluid-min, $fluid-max, 15px, 30px);
@include fluid-props(line-height, $fluid-min, $fluid-max, 16px, 34px);
@include fluid-props(padding-top, $fluid-min, $fluid-max, 0px, 30px);
@include fluid-props(padding-bottom, $fluid-min, $fluid-max, 10px, 30px);
color: $color-text;
font-family: $font-secondary;
font-weight: $font-weight-bold;
z-index: 5;
position: relative;
transition: color $transition-mid ease-out;
@include hover-behaviour {
color: $color-primary;
}
}
&__excerpt {
display: none;
@include fluid-props(font-size, $fluid-min, $fluid-max, 12px, 16px);
@include fluid-props(line-height, $fluid-min, $fluid-max, 14px, 24px);
padding-bottom: 10px;
@include media(480px) {
display: block;
}
@include media($sm-breakpoint) {
padding-bottom: 10px;
}
}
&__meta-divider {
@extend .u-t-divider;
position: relative;
overflow: visible;
}
&__meta {
@include fluid-props(font-size, $fluid-min, $fluid-max, 8px, 14px);
@include fluid-props(line-height, $fluid-min, $fluid-max, 12px, 18px);
color: $color-text-light;
font-family: $font-highlight;
font-weight: $font-weight-bold;
position: relative;
display: none;
@include media($sm-breakpoint) {
display: block;
}
.u-t-category-link {
position: absolute;
top: 0;
right: 0;
}
}
&__date-author-wrap {
@include media($sm-breakpoint) {
max-width: 60%;
}
}
&__date {
position: relative;
margin-right: 18px;
&::after {
content: " ";
position: absolute;
right: -10px;
top: 10%;
width: 1px;
height: 80%;
background-color: $color-primary;
}
}
&__author-link {
@extend .u-t-author-link;
font-weight: $font-weight-normal;
display: none;
z-index: 5;
color: inherit;
@include media($sm-breakpoint) {
display: inline-block;
}
}
&__media-cta {
@include fluid-props(width height, $fluid-min, $fluid-max, 24px, 48px);
position: absolute;
background: $color-primary;
display: block;
top: 10%;
right: 0;
svg {
@include fluid-props(width height, $fluid-min, $fluid-max, 20px, 33px);
@include centerer(true, true);
}
}
&__category-link {
@extend .u-t-category-link;
@extend .u-t-category-link--small;
color: inherit;
z-index: 5;
@include media($sm-breakpoint) {
position: absolute;
right: 0;
top: 0;
}
}
/* Modifiers */
&--media {
#{ $self }__image-wrapper {
&::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
background: $color-primary;
height: 80%;
z-index: 1;
@include fluid-props(width, $lg-breakpoint, 2560px, 4px, 8px);
}
}
}
&--excerpt-on-mobile {
#{ $self }__excerpt {
display: block;
}
}
}
/**
* Hover effect
*/
.m-preview-article {
&.is-hover {
.m-preview-article__image-wrapper::before {
opacity: .6;
}
}
}
import BaseView from 'base-view';
const HOVER_STATE = 'is-hover';
export default class PreviewArticle extends BaseView {
bind() {
this.on( 'mouseenter', this.onMouseEnter.bind(this) );
this.on( 'mouseleave', this.onMouseLeave.bind(this) );
}
onMouseEnter() {
this.addClass( HOVER_STATE );
}
onMouseLeave() {
this.removeClass( HOVER_STATE );
}
}
{
"image": "/img/article-2.jpg",
"title": "L’interview exclusif d’Adarsh Alem",
"category": "Reportages",
"excerpt": "A Pully à Genève à Berne des expositions sont organisées en l'honneur du peintre mort il y a cent ans…",
"date": "2 mars 2018",
"author": "Patrick Baumann",
"articlelink": "#",
"categorylink": "#",
"authorlink": "#",
"videolength": "3:25",
"modifiers": [
"media"
]
}