Merge pull request #132 from DenisValeev/codex/update-card-display-in-total-recall

Simplify Total Recall deck layout

Author: DenisValeev

apps/total-recall/app.js

@@ -1,8 +1,6 @@
 (function () {
   const notesInput = document.querySelector('[data-notes-input]');
   const currentEntryEl = document.querySelector('[data-current-text]');
-  const previewEntryEl = document.querySelector('[data-preview-text]');
-  const previewCard = document.querySelector('[data-preview-card]');
   const counterEl = document.querySelector('[data-counter]');
   const prevButton = document.querySelector('[data-prev]');
   const nextButton = document.querySelector('[data-next]');
@@ -14,8 +12,6 @@
   if (
     !notesInput ||
     !currentEntryEl ||
-    !previewEntryEl ||
-    !previewCard ||
     !counterEl ||
     !prevButton ||
     !nextButton ||
@@ -34,7 +30,6 @@
     "I told my computer I needed a break, and it said 'No problem — I'll go to sleep.'",
     'Why did the scarecrow get a promotion? He was outstanding in his field.'
   ].join('\n\n');
-  const PREVIEW_PLACEHOLDER = 'Add another note to preview the upcoming card.';
 
   let entries = [];
   let deckOrder = [];
@@ -184,9 +179,6 @@
     counterEl.textContent = '0 of 0';
     currentEntryEl.textContent = 'No notes yet. Add entries below to start reviewing.';
     currentEntryEl.classList.add('is-empty');
-    previewEntryEl.textContent = PREVIEW_PLACEHOLDER;
-    previewEntryEl.classList.add('is-empty');
-    previewCard.setAttribute('aria-hidden', 'true');
     prevButton.disabled = true;
     nextButton.disabled = true;
     shuffleButton.disabled = true;
@@ -216,17 +208,6 @@
     nextButton.disabled = disableNav;
     shuffleButton.disabled = deckOrder.length <= 1;
 
-    if (deckOrder.length > 1) {
-      const previewEntryIndex = deckOrder[(index + 1) % deckOrder.length];
-      const preview = entries[previewEntryIndex];
-      previewEntryEl.textContent = preview;
-      previewEntryEl.classList.remove('is-empty');
-      previewCard.removeAttribute('aria-hidden');
-    } else {
-      previewEntryEl.textContent = PREVIEW_PLACEHOLDER;
-      previewEntryEl.classList.add('is-empty');
-      previewCard.setAttribute('aria-hidden', 'true');
-    }
   }
 
   function showNext() {

apps/total-recall/index.html

@@ -133,13 +133,12 @@
 
     .card__meta {
       display: flex;
-      justify-content: space-between;
       align-items: center;
       color: var(--text-secondary);
       font-weight: 600;
       letter-spacing: 0.04em;
       text-transform: uppercase;
-      font-size: 0.85rem;
+      font-size: 0.8rem;
     }
 
     .card__body {
@@ -151,7 +150,7 @@
 
     .card__text {
       margin: 0;
-      font-size: clamp(1.1rem, 1.8vw + 0.95rem, 1.7rem);
+      font-size: clamp(1rem, 1.4vw + 0.85rem, 1.4rem);
       line-height: 1.5;
       white-space: pre-line;
     }
@@ -161,14 +160,6 @@
       font-size: clamp(0.95rem, 1.2vw + 0.85rem, 1.1rem);
     }
 
-    .card--preview {
-      opacity: 0.92;
-    }
-
-    .card--preview[aria-hidden="true"] {
-      opacity: 0.6;
-    }
-
     .controls {
       display: flex;
       flex-wrap: wrap;
@@ -370,20 +361,11 @@
       <article class="card card--current">
         <div class="card__meta">
           <span id="card-counter" data-counter>0 of 0</span>
-          <span>Now playing</span>
         </div>
         <div class="card__body">
           <p id="entry-text" class="card__text is-empty" data-current-text>Add notes below to get started.</p>
         </div>
       </article>
-      <article class="card card--preview" data-preview-card aria-label="Next card">
-        <div class="card__meta">
-          <span>Next up</span>
-        </div>
-        <div class="card__body">
-          <p class="card__text is-empty" data-preview-text>Add another note to preview the upcoming card.</p>
-        </div>
-      </article>
     </section>
     <div class="controls" role="group" aria-label="Deck controls">
       <button class="control-button control-button--secondary" type="button" data-prev>