Merge pull request #21 from PRX/feat/quote-audio

WIP: Add Donor Quote Audio
PRX · Dec 6, 2024 · 819e850 · 819e850
2 parents 72635e6 + 0492617
commit 819e850
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 15 deletions.
diff --git a/_includes/components/menu-item.html b/_includes/components/menu-item.html
@@ -1,7 +1,7 @@
 <li class="menu-item">
     <a
       href="{{ include.href }}"
-      class="menu-link icon {{ include.color }}"
+      class="menu-link {{ include.color }}{%- if include.icon %} icon{%- endif -%}"
     >
       {%- if include.icon -%}
         {%- capture icon_path %}svg/icons/{{ include.icon }}.svg{% endcapture -%}

diff --git a/_includes/components/quote.html b/_includes/components/quote.html
@@ -4,8 +4,32 @@
   {%- endif -%}
   <div>
     <p class="quote-text">{{ include.text }}</p>
-    {%- if include.citation -%}
+    {%- if include.audio  -%}
+      {%- assign audio_title = include.audio.title -%}
+      {%- if include.citation -%}
+        {%- assign audio_title = include.citation -%}
+      {%- endif -%}
+
+      <div class="show-audio">
+        {% include components/audio-inline.html
+          url=include.audio.url
+          title=audio_title
+        %}
+        <button type="button" class="show-audio--button">
+          <span class="play-icon" aria-label="Play"></span>
+          <span class="show-audio--button--title">{{ audio_title }}</span>
+        </button>
+        <div class="show-audio--controls">
+          <span class="show-audio--slider">
+            <input id="progress-bar" type="range" defaultValue="0" min="0" max="1" step="0.01" aria-label="Player Progress" />
+          </span>
+        </div>
+      </div>
+    {%- endif  -%}
+
+    {%- if include.citation  -%}
     <cite class="quote-citation">{{ include.citation }}</cite>
     {%- endif -%}
+
   </div>
 </blockquote>
diff --git a/_includes/navbar/navbar.html b/_includes/navbar/navbar.html
@@ -1,6 +1,6 @@
 <header class="navbar">
     <nav>
-      <button popovertarget="navDrawerPopover" class="btn white">
+      <button popovertarget="navDrawerPopover" class="btn white" aria-label="Toggle Menu">
         {% include svg/icons/menu.svg %}
       </button>
       <a href="#top" class="prx-logo" aria-label="Back to the top of the Annual Report">

diff --git a/_includes/page-types/content.html b/_includes/page-types/content.html
@@ -8,6 +8,7 @@ <h2 class="content-title">{{ content.title }}</h2>
         citation=content.quote.citation
         image=content.quote.image
         alt=content.quote.alt
+        audio=content.audio
       %}
     </div>
     {%- endif -%}

diff --git a/_includes/page-types/show.html b/_includes/page-types/show.html
@@ -56,6 +56,7 @@ <h2 class="show-title">{{ show.title }}</h2>
       {% include components/quote.html
         text=show.donor-quote.text
         citation=show.donor-quote.citation
+        audio=show.donor-quote.audio
       %}
     </div>
     {%- endif -%}

diff --git a/_includes/page-types/stats.html b/_includes/page-types/stats.html
@@ -1,2 +1,3 @@
+<h2 class="stats--header">In 2024, &hellip;</h2>
 {%- assign info_tiles = site.data.stats -%}
 {% include components/info-tiles.html %}
diff --git a/_sass/_content.scss b/_sass/_content.scss
@@ -10,6 +10,10 @@
   --_content--accent--color1: var(--show-logo--accent--color1, #{$yellow});
   --_content--accent--color2: var(--show-logo--accent--color2, #{$cyan});
 
+  --show--color: var(--_content--color);
+  --show--accent--color1: var(--_content--accent--color1);
+  --show--accent--color2: var(--_content--accent--color2);
+
   display: grid;
   grid-template-columns: [full-width-start] 1fr [extra-wide-start] calc(var(--_content--gutter) / 2) [wide-start] calc(var(--_content--gutter) / 2) [content-start] minmax(min-content, 900px) [content-end] calc(var(--_content--gutter) / 2) [wide-end] calc(var(--_content--gutter) / 2) [extra-wide-end] 1fr [full-width-end];
   row-gap: var(--_content--row-gap);

diff --git a/_sass/_info-tiles.scss b/_sass/_info-tiles.scss
@@ -6,6 +6,10 @@ $info-tile-grid-breakpoints: (
   'xl': '1440px'
 );
 
+.stats--header {
+  text-align: center;
+}
+
 $info-tile-grid-columns: 12;
 
 .info-tile-grid {

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -131,4 +131,8 @@ blockquote {
 .quote-citation {
   font-size: .875rem;
   font-weight: bold;
+
+  .show-audio + & {
+    @include visually-hidden;
+  }
 }
diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss
@@ -1 +1,11 @@
 // Mixins.
+
+@mixin visually-hidden {
+  visibility: hidden;
+  position: absolute;
+  left: -100vw;
+  width: 0;
+  height: 0;
+  line-height: 0;
+  overflow: hidden;
+}
diff --git a/_sass/_show.scss b/_sass/_show.scss
@@ -161,9 +161,11 @@
 .show-audio {
   grid-area: audio;
 
-  display: grid;
+  display: inline-grid;
   isolation: isolate;
 
+  margin-inline: auto;
+
   &[data-status] {
     .audio-inline {
       display: none;
@@ -177,6 +179,8 @@
 .show-audio--button {
   --_show-audio--button--progress: var(--progress, 0.345);
   --_show-audio--button--border-radius: 1rem;
+  --_show-audio--button--bg-color: var(--show-audio--button--bg-color, var(--show--accent--color1, var(--_show--accent--color1)));
+  --_show-audio--button--progress--color: var(--show-audio--button--bg-color, var(--show--accent--color2, var(--_show--accent--color2)));
 
   appearance: unset;
 
@@ -186,7 +190,6 @@
   isolation: isolate;
   display: none;
   grid-template-columns: 3rem 1fr;
-  grid-template-rows: min-content 1fr;
   column-gap: 0.75rem;
   row-gap: 0.25rem;
   align-items: center;
@@ -204,6 +207,10 @@
   font-size: 0.875rem;
   text-align: left;
 
+  &:has(.show-audio--button--label) {
+    grid-template-rows: min-content 1fr;
+  }
+
   &::after {
     --_inset: 0.25rem;
 
@@ -217,17 +224,17 @@
   }
 
   &:where(:hover, :focus-visible) {
-    --play-icon--color: var(--_show--accent--color2);
+    --play-icon--color: var(--show--accent--color2, var(--_show--accent--color2));
   }
 
   &:where(:focus-visible) {
     outline: var(--_show--accent--color2) solid 0.325rem;
     outline-offset: 0.125rem;
-    background-color: var(--_show--accent--color1);
+    background-color: var(--_show-audio--button--bg-color);
   }
 
   [data-status]:not([data-status="ready"]) & {
-    background-color: var(--_show--accent--color1);
+    background-color: var(--_show-audio--button--bg-color);
 
     &::before {
       content: '';
@@ -243,12 +250,12 @@
       border: 0.25rem solid $white;
       border-radius: 1rem;
 
-      background-color: var(--_show--accent--color2);
+      background-color: var(--_show-audio--button--progress--color);
     }
   }
 
   .play-icon {
-    --_play-icon--color: var(--play-icon--color, var(--_show--accent--color1));
+    --_play-icon--color: var(--play-icon--color, var(--show--accent--color1, var(--_show--accent--color1)));
 
     transition: background-color 200ms;
 
@@ -312,6 +319,8 @@
 }
 
 .show-audio--controls {
+  --_controls--bg-color: var(--controls--bg-color, var(--show--color, var(--_show--color)));
+
   transition: transform 200ms;
 
   position: relative;
@@ -326,7 +335,7 @@
 
   border-radius: 0 0 1rem 1rem;
 
-  background-color: var(--_show--color);
+  background-color: var(--_controls--bg-color);
 
   [data-status="playing"] & {
     transform: translateY(0);
@@ -335,9 +344,9 @@
 
 .show-audio--slider {
   --_slider--progress: var(--progress, 0.345);
-  --_slider--color: var(--slider--color, var(--_show--accent--color2));
-  --_slider--color--hover: var(--slider--color--hover, var(--_show--accent--color2));
-  --_slider--track--color: var(--slider--track--color, var(--_show--accent--color1));
+  --_slider--color: var(--slider--color, var(--show--accent--color2, var(--_show--accent--color2)));
+  --_slider--color--hover: var(--slider--color--hover, var(--show--accent--color2, var(--_show--accent--color2)));
+  --_slider--track--color: var(--slider--track--color, var(--show--accent--color1, var(--_show--accent--color1)));
   --_slider--handle--color: var(--slider--handle--color, var(--_slider--color));
   --_slider--handle--color--hover: var(
     --slider--handle--color--hover,

diff --git a/collections/_content/planned-giving.html b/collections/_content/planned-giving.html
@@ -10,7 +10,7 @@
   alt: headshot for Stephanie Fox
 audio:
   url: https://dovetail.prxu.org/9003/75895fe2-1058-4615-b6f1-d899f3f01866/Planned_Giving_-_Stephanie_Fox_PRX_Estate_Plan__1___1_.mp3
-  title: Listen to the quote
+  title: Stephanie Fox
 ---
 <p>PRX Partners in Innovation is a society of forward-thinking donors who want to ensure that PRX shapes the future of audio by creating space for stories that matter from a global group of independent audio creators.</p>
 

diff --git a/collections/_shows/the-world.html b/collections/_shows/the-world.html
@@ -17,6 +17,9 @@
 donor-quote:
   text: "My sister Deborah Brown and I are longtime public radio donors and we are pleased to support PRX through the Harold and Colleen Brown Family Foundation. Thanks to our parents, starting as children we were exposed to world events. So The World is one of our favorite programs. When our father was Jimmy Carter&apos;s Secretary of Defense, world events could be personally stomach churning. But now they are a welcome diversion from US domestic politics. The World presents a nonpartisan view of world affairs, including reports from correspondence and interviews with world leaders. Best of all the reports cover not just the top news, there are cultural vignettes on everything from Armenian winemakers to female Zambian rappers. The hosts, Marco Werman and Carolyn Beeler, wrap it all up and make the case that Americans must recognize our connection to the rest of the world."
   citation: "— Ellen Brown, <em>The World</em> and PRX Donor"
+  audio:
+    url: https://dovetail.prxu.org/9003/b308cb10-5510-41fd-a1ce-0d2b1eb3895d/PRXsupportFromEllenBrown.mp3
+    title: Ellen Brown
 mosaic:
   - color: orange
     position: 1 / 1 / span 5/ span 4