From a0722219158f8cbb9859223c4d2c40a66481c7b4 Mon Sep 17 00:00:00 2001 From: Adrian Heine Date: Sun, 20 Sep 2020 22:32:08 +0200 Subject: [PATCH 1/4] Add git link --- index.html | 3 +++ style.css | 7 ++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index f508c69..df72e59 100644 --- a/index.html +++ b/index.html @@ -3,3 +3,6 @@ + diff --git a/style.css b/style.css index bf21de8..e194f17 100644 --- a/style.css +++ b/style.css @@ -137,5 +137,10 @@ blockquote:before { line-height: 0.1em; margin-right: 0.25em; float: left; -margin-top: 2.5rem; + margin-top: 2.5rem; +} + +aside { + float: right; + padding: 1em; } From b71e89975020ea5e7eacf3094eaa24fa3ff3fc77 Mon Sep 17 00:00:00 2001 From: Adrian Heine Date: Sun, 20 Sep 2020 22:32:20 +0200 Subject: [PATCH 2/4] Hyphenation --- index.html | 2 ++ style.css | 5 +++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index df72e59..12d3a60 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + @@ -6,3 +7,4 @@ + diff --git a/style.css b/style.css index e194f17..8e4dda1 100644 --- a/style.css +++ b/style.css @@ -13,6 +13,7 @@ body { background-color: #e1eef2; margin: 0; font-family: "Fell"; + hyphens: auto; } .wrapper { @@ -63,7 +64,7 @@ body { position: absolute; transform-origin: 0 0; font-size: 1.2em; - padding: 0 70px; + padding: 0 55px; box-sizing: border-box; } @@ -124,7 +125,7 @@ h1, .desc { margin: 0.5em 0; } blockquote { - background: #f9f9f9cc; + background: #f9f9f9cc; border-left: .5em solid #1a1c1c66; margin: .5em; padding: .5em; From 06ab639c429e8fab3841ffe34f8b8af7565e2e6b Mon Sep 17 00:00:00 2001 From: Adrian Heine Date: Sun, 20 Sep 2020 22:48:30 +0200 Subject: [PATCH 3/4] Add intro --- src/display.js | 26 ++++++++++++-------------- src/index.js | 20 ++++++++++++++++++-- src/intro.js | 7 +++++++ 3 files changed, 37 insertions(+), 16 deletions(-) create mode 100644 src/intro.js diff --git a/src/display.js b/src/display.js index 5f8fe2f..0c438b3 100644 --- a/src/display.js +++ b/src/display.js @@ -1,3 +1,13 @@ +export const modal = content => { + const wrapper = document.createElement('a') + wrapper.href = '/' + wrapper.className = 'fullview' + const fullview = document.createElement('div') + fullview.innerHTML = content + wrapper.appendChild(fullview) + return wrapper +} + export class Display { constructor(baseUrl, dispatch, target) { this.baseUrl = baseUrl @@ -9,13 +19,6 @@ export class Display { } return target } - target.addEventListener('click', e => { - let target = findA(e.target) - if (!target) return - window.history.pushState(null, "", target.href) - dispatch(target.getAttribute('href')) - e.preventDefault() - }) target.addEventListener('dragstart', e => { let target = findA(e.target) if (!target || !target.draggable) return @@ -135,16 +138,12 @@ export class Display { target.appendChild(field) if (state.show !== null) { - const wrapper = document.createElement('a') - wrapper.href = '/' - wrapper.className = 'fullview' - const fullview = document.createElement('div') const data = state.items[state.show] const name = data.name const desc = data.desc const img = '/img/' + data.img const text = (data.text || []).map(v => '

' + v + '

').join('') - fullview.innerHTML = ` + const wrapper = modal(`

${name}

@@ -152,8 +151,7 @@ export class Display {
${text}
${data.quote || ''}
- ` - wrapper.appendChild(fullview) + `) target.appendChild(wrapper) } diff --git a/src/index.js b/src/index.js index b0eb009..41da339 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,5 @@ -import {Display} from './display.js' +import {modal, Display} from './display.js' +import intro from './intro.js' const target = document.createElement('div') @@ -50,8 +51,23 @@ const dispatch = target => { window.onpopstate = e => { dispatch(document.location.search) } +const findA = target => { + while (target.nodeName !== 'A') { + target = target.parentNode + if (!target) return + } + return target +} +document.body.addEventListener('click', e => { + let target = findA(e.target) + if (!target) return + window.history.pushState(null, "", target.href) + dispatch(target.getAttribute('href')) + e.preventDefault() +}) display = new Display('', dispatch, target) -dispatch(document.location.search) +if (document.location.search) dispatch(document.location.search) +else document.body.appendChild(modal(intro)) document.body.appendChild(target) diff --git a/src/intro.js b/src/intro.js new file mode 100644 index 0000000..3dc3c52 --- /dev/null +++ b/src/intro.js @@ -0,0 +1,7 @@ +export default `

Memory des Prekariats.

+

+Unsichere Arbeits- und Lebensverhältnisse haben viele Gesichter. In diesem Spiel ist es eure Aufgabe, ihr geteiltes Leid aufzudecken. Klickt dafür auf die Symbole und lernt die historischen und heutigen Figuren des Prekariats kennen. Durch das Zusammenziehen der Kreise entdeckt ihr, was die Vergangenheit mit der Gegenwart verknüpft. +

+

+Ein Netzwerk der Prekären entsteht. +

` From 6edd1bcb3ed8ab572cdbdcdfd137109c3d0542ed Mon Sep 17 00:00:00 2001 From: Adrian Heine Date: Sun, 20 Sep 2020 22:51:43 +0200 Subject: [PATCH 4/4] Remove min-height on modals --- style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 8e4dda1..eb63a20 100644 --- a/style.css +++ b/style.css @@ -85,7 +85,6 @@ body { left: 50%; transform: translate(-50%, -50%); min-width: 20em; - min-height: 30em; max-height: 100%; max-width: 30em; overflow: auto; @@ -130,6 +129,8 @@ blockquote { margin: .5em; padding: .5em; quotes: "\201C""\201D""\2018""\2019"; + /* Otherwise the :before is larger than the blockquote and creates a scrollbar in the parent */ + min-height: 3em; } blockquote:before { color: #1a1c1c66;