From 364dee81eebfa9eb3ea97fd1aec043daf3050849 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Thu, 16 Aug 2018 13:22:34 +0200
Subject: [PATCH] Multiple changes as requested

---
 .../ext/ep_events/Resources/Private/Assets/js/app.js      | 1 +
 .../ep_events/Resources/Private/Assets/scss/_base.scss    | 1 +
 .../Resources/Private/Assets/scss/_page-header.scss       | 2 +-
 .../Resources/Private/Layouts/Page/OfferEpEvents.html     | 1 +
 .../Resources/Private/Templates/Page/OfferEpEvents.html   | 8 +++++---
 5 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/app.js b/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/app.js
index bd339f7c..9ab212b3 100644
--- a/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/app.js
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Assets/js/app.js
@@ -116,6 +116,7 @@ new Vue({
                 dots: false,
                 arrows: false,
                 rows: 0,
+                autoplay: true,
                 responsive: [
                     {
                         breakpoint: 768,
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_base.scss b/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_base.scss
index 928b9221..de2a7573 100644
--- a/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_base.scss
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_base.scss
@@ -101,6 +101,7 @@ ul {
         list-style: none;
         padding: 0;
         line-height: 175%;
+        display: inline-block;
 
         li {
             position: relative;
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_page-header.scss b/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_page-header.scss
index 277583f7..63a4299d 100644
--- a/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_page-header.scss
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_page-header.scss
@@ -3,7 +3,7 @@
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 100;
+    z-index: 1000;
     background: white;
     box-shadow: 0 2px 2px rgba($color-background, 0.5);
 }
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Layouts/Page/OfferEpEvents.html b/web/typo3conf/ext/ep_events/Resources/Private/Layouts/Page/OfferEpEvents.html
index 1f516a4c..b0fca490 100644
--- a/web/typo3conf/ext/ep_events/Resources/Private/Layouts/Page/OfferEpEvents.html
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Layouts/Page/OfferEpEvents.html
@@ -51,6 +51,7 @@
                     </div>
                 </div>
             </f:if>
+            <a id="activities"></a>
             <div class="content content--sub {ep:sectionCssClass(sectionValue: offer.configuratorType)}">
                 <div class="content__title">
                     <h2 class="headline headline--primary">Programmpunkte</h2>
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Templates/Page/OfferEpEvents.html b/web/typo3conf/ext/ep_events/Resources/Private/Templates/Page/OfferEpEvents.html
index a2bc2cdc..94827ed4 100644
--- a/web/typo3conf/ext/ep_events/Resources/Private/Templates/Page/OfferEpEvents.html
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Templates/Page/OfferEpEvents.html
@@ -20,7 +20,7 @@
             </div>
             <div class="teaser program-slider">
                 <f:for each="{offer.activities}" as="activity">
-                    <f:render section="Teaser" arguments="{image: activity.imageTeaser, title: 'Programm', subtitle: activity.name}"/>
+                    <f:render section="Teaser" arguments="{image: activity.imageTeaser, title: 'Programm', subtitle: activity.name, link: '#activities'}"/>
                 </f:for>
             </div>
         </div>
@@ -50,13 +50,15 @@
         <div class="teaser__inner">
             <f:if condition="{image}">
                 <f:then>
-                    <img class="teaser__image" src="{f:uri.image(src: image.uid, treatIdAsReference: 1, crop: image.crop, maxWidth: 500)}" alt="{title} {subtitle}">
+                    <img class="teaser__image"
+                         src="{f:uri.image(src: image.uid, treatIdAsReference: 1, crop: image.crop, maxWidth: 500)}"
+                         alt="{title} {subtitle}"{f:if(condition: link, then: ' v-on:click.prevent="scrollTo(\'{link}\')"')}>
                 </f:then>
                 <f:else>
                     <img class="teaser__image" src="https://placehold.it/500x500" alt="">
                 </f:else>
             </f:if>
-            <div class="teaser__caption">
+            <div class="teaser__caption"{f:if(condition: link, then: ' v-on:click.prevent="scrollTo(\'{link}\')"')}>
                 <span class="teaser__title">{title}</span>
                 <span class="teaser__title teaser__title--subline">{subtitle}</span>
             </div>