From 0ba4ef76c56071be119642a888b028021e929d3c Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Thu, 7 May 2020 14:42:24 -0700 Subject: [PATCH 01/51] minimal POC --- app/components/vis-bug/vis-bug.css | 15 +++++++++++++++ app/features/guides.js | 4 ++-- app/index.html | 3 +-- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/app/components/vis-bug/vis-bug.css b/app/components/vis-bug/vis-bug.css index cbdb0750..d4e9cd62 100644 --- a/app/components/vis-bug/vis-bug.css +++ b/app/components/vis-bug/vis-bug.css @@ -1,5 +1,20 @@ +html { + width: 500vw; + height: 500vh; + display: grid; + place-content: center; + transform: scale(0.4); + overflow: scroll; + background: hsl(0 0% 95%); + grid-template-columns: 100vw; + /* scroll-snap-type: x proximity; */ + transform-origin: center left; +} + body { min-height: 100vh; + box-shadow: 0 .5rem 1rem hsl(0 0% 0% / 30%); + /* scroll-snap-align: center; */ } body:not([testing]) [data-selected=true] { diff --git a/app/features/guides.js b/app/features/guides.js index 4431d9cf..5bfe2b9d 100644 --- a/app/features/guides.js +++ b/app/features/guides.js @@ -47,7 +47,7 @@ export function createGuide(vert = true) { z-index: 2147483643; ` - vert + vert ? styles += ` width: 1px; height: 100vh; @@ -97,7 +97,7 @@ const showGridlines = node => { state.gridlines = document.createElement('visbug-gridlines') state.gridlines.position = node.getBoundingClientRect() - document.body.appendChild(state.gridlines) + document.body.insertAdjacentElement('afterend', state.gridlines) } } diff --git a/app/index.html b/app/index.html index 2b766999..095e17df 100644 --- a/app/index.html +++ b/app/index.html @@ -27,8 +27,6 @@ - -