diff --git a/index.html b/index.html index 12d3a60..f508c69 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,5 @@ - - - diff --git a/src/display.js b/src/display.js index 0c438b3..5f8fe2f 100644 --- a/src/display.js +++ b/src/display.js @@ -1,13 +1,3 @@ -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 @@ -19,6 +9,13 @@ 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 @@ -138,12 +135,16 @@ 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('') - const wrapper = modal(` + fullview.innerHTML = `

${name}

@@ -151,7 +152,8 @@ export class Display {
${text}
${data.quote || ''}
- `) + ` + wrapper.appendChild(fullview) target.appendChild(wrapper) } diff --git a/src/index.js b/src/index.js index 41da339..b0eb009 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,4 @@ -import {modal, Display} from './display.js' -import intro from './intro.js' +import {Display} from './display.js' const target = document.createElement('div') @@ -51,23 +50,8 @@ 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) -if (document.location.search) dispatch(document.location.search) -else document.body.appendChild(modal(intro)) +dispatch(document.location.search) document.body.appendChild(target) diff --git a/src/intro.js b/src/intro.js deleted file mode 100644 index 3dc3c52..0000000 --- a/src/intro.js +++ /dev/null @@ -1,7 +0,0 @@ -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. -

` diff --git a/style.css b/style.css index eb63a20..bf21de8 100644 --- a/style.css +++ b/style.css @@ -13,7 +13,6 @@ body { background-color: #e1eef2; margin: 0; font-family: "Fell"; - hyphens: auto; } .wrapper { @@ -64,7 +63,7 @@ body { position: absolute; transform-origin: 0 0; font-size: 1.2em; - padding: 0 55px; + padding: 0 70px; box-sizing: border-box; } @@ -85,6 +84,7 @@ body { left: 50%; transform: translate(-50%, -50%); min-width: 20em; + min-height: 30em; max-height: 100%; max-width: 30em; overflow: auto; @@ -124,13 +124,11 @@ h1, .desc { margin: 0.5em 0; } blockquote { - background: #f9f9f9cc; + background: #f9f9f9cc; border-left: .5em solid #1a1c1c66; 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; @@ -139,10 +137,5 @@ blockquote:before { line-height: 0.1em; margin-right: 0.25em; float: left; - margin-top: 2.5rem; -} - -aside { - float: right; - padding: 1em; +margin-top: 2.5rem; }