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;