Merge branch 'album-commentary-tweaks' into preview

2 files changed, 48 insertions, 35 deletions

diff --git a/src/static/client3.js b/src/static/client3.js
index d0973e46..866b9ba2 100644
--- a/src/static/client3.js
+++ b/src/static/client3.js
@@ -96,14 +96,18 @@ function dispatchInternalEvent(event, eventName, ...args) {
     throw new Error(`Event name "${eventName}" isn't stored on ${infoName}.event`);
   }
 
+  let results = [];
   for (const listener of listeners) {
     try {
-      listener(...args);
+      results.push(listener(...args));
     } catch (error) {
       console.warn(`Uncaught error in listener for ${infoName}.${eventName}`);
       console.debug(error);
+      results.push(undefined);
     }
   }
+
+  return results;
 }
 
 // JS-based links -----------------------------------------
@@ -1102,13 +1106,14 @@ function addHashLinkListeners() {
       }
 
       // Allow event handlers to prevent scrolling.
-      for (const handler of event.beforeHashLinkScrolls) {
-        if (handler({
+      const listenerResults =
+        dispatchInternalEvent(event, 'beforeHashLinkScrolls', {
           link: hashLink,
           target,
-        }) === false) {
-          return;
-        }
+        });
+
+      if (listenerResults.includes(false)) {
+        return;
       }
 
       // Hide skipper box right away, so the layout is updated on time for the
@@ -1145,14 +1150,10 @@ function addHashLinkListeners() {
 
       processScrollingAfterHashLinkClicked();
 
-      dispatchInternalEvent(event, 'whenHashLinkClicked', {link: hashLink});
-
-      for (const handler of event.whenHashLinkClicked) {
-        handler({
-          link: hashLink,
-          target,
-        });
-      }
+      dispatchInternalEvent(event, 'whenHashLinkClicked', {
+        link: hashLink,
+        target,
+      });
     });
   }
 
@@ -1375,11 +1376,12 @@ function updateStickySubheadingContent(index) {
       child.remove();
     }
 
-    for (const child of closestHeading.childNodes) {
-      if (child.classList?.contains('content-heading-accent')) {
-        continue;
-      }
+    const textContainer =
+      closestHeading.querySelector('.content-heading-main-title')
+        // Just for compatibility with older builds of the site.
+        ?? closestHeading;
 
+    for (const child of textContainer.childNodes) {
       if (child.tagName === 'A') {
         for (const grandchild of child.childNodes) {
           stickySubheading.appendChild(grandchild.cloneNode(true));
@@ -1398,12 +1400,10 @@ function updateStickySubheadingContent(index) {
 
   state.displayedHeading = closestHeading;
 
-  for (const handler of event.whenDisplayedHeadingChanges) {
-    handler(index, {
-      oldHeading: oldDisplayedHeading,
-      newHeading: closestHeading,
-    });
-  }
+  dispatchInternalEvent(event, 'whenDisplayedHeadingChanges', index, {
+    oldHeading: oldDisplayedHeading,
+    newHeading: closestHeading,
+  });
 }
 
 function updateStickyHeadings(index) {
diff --git a/src/static/site5.css b/src/static/site5.css
index 0be536a4..4c083527 100644
--- a/src/static/site5.css
+++ b/src/static/site5.css
@@ -624,6 +624,7 @@ p .current {
   width: 30%;
   max-width: 250px;
   margin: 15px 0 10px 20px;
+  box-shadow: 0 0 4px 5px rgba(0, 0, 0, 0.35);
 }
 
 .js-hide,
@@ -774,7 +775,7 @@ p code {
 }
 
 main.long-content {
-  --long-content-padding-ratio: 0.12;
+  --long-content-padding-ratio: 0.10;
 }
 
 main.long-content .main-content-container,
@@ -874,6 +875,17 @@ html[data-url-key="localized.albumCommentary"] li.no-commentary {
   opacity: 0.7;
 }
 
+html[data-url-key="localized.albumCommentary"] .content-heading-main-title {
+  margin-right: 0.25em;
+}
+
+html[data-url-key="localized.albumCommentary"] .content-heading-accent {
+  font-weight: normal;
+  font-style: oblique;
+  font-size: 0.9rem;
+  display: inline-block;
+}
+
 html[data-url-key="localized.listing"][data-url-value0="random"] #data-loading-line,
 html[data-url-key="localized.listing"][data-url-value0="random"] #data-loaded-line,
 html[data-url-key="localized.listing"][data-url-value0="random"] #data-error-line {
@@ -1423,12 +1435,6 @@ html[data-url-key="localized.home"] .carousel-container {
   animation-delay: 125ms;
 }
 
-.content-heading .content-heading-accent {
-  font-weight: normal;
-  font-size: 1rem;
-  margin-left: 0.25em;
-}
-
 h3.content-heading {
   clear: both;
 }
@@ -1815,6 +1821,13 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
  */
 
 @media (min-width: 600px) and (max-width: 899.98px) {
+  /* Medim layout is mainly defined (to the user) by hiding the sidebar, so
+   * don't apply the similar layout change of widening the long-content area
+   * if this page doesn't have a sidebar to hide in the first place.
+   */
+  #page-container:not(.has-zero-sidebars) main.long-content {
+    --long-content-padding-ratio: 0.06;
+  }
 }
 
 /* Layout - Wide or Medium */
@@ -1898,6 +1911,10 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
     columns: 1;
   }
 
+  main.long-content {
+    --long-content-padding-ratio: 0.02;
+  }
+
   #cover-art-container {
     margin: 25px 0 5px 0;
     width: 100%;
@@ -1930,8 +1947,4 @@ html[data-language-code="preview-en"][data-url-key="localized.home"] #content
   #header > div:not(:first-child) {
     margin-top: 0.5em;
   }
-
-  main.long-content {
-    --long-content-padding-ratio: 0.04;
-  }
 }