Repos / pytaku / 1724434831
commit 172443483158fcaf6d0880c3b72b295053391578
Author: Bùi Thành Nhân <hi@imnhan.com>
Date:   Sun Aug 30 18:34:19 2020 +0700

    somewhere pleasant "follows" grid

diff --git a/src/pytaku/static/js/routes/follows.js b/src/pytaku/static/js/routes/follows.js
index eef5e95..1e39485 100644
--- a/src/pytaku/static/js/routes/follows.js
+++ b/src/pytaku/static/js/routes/follows.js
@@ -7,12 +7,18 @@ const Title = {
     const numChaptersToDisplay = 3;
 
     return m(
-      "div.follows--title" + (title.chapters.length === 0 ? ".empty" : ""),
+      "div.follows--title" +
+        (title.chapters.length === 0 ? ".empty" : ".non-empty"),
       [
         m("div", [
-          m(m.route.Link, { href: `/m/${title.site}/${title.id}` }, [
-            m("img.follows--cover", { src: title.thumbnail, alt: title.name }),
-          ]),
+          m(
+            m.route.Link,
+            {
+              href: `/m/${title.site}/${title.id}`,
+              title: `${title.name} - ${title.site}`,
+            },
+            [m("img.follows--cover", { src: title.thumbnail, alt: title.name })]
+          ),
         ]),
         m("div.follows--chapters", [
           title.chapters.length > numChaptersToDisplay
@@ -80,7 +86,9 @@ function Follows(initialVNode) {
         ]);
       }
 
-      return m("div.content", [titles.map((title) => m(Title, { title }))]);
+      return m("div.follows.content", [
+        titles.map((title) => m(Title, { title })),
+      ]);
     },
   };
 }
diff --git a/src/pytaku/static/spa.css b/src/pytaku/static/spa.css
index 0a0d385..9e65918 100644
--- a/src/pytaku/static/spa.css
+++ b/src/pytaku/static/spa.css
@@ -175,14 +175,22 @@ .auth--form--message-error {
 
 /* Follows route */
 
+.follows.content {
+  display: flex;
+  flex-wrap: wrap;
+}
 .follows--title {
   display: flex;
   flex-direction: row;
   margin-bottom: var(--body-padding);
+}
+.follows--title.non-empty {
+  flex-basis: 100%;
   background-color: #efefef;
 }
 .follows--title.empty {
   display: inline-flex;
+  flex-grow: 1;
 }
 .follows--title.empty .chapters {
   display: none;