git ssb

0+

Zach! / dat-zine-library



Commit 17911892e80acec389107af6ee6a884916b4ae85

add collections list to home

Zach committed on 7/8/2018, 1:10:19 PM
Parent: c991b08f5186ef2bacdf5ac26c051324be0e3fd8

Files changed

building/aesthetic/stylesheets/main.csschanged
building/components/library.jschanged
building/components/shelving.jschanged
building/components/collections.jsadded
index.jschanged
zines/clear-skin.txtchanged
building/aesthetic/stylesheets/main.cssView
@@ -310,4 +310,31 @@
310310 .details p{
311311 padding-left: 1em;
312312 padding-right: 1em;
313313 }
314 +
315 +/* #collections
316 +--------------*/
317 +
318 +#collections-list{
319 + position: relative;
320 + display: flex;
321 + justify-content: flex-start;
322 + font-size: 1.3em;
323 +}
324 +
325 +#collections-list li{
326 + margin: 0.5em;
327 + list-style-type: none;
328 +}
329 +
330 +.primary-li {
331 + font-weight: bolder;
332 + font-size: 1.2em;
333 + margin-right: 1em;
334 +}
335 +
336 +#collection-selection {
337 + margin: 1em;
338 +}
339 +
340 +
building/components/library.jsView
@@ -4,8 +4,9 @@
44 const shelving = require('./shelving')
55 const button = require('./actionButtons')
66 const branchPlacard = require('./branchPlacard')
77 const newBranchForm = require('./newBranchForm')
8 +const collections = require('./collections')
89
910 module.exports = view
1011
1112 function view (state, emit) {
@@ -14,8 +15,9 @@
1415 ${branchPlacard(state, emit)}
1516 ${button.addZine(state)}
1617 ${newZineForm(emit)}
1718 ${newBranchForm()}
19 + ${collections(state)}
1820 ${shelving(state)}
1921 </body>
2022 `
2123 // newZineForm is a button for adding new zines
building/components/shelving.jsView
@@ -10,8 +10,19 @@
1010 </ul>
1111 `
1212
1313 function listZines (zine) {
14 + var collection = state.params.collection
15 +// This could likely be muuuch prettier, need to refactor!
16 + var isPartOfCollection = () => {
17 + if (zine.collections) {
18 + var name = decodeURI(collection)
19 + return zine.collections.find(collection => _.toLower(collection) === name)
20 + } else return false
21 + }
22 + if (collection && !isPartOfCollection()) {
23 + return //nothing
24 + } else {
1425 var trimmedUrl = _.trimEnd(zine.url, '/')
1526 var zineID = zine.title.replace(/ /g, '-')
1627 var imagePath = state.covers[trimmedUrl]
1728 return html`
@@ -29,8 +40,9 @@
2940 </div>
3041 </a>
3142 </li>
3243 `
44 + }
3345 }
3446
3547 function renderInfo (zine, state) {
3648 var trimmedUrl = _.trimEnd(zine.url, '/')
building/components/collections.jsView
@@ -1,0 +1,26 @@
1 +const html = require('nanohtml')
2 +
3 +module.exports = (state, emit) => {
4 + if (state.collections) {
5 + return html`
6 + <section id ='collections'>
7 + <div>
8 + <h2>Collections</h2>
9 + <ul id='collections-list'>
10 + <li><a href='/' class='primary-li'>all</a></li>
11 + ${collectionsList(state.collections)}
12 + </ul>
13 + </div>
14 + <h3 id='collection-selection'>${state.params.collection}</h3>
15 + </section>
16 + `
17 + }
18 +
19 + function collectionsList (arr) {
20 + return arr.map(collection => {
21 + return html`
22 + <li><a href='#collections/${collection}'>${collection}</a></li>
23 + `
24 + })
25 + }
26 +}
index.jsView
@@ -8,6 +8,7 @@
88 app.use(require('./volunteers/branchManager'))
99 app.use(require('./volunteers/addNewZines'))
1010 app.use(require('./volunteers/displayBranchInfo'))
1111
12 +app.route('/', library)
13 +app.route('#collections/:collection', library)
1214 app.mount('body')
13-app.route('/', library)
zines/clear-skin.txtView
@@ -1,3 +1,8 @@
11 title: clear skin in an unclear world
22 ----
33 url: dat://5b3ac4311a729e56c449e40e543d9e4be0350836313913e4b954a0b209faa17a/
4 +----
5 +collections:
6 + - minicomic
7 + - comedy
8 + - emo

Built with git-ssb-web