Browse Source

Update

master
Adrian Heine 4 years ago
parent
commit
92eacb0967
  1. 66
      img/Sex work2.svg
  2. BIN
      img/bild1.jpg
  3. BIN
      img/bild2.jpg
  4. BIN
      img/bild3.jpg
  5. BIN
      img/bild4.jpg
  6. BIN
      img/bild5.jpg
  7. BIN
      img/gretchen.jpg
  8. 67
      src/data.js
  9. 14
      src/display.js
  10. 14
      src/index.js
  11. 24
      style.css

66
img/Sex work2.svg

@ -0,0 +1,66 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="90mm"
height="90mm"
viewBox="0 0 90 90"
version="1.1"
id="svg8"
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
sodipodi:docname="Sex work2.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.87707686"
inkscape:cx="70.335369"
inkscape:cy="214.06609"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
inkscape:document-rotation="0"
showgrid="false"
inkscape:window-width="1600"
inkscape:window-height="836"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
fit-margin-top="2.3"
lock-margins="false" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-39.309525,-72.320833)">
<path
id="path835"
style="fill:#000000;stroke-width:1.84364"
d="m 103.25161,86.836519 c -8.90952,0.105792 -17.624255,4.910885 -18.864489,15.009941 -5.291669,-21.166671 -39.309745,-18.994038 -39.309746,1.87016 10e-7,20.8642 39.309746,57.43267 39.309746,57.43267 0,0 39.309239,-36.56847 39.309239,-57.43267 0,-11.084102 -10.3473,-16.999999 -20.44475,-16.880101 z m -37.5295,9.320361 c 7.245454,0.01695 15.675108,4.83332 18.665011,15.99178 5.775788,-21.555526 32.132409,-18.734817 32.132409,-5.08444 0,13.65038 -32.132409,41.04969 -32.132409,41.04969 0,0 -30.529403,-28.20133 -30.529403,-41.85171 0,-6.39861 5.471343,-10.120279 11.864392,-10.10532 z" />
<path
id="path881"
style="fill:#ffffff;stroke-width:1.00945"
d="m 110.05249,229.10414 c -7.91822,7.59653 -8.19561,20.07052 -0.6444,28.01506 0.0219,0.023 0.0398,0.0481 0.0618,0.071 l 27.36694,28.52586 c 0.022,0.023 0.0465,0.0421 0.0686,0.0649 0.0231,-0.022 0.0483,-0.04 0.0713,-0.062 L 165.50257,258.352 c 0.0229,-0.022 0.0419,-0.0464 0.0646,-0.0684 7.87404,-7.62469 8.11397,-20.09944 0.51742,-28.01767 -7.59653,-7.91823 -20.07025,-8.19534 -28.01478,-0.64413 -7.6247,-7.87404 -20.09918,-8.11423 -28.01741,-0.51769 z" />
</g>
</svg>

BIN
img/bild1.jpg

After

Width: 335  |  Height: 335  |  Size: 16 KiB

BIN
img/bild2.jpg

After

Width: 435  |  Height: 435  |  Size: 20 KiB

BIN
img/bild3.jpg

After

Width: 291  |  Height: 291  |  Size: 8.7 KiB

BIN
img/bild4.jpg

After

Width: 373  |  Height: 373  |  Size: 13 KiB

BIN
img/bild5.jpg

After

Width: 482  |  Height: 480  |  Size: 30 KiB

BIN
img/gretchen.jpg

Before

Width: 564  |  Height: 582  |  Size: 786 KiB

67
src/data.js

@ -0,0 +1,67 @@
export const items = [
{
icon: 'Dienstmädchen2.svg',
linkable: ['Prekär'],
img: 'bild2.jpg'
},
{
icon: 'Dienstmädchen2.svg',
linkable: ['Prekär'],
img: '',
name: 'Tobias',
desc: '27, Pflegekraft',
text: [
'Auf seiner jetzigen Station, Geriatrie, arbeitet er mit bis zu 40 älteren Patient*innen. Oft kann er keine Pause machen, da die Station unterbesetzt ist.',
'Bei der Einteilung der Schichten hat er kein Mitspracherecht und deshalb kann er seinen Alltag nur von Woche zu Woche planen. Durch die Schichtarbeit leidet er an einem gestörten Schlafrhythmus.',
'Die Firma, die sein Krankenhaus besitzt, vergibt meist nur befristete Verträge für Teilzeitstellen, welche aber einen Arbeitsaufwand einer Vollzeitstelle besitzen.'
],
quote: 'Die Pflege ist wirklich \'nen Job, wo man wirklich hart knüppeln muss. Grad von der Psyche her'
},
{
icon: 'Rucksack2.svg',
linkable: ['Prekär'],
img: 'bild4.jpg',
name: 'Heinrich',
desc: '28, Wanderarbeiter',
text: [, ' Seit 8 Jahren ist er mit Gertrud verheiratet, mit der er drei Kinder hat.', ' Er arbeitet derzeit für einen großen Bauern nahe Bremen, wo er einmal die Woche mit dem Milchwagen 5 Stunden hinfährt. Nach 6 Tagen Arbeit fährt er Samstags mit dem Schlachter zurück zu seiner Familie.', ' In der Woche steht er 60–70 Stunden auf dem Feld, bis er abends in einer Kaserne ins Bett fallen kann.', ' ist saisonal arbeitslos, wenn keine Arbeit bei dem Bauern ansteht und muss in dieser Zeit umherwandern und nach anderen Arbeiten suchen'],
quote: 'Einstweilen denke ich an die fertigen Familien, zu denen also ein Vater gehört und denke an die Väter, die als “Wanderarbeiter” tätig sind. Daß diese nomadenhafte Lebensweise nicht sonderlich zur Stärkung der Familiengemeinschaft beiträgt, liegt auf der Hand.'
},
{
icon: 'Theater2.svg',
linkable: ['Prekär']
},
{
icon: 'UnskilledLabour2.svg',
linkable: ['Prekär'],
name: 'Hans',
desc: '12, Kinderarbeiter',
text: [
'Mit 11 Jahren fing er an in einem Bergwerk zu arbeiten. Davor besuchte er morgens die Schule und half nachmittags seiner Mutter bei der Hausarbeit.',
'Lesen hat er gelernt, rechnen kann er nicht. Er kann aber nur noch selten in die Schule gehen, weil seine Eltern das Geld für die Ausbildung seines großen Bruders brauchen.'
],
quote: 'Die Natur der Beschäftigung, welche den jüngsten Kindern obliegt (Türhüten in den Strecken), bedingt, dass sie in die Grube kommen, sobald die Arbeit beginnt und diese erst verlassen, wenn Feierabend gemacht wird. Diese Beschäftigung, welche kaum Arbeit genannt werden kann, würde, da die Kinder dabei geähnlich im Dunkeln und ganz alleine sind, der schlimmsten Einzelhaft gleichkomme, wenn nicht die Kohlenkarren von Zeit zu Zeit hin und wieder führen.'
},
{
icon: 'Sex work2.svg',
linkable: ['Prekär'],
name: 'Elisabeth',
desc: '28, Sexarbeiterin in Berlin, ursprünglich Stettinerin',
text: [, ' Sie ist tief verschuldet und arbeitet, um die Schulden loszuwerden.', ' Bordellbesitzer*innen sehen sie als Handelsobjekt, das mit den Schulden verkauft wird.', ' Wenn sie nicht arbeiten möchte oder kann macht sie neue Schulden.', ' Sie arbeitet im Bordell, wechselt jedoch regelmäßig den Ort, da ihre Vermittlerin Geld dafür bekommt, Abwechslung für die Kunden zu schaffen.', ' Sie ist ans Bordell gebunden, da auf der Straße Strafen, wie das Arbeitshaus drohen.', ' Das Reglement, das ihr den Austritt aus dem Bordell erlaubt, wurde ihr von der Bordellmutter weggenommen.', ' Sie teilt sich ein Zimmer unter dem Dach mit vier anderen.'],
quote: 'Man sieht in der Prostitution nur eine zusammenhangslose Reihe von Einzelerscheinungen, die aus dem persönlichen Verschulden Einzelner resultiert und darum glaubte man sich berechtigt, ja verpflichtet diese „Einzelnen“ für ihr subjektives Verschulden zur Rechenschaft zu ziehen.'
},
{
icon: 'Sex work2.svg',
linkable: ['Prekär'],
name: 'Elena',
desc: '24, Berlin, ursprünglich Bulgarin',
text: [, ' Sie arbeitet in einem Bordell.', ' Sie hat keine Krankenversicherung und keinen festen Wohnsitz.', ' Sie kann seit der Ausbreitung von COVID.19 nicht mehr arbeiten und hat ihre Bleibe verloren, da ihr Bordell geschlossen ist.', ' Sie lebt deshalb für mehrere Wochen auf der Straße, da sie wegen geschlossener Grenzen nicht zu ihrer Familie nach Bulgarien reisen kann und kein Einkommen hat, um sich eine Unterkunft zu leisten.', ' Sie ist tief verschuldet und arbeitet, um die Schulden loszuwerden.'
],
quote: '[…] viele wissen nicht, wie sie die nächste Zeit überstehen sollen.'
},
{
icon: 'weben.svg',
linkable: ['Prekär'],
img: 'bild1.jpg'
}
]

14
src/display.js

@ -114,7 +114,7 @@ export class Display {
a.href = `/${item.id}/${action}`
a.draggable = false
if (item.data.state !== 'face-down') {
a.style.backgroundImage = `url(/img/${item.data.img})`
a.style.backgroundImage = `url("/img/${item.data.icon}")`
a.dataset['id'] = item.id
a.draggable = true
}
@ -138,17 +138,19 @@ export class Display {
wrapper.href = '/'
wrapper.className = 'fullview'
const fullview = document.createElement('div')
const name = 'Gretchen'
const desc = 'Näherin, 20'
const img = '/img/gretchen.jpg'
const text = '<p>Text</p><p>More text text text</p>'
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 = `
<header>
<img src=${img} />
<h1>${name}</h1>
<p class=desc>${desc}</p>
</header>
<div class=fulltext>${text}</div>
<div class=fulltext>${text}
<blockquote>${data.quote || ''}</blockquote></div>
`
wrapper.appendChild(fullview)
target.appendChild(wrapper)

14
src/index.js

@ -4,15 +4,13 @@ const target = document.createElement('div')
const state = {items: [], show: null, links: [] }
const items = [
{img: 'Dienstmädchen2.svg', linkable: ['Prekär']},
{img: 'Rucksack2.svg', linkable: ['Prekär']},
{img: 'Theater2.svg', linkable: ['Prekär']},
{img: 'UnskilledLabour2.svg', linkable: ['Prekär']},
{img: 'weben.svg', linkable: ['Prekär']}
]
import {items} from './data.js'
for (let i = 0; i < items.length; ++i) {
state.items.push({id: i, state: 'face-down', img: items[i].img, linkable: items[i].linkable})
let item = items[i]
item.id = i
item.state = 'face-down'
state.items.push(item)
}
class Actions {

24
style.css

@ -62,6 +62,7 @@ body {
text-align: center;
position: absolute;
transform-origin: 0 0;
font-size: 1.2em;
}
.fullview {
@ -83,6 +84,8 @@ body {
min-width: 20em;
min-height: 30em;
max-height: 100%;
max-width: 30em;
overflow: auto;
background-color: #006680;
padding: 1em;
color: white;
@ -91,6 +94,7 @@ body {
box-sizing: border-box;
display: flex;
flex-direction: column;
font-size: 1.2em;
}
.fullview > div img {
float: right;
@ -113,3 +117,23 @@ h1, .desc {
color: #1a1c1c;
padding: 0 0.5em;
}
.fulltext p {
margin: 0.5em 0;
}
blockquote {
background: #f9f9f9cc;
border-left: .5em solid #1a1c1c66;
margin: .5em;
padding: .5em;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color: #1a1c1c66;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
float: left;
margin-top: 2.5rem;
}
Loading…
Cancel
Save