From 9e51153d22fc06217e6d8be3aa5bdf70f066c660 Mon Sep 17 00:00:00 2001
From: komejo <komejo@gmail.com>
Date: Thu, 29 Aug 2024 11:42:21 -0700
Subject: [PATCH] #302: 'Listen on' CKEditor template for podcasts

---
 .../templates/ckeditor5_template.json         |  6 +++
 themes/custom/ts_wrin/sass/ckeditor.scss      | 50 +++++++++++++++++++
 2 files changed, 56 insertions(+)

diff --git a/modules/wri_admin/templates/ckeditor5_template.json b/modules/wri_admin/templates/ckeditor5_template.json
index b413f30ee..a129d913b 100644
--- a/modules/wri_admin/templates/ckeditor5_template.json
+++ b/modules/wri_admin/templates/ckeditor5_template.json
@@ -28,5 +28,11 @@
       "icon": "",
       "description": "",
       "html": "<div class=\"report-teaser gold-borders-medium alignright\"><div class=\"image-wrapper\">Optional Image - set to 'Thumbnail'</div><div class=\"text-wrapper\"><div class=\"h4 topic-tag\">Report/Pub Title</div><p>Teaser text for the report or publication.</p><p><a href=\"/resources\" class=\"button small\">Download</a></p></div></div>"
+    },
+    {
+      "title": "Podcast: Listen On...",
+      "icon": "",
+      "description": "",
+      "html": "<p>&nbsp;</p><p class=\"secondary\" style=\"line-height:0;\"><em>Or listen on:</em></p><div class=\"icons-container\"><div class=\"icons-div apple-podcasts-button\"><a href=\"\"><span class=\"podcast-social-icon secondary\">Apple&nbsp;Podcasts</span></a></div><div class=\"icons-div spotify-podcasts-button\"><a href=\"\"><span class=\"podcast-social-icon secondary\">Spotify</span><strong>&nbsp;</strong></a></div><div class=\"icons-div youtube-podcasts-button\"><a href=\"\"><span class=\"podcast-social-icon secondary\">YouTube</span>&nbsp;</a></div></div>"
     }
 ]
diff --git a/themes/custom/ts_wrin/sass/ckeditor.scss b/themes/custom/ts_wrin/sass/ckeditor.scss
index d16c2f1c9..3884b1856 100644
--- a/themes/custom/ts_wrin/sass/ckeditor.scss
+++ b/themes/custom/ts_wrin/sass/ckeditor.scss
@@ -40,4 +40,54 @@
     -webkit-font-smoothing: antialiased;
     color: $black;
   }
+
+  // Podcast icons.
+  .icons-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .icons-container > .icons-div {
+    margin: 10px;
+    padding: 12px;
+    border: 1px solid #000;
+    width: 155px;
+    height: 25px;
+  }
+  .icons-container > .icons-div:hover {
+    background-color: #fafafa !important;
+  }
+  .icons-container > .icons-div img {
+    vertical-align: middle;
+  }
+  .icons-container a  {
+    text-decoration: none;
+    align-items: center;
+    color: #000;
+  }
+  .apple-podcasts-button {
+    background-image: url('https://files.wri.org/d8/s3fs-public/2024-07/apple-podcasts-icon.png');
+  }
+  .youtube-podcasts-button {
+    background-image: url('https://files.wri.org/d8/s3fs-public/2024-07/youtube-icon.png');
+  }
+  .spotify-podcasts-button {
+    background-image: url('https://files.wri.org/d8/s3fs-public/2024-07/spotify-icon.png');
+  }
+  .icons-div {
+    background-position: 10px 50%;
+    background-repeat: no-repeat;
+    background-size: 30px auto;
+  }
+  .podcast-social-icon {
+    margin-left: 40px;
+    font-size: 1rem;
+  }
+
+  .icons-container div a {
+    text-decoration: none !important;
+  }
+
+  .icons-div a {
+    display: block;
+  }
 }