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

SGD8-1963: Change timeline templates #966

Merged
merged 4 commits into from
Jan 4, 2024
Merged

SGD8-1963: Change timeline templates #966

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1a48e91
SGD8-1963: Change timeline templates
SvenVdv Dec 19, 2023
9e2ab5d
SGD8-1963: Change accordion + timeline paragraph cta/important-note
SvenVdv Dec 22, 2023
02ff77d
SGD8-1963: Add cta class for timeline
SvenVdv Dec 22, 2023
0cab6d6
SGD8-1963: Remove duplicated lines
Michaelvdwalle Jan 4, 2024
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
4 changes: 2 additions & 2 deletions gent_base.theme
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -470,8 +470,8 @@ function gent_base_preprocess_field(&$variables) {
break;
case 'roadmap':
$variables['items'][$key]['content']['#prefix'] =
'<div class="roadmap-wrapper"><h2 class="visually-hidden">' . t('roadmap') . '</h2>' .
'<dl class="roadmap accordion">';
'<div class="roadmap-wrapper">' .
'<dl class="roadmap">';
break;
}
}
Expand Down
20 changes: 2 additions & 18 deletions templates/contrib/paragraphs/timeline/paragraph--timeline-frame--roadmap.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,25 +39,9 @@
*/
#}

{% set items_total = content.counter.0 %}
{% set reversed = content.reversed.0 %}

{% set classes = [
'timeline-slot',
items_total is odd ? 'timeline-slot-odd' : 'timeline-slot-even',
reversed ? 'timeline-slot-reverse' : ''
] %}

{% block paragraph %}
{% block content %}
<div{{ attributes.addClass(classes) }} role="listitem">
{% if content.title %}
<dt>
<h3 class="dt-title">{{ content.title }}</h3>
</dt>
{% endif %}

{{ content.timeline_items }}
</div>
<h2 class="visually-hidden">{{ content.title }}</h2>
{{ content.timeline_items }}
{% endblock %}
{% endblock paragraph %}
102 changes: 66 additions & 36 deletions templates/contrib/paragraphs/timeline/paragraph--timeline-item--roadmap.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,49 +39,79 @@
*/
#}

<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false"
aria-controls="timeline-slot-content--{{ paragraph.id() }}"
data-controls-img="timeline-slot-img--{{ paragraph.id() }}"
class="accordion--button">{{ content.title }}</button>
</h4>
<h5 class="timeline-slot-date">{{ content.subtitle }}</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--{{ paragraph.id() }}" aria-hidden="true">
<div class="content-image hidden-desktop">
{% if content.field_image|render is not empty %}
<div class="image-gallery--wrapper single">
{{ content.field_image }}
</div>
{% endif %}
{% if content.field_video|render is not empty %}
<div class="video-wrapper">
<div class="video-inner-wrapper">
{{ content.field_video }}
</div>
</div>
{% endif %}
</div>
{{ content.field_text }}
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--{{ paragraph.id() }}" aria-hidden="true">
{% set classes = [
'timeline-slot',
] %}

{% set note_type = 'important' %}
SvenVdv marked this conversation as resolved.
Show resolved Hide resolved
{% set note_icon = 'icon-exclamation-circle' %}
{% set note_text = 'Important info'|t %}

{% if content.field_important_note|render == 'payment' %}
{% set note_type = 'payment' %}
{% set note_icon = 'icon-euro' %}
{% set note_text = 'Payment info'|t %}
{% elseif content.field_important_note|render == 'timebound' %}
{% set note_type = 'timebound' %}
{% set note_icon = 'icon-clock' %}
{% set note_text = 'Time-bound info'|t %}
{% elseif content.field_important_note|render == 'unmissable' %}
{% set note_type = 'unmissable' %}
{% set note_icon = 'icon-exclamation-circle' %}
{% set note_text = 'Not to be missed info'|t %}
{% endif %}

<div{{ attributes.addClass(classes) }} role="listitem">
<div class="item">
<dd class="item__image">
<div class="timeline-slot-content timeline-slot-content__img">
{% if content.field_image|render is not empty %}
<div class="image-gallery--wrapper single">
{{ content.field_image }}
</div>
{% endif %}
{% if content.field_video|render is not empty %}
<div class="video-wrapper">
<div class="video-inner-wrapper">
{{ content.field_video }}
</div>
</div>
</dd>
<dd class="item__content">
<div class="timeline-slot-header">
<h3 class="timeline-slot-title">
{{ content.title }}
</h3>
<h4 class="timeline-slot-date">{{ content.subtitle }}</h4>
</div>
<div class="timeline-slot-content">
<div class="content-text">
<p class="important-note note--{{ note_type }}">
<i class="{{ note_icon }}" aria-hidden="true"></i>
<span>{{ note_text }}</span>
</p>

{{ content.field_text }}

<p class="important-note note--{{ note_type }}">
<i class="{{ note_icon }}" aria-hidden="true"></i>
<span>{{ note_text }}</span>
</p>
</div>

<div class="content-btn">
<button type="button" class="button button-primary icon-arrow-right ">
CTA button
</button>
</div>

{% if content.field_paragraphs|render is not empty %}
<div class="accordion--link dropdown--link">
<button aria-controls="accordion--link--single--content--{{ paragraph.id() }}" type="button" class="accordion--button accordion--link--button" aria-expanded="false" >
{{ 'More info'|t }}
<i class="icon-chevron-down" aria-hidden="true"></i>
</button>
<div id="accordion--link--single--content--{{ paragraph.id() }}" class="accordion--link--content" aria-hidden="true" hidden="hidden">
{{ content.field_paragraphs }}
</div>
</div>
{% endif %}
</div>
</dd>
</div>
</div>
48 changes: 20 additions & 28 deletions templates/contrib/paragraphs/timeline/paragraph--timeline-item--timeline.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,40 +38,16 @@
* @ingroup themeable
*/
#}

{% set classes = [
'timeline-slot'
] %}

<div{{ attributes.addClass(classes) }} role="listitem">
<dt>
<h3 class="dt-title">{{ content.title }}</h3>
</dt>
<dd class="show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--{{ paragraph.id() }}" aria-hidden="true">
{% if content.field_image|render is not empty %}
<div class="image-gallery--wrapper single">
{{ content.field_image }}
</div>
{% endif %}
{% if content.field_video|render is not empty %}
<div class="video-wrapper">
<div class="video-inner-wrapper">
{{ content.field_video }}
</div>
</div>
{% endif %}
</div>
</dd>
<dd>
<div class="item">
<dd class="item__content">
<div class="timeline-slot-header">
<h4 class="timeline-slot-title">
<button aria-expanded="false"
aria-controls="timeline-slot-content--{{ paragraph.id() }}"
data-controls-img="timeline-slot-img--{{ paragraph.id() }}"
class="accordion--button">{{ content.subtitle }}</button>
class="accordion--button">{{ content.title }}</button>
</h4>
<span class="timeline-slot-date"></span>
<h5 class="timeline-slot-date">{{ content.subtitle }}</h5>
</div>
<div class="timeline-slot-content accordion--content" id="timeline-slot-content--{{ paragraph.id() }}" aria-hidden="true">
<div class="content-image hidden-desktop">
Expand All @@ -91,4 +67,20 @@
{{ content.field_text }}
</div>
</dd>
<dd class="item__image-desktop show-desktop-only">
<div class="timeline-slot-content timeline-slot-content__img accordion--content" id="timeline-slot-img--{{ paragraph.id() }}" aria-hidden="true">
{% if content.field_image|render is not empty %}
<div class="image-gallery--wrapper single">
{{ content.field_image }}
</div>
{% endif %}
{% if content.field_video|render is not empty %}
<div class="video-wrapper">
<div class="video-inner-wrapper">
{{ content.field_video }}
</div>
</div>
{% endif %}
</div>
</dd>
</div>