journey calculator fix

private/js/main.js

@@ -21,7 +21,7 @@ function setCookie(name, value, days) {
   "use strict";
   var expires = new Date();
   expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
-  document.cookie = name + "=" + value + ";expires=" + expires.toUTCString();
+  document.cookie = name + "=" + value + ";path=/;expires=" + expires.toUTCString();
 }
 
 function deleteCookie(name) {

private/js/modules/contact.js

@@ -89,6 +89,9 @@ function init_map() {
         input.parentNode.classList.add('error');
       }
 
+      var url = 'https://www.google.com/maps/dir/?api=1&origin=' + input.value + '&origin_place_id=' + place['id'] + '&destination=' + encodeURI('Tagesschule Elementa, Sarbachstrasse 8, 6345 Neuheim');
+      $('.journey_calculator__button').attr('href', url);
+
       var origin = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
       var destination = new google.maps.LatLng(location);
 

private/scss/modules/_privacy.scss

@@ -4,7 +4,7 @@
   bottom: 0;
   right: 0;
   background-color: rgba($white, 0.9);
-  z-index: 10;
+  z-index: 100000;
   padding: em(20px) em(60px);
   @media screen and (max-width: $large_breakpoint) {
     padding: em(20px);

private/scss/modules/plugins/_form.scss

@@ -116,6 +116,16 @@
   }
 }
 
+.button--ghost-white {
+  color: $white;
+  svg {
+    fill: $white !important;
+  }
+  &:after {
+    border: 2px solid $white;
+  }
+}
+
 .button__icon {
   display: block;
   position: absolute;

private/scss/modules/plugins/_journey_calculator.scss

@@ -33,7 +33,7 @@
 
 .journey_calculator__input {
   position: relative;
-  padding-right: em(105px);
+  padding: 0;
   transition: padding 0.3s ease-in-out;
   will-change: padding;
   input[type="text"] {
@@ -42,8 +42,13 @@
     height: em(45px);
   }
   &.loaded {
+    padding-right: em(105px);
     .journey_calculator__result {
       opacity: 1;
+      right: 0;
+    }
+    & ~ .journey_calculator__button {
+      opacity: 1;
     }
   }
   &.error {
@@ -60,7 +65,7 @@
   display: block;
   position: absolute;
   top: 0;
-  right: 0;
+  right: em(-105px);
   width: em(95px);
   opacity: 0;
   line-height: em(45px);
@@ -71,7 +76,7 @@
   font-family: $default_font_family;
   color: darken($dark_gray, 20);
   text-align: center;
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.3s ease-in-out, right 0.3s ease-in-out;
   text-transform: uppercase;
   &:after {
     content: attr(data-duration) ' ' attr(data-label);
@@ -101,4 +106,15 @@
   line-height: 1.3;
   display: none;
   color: $red;
+}
+
+.journey_calculator__button {
+  width: 100%;
+  margin-top: 15px;
+  will-change: transform;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  span {
+    width: 100%;
+  }
 }

src/project/templates/project/plugins/contact/journey_calculator.html

@@ -10,6 +10,10 @@
         <input id="journey_calculator__input" type="text" placeholder="{% trans 'Ihr Wohnort' %}">
         <div class="journey_calculator__result" data-label="{% trans 'Min' %}"></div>
     </div>
+    <a href="#" target="_blank" class="journey_calculator__button button button--small button--ghost button--ghost-white">
+        <span class="button__icon">{% include 'project/assets/arrow-right-long.svg' %}</span>
+        <span class="button__text">{% trans 'Route anzeigen' %}</span>
+    </a>
     <p class="journey_calculator__message">
         {% trans 'Bitte wählen Sie einen der vorgeschlagenen Orte aus.' %}
     </p>