Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Styleguide/popover fullwidth teaser #696

Merged
merged 3 commits into from
Nov 30, 2023
Merged

Styleguide/popover fullwidth teaser #696

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
15e0e41
Add popover caption to fullwidth teaser
alinekeller Nov 24, 2023
f7003aa
Fix <picture> height
alinekeller Nov 27, 2023
1da0d50
Create component variants
alinekeller Nov 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions assets/components/organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,16 @@

<div class="fullwidth-teaser fullwidth-teaser-horizontal{% if thinner_teaser %} thinner-teaser{% endif %}">

{% if has_image_legend|default(false) %}
<figure class="cover">
{% include '@atoms/picture/picture-fullwidth-teaser.twig' %}
<figcaption>
{% include '@atoms/popover/popover.twig' %}
</figcaption>
</figure>
{% else %}
{% include '@atoms/picture/picture-fullwidth-teaser.twig' %}
{% endif %}

<div class="fullwidth-teaser-text">

Expand Down
38 changes: 38 additions & 0 deletions assets/components/organisms/fullwidth-teaser/fullwidth-teaser-legend.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<div class="fullwidth-teaser">

<figure class="cover">
{% include '@atoms/picture/picture-fullwidth-teaser.twig' %}
<figcaption>
{% include '@atoms/popover/popover.twig' %}
</figcaption>
</figure>

<div class="fullwidth-teaser-text">

<div class="fullwidth-teaser-header">
<div class="fullwidth-teaser-title">
<h3>
{% if not title %}{% set title %}Évaluer la durabilité dans le domaine spatial{% endset %}{% endif %}
{{title}}
</h3>
</div>
<a href="#" aria-label="En savoir plus sur {{title}}" class="btn btn-primary triangle-outer-bottom-right d-none d-xl-block">
En savoir plus
{% include '@atoms/icon/icon.twig' with {icon: 'icon-chevron-right'} %}
</a>
</div>

<div class="fullwidth-teaser-content">
<p>
{% if not content %}
{% set content %}Le nouveau Space Sustainability Rating accueilli par eSpace, le centre spatial de l’EPFL, encourage le secteur de l’espace à concevoir et à mettre en œuvre des missions spatiales durables et responsables — montrant ainsi la voie pour assurer à long terme une approche durable de l’environnement spatial.{% endset %}
{% endif %}
{{content}}
</p>
</div>

<div class="fullwidth-teaser-footer">
<a href="#" aria-label="En savoir plus sur Tech Transfer" class="btn btn-primary btn-block d-xl-none">En savoir plus</a>
</div>
</div>
</div>
13 changes: 10 additions & 3 deletions assets/components/organisms/fullwidth-teaser/fullwidth-teaser.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,17 @@
width: 100%;
height: auto;
}
figure{
figure,
figure picture,
figure img {
margin-bottom: 0;
}

figure picture,
figure img {
height: 100%;
}

picture,
figure,
.fullwidth-teaser-text {
Expand Down Expand Up @@ -184,11 +191,11 @@
border-top-color: color.adjust($red, $lightness: -15%);
}
}

&:active:after {
border-top-color: color.adjust($red-dark, $lightness: -10%);
}

&:focus {
outline: 0 !important;
}
Expand Down
6 changes: 6 additions & 0 deletions assets/components/organisms/fullwidth-teaser/fullwidth-teaser.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
title: Fullwidth teaser
name: fullwidth-teaser
variants:
- name: legend
title: Fullwidth teaser with image legend
notes: |
The [popover](#/atoms/popover) component can be used on any Fullwidth teaser variant in order to add a legend to the image.

The markup structure is similar to the [cover](#/molecules/cover) component.
- name: horizontal
title: Horizontal
- name: left
Expand Down
44 changes: 44 additions & 0 deletions assets/components/organisms/headlines/headlines-legend.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
{% macro card_link(card) %}
<a href="#" class="card link-trapeze-horizontal">
<div class="card-body">
<h3 class="card-title">{{ card.title }}</h3>
<div class="card-info">
{% if card.date %}
<span class="card-info-date">
<time datetime="DATETIME HERE">{{ card.date }}</time>
</span>
{% endif %}
{% for item in card.info %}
<span>{{ item }}</span>
{% endfor %}
</div>
<p>{{ card.content }}</p>
</div>
</a>
{% endmacro %}
{% import _self as macros %}

{% set bottomlink = bottomlink|default(true) %}

{# The intro fullwidth teaser #}
{% include '@organisms/fullwidth-teaser/fullwidth-teaser-horizontal.twig' with { has_image_legend: true } %}

{# First teasers #}
<div class="container pb-5 offset-xl-top pt-5 pt-xl-0">
<div class="row">
<div class="col-lg-10 offset-lg-1">
<div class="row mb-4">
{% for card in homepage.section_one.cards %}
<div class="col-md-6 d-flex">
{{ macros.card_link(card) }}
</div>
{% endfor %}
</div>
{% if bottomlink %}
<p class="text-center">
<a href="#">{{ homepage.section_one.readmore }}</a>
</p>
{% endif %}
</div>
</div>
</div>
3 changes: 3 additions & 0 deletions assets/components/organisms/headlines/headlines.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@
title: Headlines
name: headlines
variants:
- name: legend
title: Headlines with image legend
Loading