git ssb - add collections list to home · Zach!/dat-zine-library@17911892

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

building/aesthetic/stylesheets/main.css	changed
building/components/library.js	changed
building/components/shelving.js	changed
building/components/collections.js	added
index.js	changed
zines/clear-skin.txt	changed

building/aesthetic/stylesheets/main.cssView
		@@ -310,4 +310,31 @@
310	310 …	.details p{
311	311 …	padding-left: 1em;
312	312 …	padding-right: 1em;
313	313 …	}
	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 @@
4	4 …	const shelving = require('./shelving')
5	5 …	const button = require('./actionButtons')
6	6 …	const branchPlacard = require('./branchPlacard')
7	7 …	const newBranchForm = require('./newBranchForm')
	8 …	+const collections = require('./collections')
8	9 …
9	10 …	module.exports = view
10	11 …
11	12 …	function view (state, emit) {
		@@ -14,8 +15,9 @@
14	15 …	${branchPlacard(state, emit)}
15	16 …	${button.addZine(state)}
16	17 …	${newZineForm(emit)}
17	18 …	${newBranchForm()}
	19 …	+ ${collections(state)}
18	20 …	${shelving(state)}
19	21 …	</body>
20	22 …	`
21	23 …	// newZineForm is a button for adding new zines

building/components/shelving.jsView
		@@ -10,8 +10,19 @@
10	10 …	</ul>
11	11 …	`
12	12 …
13	13 …	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 {
14	25 …	var trimmedUrl = _.trimEnd(zine.url, '/')
15	26 …	var zineID = zine.title.replace(/ /g, '-')
16	27 …	var imagePath = state.covers[trimmedUrl]
17	28 …	return html`
		@@ -29,8 +40,9 @@
29	40 …	</div>
30	41 …	</a>
31	42 …	</li>
32	43 …	`
	44 …	+ }
33	45 …	}
34	46 …
35	47 …	function renderInfo (zine, state) {
36	48 …	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 @@
8	8 …	app.use(require('./volunteers/branchManager'))
9	9 …	app.use(require('./volunteers/addNewZines'))
10	10 …	app.use(require('./volunteers/displayBranchInfo'))
11	11 …
	12 …	+app.route('/', library)
	13 …	+app.route('#collections/:collection', library)
12	14 …	app.mount('body')
13		-app.route('/', library)

zines/clear-skin.txtView
		@@ -1,3 +1,8 @@
1	1 …	title: clear skin in an unclear world
2	2 …	----
3	3 …	url: dat://5b3ac4311a729e56c449e40e543d9e4be0350836313913e4b954a0b209faa17a/
	4 …	+----
	5 …	+collections:
	6 …	+ - minicomic
	7 …	+ - comedy
	8 …	+ - emo

Zach! / dat-zine-library