#302: 'Listen on' CKEditor template for podcasts

wri · Aug 29, 2024 · 9e51153 · 9e51153
1 parent 56fe0e2
commit 9e51153
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 0 deletions.
diff --git 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
@@ -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;
+  }
 }