From b456ff219c4706f92fcde026e976f78b4dd215d1 Mon Sep 17 00:00:00 2001
From: Simon Caminada <simon.caminada+git@gmail.com>
Date: Fri, 5 Nov 2021 17:25:34 +0100
Subject: [PATCH] update timetable button

---
 private/js/modules/_reveal.js                 |  1 +
 private/scss/modules/plugins/_form.scss       | 22 +++++++++++++++++++
 private/scss/modules/plugins/_timetable.scss  | 13 +++++++++--
 .../project/plugins/timetable/timetable.html  |  4 ++--
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/private/js/modules/_reveal.js b/private/js/modules/_reveal.js
index 9664999..5d26c94 100644
--- a/private/js/modules/_reveal.js
+++ b/private/js/modules/_reveal.js
@@ -54,6 +54,7 @@ $(function() {
   reveal_element($('.header__logo'));
   reveal_elements($('.timetable__clock__frame'));
   reveal_element($('.timetable__next'));
+  reveal_element($('.timetable__button'));
   reveal_element($('.timetable__start__background'));
 
 });
\ No newline at end of file
diff --git a/private/scss/modules/plugins/_form.scss b/private/scss/modules/plugins/_form.scss
index e2a947c..5fec658 100644
--- a/private/scss/modules/plugins/_form.scss
+++ b/private/scss/modules/plugins/_form.scss
@@ -153,6 +153,28 @@
   min-width: em(200px);
 }
 
+.button--icon {
+  transform: none;
+  transition: transform 0.4s $easeOutQuart;
+  .button__icon {
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    transform: none !important;
+    width: auto;
+    padding-left: em(15px);
+  }
+  .button__text {
+    vertical-align: top;
+    transform: none !important;
+    padding-left: 0;
+    min-width: auto;
+  }
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+
 .form__field {
   width: 100%;
   display: block;
diff --git a/private/scss/modules/plugins/_timetable.scss b/private/scss/modules/plugins/_timetable.scss
index 3c9fde2..9c2152b 100644
--- a/private/scss/modules/plugins/_timetable.scss
+++ b/private/scss/modules/plugins/_timetable.scss
@@ -14,11 +14,11 @@ $timetable_count: 15;
 .timetable__button {
   opacity: 0;
   position: fixed;
-  top: 103px;
+  bottom: 150px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 1000;
-  transition: opacity 0.5s $easeOutQuad;
+  transition: opacity 0.5s $easeOutQuad, transform 0.5s $easeOutQuad;
   #timetable[data-active="0"] & {
     opacity: 1;
   }
@@ -30,6 +30,15 @@ $timetable_count: 15;
     height: 20px;
     margin-left: -20px;
   }
+  &.reveal {
+    transform: translateX(-50%) scale(1.2);
+  }
+  @media screen and (max-width: $huge_breakpoint) {
+    bottom: 130px;
+  }
+  @media screen and (max-width: $large_breakpoint) {
+    bottom: 120px;
+  }
 }
 
 .timetable__clock__frame {
diff --git a/src/project/templates/project/plugins/timetable/timetable.html b/src/project/templates/project/plugins/timetable/timetable.html
index adc3736..149b233 100644
--- a/src/project/templates/project/plugins/timetable/timetable.html
+++ b/src/project/templates/project/plugins/timetable/timetable.html
@@ -2,8 +2,8 @@
 
 <div id="timetable" data-active="0" data-last="{{ instance.child_plugin_instances|length }}">
     {% if instance.video_vimeo_id and instance.video_cta %}
-        <div class="timetable__button" data-video-vimeo-id="{{ instance.video_vimeo_id }}">
-            <a href="#video" class="button button--white">
+        <div class="timetable__button reveal reveal_animation data_delay_8" data-video-vimeo-id="{{ instance.video_vimeo_id }}">
+            <a href="#video" class="button button--white button--small button--icon">
                 <span class="button__icon">{% include 'project/assets/play.svg' %}</span>
                 <span class="button__text">{{ instance.video_cta }}</span>
             </a>