Improve the look of the audio player and toc (#5129)

GoogleChrome · Apr 27, 2021 · 1da9128 · 1da9128
1 parent 5f82b8c
commit 1da9128
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 16 deletions.
diff --git a/src/site/_includes/macros/audio-player.njk b/src/site/_includes/macros/audio-player.njk
@@ -1,6 +1,6 @@
 {% macro audioPlayer(title, src, thumbnail, id="audio-player") %}
 <div class="audio-player">
-  {% Img src=thumbnail, alt="", width="80", height="80" %}
+  {% Img class="audio-player__thumbnail", src=thumbnail, alt="", width="80", height="80" %}
   <div class="audio-player__inner">
     <div class="audio-player__title">{{ title }}</div>
     <audio id="{{ id }}" class="audio-player__element" src="{{ src }}" controls></audio>

diff --git a/src/site/_includes/partials/toc-inner.njk b/src/site/_includes/partials/toc-inner.njk
@@ -3,9 +3,11 @@
   {% from 'macros/icon.njk' import icon with context %}
 
   <details class="course-toc toc flow display-block xl:display-none" data-type="inner" role="navigation" aria-label="Table of contents">
-    <summary class="display-inline-flex align-center user-select-none">
-      <div class="course-toc__heading font-google-sans weight-medium">{{ 'i18n.toc.table_of_contents' | i18n(locale) }}</div>
-      <span class="toc__icon">{{ icon('arrow-right') }}</span>
+    <summary>
+      <div class="display-inline-flex align-center user-select-none">
+        <div class="course-toc__heading font-google-sans weight-medium">{{ 'i18n.toc.table_of_contents' | i18n(locale) }}</div>
+        <span class="toc__icon height-400">{{ icon('arrow-right') }}</span>
+      </div>
     </summary>
     <div class="toc__wrapper flow-recursive">{{ tocContents | safe }}</div>
   </details>

diff --git a/src/styles/components/_audio-player.scss b/src/styles/components/_audio-player.scss
@@ -1,13 +1,9 @@
 .audio-player {
   display: flex;
-  width: -moz-fit-content;
-  width: fit-content;
   align-items: center;
-  box-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3), 0px 2px 6px 2px rgba(60, 64, 67, 0.15);
   border-radius: 3px;
-  padding: 8px;
-  background-color: $WHITE;
-  z-index: 1;
+  padding: 16px;
+  background-color: $GREY_100;
 
   &__thumbnail {
     border-radius: 3px;
@@ -16,16 +12,28 @@
   }
 
   &__inner {
-    margin-left: 8px;
+    width: 100%;
+    // height: 80px;
   }
 
   &__title {
-    color: $GREY_700;
-    font-size: px-to-rem(12px);
+    color: $GREY_800;
+    font-size: 0.875rem;
+    margin-left: 16px;
+
+    @include bp(md) {
+      font-size: 1rem;
+    }
   }
 
   &__element {
-    margin-top: 8px;
-    max-width: 100%;
+    width: 100%;
+    height: 40px;
+    margin: 8px 0 0 8px;
+
+    // Chromium only.
+    &::-webkit-media-controls-panel {
+      padding: 0;
+    }
   }
 }
diff --git a/src/styles/components/_course-toc.scss b/src/styles/components/_course-toc.scss
@@ -29,9 +29,15 @@
   }
 
   > summary {
+    list-style: none;
     transition: background-color $TRANSITION_SPEED;
+    width: -moz-fit-content;
+    width: fit-content;
+    border-radius: 3px;
+    padding-left: 4px;
 
-    &::marker {
+    &::marker,
+    &::-webkit-details-marker {
       display: none;
     }
   }