diff --git a/README.md b/README.md
index 43606c5f620b8d3647f4d98604e0595428f6557b..5363aefc5e18ec5763bda1475d98509ce29feaad 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,3 @@
-
QUIQQER Timeline
========
@@ -11,7 +10,8 @@ Package Name:
Features
--------
-- (...)
+- Timline template with content and icon (image)
+- Responsive
Installation
diff --git a/locale.xml b/locale.xml
index 2e66a4ddf93ed625c3f575390c7e0763fe9ed2dc..b23c002d8c92a125c705a4b58a11a07d62f84a10 100644
--- a/locale.xml
+++ b/locale.xml
@@ -55,5 +55,12 @@
<pl><![CDATA[]]></pl>
</locale>
+ <!-- counter text -->
+ <locale name="timeline.verticalBothSides.counterText">
+ <de><![CDATA[STEP]]></de>
+ <en><![CDATA[STEP]]></en>
+ <pl><![CDATA[STEP]]></pl>
+ </locale>
+
</groups>
</locales>
\ No newline at end of file
diff --git a/site.xml b/site.xml
index 1af558b6b7c62bcda6aa5203d19beaffb792ccb3..254d30d13ff3f2cb77953e674291c3e6c76668b6 100644
--- a/site.xml
+++ b/site.xml
@@ -3,7 +3,7 @@
<types>
<!-- Liste -->
- <type type="types/timeline" icon="fa fa-list">
+ <type type="types/timeline" icon="fa fa-code-fork">
<locale group="quiqqer/timeline" var="admin.types.timeline"/>
<desc>
<locale group="quiqqer/timeline" var="admin.types.timeline.desc"/>
diff --git a/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css b/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css
new file mode 100644
index 0000000000000000000000000000000000000000..4aee19ba9450c37871fd39727bc39df809024dc3
--- /dev/null
+++ b/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css
@@ -0,0 +1,226 @@
+.timeline-section {
+ padding: 3em 0;
+}
+
+.timeline-container {
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.timeline-entry {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 20px;
+}
+
+/* icon */
+.timeline-entry-icon {
+ width: calc(50% - 30px);
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ order: 1;
+}
+
+.timeline-entry-icon-wrapper {
+ color: #aaa;
+ font-size: 53px;
+ border: 8px solid #aaa;
+ text-align: center;
+ height: 120px;
+ width: 120px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50%;
+ padding: 20px;
+ position: relative;
+ margin-top: 12px;
+}
+
+.timeline-entry-icon-wrapper:after {
+ content: '';
+ position: absolute;
+ right: -30px;
+ top: calc(50% - 20px);
+ background: none;
+ width: 0;
+ height: 0px;
+ border-right: none;
+ border-bottom: 20px solid transparent;
+ border-top: 20px solid transparent;
+ border-left: 30px solid #aaa;
+}
+
+/* line - middle */
+.timeline-entry-line {
+ width: 60px;
+ min-width: 60px;
+ max-width: 60px;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 200px;
+ order: 2;
+}
+
+.timeline-entry-line-caption {
+ margin-bottom: 30px;
+ position: relative;
+}
+
+.timeline-entry-line-caption:after {
+ content: '';
+ position: absolute;
+ bottom: -23px;
+ left: calc(50% - 7px);
+ width: 12px;
+ height: 12px;
+ background: none;
+ border-radius: 16px;
+ border: 2px solid #999;
+}
+
+.timeline-entry-line-caption-number {
+ display: block;
+ font-size: 200%;
+}
+
+.timeline-entry-line-dots {
+ height: 100%;
+ width: 0;
+ border-right: 6px dotted #999;
+ position: relative;
+}
+
+
+/* text content */
+.timeline-entry-desc {
+ padding-left: 40px;
+ width: calc(50% - 30px);
+ font-size: 90%;
+ order: 3;
+ margin-bottom: 40px;
+}
+
+.timeline-entry-desc header {
+ padding-bottom: 0;
+}
+
+.timeline-entry-desc header h2 {
+ font-size: 28px;
+}
+
+.timeline-entry-desc header p {
+ font-size: 16px;
+}
+
+
+/* nth child */
+/*************/
+
+.timeline-entry:nth-child(2n+2) .timeline-entry-desc {
+ order: 1;
+ padding-left: 0;
+ padding-right: 40px;
+}
+
+.timeline-entry:nth-child(2n+2) .timeline-entry-icon {
+ order: 3;
+}
+
+.timeline-entry:nth-child(2n+2) .timeline-entry-icon-wrapper:after {
+ right: auto;
+ left: -30px;
+ border-right: 30px solid #aaa;
+ border-left: none;
+}
+
+/* last entry - transparent dots */
+.timeline-entry:last-child .timeline-entry-line-dots:after {
+ height: 80px;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 10px;
+ background: linear-gradient(0deg, #fff, transparent);
+ content: '';
+}
+
+
+/* FARBEN */
+/* 1 */
+.timeline-entry:nth-child(5n+1) .timeline-entry-icon-wrapper,
+.timeline-entry:nth-child(5n+1) .timeline-entry-line-caption:after {
+ border-color: lightcoral;
+}
+.timeline-entry:nth-child(5n+1) .timeline-entry-icon-wrapper:after {
+ border-left-color: lightcoral;
+ border-right-color: lightcoral;
+}
+
+/* 2 */
+.timeline-entry:nth-child(5n+2) .timeline-entry-icon-wrapper,
+.timeline-entry:nth-child(5n+2) .timeline-entry-line-caption:after {
+ border-color: lightblue;
+}
+.timeline-entry:nth-child(5n+2) .timeline-entry-icon-wrapper:after {
+ border-left-color: lightblue;
+ border-right-color: lightblue;
+}
+
+/* 3 */
+.timeline-entry:nth-child(5n+3) .timeline-entry-icon-wrapper,
+.timeline-entry:nth-child(5n+3) .timeline-entry-line-caption:after {
+ border-color: lightsalmon;
+}
+.timeline-entry:nth-child(5n+3) .timeline-entry-icon-wrapper:after {
+ border-left-color: lightsalmon;
+ border-right-color: lightsalmon;
+}
+
+/* 4 */
+.timeline-entry:nth-child(5n+4) .timeline-entry-icon-wrapper,
+.timeline-entry:nth-child(5n+4) .timeline-entry-line-caption:after {
+ border-color: lightseagreen;
+}
+.timeline-entry:nth-child(5n+4) .timeline-entry-icon-wrapper:after {
+ border-left-color: lightseagreen;
+ border-right-color: lightseagreen;
+}
+
+/* 5 */
+.timeline-entry:nth-child(5n+5) .timeline-entry-icon-wrapper,
+.timeline-entry:nth-child(5n+5) .timeline-entry-line-caption:after {
+ border-color: yellowgreen;
+}
+.timeline-entry:nth-child(5n+5) .timeline-entry-icon-wrapper:after {
+ border-left-color: yellowgreen;
+ border-right-color: yellowgreen;
+}
+
+/***************/
+/* media query */
+/***************/
+
+@media screen and (max-width: 767px) {
+ .timeline-entry:nth-child(2n+2) .timeline-entry-desc {
+ order: 3;
+ padding-left: 20px;
+ padding-right: 0;
+ }
+
+ .timeline-entry-desc {
+ width: calc(100% - 60px);
+ padding-left: 20px;
+ }
+
+ .timeline-entry:nth-child(2n+2) .timeline-entry-icon {
+ order: 1;
+ }
+
+ .timeline-entry-icon {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html b/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html
new file mode 100644
index 0000000000000000000000000000000000000000..5a8a7074407e726be87d8dd83618f6c62f3cc665
--- /dev/null
+++ b/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html
@@ -0,0 +1,86 @@
+
+{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
+<header class="control-header">
+ <h1>{$this->getAttribute('frontendTitle')}</h1>
+</header>
+{/if}
+
+{if $this->getAttribute('content') != ""}
+<div class="control-content">
+ {$this->getAttribute('content')}
+</div>
+{/if}
+
+<section itemscope itemtype="{$this->getAttribute('itemtype')}"
+ class="timeline control-template"
+>
+ <link property="mainEntityOfPage" href="{url site=$Site}">
+ <div class="timeline-container">
+
+ {assign var=counter value=1}
+
+ {foreach from=$children item=Child}
+ {assign var=_Child value=$Child->load()}
+ <article itemscope
+ itemprop="itemListElement"
+ itemtype="{$this->getAttribute('child-itemtype')}"
+ class="timeline-entry"
+ >
+
+ <!-- Entry Icon -->
+ <div class="timeline-entry-icon">
+ {if $Child->getAttribute('image_site')}
+ <div class="timeline-entry-icon-wrapper">
+ {image src=$Child->getAttribute('image_site') width="500" type="resize"
+ title="{$Child->getAttribute('title')}"}
+ </div>
+ {/if}
+ </div>
+
+ <!-- Middle line -->
+ <div class="timeline-entry-line">
+ <div class="timeline-entry-line-caption">
+ <span class="timeline-entry-line-caption-number">
+ {if $counter < 10}0{/if}{$counter}
+ </span>
+ <span class="timeline-entry-line-caption-text">
+ {locale group="quiqqer/timeline"
+ var="timeline.verticalBothSides.counterText"}
+ </span>
+ </div>
+ <div class="timeline-entry-line-dots"></div>
+ </div>
+
+ <!-- Entry content -->
+ <div class="timeline-entry-desc">
+ <meta itemprop="position" content="{$counter}"/>
+ <header>
+ {if $showLinks}
+ <a itemprop="url" href="{url site=$Child}"
+ class="timeline-entry-desc-header-link">
+ {/if}
+
+ <h2>{$Child->getAttribute('title')}</h2>
+
+ {if $showLinks}
+ </a>
+ {/if}
+ </header>
+
+ <p>
+ {$Child->getAttribute('short')|nl2br}
+ {if $showLinks}
+ <a itemprop="url" href="{url site=$Child}"
+ class="timeline-entry-desc-link">
+ {locale group="quiqqer/sitetypes" value="list.more"}
+ </a>
+ {/if}
+ </p>
+ </div>
+
+ </article>
+ {assign var=counter value=$counter+1}
+ {/foreach}
+ </div>
+
+</section>
diff --git a/src/QUI/Timeline/Controls/Timeline.php b/src/QUI/Timeline/Controls/Timeline.php
index 552168c014a81019c919578cc7ef3479c93dbdb4..d245adea8307a63f104aeef47e94148e28f455e8 100644
--- a/src/QUI/Timeline/Controls/Timeline.php
+++ b/src/QUI/Timeline/Controls/Timeline.php
@@ -25,7 +25,8 @@ public function __construct($attributes = array())
{
// default options
$this->setAttributes(array(
- 'class' => 'timeline',
+ 'nodeName' => 'section',
+ 'class' => 'timeline-section',
'order' => 'c_date ASC',
'parentInputList' => false, //todo später für brick
'showLinks' => true,
@@ -34,7 +35,9 @@ public function __construct($attributes = array())
'displayTemplate' => false,
// Custom children template css (path to css file); overwrites "display"
'displayCss' => false,
- 'nodeName' => 'section',
+ 'itemtype' => 'http://schema.org/ItemList',
+ 'child-itemtype' => 'https://schema.org/ListItem',
+ 'child-itemprop' => 'itemListElement'
));
parent::__construct($attributes);
@@ -101,8 +104,8 @@ public function getBody()
// template
- $css = dirname(__FILE__) . $this->getAttribute('display') . '.css';
- $template = dirname(__FILE__) . $this->getAttribute('display') . '.template';
+ $css = dirname(__FILE__) . '/Timeline.' . $this->getAttribute('display') . '.css';
+ $template = dirname(__FILE__) . '/Timeline.' . $this->getAttribute('display') . '.html';
$this->addCSSFile($css);
diff --git a/types/timeline.html b/types/timeline.html
index a14247fcd947457e6067a87b68419bd52500ba81..f024cf78756fb8ee27dca08712aa1469aea8da7a 100644
--- a/types/timeline.html
+++ b/types/timeline.html
@@ -6,6 +6,6 @@
{/if}
<section class="content-template grid-100 mobile-grid-100 grid-parent">
- {$ChildrenList->create()}
+ {$Timeline->create()}
</section>
diff --git a/types/timeline.php b/types/timeline.php
new file mode 100644
index 0000000000000000000000000000000000000000..a18795dd3d65d1e68192d2e40a10e48671acf2a9
--- /dev/null
+++ b/types/timeline.php
@@ -0,0 +1,17 @@
+<?php
+
+/**
+ * Site list
+ */
+
+$Timeline = new QUI\Timeline\Controls\Timeline(array(
+ 'Site' => $Site,
+ 'showLinks' => $Site->getAttribute('quiqqer.timeline.showLinks'),
+ 'itemtype' => 'http://schema.org/ItemList',
+ 'child-itemtype' => 'http://schema.org/ListItem',
+ 'display' => $Site->getAttribute('quiqqer.timeline.display')
+));
+
+$Engine->assign(array(
+ 'Timeline' => $Timeline
+));