From 35447b05692ad53c02b6f4e6c454c3753cf505bc Mon Sep 17 00:00:00 2001 From: Gisle Aune Date: Sat, 13 Oct 2018 10:50:06 +0200 Subject: [PATCH] story: Added tag list, fixed tag not showing when listing by tag. --- .../story/components/tags-page/component.js | 35 ++++++++++ .../story/components/tags-page/index.marko | 14 ++++ .../story/components/tags-page/style.less | 68 +++++++++++++++++++ marko/page/story/list.marko | 2 +- marko/page/story/tag-list.marko | 1 + package-lock.json | 7 +- package.json | 3 +- 7 files changed, 127 insertions(+), 3 deletions(-) create mode 100644 marko/page/story/components/tags-page/component.js create mode 100644 marko/page/story/components/tags-page/index.marko create mode 100644 marko/page/story/components/tags-page/style.less diff --git a/marko/page/story/components/tags-page/component.js b/marko/page/story/components/tags-page/component.js new file mode 100644 index 0000000..c7719e2 --- /dev/null +++ b/marko/page/story/components/tags-page/component.js @@ -0,0 +1,35 @@ +const pluralize = require("pluralize") + +// TODO: use graphql for this like with story categories +const kinds = ["Character", "Event", "Location", "Organization", "Series"] + +module.exports = class { + onCreate(input) { + this.state = { + tags: [], + groups: [], + } + + this.update(input.tags) + } + + update(newTags) { + const tags = newTags.map(t => ({ + kind: t.kind, + name: t.name, + url: `/story/by-tag/${t.kind}/${encodeURIComponent(t.name)}` + })) + + const groups = kinds.map(k => ({ + groupClass: "group-" + k.toLowerCase(), + colorClass: "color-tag-" + k.toLowerCase(), + header: pluralize(k), + tags: tags.filter(t => t.kind === k), + })) + + this.state = Object.assign({}, this.state, { + tags: tags, + groups: groups, + }) + } +} \ No newline at end of file diff --git a/marko/page/story/components/tags-page/index.marko b/marko/page/story/components/tags-page/index.marko new file mode 100644 index 0000000..7dadc5d --- /dev/null +++ b/marko/page/story/components/tags-page/index.marko @@ -0,0 +1,14 @@ +
+

All Tags

+

These are all distinct tags that appear in at least one listed story.

+
+
+

${group.header}

+ +
+
+
\ No newline at end of file diff --git a/marko/page/story/components/tags-page/style.less b/marko/page/story/components/tags-page/style.less new file mode 100644 index 0000000..0ff6903 --- /dev/null +++ b/marko/page/story/components/tags-page/style.less @@ -0,0 +1,68 @@ +div.tags-page { + h1 { + font-weight: 100; + text-align: center; + } + + p { + text-align: center; + } + + div.groups { + column-count: 4; + padding: 0.5em; + + div.group { + padding: 0.5em 0em; + vertical-align: top; + + h2 { + font-weight: 100; + padding-bottom: 0.125em; + border-bottom: 0.5px solid; + margin-bottom: 0.25em; + margin-top: 0; + } + + ul { + margin: 0; + padding: 0; + + li { + list-style: none; + + a:hover { + text-decoration: underline; + } + } + } + } + div.group:first-of-type { + padding: 0; + } + } +} + +@media screen and (max-width: 1900px) { + div.tags-page { + div.groups { + column-count: 3; + } + } +} + +@media screen and (max-width: 1300px) { + div.tags-page { + div.groups { + column-count: 2; + } + } +} + +@media screen and (max-width: 1000px) { + div.tags-page { + div.groups { + column-count: 1; + } + } +} \ No newline at end of file diff --git a/marko/page/story/list.marko b/marko/page/story/list.marko index 8293789..c43ccf4 100644 --- a/marko/page/story/list.marko +++ b/marko/page/story/list.marko @@ -1,6 +1,6 @@ <@body> - + diff --git a/marko/page/story/tag-list.marko b/marko/page/story/tag-list.marko index cbca7b0..8ca6624 100644 --- a/marko/page/story/tag-list.marko +++ b/marko/page/story/tag-list.marko @@ -3,6 +3,7 @@
+
diff --git a/package-lock.json b/package-lock.json index 6bbe8a1..a0f2d14 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1148,7 +1148,7 @@ }, "chai": { "version": "3.5.0", - "resolved": "http://registry.npmjs.org/chai/-/chai-3.5.0.tgz", + "resolved": "https://registry.npmjs.org/chai/-/chai-3.5.0.tgz", "integrity": "sha1-TQJjewZ/6Vi9v906QOxW/vc3Mkc=", "requires": { "assertion-error": "^1.0.1", @@ -3834,6 +3834,11 @@ "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=" }, + "pluralize": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz", + "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==" + }, "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", diff --git a/package.json b/package.json index d6e4cdf..6d377a0 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "marko": "^4.13.8", "moment": "^2.22.2", "passport": "^0.4.0", - "passport-auth0": "^1.0.0" + "passport-auth0": "^1.0.0", + "pluralize": "^7.0.0" } }