adrian/coding-precarity
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Compare commits

base: adrian:6edd1bcb3ed8ab572cdbdcdfd137109c3d0542ed
Branches Tags
adrian:master
..
compare: adrian:a4cc07d07dca7b9d9b0dc514ffa12f4d1877304b
Branches Tags
adrian:master

No commits in common. "6edd1bcb3ed8ab572cdbdcdfd137109c3d0542ed" and "a4cc07d07dca7b9d9b0dc514ffa12f4d1877304b" have entirely different histories.
6edd1bcb3e ... a4cc07d07d

5 changed files with 20 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

5
index.html
View file

@ -1,10 +1,5 @@
<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>

26
src/display.js
View file

@ -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 => '<p>' + v + '</p>').join('')
const wrapper = modal(`
fullview.innerHTML = `
<header>
<img src=${img} />
<h1>${name}</h1>
@ -151,7 +152,8 @@ export class Display {
</header>
<div class=fulltext>${text}
<blockquote>${data.quote || ''}</blockquote></div>
`)
`
wrapper.appendChild(fullview)
target.appendChild(wrapper)
}

20
src/index.js
View file

@ -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)

7
src/intro.js
View file

@ -1,7 +0,0 @@
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>`

13
style.css
View file

@ -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;
@ -129,8 +129,6 @@ 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;
@ -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;
}