Two very bad columns

cry/static/style.css

@@ -41,3 +41,65 @@ li.entry:before {
   content: '\2022';
   padding-right: 0.5rem;
 }
+
+/* Feed summaries */
+ul.feed-summary-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0 1rem 0 0;
+
+  flex-basis: 10%;
+  flex: 1;
+  width: 100%;
+
+  height: auto;
+  overflow-y: auto;
+}
+
+li.feed-summary {
+  margin-bottom: 0.5rem;
+  flex: 1;
+
+  overflow: hidden;
+}
+li.feed-summary h2 {
+  margin: 0;
+  font-size: 100%;
+  flex: 1;
+}
+li.feed-summary p {
+  margin: 0;
+}
+p.feed-title-summary {
+  height: 1.5rem;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The feed container */
+div.feed-container {
+  flex: 1;
+  flex-basis: 40%;
+
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* Group it all */
+div.main-container {
+  margin-top: 1rem;
+  flex: 1;
+
+  display: flex;
+  flex-direction: row;
+  margin-left: auto;
+  margin-right: auto;
+  overflow-y: scroll; /*...but we don't scroll because our columns do first!*/
+}
+
+/* Uh */
+body.feed-view {
+  display: flex;
+  flex-direction: column;
+}

cry/views.py

@@ -1,9 +1,11 @@
 import typing
 
+import dominate
 import dominate.tags as tags
 
 from . import feed
 
+
 def _standard_header(title: str) -> tags.head:
     head = tags.head(
         tags.meta(charset="utf8"),
@@ -13,11 +15,33 @@ def _standard_header(title: str) -> tags.head:
     assert isinstance(head, tags.head)
     return head
 
+
+def _feed_summary(f: feed.Feed) -> tags.li:
+    if len(f.entries) == 0:
+        last_entry = tags.p(tags.i("Never posted"))
+    else:
+        entry = f.entries[0]
+        last_entry = [
+            tags.p(tags.i(f"Posted {entry.time_ago()} ago")),
+            tags.p({"class": "feed-title-summary"}, entry.title),
+        ]
+
+    result = tags.li(
+        {"class": "feed-summary"},
+        # TODO: Image!
+        tags.h2(f.title),
+        last_entry,
+    )
+    assert isinstance(result, tags.li)
+    return result
+
+
 def feed_view(feeds: list[feed.Feed]) -> tags.html:
     document = tags.html(
         _standard_header("Subscribed Feeds"),
-        tags.h1("Feeds"),
+        tags.body(
-        tags.div(
+            {"class": "feed-view"},
+            tags.h1("Feeds"),
             tags.form(
                 {"method": "post", "action": "/refresh"},
                 tags.input_(type="submit", value="Refresh"),
@@ -28,33 +52,45 @@ def feed_view(feeds: list[feed.Feed]) -> tags.html:
                 tags.input_(type="url", name="url"),
                 tags.input_(type="submit", value="Subscribe"),
             ),
-            (
+            tags.div(
+                {"class": "main-container"},
+                tags.ul(
+                    {"class": "feed-summary-list"}, (_feed_summary(f) for f in feeds)
+                ),
                 tags.div(
-                    {"class": "feed"},
+                    {"class": "feed-container"},
-                    tags.h2(tags.a(f.title, href=f.link, target="_blank")),
                     (
-                        tags.ul(
+                        tags.div(
-                            tags.li(
+                            {"class": "feed"},
-                                {"class": "entry"},
+                            tags.h2(tags.a(f.title, href=f.link, target="_blank")),
-                                tags.a(
+                            (
-                                    entry.title, href=entry.link, target="_blank"
+                                tags.ul(
-                                ),
+                                    tags.li(
-                                f" ({entry.time_ago()})",
+                                        {"class": "entry"},
-                            )
+                                        tags.a(
-                            for entry in f.entries
+                                            entry.title,
+                                            href=entry.link,
+                                            target="_blank",
+                                        ),
+                                        f" ({entry.time_ago()})",
+                                    )
+                                    for entry in f.entries
+                                )
+                                if len(f.entries) > 0
+                                else tags.i("No entries...")
+                            ),
                         )
-                        if len(f.entries) > 0
+                        for f in feeds
-                        else tags.i("No entries...")
                     ),
-                )
+                ),
-                for f in feeds
             ),
         ),
     )
     assert isinstance(document, tags.html)
     return document
 
-def subscribe_choose_view(candidates: typing.Iterable[tuple[str,str]]) -> tags.html:
+
+def subscribe_choose_view(candidates: typing.Iterable[tuple[str, str]]) -> tags.html:
     document = tags.html(
         _standard_header("Choose Feed"),
         tags.h1("Choose Feed"),
@@ -64,11 +100,15 @@ def subscribe_choose_view(candidates: typing.Iterable[tuple[str,str]]) -> tags.h
             tags.thead(tags.tr(tags.th("Title"), tags.th("URL"), tags.th())),
             tags.tbody(
                 tags.form(
-                    {"action": "/subscribe", "method":"post"},
+                    {"action": "/subscribe", "method": "post"},
                     tags.tr(
-                        tags.td(title), tags.td(url), tags.td(
+                        tags.td(title),
-                            tags.input_({"type":"hidden", "name":"url", "value":url}),
+                        tags.td(url),
-                            tags.input_({"type":"submit", "value":"Subscribe"}),
+                        tags.td(
+                            tags.input_(
+                                {"type": "hidden", "name": "url", "value": url}
+                            ),
+                            tags.input_({"type": "submit", "value": "Subscribe"}),
                         ),
                     ),
                 )

cry/web.py

@@ -497,7 +497,7 @@ class Handler(http.server.BaseHTTPRequestHandler):
         feeds.sort(key=feed.sort_key, reverse=True)
 
         document = views.feed_view(feeds)
-        self.write_html(document.render())
+        self.write_html("<!DOCTYPE html>\n" + document.render())
 
     def serve_subscribe_choose(self):
         try:
@@ -512,7 +512,7 @@ class Handler(http.server.BaseHTTPRequestHandler):
             return
 
         document = views.subscribe_choose_view(candidates)
-        self.write_html(document.render())
+        self.write_html("<!DOCTYPE html>\n" + document.render())
 
     def write_html(self, html: str):
         response = html.encode("utf-8")