git ssb

0+

Zach! / dat-zine-library



Commit 89658f9e88208096af0770fc6f691ff668a73c0b

Browse Files

Merge branch 'branch-front-end' into 'master'

Branch front end

See merge request zachmandeville/dat-zine-library!3
zach mandeville committed on 7/8/2018, 7:15:50 AM
Parent: 84e7089dcecb5f534a64c17d398045e5425f2550
Parent: 7c481dbee0cd1b97f72d740e58d70abb9a6533ff

Files changed

building/aesthetic/stylesheets/main.csschanged
building/components/actionButtons.jschanged
building/components/branchPlacard.jschanged
building/components/branchPlacardForm.jsadded
volunteers/displayBranchInfo.jschanged
volunteers/setBranchName.jsdeleted
volunteers/formHandler.jsadded
zines/read-me.txtchanged
zines/11-killer-app-ideas.txtadded
zines/A-Guided-Meditation.txtadded
branch/info.txtadded
distro/info.txtdeleted
building/aesthetic/stylesheets/main.cssView
@@ -1,14 +1,63 @@
11 … body{
2 …+ margin-bottom: 1em;
23 … font-family: var(--primary-text);
34 … background: var(--background-color);
45 … color: var(--text);
56 … padding: 0;
67 … margin: 0;
78 … box-sizing: border-box;
89 … }
910 …
11 …+#placard-form{
12 …+ box-shadow: -1px 2px 8px grey inset;
13 …+ position: absolute;
14 …+ width: 100%;
15 …+ z-index: 0;
16 …+ height: 100%;
17 …+ padding-left: 0;
18 …+ margin-left: 0;
19 …+ background: var(--new-branch-form-bg);
20 …+ display: flex;
21 …+ flex-direction: column;
22 …+ justify-content: center;
23 …+}
1024 …
25 …+#placard-form label{
26 …+ margin-bottom: 0;
27 …+ text-align: left;
28 …+}
29 …+#placard-form input{
30 …+ width: auto;
31 …+}
32 …+
33 …+#placard-form textarea{
34 …+ margin-left: 1em;
35 …+ margin-top: -1em;
36 …+ width: 80%;
37 …+ background-color: peachpuff;
38 …+ outline-width: 0;
39 …+ border: none;
40 …+ font-size: 1em;
41 …+}
42 …+
43 …+#placard-form input[type=submit]{
44 …+ box-shadow: -1px -1px 8px grey inset;
45 …+}
46 …+
47 …+#placard-form-close{
48 …+ position: absolute;
49 …+ right: 1em;
50 …+ top: 0;
51 …+ cursor: pointer;
52 …+}
53 …+
54 …+#placard-form-close:hover{
55 …+ color: teal;
56 …+}
57 …+
58 …+
59 …+
1160 … #zine-shelves{
1261 … display: grid;
1362 … width: 80%;
1463 … margin: auto;
@@ -17,11 +66,14 @@
1766 … grid-gap: 2em;
1867 … }
1968 …
2069 … #branch-placard{
21- margin: 0.5em;
70 …+ position: relative;
71 …+ height: 40vh;
2272 … width: 50%;
2373 … text-align: justify;
74 …+ margin-top: 1em;
75 …+ margin-bottom: 1em;
2476 … }
2577 …
2678 … #branch-placard h1{
2779 … font-family: arial;
@@ -92,8 +144,15 @@
92144 … background-color: var(--add-button-bg);
93145 … color: var(--new-zine-form-text);
94146 … }
95147 …
148 …+#edit-form-button{
149 …+ border-radius: 0px;
150 …+ font-size: 0.5em;
151 …+ background-color: var(--add-button-bg);
152 …+ color: var(--new-zine-form-text);
153 …+}
154 …+
96155 … #add-button:hover{
97156 … background-color: var(--add-button-hover);
98157 … color: indigo;
99158 … }
@@ -108,25 +167,31 @@
108167 … color: var(--branch-button-text);
109168 … }
110169 …
111170 … .form-card{
112- position: fixed;
113- z-index: 1;
114- right: -60%;
115- width: 40%;
116171 … display: flex;
117172 … flex-direction: column;
118173 … justify-content: space-between;
119174 … align-items: left;
120- border: 1px outset gray;
121- box-shadow: -2px 4px 20px 6px var(--new-branch-form-shadow);
122175 … }
123176 …
124177 … #new-branch-form.form-card{
178 …+ border: 1px outset gray;
179 …+ box-shadow: -2px 4px 20px 6px var(--new-branch-form-shadow);
180 …+ position: fixed;
181 …+ z-index: 1;
182 …+ right: -60%;
183 …+ width: 40%;
125184 … background: var(--new-branch-form-bg);
126185 … color: var(--new-branch-form-text);;
127186 … }
128187 … #new-zine-form.form-card{
188 …+ border: 1px outset gray;
189 …+ box-shadow: -2px 4px 20px 6px var(--new-branch-form-shadow);
190 …+ position: fixed;
191 …+ z-index: 1;
192 …+ right: -60%;
193 …+ width: 40%;
129194 … background: var(--new-zine-form-bg);
130195 … color: var(--new-zine-form-text);;
131196 … }
132197 …
@@ -203,12 +268,30 @@
203268 … .revealed {
204269 … right: 0 !important;
205270 … }
206271 …
272 …+#placard{
273 …+ position: absolute;
274 …+ z-index: 2;
275 …+ background: var(--background-color);
276 …+ left: 0;
277 …+ padding-left: 1em;
278 …+ height: 100%;
279 …+}
280 …+
281 …+.hidden{
282 …+ position: absolute;
283 …+ left: -1000% !important;
284 …+}
285 …+
207286 … .transition {
208287 … transition: right 0.3s ease-in;
209288 … }
210289 …
290 …+.transition-left {
291 …+ transition: left 1s ease-in-out;
292 …+}
293 …+
211294 … .details{
212295 … background: var(--details-bg);
213296 … display: flex;
214297 … flex-direction: column;
building/components/actionButtons.jsView
@@ -1,7 +1,7 @@
11 … const html = require('nanohtml')
22 …
3-module.exports = { addZine, makeBranch }
3 …+module.exports = { addZine, makeBranch, editDetails, placardClose }
44 …
55 … function addZine (state) {
66 … if (state.identity === 'librarian') {
77 … return html`
@@ -15,8 +15,29 @@
1515 … <button id='branch-button' onclick=${toggleBranch}>Make A New Branch</button>
1616 … `
1717 … }
1818 …
19 …+function editDetails (id) {
20 …+ if (id === 'librarian') {
21 …+ console.log('librarian!')
22 …+ return html`<button id='edit-form-button' onclick=${placardOpen}>edit</button>`
23 …+ } else {
24 …+ console.log('hi friend')
25 …+ }
26 …+
27 …+ function placardOpen () {
28 …+ var placard = document.querySelector('#placard')
29 …+ var form = document.querySelector('#placard-form')
30 …+ placard.classList.add('hidden')
31 …+ }
32 …+}
33 …+
34 …+function placardClose () {
35 …+ var placard = document.querySelector('#placard')
36 …+ var form = document.querySelector('#placard-form')
37 …+ placard.classList.remove('hidden')
38 …+}
39 …+
1940 … function toggleForm () {
2041 … var addButton = document.getElementById('add-button')
2142 … var form = document.getElementById('new-zine-form')
2243 …
@@ -28,8 +49,10 @@
2849 … addButton.textContent = 'close'
2950 … }
3051 … }
3152 …
53 …+
54 …+
3255 … function toggleBranch () {
3356 … var branchButton = document.querySelector('#branch-button')
3457 … var form = document.querySelector('#new-branch-form')
3558 …
building/components/branchPlacard.jsView
@@ -2,22 +2,25 @@
22 … const raw = require('nanohtml/raw')
33 … const md = require('markdown-it')()
44 …
55 … const button = require('./actionButtons')
6 …+const editForm = require('./branchPlacardForm')
67 …
78 … module.exports = view
89 …
910 … function view (state, emit) {
10- if (state.branch.title) {
11 …+ if (state.branch.name) {
1112 … var branch = state.branch
12- console.log({branch})
1313 … return html`
1414 … <section id='branch-placard'>
15- <h1>${branch.title}</h1>
15 …+ <div id='placard' class='transition-left'>
16 …+ <h1>${branch.name} ${button.editDetails(state.identity)}</h1>
1617 … ${render(branch.description)}
1718 … <p>Want to start your own zine library?<span> ${button.makeBranch()}</span></p>
19 …+ </div>
20 …+ ${editForm(state, emit)}
1821 … </section>
19- `
22 …+ `
2023 … } else {
2124 … return html`<h1>loading</h1>`
2225 … }
2326 … }
building/components/branchPlacardForm.jsView
@@ -1,0 +1,26 @@
1 …+const html = require('nanohtml')
2 …+
3 …+const button = require('./actionButtons')
4 …+
5 …+module.exports = (state, emit) => {
6 …+ var branch = state.branch
7 …+ if (state.branch.name) {
8 …+ return html`
9 …+ <div id='placard-form' class='form-card'>
10 …+ <h1>Library Details</h1>
11 …+ <p id='placard-form-close' onclick=${button.placardClose}>close</p>
12 …+ <form onsubmit=${updateBranch}>
13 …+ <label for='branch name'>Branch Name:<input type='text' name='name' value=${branch.name} /></label>
14 …+ <label for='branch description'>description:</label><textarea name='description' value=${branch.description}/>${branch.description}</textarea>
15 …+ <input type='submit' />
16 …+ </form>
17 …+ </div>
18 …+ `
19 …+ }
20 …+
21 …+ function updateBranch (e) {
22 …+ e.preventDefault()
23 …+ var form = e.currentTarget
24 …+ emit('branch updated', form)
25 …+ }
26 …+}
volunteers/displayBranchInfo.jsView
@@ -1,17 +1,32 @@
11 … const smarkt = require('smarkt')
22 …
3 …+const formHandler = require('./formHandler')
4 …+
35 … var archive = new DatArchive(window.location)
46 …
57 … function store (state, emitter) {
68 … state.branch = {}
79 … emitter.on('DOMContentLoaded', function () {
8- archive.readFile('distro/info.txt')
9- .then(file => {
10- var branchInfo = smarkt.parse(file)
11- state.branch = branchInfo
10 …+ mapInfoToState(state, emitter)
11 …+ })
12 …+
13 …+ emitter.on('branch updated', function (form) {
14 …+ var infoAsObj = formHandler.handle(form)
15 …+ var infoAsTxt = smarkt.stringify(infoAsObj)
16 …+
17 …+ state.branch = infoAsObj
18 …+ archive.writeFile('branch/info.txt', infoAsTxt)
19 …+ .then(emitter.emit('pushState'))
20 …+ })
21 …+
22 …+ function mapInfoToState (state, emitter) {
23 …+ archive.readFile('branch/info.txt')
24 …+ .then(info => {
25 …+ var infoAsObj = smarkt.parse(info)
26 …+ state.branch = infoAsObj
1227 … emitter.emit('pushState')
1328 … })
14- })
29 …+ }
1530 … }
1631 …
1732 … module.exports = store
volunteers/setBranchName.jsView
volunteers/formHandler.jsView
@@ -1,0 +1,10 @@
1 …+module.exports = {handle}
2 …+
3 …+function handle (form) {
4 …+ var formData = new FormData(form)
5 …+ var data = {}
6 …+ for (var pair of formData.entries()) {
7 …+ data[pair[0]] = pair[1]
8 …+ }
9 …+ return data
10 …+}
zines/read-me.txtView
@@ -1,5 +1,5 @@
11 … title: read me
22 … ----
33 … url: dat://d0222b1bcf7833e0708aa65ba8376aadba3f13e3025a113b10f755342b4c14d1/
44 … ----
5-notes: Found it on Scuttlebutt, looks to be good sci fi.
5 …+notes: I made this!
zines/11-killer-app-ideas.txtView
@@ -1,0 +1,5 @@
1 …+title: 11 killer app ideas
2 …+----
3 …+url: dat://86220354e57b0ac6dc3ef47ac9f8f75b62aebcd079d9688f2d7ede0af6abfba3/
4 …+----
5 …+notes: i made this one too.
zines/A-Guided-Meditation.txtView
@@ -1,0 +1,5 @@
1 …+title: A Guided Meditation
2 …+----
3 …+url: dat://0256c7538c0431d2e6dba8f11369407b19c3875957c8557cda4db6bd588f7be9/
4 …+----
5 …+notes: My Friend Ryland's Audio Meditation Zine.
branch/info.txtView
@@ -1,0 +1,8 @@
1 …+name: Zach's Zine Library!
2 …+----
3 …+description: The first dat zine library, but hopefully not the last!
4 …+
5 …+Collecting zines I wrote, my friends wrote, and ones that I discovered through sharing on here.
6 …+
7 …+
8 …+**Send me your zine! [webmaster@coolguy.website](mailto:webmaster@coolguy.website) or through [Scuttlebutt](https://scuttlebutt.nz) (where I am Zach!)**
distro/info.txtView
@@ -1,9 +1,0 @@
1-title: Zach Mandeville's Zine Library
2-----
3-description:
4-
5-The first dat zine library, but hopefully not the last! Collecting zines I wrote, my friends wrote, and ones that I discovered through sharing on here.
6-
7-
8-**Send me your zine! [webmaster@coolguy.website](mailto:webmaster@coolguy.website) or through [Scuttlebutt](https://scuttlebutt.nz) (where I am Zach!)**
9-

Built with git-ssb-web