UHF-5047: Added the open external map link back and some styling.

City-of-Helsinki · Feb 23, 2023 · e1c5c04 · e1c5c04
1 parent 46f11e6
commit e1c5c04
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/src/js/embedded-content-cookie-compliance.js b/src/js/embedded-content-cookie-compliance.js
@@ -22,15 +22,18 @@
         iframeElement.title = attributes.title;
 
         const containerElement = document.createElement('div');
+        containerElement.appendChild(iframeElement);
         if (attributes.type === 'video') {
           containerElement.classList.add('responsive-video-container'); 
-        }
-        containerElement.appendChild(iframeElement);
-
-        $(`.embedded-content-cookie-compliance.media-${id}`)
+          $(`.embedded-content-cookie-compliance.media-${id}`)
           .empty()
           .append(containerElement)
           .removeClass(`media-${id}`);
+        } else if (attributes.type === 'map') {
+          containerElement.classList.add('responsive-map-container');
+          $(`.embedded-content-cookie-compliance.media-${id}`)
+          .replaceWith(containerElement);
+        }
       }
 
       // Only load the embedded content once.

diff --git a/src/scss/06_components/paragraphs/_map.scss b/src/scss/06_components/paragraphs/_map.scss
@@ -40,16 +40,19 @@ $-map-aspect-ratio-mobile: 1;
 }
 
 .map {
-  height: 0;
   margin: $spacing 0;
-  padding-bottom: aspect-ratio-padding($-map-aspect-ratio-mobile);
   position: relative;
 
-  @include breakpoint($breakpoint-s) {
-    padding-bottom: aspect-ratio-padding($-map-aspect-ratio-desktop);
+  .responsive-map-container {
+    padding-bottom: aspect-ratio-padding($-map-aspect-ratio-mobile);
+    height: 0;
+    position: relative;
+
+    @include breakpoint($breakpoint-s) {
+      padding-bottom: aspect-ratio-padding($-map-aspect-ratio-desktop);
+    }
   }
 
-  > div,
   iframe {
     background-color: $color-black-10; // Add color to show a "placeholder" while the map is loading
     border: 0;

diff --git a/templates/media/media--hel-map.html.twig b/templates/media/media--hel-map.html.twig
@@ -33,6 +33,7 @@
 {% set media_id = media.id() %}
 {% set media_url = media.field_media_hel_map.value.0.uri %}
 {% set media_attributes = media.field_media_hel_map %}
+{% set link = content.field_media_hel_map.0['#link'] %}
 
 {% include '@hdbt/misc/embedded-content-cookie-compliance.twig' with {
   media_url: media_url,
@@ -55,3 +56,4 @@
   }
 } %}
 {{ drupal_settings }}
+{{ link(link['#title'], link['#url'], link['#attributes']|merge({'class': 'map__external-link'})) }}