From b31a5446aacfa71e3a51a6b5345ea76e21a065a0 Mon Sep 17 00:00:00 2001 From: Ian Gulliver Date: Sun, 25 Nov 2018 02:12:37 +0000 Subject: [PATCH] Split screen and print CSS completely, add print parent element. --- passmate.css | 426 +++++++++++++++++++++++++++------------------------ passmate.js | 21 ++- 2 files changed, 241 insertions(+), 206 deletions(-) diff --git a/passmate.css b/passmate.css index cc42c6e..1ed8761 100644 --- a/passmate.css +++ b/passmate.css @@ -31,18 +31,6 @@ margin: 0; } -@media screen { - side { - display: none !important; - } -} - -@media print { - overview { - display: none !important; - } -} - html { height: 100%; } @@ -54,194 +42,236 @@ body { height: 100%; } -h1 { - font-family: 'copernicus'; - font-weight: 600; - align-self: center; +overview,product { + display: none; } -h2 { - font-family: 'proxima-nova'; - font-weight: 600; - align-self: center; +@media screen { + overview { + display: flex; + flex-direction: column; + align-items: center; + margin: 1em; + } + + h1 { + font-family: 'copernicus'; + font-weight: 600; + align-self: center; + } + + h2 { + font-family: 'proxima-nova'; + font-weight: 600; + align-self: center; + margin-top: 1.2em; + } + + blurb { + text-align: justify; + margin-bottom: 1em; + max-width: 40em; + } + + owner { + display: block; + width: 11em; + + border-bottom: black 1px dotted; + + font-family: 'proxima-nova'; + font-weight: 600; + font-size: 1.5em; + + text-align: left; + align-self: center; + + margin-top: 0; + margin-bottom: 1em; + } + + recovery { + display: block; + width: 17em; + + border-bottom: black 1px dotted; + + font-family: 'inconsolata'; + font-weight: 700; + font-size: 1.2em; + + text-align: center; + align-self: center; + + margin-top: 0; + margin-bottom: 1em; + } + + ol { + box-sizing: border-box; + max-width: 40em; + margin: 0; + padding-inline-start: 1em; + } + + ol > li { + margin-bottom: 1em; + } + + .selected { + font-weight: 600; + } } -/********** - * Screen - **********/ -overview { - display: flex; - flex-direction: column; - align-items: center; - margin: 1em; -} - -overview h2 { - margin-top: 1.2em; -} - -overview blurb { - max-width: 40em; -} - -overview owner { - text-align: left; - margin-top: 0; -} - -overview recovery { - margin-top: 0; - margin-bottom: 1em; - font-size: 1.2em; -} - -overview ol { - box-sizing: border-box; - max-width: 40em; - margin: 0; - padding-inline-start: 1em; -} - -overview ol > li { - margin-bottom: 1em; -} - -overview .selected { - font-weight: 600; -} - -/********** - * Print - **********/ -side { - page-break-inside: avoid; - - width: 100%; - height: 100%; - - display: flex; - flex-direction: row; -} - -side:nth-of-type(even) { - transform: rotateZ(180deg); -} - -page { - flex-basis: 0; - flex-grow: 1; - flex-shrink: 0; - position: relative; - - padding: 1.5em; - - display: flex; - flex-direction: column; -} - -page:first-of-type { - border-right: 1px black solid; -} - -pagenum { - order: 99; - flex-grow: 1; - display: flex; - flex-direction: column; - justify-content: flex-end; -} - -page:first-of-type pagenum { -} - -page:last-of-type pagenum { - align-self: flex-end; -} - -letter { - font-family: 'copernicus'; - font-weight: 600; - font-size: 4em; - margin-bottom: 0.2em; -} - -page:last-of-type letter { - align-self: flex-end; -} - -blurb { - text-align: justify; - margin-bottom: 1em; -} - -owner { - display: block; - width: 11em; - - border-bottom: black 1px dotted; - - font-family: 'proxima-nova'; - font-weight: 600; - font-size: 1.5em; - - text-align: center; - align-self: center; - - margin-top: 1em; - margin-bottom: 1em; -} - -recovery { - display: block; - width: 17em; - - border-bottom: black 1px dotted; - - font-family: 'inconsolata'; - font-weight: 700; - font-size: 1.5em; - - text-align: center; - align-self: center; - - margin-top: 1em; -} - -passwordBlock { - display: grid; - margin-bottom: 1.5em; - font-size: 1.4em; - - grid-template: - [password-start] "passwordLabel password" [password-end] - [website-start] "websiteLabel website" [website-end] - [username-start] "usernameLabel username" [username-end]; - grid-template-columns: 5em auto; - grid-column-gap: 0.5em; - grid-row-gap: 0.2em; -} - -passwordLabel,websiteLabel,usernameLabel { - text-align: right; -} - -password { - display: block; - font-family: 'inconsolata'; - font-weight: 700; - font-size: 1.1em; -} - -passwordSymbols { - color: darkgrey; - border: 1px darkgrey dotted; - border-radius: 1em; - padding: 0.2em; - margin: 0.2em; -} - -website,username { - width: 100%; - border-bottom: black 1px dotted; - margin-bottom: 0.17em; +@media print { + product { + display: block; + width: 100%; + height: 100%; + } + + h1 { + font-family: 'copernicus'; + font-weight: 600; + align-self: center; + } + + h2 { + font-family: 'proxima-nova'; + font-weight: 600; + align-self: center; + } + + side { + page-break-inside: avoid; + + width: 100%; + height: 100%; + + display: flex; + flex-direction: row; + } + + side:nth-of-type(even) { + transform: rotateZ(180deg); + } + + page { + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + position: relative; + + padding: 1.5em; + + display: flex; + flex-direction: column; + } + + page:first-of-type { + border-right: 1px black solid; + } + + pagenum { + order: 99; + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: flex-end; + } + + page:first-of-type pagenum { + } + + page:last-of-type pagenum { + align-self: flex-end; + } + + letter { + font-family: 'copernicus'; + font-weight: 600; + font-size: 4em; + margin-bottom: 0.2em; + } + + page:last-of-type letter { + align-self: flex-end; + } + + blurb { + text-align: justify; + margin-bottom: 1em; + } + + owner { + display: block; + width: 11em; + + border-bottom: black 1px dotted; + + font-family: 'proxima-nova'; + font-weight: 600; + font-size: 1.5em; + + text-align: center; + align-self: center; + + margin-top: 1em; + margin-bottom: 1em; + } + + recovery { + display: block; + width: 17em; + + border-bottom: black 1px dotted; + + font-family: 'inconsolata'; + font-weight: 700; + font-size: 1.5em; + + text-align: center; + align-self: center; + + margin-top: 1em; + } + + passwordBlock { + display: grid; + margin-bottom: 1.5em; + font-size: 1.4em; + + grid-template: + [password-start] "passwordLabel password" [password-end] + [website-start] "websiteLabel website" [website-end] + [username-start] "usernameLabel username" [username-end]; + grid-template-columns: 5em auto; + grid-column-gap: 0.5em; + grid-row-gap: 0.2em; + } + + passwordLabel,websiteLabel,usernameLabel { + text-align: right; + } + + password { + display: block; + font-family: 'inconsolata'; + font-weight: 700; + font-size: 1.1em; + } + + passwordSymbols { + color: darkgrey; + border: 1px darkgrey dotted; + border-radius: 1em; + padding: 0.2em; + margin: 0.2em; + } + + website,username { + width: 100%; + border-bottom: black 1px dotted; + margin-bottom: 0.17em; + } } diff --git a/passmate.js b/passmate.js index 5295725..0a172f3 100644 --- a/passmate.js +++ b/passmate.js @@ -23,14 +23,7 @@ class PassMate { this.addOverview(container); - this.addPages(container, 26 * 2 + 4); - this.addFrontPage(this.pages[1]); - this.addInstructions1(this.pages[2]); - this.addInstructions2(this.pages[3]); - this.addPasswordPages( - this.pages.slice(4, 4 + (26 * this.PAGES_PER_LETTER)), - this.PAGES_PER_LETTER, - this.PASSWORDS_PER_PAGE); + this.addProduct(container); this.recoveryIn.innerText = this.SAFE_ALPHANUM.charAt(this.VERSION) + this.generateMasterPassword().join(''); this.derivePasswords(); @@ -118,6 +111,18 @@ class PassMate { }); } + addProduct(container) { + let product = this.addElement('product', container); + this.addPages(product, 26 * 2 + 4); + this.addFrontPage(this.pages[1]); + this.addInstructions1(this.pages[2]); + this.addInstructions2(this.pages[3]); + this.addPasswordPages( + this.pages.slice(4, 4 + (26 * this.PAGES_PER_LETTER)), + this.PAGES_PER_LETTER, + this.PASSWORDS_PER_PAGE); + } + addPages(container, numPages) { let numSheets = numPages / 4; for (let sheetNum = 0; sheetNum < numSheets; ++sheetNum) {