SGD8-2720: Fix timeline paragraph modifiers

StadGent · Feb 14, 2024 · 66f6c4d · 66f6c4d
1 parent 5328dc1
commit 66f6c4d
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 21 deletions.
diff --git a/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--program.html.twig b/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--program.html.twig
@@ -39,27 +39,20 @@
  */
 #}
 
-{% set items_total = content.counter.0 %}
-{% set reversed = content.reversed.0 %}
+{{ attach_library('gent_base/modal') }}
+
 {% set first_timeframe = content.first_timeframe.0 %}
 {% set last_timeframe = content.last_timeframe.0 %}
 
-{% set classes = [
-  'programme-slot',
-  items_total is odd ? 'timeline-slot-odd' : 'timeline-slot-even',
-  reversed ? 'timeline-slot-reverse' : ''
-] %}
-{{ attach_library('gent_base/modal') }}
-
 {% block paragraph %}
   {% block content %}
     {% if first_timeframe == TRUE %}
-      <div class="programme-wrapper">
+      <div{{ attributes.addClass('programme-wrapper') }}>
         <h2 class="visually-hidden">programme</h2>
         <dl class="programme">
           <div class="programme__inner">
     {% endif %}
-    <div{{ attributes.addClass(classes) }} role="listitem">
+    <div class="programme-slot" role="listitem">
       <dt class="programme-slot-title">
         <h2>{{ content.title }}</h2>
       </dt>

diff --git a/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--roadmap.html.twig b/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--roadmap.html.twig
@@ -45,11 +45,14 @@
 {% block paragraph %}
     {% block content %}
         {% if first_timeframe == TRUE %}
-        <div class="roadmap-wrapper">
+        <div {{ attributes.addClass('roadmap-wrapper') }}>
             <dl class="roadmap">
         {% endif %}
+
         <h2 class="visually-hidden">{{ content.title }}</h2>
+
         {{ content.timeline_items }}
+
         {% if last_timeframe == TRUE %}
             </dl>
         </div>

diff --git a/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--timeline.html.twig b/templates/contrib/paragraphs/timeline/paragraph--timeline-frame--timeline.html.twig
@@ -44,20 +44,14 @@
 {% set first_timeframe = content.first_timeframe.0 %}
 {% set last_timeframe = content.last_timeframe.0 %}
 
-{% set classes = [
-    'timeline-slot',
-    items_total is odd ? 'timeline-slot-odd' : 'timeline-slot-even',
-    reversed ? 'timeline-slot-reverse' : ''
-] %}
-
 {% block paragraph %}
     {% block content %}
         {% if first_timeframe == TRUE %}
-        <div class="timeline-wrapper">
+        <div{{ attributes.addClass('timeline-wrapper') }}>
             <h2 class="visually-hidden">timeline</h2>
             <dl class="timeline accordion">
         {% endif %}
-        <div{{ attributes.addClass(classes) }} role="listitem">
+        <div class="timeline-slot {{ items_total is odd ? 'timeline-slot-odd' : 'timeline-slot-even'}} {{ reversed ? 'timeline-slot-reverse' : '' }}" role="listitem">
             {% if content.title %}
                 <dt>
                     <h3 class="dt-title">{{ content.title }}</h3>

diff --git a/templates/contrib/paragraphs/timeline/paragraph--timeline-item--program.html.twig b/templates/contrib/paragraphs/timeline/paragraph--timeline-item--program.html.twig
@@ -52,7 +52,7 @@
       <div class="modal-content">
         <h3>{{ content.title }}</h3>
 
-        {% if content.subtitle %}
+        {% if content.subtitle|render is not empty %}
           <p>{{ content.subtitle }}</p>
         {% endif %}
 

diff --git a/templates/contrib/paragraphs/timeline/paragraph--timeline-item--timeline.html.twig b/templates/contrib/paragraphs/timeline/paragraph--timeline-item--timeline.html.twig
@@ -56,7 +56,9 @@
                         data-controls-img="timeline-slot-img--{{ paragraph.id() }}"
                         class="accordion--button">{{ content.title }}</button>
             </h4>
+            {% if content.subtitle|render is not empty %}
             <h5 class="timeline-slot-date">{{ content.subtitle }}</h5>
+            {% endif %}
         </div>
         <div class="timeline-slot-content accordion--content" id="timeline-slot-content--{{ paragraph.id() }}" aria-hidden="{{ hidden }}" style="min-height: 100%;">
             <div class="content-image hidden-desktop">