DIA Frontend

Timeline 

<!-- ### Begin: Element timeline ### -->
<div id="c136" class="frame frame-default frame-type-timeline frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <header class="frame-header">
                <h2 class="element-header">
                    Timeline
                </h2>
            </header>
            <div class="timeline">
                <div class="timeline-item lax" data-lax-preset="fadeInLeft">
                    <div class="timeline-item-inner">
                        <div class="timeline-item-marker timeline-item-icon">
                            <span><i class="svg-pin-marker-18x18"></i></span>
                        </div>
                        <div class="timeline-item-date">
                            <time datetime="2019-01-17">January / 2019</time>
                        </div>
                        <div class="timeline-item-header">
                            <h3 class="timeline-item-header-headline">Header Milestone 1</h3>
                        </div>
                        <div class="timeline-item-text">
                            <p>Lorem ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="timeline-item lax" data-lax-preset="fadeInRight">
                    <div class="timeline-item-inner">
                        <div class="timeline-item-marker">
                            <span></span>
                        </div>
                        <div class="timeline-item-date">
                            <time datetime="2018-05-17">May / 2018</time>
                        </div>
                        <div class="timeline-item-header">
                            <h3 class="timeline-item-header-headline">Header 1</h3>
                        </div>
                        <div class="timeline-item-text">
                            <p>Lorem ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="timeline-item lax" data-lax-preset="fadeInLeft">
                    <div class="timeline-item-inner">
                        <div class="timeline-item-marker">
                            <span></span>
                        </div>
                        <div class="timeline-item-date">
                            <time datetime="2017-11-17">November / 2017</time>
                        </div>
                        <div class="timeline-item-header">
                            <h3 class="timeline-item-header-headline">Header 2</h3>
                        </div>
                        <div class="timeline-item-text">
                            <p>Lorem ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="timeline-item lax" data-lax-preset="fadeInRight">
                    <div class="timeline-item-inner">
                        <div class="timeline-item-marker">
                            <span></span>
                        </div>
                        <div class="timeline-item-date">
                            <time datetime="2017-08-17">August / 2017</time>
                        </div>
                        <div class="timeline-item-header">
                            <h3 class="timeline-item-header-headline">Header 3</h3>
                        </div>
                        <div class="timeline-item-text">
                            <p>Lorem ipsum</p>
                        </div>
                    </div>
                </div>
                <div class="timeline-item lax" data-lax-preset="fadeInLeft">
                    <div class="timeline-item-inner">
                        <div class="timeline-item-marker">
                            <span></span>
                        </div>
                        <div class="timeline-item-date">
                            <time datetime="2016-06-17">June / 2016</time>
                        </div>
                        <div class="timeline-item-header">
                            <h3 class="timeline-item-header-headline">Header 4</h3>
                        </div>
                        <div class="timeline-item-text">
                            <p>Lorem ipsum</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ### End: Element timeline ### -->
 
{% extends items ? "@wrapper-frame" : "@wrapper-empty" %}

{% set CType = 'timeline' %}

{% block main %}
    {% include "@atom-header" %}
    <div class="timeline">
        {% for item in items %}
            <div class="timeline-item lax" data-lax-preset="{% if loop.index is odd %}fadeInLeft{% else %}fadeInRight{% endif %}">
                <div class="timeline-item-inner">
                    <div class="timeline-item-marker{% if item.icon %} timeline-item-icon{% endif %}">
                        <span>{% if item.icon %}<i class="svg-{{ item.icon }}"></i>{% endif %}</span>
                    </div>
                    <div class="timeline-item-date">
                        <time datetime="{{ item.date|date("Y-m-d") }}">{{ item.date|date("F / Y") }}</time>
                    </div>
                    <div class="timeline-item-header">
                        <h3 class="timeline-item-header-headline">{{ item.header }}</h3>
                    </div>
                    <div class="timeline-item-text">
                        <p>{{ item.text }}</p>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}
 
{
  "bodytext": null,
  "categories": null,
  "CType": null,
  "customId": null,
  "date": null,
  "frame_class": null,
  "header": "Timeline",
  "header_color": null,
  "header_layout": 2,
  "header_link": null,
  "header_position": null,
  "header_style": null,
  "layout": null,
  "space_after_class": null,
  "space_before_class": null,
  "space_inner_after_class": null,
  "space_inner_before_class": null,
  "subheader": null,
  "target": null,
  "items": [
    {
      "header": "Header Milestone 1",
      "date": "2019/01/17",
      "icon": "pin-marker-18x18",
      "text": "Lorem ipsum"
    },
    {
      "header": "Header 1",
      "date": "2018/05/17",
      "text": "Lorem ipsum"
    },
    {
      "header": "Header 2",
      "date": "2017/11/17",
      "text": "Lorem ipsum"
    },
    {
      "header": "Header 3",
      "date": "2017/08/17",
      "text": "Lorem ipsum"
    },
    {
      "header": "Header 4",
      "date": "2016/06/17",
      "text": "Lorem ipsum"
    }
  ]
}
  • Content: 
    .frame-type-timeline {
  overflow: hidden;
  padding-bottom: map-get($margin, 'medium');
}


// Fractal styles for testing
.fractal-preview .frame-type-timeline {
  margin-top: 80vh;
  margin-bottom: 80vh;
}
  • URL: /components/raw/frame-timeline/_timeline.scss
  • Filesystem Path: ../template/components/03-typo3/frame/03-interactive/04-timeline/_timeline.scss
  • Size: 208 Bytes
  • Content: 
    import lax from 'lax.js'

window.onload = function () {
  lax.init()

  lax.addDriver("fadeInLeft", function () {
    return {
      "data-lax-opacity": "(vh*0.9) 0, (vh*0.5) 1",
      "data-lax-translate-x": "vh -elw, (vh*0.5) 0"
    }
  })

  lax.addDriver("fadeInRight", function () {
    return {
      "data-lax-opacity": "(vh*0.9) 0, (vh*0.5) 1",
      "data-lax-translate-x": "vh elw, (vh*0.5) 0"
    }
  })

  /** @todo: needs an update
  const updateLax = () => {
    lax.update(window.scrollY)
    window.requestAnimationFrame(updateLax)
  }

  window.requestAnimationFrame(updateLax)
  */
}
  • URL: /components/raw/frame-timeline/script.js
  • Filesystem Path: ../template/components/03-typo3/frame/03-interactive/04-timeline/script.js
  • Size: 602 Bytes

No notes defined.