Browse Source

story: Added tag list, fixed tag not showing when listing by tag.

1.0
Gisle Aune 6 years ago
parent
commit
35447b0569
  1. 35
      marko/page/story/components/tags-page/component.js
  2. 14
      marko/page/story/components/tags-page/index.marko
  3. 68
      marko/page/story/components/tags-page/style.less
  4. 2
      marko/page/story/list.marko
  5. 1
      marko/page/story/tag-list.marko
  6. 7
      package-lock.json
  7. 3
      package.json

35
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,
})
}
}

14
marko/page/story/components/tags-page/index.marko

@ -0,0 +1,14 @@
<div class="tags-page">
<h1 class="color-primary">All Tags</h1>
<p>These are all distinct tags that appear in at least one listed story.</p>
<div class="groups">
<div for(group in state.groups) class=["group", group.groupClass]>
<h2 class=group.colorClass>${group.header}</h2>
<ul>
<li for(tag in group.tags)>
<a href=tag.url class=group.colorClass>${tag.name}</a>
</li>
</ul>
</div>
</div>
</div>

68
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;
}
}
}

2
marko/page/story/list.marko

@ -1,6 +1,6 @@
<include("../layout", {title: "Stories", site: "story"})> <include("../layout", {title: "Stories", site: "story"})>
<@body> <@body>
<background src="/assets/images/bg.png" opacity=0.25 /> <background src="/assets/images/bg.png" opacity=0.25 />
<page user=input.user stories=input.stories categories=input.categories selected=input.selected menuAuthor=input.menuAuthor menuMonth=input.menuMonth />
<page user=input.user stories=input.stories categories=input.categories selected=input.selected menuAuthor=input.menuAuthor menuMonth=input.menuMonth menuTags=input.menuTags />
</@body> </@body>
</include> </include>

1
marko/page/story/tag-list.marko

@ -3,6 +3,7 @@
<background src="/assets/images/bg.png" opacity=0.25 /> <background src="/assets/images/bg.png" opacity=0.25 />
<story-menu categories=input.categories selected=(input.selected || {}) menuTags=input.menuTags user=input.user /> <story-menu categories=input.categories selected=(input.selected || {}) menuTags=input.menuTags user=input.user />
<main> <main>
<tags-page tags=input.tags />
</main> </main>
</@body> </@body>
</include> </include>

7
package-lock.json

@ -1148,7 +1148,7 @@
}, },
"chai": { "chai": {
"version": "3.5.0", "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=", "integrity": "sha1-TQJjewZ/6Vi9v906QOxW/vc3Mkc=",
"requires": { "requires": {
"assertion-error": "^1.0.1", "assertion-error": "^1.0.1",
@ -3834,6 +3834,11 @@
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=" "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": { "prelude-ls": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",

3
package.json

@ -36,6 +36,7 @@
"marko": "^4.13.8", "marko": "^4.13.8",
"moment": "^2.22.2", "moment": "^2.22.2",
"passport": "^0.4.0", "passport": "^0.4.0",
"passport-auth0": "^1.0.0"
"passport-auth0": "^1.0.0",
"pluralize": "^7.0.0"
} }
} }
Loading…
Cancel
Save