Show story change times and compact list details

bindery/static/js/stories.js

@@ -160,7 +160,21 @@ export function epubImport(storyId, title = 'Import an ePub file') {
   return card;
 }
 
+function storyDate(label, value) {
+  const date = new Date(value);
+  let content = fmtDate(value);
+  if (value && !Number.isNaN(date.getTime())) {
+    content = h('time', { datetime: value, title: content }, content);
+  }
+  return h('td', { class: 'date', 'data-label': label }, content);
+}
+
 function storyRow(s) {
+  const status = s.status && badge(s.status, s.status, s.message);
+  if (status && s.message) {
+    status.setAttribute('tabindex', '0');
+    status.setAttribute('aria-description', s.message);
+  }
   return h(
     'tr',
     {},
@@ -171,18 +185,17 @@ function storyRow(s) {
       'td',
       { 'data-label': 'Chapters' },
       String(s.chapter_count),
-      s.offsite_count > 0 && [' ', badge('warn', `${s.offsite_count} removed`, 'Chapters the site no longer lists')],
-      s.revised_count > 0 && [' ', badge('info', `${s.revised_count} revised`, 'Chapters the site changed since Bindery added them')],
+      s.offsite_count > 0 && h('small', { title: 'Chapters the site no longer lists' }, `${s.offsite_count} removed`),
+      s.revised_count > 0 && h('small', { title: 'Chapters the site changed since Bindery added them' }, `${s.revised_count} revised`),
     ),
     h(
       'td',
       { 'data-label': 'Status' },
-      s.status && badge(s.status),
+      status,
       s.upload_held && [' ', badge('warn', 'held', 'The book did not go to CWA. See the story page.')],
-      ' ',
-      h('small', {}, s.message),
     ),
-    h('td', { class: 'date', 'data-label': 'Last check' }, fmtDate(s.last_checked)),
+    storyDate('Last change', s.last_changed),
+    storyDate('Last check', s.last_checked),
   );
 }
 
@@ -203,7 +216,7 @@ export function storiesPage(main, _params, config) {
       fill(table, h('p', { class: 'empty' }, text));
       return;
     }
-    const head = ['Title', 'Author', 'Site', 'Chapters', 'Status', 'Last check'].map((t) => h('th', {}, t));
+    const head = ['Title', 'Author', 'Site', 'Chapters', 'Status', 'Last change', 'Last check'].map((t) => h('th', {}, t));
     fill(
       table,
       h(

bindery/static/style.css

@@ -745,6 +745,17 @@ textarea {
   overflow-x: auto;
 }
 
+.stories-table td[data-label='Chapters'] small {
+  display: block;
+  white-space: nowrap;
+}
+
+@media (min-width: 601px) {
+  .stories-table .date {
+    inline-size: 1%;
+  }
+}
+
 /* The story list and the chapter list stack into cards below 600px, instead of scrolling
    sideways. data-label repeats each column heading in front of its value. */
 @media (max-width: 600px) {