Merge pull request #1266 from twm/list-article-cols

Tabularize the article list

css/main.css

@@ -284,7 +284,6 @@ textarea[readonly] {
 @import "./Article.css";
 @import "./GlobalBar.css";
 @import "./icons.css";
-@import "./ListArticle.css";
 @import "./StateToggle.css";
 @import "./Tabs.css";
 @import "./FeedView.css";

yarrharr/templates/article_list.html

@@ -1,24 +1,114 @@
+<style nonce="{{ csp_nonce }}">
+
+.list-article {
+  display: flex; {# Flexbox rather than grid so we can omit columns without altering the styles. #}
+  flex-flow: row nowrap;
+  align-items: center;
+
+  margin: 0.75rem 0;
+
+  white-space: nowrap;
+
+  --focus-offset: var(--focus-offset-in); /* Don't clip focus ring. */
+
+  .meta1 {
+    display: contents;
+
+    .feed-title, .date, .author {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-right: 1rem;
+    }
+    .feed-title {
+      flex: 0 0 10rem;
+    }
+    .date {
+      flex: 0 0 12rem;
+    }
+    .author {
+      flex: 0 0 8rem;
+    }
+  }
+
+  .meta2 {
+    flex: 1 1 100%;
+    min-width: 0;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-end;
+    gap: 1.5rem;
+    margin-right: 1rem;
+
+    .title, .snippet {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .title {
+        flex: 0 1 max-content;
+        color: var(--text-color);
+    }
+    &:hover .title {
+      text-decoration-line: underline;
+      text-decoration-color: var(--underline-color);
+    }
+    .snippet {
+        flex: 1 1 0%;
+        color: var(--quiet-text-color);
+    }
+  }
+
+  read-toggle,
+  .view-link {
+      flex: 0 0 var(--bar-height);
+  }
+  read-toggle {
+      button {
+          width: 100%;
+          height: 100%;
+      }
+  }
+  .view-link {
+  }
+
+  .outbound-icon,
+  read-toggle button,
+  .view-link {
+      font-size: var(--icon-size);
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      justify-content: center;
+
+      .icon {
+          flex: 0 0 auto;
+          display: block;
+          align-self: center;
+          justify-self: center;
+      }
+  }
+}
+
+</style>
+
 {% for article in articles %}
 <div class="list-article">
-  <div class="list-article-inner">
-    <div class="list-article-slider">
-      <a class="outbound" href="{{ article.url }}" target="_blank" title="View on source site">
-        {# TODO: relative time #}
-        <span class="meta1">{{ article.feed.title }} — {{ article.date }} — {{ article.author }}</span>
-        <span class="meta2">
-          <span class="title">{{ article.title }}</span>
-          <span class="snippet">{{ article.content_snippet }}</span>
-        </span>
-      </a>
-      <read-toggle article-id="{{ article.id }}" {{ article.read|yesno:"checked," }}></read-toggle>
-      <a class="square view-link" href="{% url 'article-show' article.id %}">
-        <svg width="1em" height="1em" title="View article" class="icon" aria-hidden="false"><use xlink:href="#icon-follow"></use></svg>
-      </a>
-    </div>
-  </div>
+  <span class="meta1">
+    <span class="feed-title">{{ article.feed.title }}</span>
+    <span class="date">{{ article.date }}</span>
+    <span class="author">{{ article.author }}</span>
+  </span>
+  <a class="meta2 no-underline" href="{{ article.url }}" target="_blank" title="View on source site">
+    <span class="title">{{ article.title }}</span>
+    <span class="snippet">{{ article.content_snippet }}</span>
+  </a>
+  <read-toggle article-id="{{ article.id }}" {{ article.read|yesno:"checked," }}></read-toggle>
+  <a class="square view-link" href="{% url 'article-show' article.id %}">
+    <svg width="1em" height="1em" title="View article" class="icon" aria-hidden="false"><use xlink:href="#icon-follow"></use></svg>
+  </a>
 </div>
 {% endfor %}
 
 {% if next_page_after %}
-<div class="pagination"><a class="no-underline" href="?after={{ next_page_after }}">More →</a></div>
+<div class="pagination"><a class="lazy-underline" href="?after={{ next_page_after }}">More →</a></div>
 {% endif %}