From 03967a578910b5cbc62c151d5bfda33474bb2e56 Mon Sep 17 00:00:00 2001 From: Adrian Heine Date: Fri, 18 Sep 2020 10:45:35 +0200 Subject: [PATCH] =?UTF-8?q?Farben,=20aufr=C3=A4umen=20und=20Beispielkarte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- img/Kartendesign.svg | 245 +++++++++++++++++++++++++++++++++++++++++++ src/display.js | 18 +--- style.css | 16 ++- 3 files changed, 261 insertions(+), 18 deletions(-) create mode 100644 img/Kartendesign.svg diff --git a/img/Kartendesign.svg b/img/Kartendesign.svg new file mode 100644 index 0000000..03985fe --- /dev/null +++ b/img/Kartendesign.svg @@ -0,0 +1,245 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + Gretchen + Näherin, 20 + - Ich bin Gretchen +- Ich verdiene wenig Geld +- Meine Arbeitsbedingung sind scheiße +- Mein life ist prekär +- Voll blöd + + "Frauen haben kleine Hände, perfekt zum Weben". + + + + diff --git a/src/display.js b/src/display.js index 589c1cb..a60c21e 100644 --- a/src/display.js +++ b/src/display.js @@ -72,12 +72,6 @@ export class Display { return new Springy.Vector(sx, sy); }; - var fromScreen = function(s) { - var size = currentBB.topright.subtract(currentBB.bottomleft); - var px = (s.x / canvas.width) * size.x + currentBB.bottomleft.x; - var py = (s.y / canvas.height) * size.y + currentBB.bottomleft.y; - return new Springy.Vector(px, py); - }; var renderer = new Springy.Renderer( this.layout, () => { @@ -98,22 +92,17 @@ export class Display { let rad = Math.atan(b / a) if (negative) rad = rad + Math.PI if (rad > Math.PI / 2) { - console.warn(negative) rad += Math.PI ;[p2, p1] = [p1, p2] - } else if (negative) { console.warn(false) } + } - dom.style.transformOrigin = '0 0' + dom.className = 'line' dom.style.transform = 'rotate(' + rad + 'rad) translateY(-1em)' - dom.style.position = 'absolute' dom.style.left = p1.x + 'px' dom.style.top = p1.y + 'px' dom.style.right = p2.x + 'px' dom.style.bottom = p2.y + 'px' dom.style.width = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)) + 'px' - dom.style.height = '1em' - dom.style.borderBottom = '3px solid black' - dom.style.textAlign = 'center' // FIXME eigentlich falsches parent field.appendChild(dom) }, @@ -147,7 +136,8 @@ export class Display { if (state.show !== null) { const wrapper = document.createElement('a') wrapper.href = '/' - const fullview = document.createElement('div') + const fullview = document.createElement('img') + fullview.src = '/img/Kartendesign.svg' wrapper.className = 'fullview' wrapper.appendChild(fullview) target.appendChild(wrapper) diff --git a/style.css b/style.css index e52e145..57d650d 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,5 @@ body { - background-color: #e2eff3; + background-color: #e1eef2; margin: 0; } @@ -44,23 +44,31 @@ body { background-position: center; } +.line { + border-bottom: 3px solid #1a1c1c; + height: 1em; + text-align: center; + position: absolute; + transform-origin: 0 0; +} + .fullview { width: 100%; height: 100%; position: fixed; left: 0; top: 0; - background-color: #858c8f90; + background-color: #e1eef280; padding: 1em; box-sizing: border-box; cursor: default; } -.fullview > div { - background-color: #858c8f; +.fullview > img { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 40em; min-height: 30em; + max-height: 100%; }