Use stacked case cards for all model audio

index.html

@@ -156,90 +156,62 @@
       }[char]));
     }
 
-    function createCaseCell(content, className = "") {
-      const cell = document.createElement("div");
-      cell.className = `case-cell ${className}`.trim();
+    function createAudioCard(label, content) {
+      const card = document.createElement("div");
+      card.className = "audio-card";
+
+      const title = document.createElement("div");
+      title.className = "audio-card-title";
+      title.textContent = label;
 
       const body = document.createElement("div");
-      body.className = "case-cell-body";
+      body.className = "audio-card-body";
       if (content) {
         body.appendChild(content);
       }
 
-      cell.appendChild(body);
-      return cell;
-    }
-
-    function createHeaderCell(label) {
-      const cell = document.createElement("div");
-      cell.className = "case-header-cell";
-      cell.textContent = label;
-      return cell;
-    }
-
-    function createCaseHeader(task) {
-      const header = document.createElement("div");
-      header.className = "case-header";
-      header.appendChild(createHeaderCell("Script"));
-
-      const headerScroll = document.createElement("div");
-      headerScroll.className = "case-header-scroll";
-      const headerGrid = document.createElement("div");
-      headerGrid.className = "case-grid";
-      headerGrid.style.setProperty("--model-count", task.models.length);
-
-      if (task.show_reference) {
-        headerGrid.appendChild(createHeaderCell("Reference"));
-      }
-
-      task.models.forEach((model) => {
-        headerGrid.appendChild(createHeaderCell(model));
-      });
-
-      headerScroll.appendChild(headerGrid);
-      header.appendChild(headerScroll);
-      return header;
+      card.appendChild(title);
+      card.appendChild(body);
+      return card;
     }
 
     function renderTable(task, manifests, taskRoot) {
       const wrapper = document.createElement("div");
-      wrapper.className = task.show_reference ? "demo-cases" : "demo-cases without-reference";
-      wrapper.appendChild(createCaseHeader(task));
-      const headerScroll = wrapper.querySelector(".case-header-scroll");
+      wrapper.className = "demo-cases";
 
       manifests[task.models[0]].forEach((item) => {
-        const caseRow = document.createElement("div");
-        caseRow.className = "case-row";
-        caseRow.appendChild(createCaseCell(createScriptCell(item), "script-case"));
+        const caseBlock = document.createElement("article");
+        caseBlock.className = "case-block";
+
+        const scriptBlock = document.createElement("div");
+        scriptBlock.className = "case-script";
+        const scriptTitle = document.createElement("div");
+        scriptTitle.className = "case-section-title";
+        scriptTitle.textContent = "Script";
+        scriptBlock.appendChild(scriptTitle);
+        scriptBlock.appendChild(createScriptCell(item));
+        caseBlock.appendChild(scriptBlock);
 
-        const caseScroll = document.createElement("div");
-        caseScroll.className = "case-scroll";
-        const caseGrid = document.createElement("div");
-        caseGrid.className = "case-grid";
-        caseGrid.style.setProperty("--model-count", task.models.length);
+        const audioGrid = document.createElement("div");
+        audioGrid.className = "audio-grid";
 
         if (task.show_reference) {
           const modelRoot = `${taskRoot}/${task.models[0]}`;
-          caseGrid.appendChild(createCaseCell(createReferenceCell(item, modelRoot)));
+          audioGrid.appendChild(createAudioCard("Reference", createReferenceCell(item, modelRoot)));
         }
 
         task.models.forEach((model) => {
           const modelItem = manifests[model].find((entry) => entry.utt === item.utt);
           const content = document.createElement("div");
-          content.className = "audio-cell-content";
+          content.className = "audio-card-content";
           if (modelItem) {
             content.appendChild(createAudio(`${taskRoot}/${model}/${modelItem.output_audio}`));
           }
-          caseGrid.appendChild(createCaseCell(content));
+          audioGrid.appendChild(createAudioCard(model, content));
         });
 
-        caseScroll.appendChild(caseGrid);
-        caseRow.appendChild(caseScroll);
-        wrapper.appendChild(caseRow);
-
-        caseScroll.addEventListener("scroll", () => {
-          headerScroll.scrollLeft = caseScroll.scrollLeft;
-        });
+        caseBlock.appendChild(audioGrid);
+        wrapper.appendChild(caseBlock);
       });
 
       return wrapper;

static/css/index.css

@@ -168,91 +168,51 @@ body {
 
 .demo-cases {
   display: grid;
+  gap: 1rem;
   padding: 0.9rem;
   background: var(--paper);
 }
 
-.case-header {
-  display: grid;
-  grid-template-columns: minmax(24rem, 30rem) minmax(0, 1fr);
+.case-block {
   border: 1px solid var(--line);
-  background: var(--soft);
+  background: var(--paper);
 }
 
-.case-header-scroll {
-  overflow-x: hidden;
-  border-left: 1px solid var(--line);
+.case-script {
+  border-bottom: 1px solid var(--line);
+  padding: 0.9rem 1rem;
+  background: #fbfbfb;
 }
 
-.case-header-cell {
-  min-width: 0;
-  border-right: 1px solid var(--line);
-  padding: 0.65rem 0.75rem;
+.case-section-title,
+.audio-card-title {
+  margin-bottom: 0.45rem;
   color: var(--ink);
   font-size: 0.86rem;
   font-weight: 700;
-  text-align: center;
-}
-
-.case-header-cell:last-child {
-  border-right: 0;
 }
 
-.case-row {
+.audio-grid {
   display: grid;
-  grid-template-columns: minmax(24rem, 30rem) minmax(0, 1fr);
-  border-right: 1px solid var(--line);
-  border-bottom: 1px solid var(--line);
-  border-left: 1px solid var(--line);
-  background: #fbfbfb;
-}
-
-.case-scroll {
-  overflow-x: auto;
-  border-left: 1px solid var(--line);
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+  gap: 0;
 }
 
-.case-grid {
+.audio-card {
   display: grid;
-  grid-template-columns: 20rem repeat(var(--model-count), 20rem);
-  min-width: max-content;
-  height: 100%;
-}
-
-.demo-cases.without-reference .case-grid {
-  grid-template-columns: repeat(var(--model-count), 20rem);
-}
-
-.case-cell {
-  display: flex;
-  min-width: 0;
+  align-content: center;
+  min-height: 6.2rem;
   border-right: 1px solid var(--line);
-  background: var(--paper);
-}
-
-.case-cell:last-child {
-  border-right: 0;
-}
-
-.case-cell-body {
-  display: flex;
-  width: 100%;
-  align-items: center;
+  border-bottom: 1px solid var(--line);
   padding: 0.85rem;
+  background: var(--paper);
 }
 
-.audio-cell-content {
+.audio-card-content {
   width: 100%;
 }
 
-.script-case .case-cell-body {
-  align-items: flex-start;
-}
-
 .script-cell {
-  max-height: 17rem;
-  overflow: auto;
-  padding-right: 0.25rem;
   color: #202020;
   font-size: 0.92rem;
   line-height: 1.5;
@@ -266,13 +226,9 @@ body {
   margin-bottom: 0;
 }
 
-.script-cell strong {
-  font-weight: 700;
-}
-
 .reference-cell {
   display: grid;
-  gap: 0.75rem;
+  gap: 0.55rem;
 }
 
 .reference-cell span {
@@ -307,12 +263,4 @@ audio {
   .task-directory {
     grid-template-columns: 1fr;
   }
-
-  .case-header {
-    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
-  }
-
-  .case-row {
-    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
-  }
 }