diff --git a/app/demo/card.css b/app/demo/card.css index 311a8e70..cd202647 100644 --- a/app/demo/card.css +++ b/app/demo/card.css @@ -1,13 +1,14 @@ .card { background: #fff; max-width: 400px; - box-shadow: 0 0.2em 0.3em hsla(0,0%,0%,20%); + box-shadow: 0 0.2em 0.3em hsla(0, 0%, 0%, 20%); padding: 1rem; border-radius: 0.2em; - border: 1px solid hsl(0,0%,90%); + border: 1px solid hsl(0, 0%, 90%) zz; & > .card-header { - & h2, & small { + & h2, + & small { margin: 0; } @@ -49,7 +50,8 @@ } } - & date, & time { + & date, + & time { font-size: 0.8rem; color: #808080; } @@ -57,4 +59,4 @@ .mdc-card { max-width: 400px; -} \ No newline at end of file +} diff --git a/app/demo/layout.css b/app/demo/layout.css index 4738ad50..0615c8f8 100644 --- a/app/demo/layout.css +++ b/app/demo/layout.css @@ -7,11 +7,11 @@ main { gap: 1rem 2rem; padding: 1rem 2rem; - @media (min-width:480px) { + @media (min-width: 480px) { --card-size: 35vw; } - @media (min-width:768px) { + @media (min-width: 768px) { --card-size: 20vw; & > article { @@ -39,18 +39,18 @@ main { } } - @media (min-width:1024px) { + @media (min-width: 1024px) { --card-size: 16vw; } - @media (min-width:1600px) { + @media (min-width: 1600px) { --card-size: 15vw; } } [image-grid] { display: grid; - gap: .5rem; + gap: 0.5rem; height: 100%; align-items: space-between; justify-content: space-between; @@ -73,9 +73,9 @@ main { margin-top: 1rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; - gap: .5rem; + gap: 0.5rem; - & :matches(h1,h2,h3,h4,h5,h6) { + & :matches(h1, h2, h3, h4, h5, h6) { margin: 0; } } @@ -84,7 +84,7 @@ main { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; - gap: .5rem; + gap: 0.5rem; & > div { border-radius: 1rem; @@ -116,11 +116,21 @@ main { grid-template-columns: repeat(5, 5rem); justify-content: space-around; - & > .filled-circle:nth-child(1) { background: hsl(200, 50%, 50%); } - & > .filled-circle:nth-child(2) { background: hsl(225, 50%, 50%); } - & > .filled-circle:nth-child(3) { background: hsl(250, 50%, 50%); } - & > .filled-circle:nth-child(4) { background: hsl(275, 50%, 50%); } - & > .filled-circle:nth-child(5) { background: hsl(300, 50%, 50%); } + & > .filled-circle:nth-child(1) { + background: hsl(200, 50%, 50%); + } + & > .filled-circle:nth-child(2) { + background: hsl(225, 50%, 50%); + } + & > .filled-circle:nth-child(3) { + background: hsl(250, 50%, 50%); + } + & > .filled-circle:nth-child(4) { + background: hsl(275, 50%, 50%); + } + & > .filled-circle:nth-child(5) { + background: hsl(300, 50%, 50%); + } } nav { @@ -136,6 +146,6 @@ nav { text-align: center; margin: 5px; border: 1px solid var(--darkest-grey); - border-radius: .25rem; + border-radius: 0.25rem; } } diff --git a/app/demo/shapes.css b/app/demo/shapes.css index cd99bd0d..0640ab43 100644 --- a/app/demo/shapes.css +++ b/app/demo/shapes.css @@ -2,12 +2,14 @@ border: 1px solid var(--light-grey); width: 10rem; height: 10rem; + background: url(https://images.unsplash.com/photo-1608636982148-b22a5ba0e39d?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1OHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60); } .filled-square { background: var(--light-grey); width: 4rem; height: 4rem; + background: url(https://images.unsplash.com/photo-1608636982148-b22a5ba0e39d?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1OHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60); } .filled-circle { @@ -20,18 +22,37 @@ justify-content: center; color: white; - &.small { width: 2.5rem; height: 2.5rem; } + &.small { + width: 2.5rem; + height: 2.5rem; + } } - -.red { background-color: red; } -.green { background-color: green; } -.yellow { background-color: yellow; } -.google-blue { background-color: #4285F4; } -.google-yellow { background-color: #F4B400; } -.google-red { background-color: #DB4437; } -.google-green { background-color: #0F9D58; } -.shadow-circle { background-color: white; box-shadow: 0 10px 30px 2px hsla(0,0%,0%,20%); } +.red { + background-color: red; +} +.green { + background-color: green; +} +.yellow { + background-color: yellow; +} +.google-blue { + background-color: #4285f4; +} +.google-yellow { + background-color: #f4b400; +} +.google-red { + background-color: #db4437; +} +.google-green { + background-color: #0f9d58; +} +.shadow-circle { + background-color: white; + box-shadow: 0 10px 30px 2px hsla(0, 0%, 0%, 20%); +} [round-icon] { box-sizing: border-box; diff --git a/app/plugins/download-images.js b/app/plugins/download-images.js index 6d64ded8..56de7139 100644 --- a/app/plugins/download-images.js +++ b/app/plugins/download-images.js @@ -3,22 +3,56 @@ export const commands = [ 'download-all-images', ] -export default async function() { +export default async function () { + if (window.showDirectoryPicker === undefined) { + console.log('no directory support :(') + return; + } const dirHandle = await window.showDirectoryPicker() const imgs = document.querySelectorAll("img") - let i = 0 imgs.forEach(async (img) => { const url = img.src - const name = `img-${i}.png` - i++ - + const name = url.substr(url.lastIndexOf('/') + 1); try { - console.log(`Fetching ${url}`) const response = await fetch(url) + const file = await dirHandle.getFileHandle(name, { create: true }) + const writable = await file.createWritable() + await response.body.pipeTo(writable) + } catch (err) { + console.error(err) + } + }) + // CSS urls + let css_urls = [...document.styleSheets] + .filter(sheet => { + try { return sheet.cssRules } + catch { } + }) + .flatMap(sheet => Array.from(sheet.cssRules)) + .filter(rule => rule.style) + .filter(rule => rule.style.backgroundImage !== '') + .filter(rule => rule.style.backgroundImage !== 'initial') + .filter(rule => rule.style.backgroundImage.includes("url")) + .reduce((urls, { style }) => { + urls.push(style.backgroundImage); + return urls; + }, []); - console.log(`Saving to ${name}`) - + css_urls.forEach(async (item, i) => { + let cots = false; + let start = item.indexOf('('); + if (item.charAt(start + 1) == '"') cots = true; + let end = item.lastIndexOf(')'); + if (cots) { + start += 2; + end -= 6; + } + const url = item.substr(start, end); + const truncated = url.substr(0, url.indexOf("?")); + const name = truncated.slice(truncated.lastIndexOf("/") + 1, truncated.lastIndexOf("/") + 39) + ".jpg" + try { + const response = await fetch(url) const file = await dirHandle.getFileHandle(name, { create: true }) const writable = await file.createWritable() await response.body.pipeTo(writable) diff --git a/package-lock.json b/package-lock.json index 93275b65..5fadf379 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "VisBug", + "name": "visbug", "version": "0.3.8", "lockfileVersion": 1, "requires": true, diff --git a/package.json b/package.json index 46f5dacd..0c1ccaf8 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { - "name": "VisBug", + "name": "visbug", "version": "0.3.8", - "description": "", + "description": "

\r \"visbug\"\r
\r \"npm\r \"travis\r \"npm\r

", "author": "Adam Argyle", "license": "Apache-2.0", "main": "app/components/vis-bug/vis-bug.element.js", "repository": { "type": "git", - "url": "https://github.com/GoogleChromeLabs/ProjectVisBug.git" + "url": "git+https://github.com/GoogleChromeLabs/ProjectVisBug.git" }, "scripts": { "start": "npm run concurrent", @@ -66,5 +66,12 @@ "require": [ "esm" ] + }, + "bugs": { + "url": "https://github.com/GoogleChromeLabs/ProjectVisBug/issues" + }, + "homepage": "https://github.com/GoogleChromeLabs/ProjectVisBug#readme", + "directories": { + "test": "tests" } }