Compare commits
4 commits
a4cc07d07d
...
6edd1bcb3e
| Author | SHA1 | Date | |
|---|---|---|---|
| 6edd1bcb3e | |||
| 06ab639c42 | |||
| b71e899750 | |||
| a072221915 |
5 changed files with 53 additions and 20 deletions
|
|
@ -1,5 +1,10 @@
|
|||
<html lang=de>
|
||||
<meta charset=utf8>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<script src=/diffDOM.js></script>
|
||||
<script src=/springy.js></script>
|
||||
<script src=/src/index.js type=module></script>
|
||||
<aside>
|
||||
<a href="https://git.adrianheine.de/adrian/coding-precarity">git</a>
|
||||
</aside>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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 => '<p>' + v + '</p>').join('')
|
||||
fullview.innerHTML = `
|
||||
const wrapper = modal(`
|
||||
<header>
|
||||
<img src=${img} />
|
||||
<h1>${name}</h1>
|
||||
|
|
@ -152,8 +151,7 @@ export class Display {
|
|||
</header>
|
||||
<div class=fulltext>${text}
|
||||
<blockquote>${data.quote || ''}</blockquote></div>
|
||||
`
|
||||
wrapper.appendChild(fullview)
|
||||
`)
|
||||
target.appendChild(wrapper)
|
||||
}
|
||||
|
||||
|
|
|
|||
20
src/index.js
20
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)
|
||||
|
||||
|
|
|
|||
7
src/intro.js
Normal file
7
src/intro.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
export default `<h1>Memory des Prekariats.</h1>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
Ein Netzwerk der Prekären entsteht.
|
||||
</p>`
|
||||
15
style.css
15
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;
|
||||
}
|
||||
|
||||
|
|
@ -84,7 +85,6 @@ body {
|
|||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
min-width: 20em;
|
||||
min-height: 30em;
|
||||
max-height: 100%;
|
||||
max-width: 30em;
|
||||
overflow: auto;
|
||||
|
|
@ -124,11 +124,13 @@ 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;
|
||||
|
|
@ -137,5 +139,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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue