Portfolio - Components

View All Components

Component: Timeline

Features:

  1. add events on timeline

Notes:

  1. duplicate paragraphs to admin faster


 

Watch Short Video

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget ligula vitae urna pharetra egestas. Suspendisse sed nunc dolor. Phasellus non varius nulla

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget ligula vitae urna pharetra egestas. Suspendisse sed nunc dolor. Phasellus non varius nulla

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget ligula vitae urna pharetra egestas. Suspendisse sed nunc dolor. Phasellus non varius nulla

paragraph--timeline-repeater.html.twig

 
% set theme = paragraph.field_theme_color.value %}


{{ attach_library('hcann_subtheme/timeline') }}

<style> {# workaround outside <head> for :after #}

.por-timeline-7 .timeline:after {

    background-color: var(--{{ theme }});

</style>

<section class="por-timeline-7 bg-light py-3 py-md-5 py-xl-4" style="--por-tl-circle-border-color: var(--{{ theme }}); --por-tl-indicator-color: var(--{{ theme }});">

    <div class="container">

      <div class="row justify-content-center">

        <div class="col-10 col-md-12 col-xl-10 col-xxl-9">

         <ul class="timeline">

        {% block paragraph %}

            {% block content %}

              {{ content|without('field_theme_color') }}

            {% endblock %}

        {% endblock paragraph %}

          </ul>

        </div>

      </div>

    </div>

</section>
paragraph--timeline.html.twig

 
{% set paragraph_parent = paragraph.getParentEntity() %}

{% set theme = paragraph_parent.field_theme_color.value %}


{% block paragraph %}

    {% block content %}

<li class="timeline-item">

    <div class="timeline-body">

    <div class="timeline-meta">

        <div class="d-inline-flex flex-column px-2 py-1 text-white bg-{{ theme }} border border-success-subtle rounded-2 text-md-end">

        <span class="fw-bold">{{ content.field_timeline_date.0 }}</span>

        </div>

    </div>

    <div class="timeline-content timeline-indicator">

        <div class="card border-1 border-color-{{ theme }} shadow-sm">

        <div class="card-body p-xl-4">

            {{ content.field_event_info.0 }}

        </div>

        </div>

    </div>

    </div>

</li>

    {% endblock %}

{% endblock paragraph %}