diff --git a/private/js/main.js b/private/js/main.js index 6e0373b..6d18938 100755 --- a/private/js/main.js +++ b/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) { diff --git a/private/js/modules/contact.js b/private/js/modules/contact.js index ca698f7..30cf494 100644 --- a/private/js/modules/contact.js +++ b/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); diff --git a/private/scss/modules/_privacy.scss b/private/scss/modules/_privacy.scss index ccb6a92..f59563d 100644 --- a/private/scss/modules/_privacy.scss +++ b/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); diff --git a/private/scss/modules/plugins/_form.scss b/private/scss/modules/plugins/_form.scss index 06c6f05..bfffd29 100644 --- a/private/scss/modules/plugins/_form.scss +++ b/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; diff --git a/private/scss/modules/plugins/_journey_calculator.scss b/private/scss/modules/plugins/_journey_calculator.scss index 5eb7794..dfff395 100644 --- a/private/scss/modules/plugins/_journey_calculator.scss +++ b/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%; + } } \ No newline at end of file diff --git a/src/project/templates/project/plugins/contact/journey_calculator.html b/src/project/templates/project/plugins/contact/journey_calculator.html index 9d28b76..dee2d7f 100644 --- a/src/project/templates/project/plugins/contact/journey_calculator.html +++ b/src/project/templates/project/plugins/contact/journey_calculator.html @@ -10,6 +10,10 @@
+ + {% include 'project/assets/arrow-right-long.svg' %} + {% trans 'Route anzeigen' %} +

{% trans 'Bitte wählen Sie einen der vorgeschlagenen Orte aus.' %}