From c6e642e93a62790f31487edd7ebc7818d1d314ab Mon Sep 17 00:00:00 2001
From: Ian Gulliver <ian@flamingcow.tv>
Date: Sun, 2 Dec 2018 06:13:54 +0000
Subject: [PATCH] Make enter on 'Click here to print' work. Style tab outline
 better. Issue #10

---
 passmate.css | 27 +++++++++++++++++++++++++--
 passmate.js  |  5 ++---
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/passmate.css b/passmate.css
index ecb3a2e..1d30fc4 100644
--- a/passmate.css
+++ b/passmate.css
@@ -75,6 +75,7 @@ overview,product {
 
 	a {
 		margin-bottom: 1em;
+		padding: 0.2em;
 		max-width: 40em;
 		text-decoration: none;
 		color: black;
@@ -86,8 +87,10 @@ overview,product {
 		border: 0;
 		border-bottom: black 1px dotted;
 
-		margin-top: 0;
-		margin-bottom: 1em;
+		margin-top: 0.2em;
+		margin-bottom: 0.2em;
+
+		padding: 0.2em;
 	}
 
 	input:focus {
@@ -112,6 +115,20 @@ overview,product {
 		text-align: center;
 	}
 
+	button {
+		/* ugly hack to give the focus box breathing room without moving the text */
+		position: relative;
+		left: -0.2em;
+		padding: 0.2em;
+
+		border: none;
+		background: none;
+
+		font-family: inherit;
+		font-size: inherit;
+		font-weight: bold;
+	}
+
 	ol {
 		box-sizing: border-box;
 		max-width: 40em;
@@ -121,11 +138,17 @@ overview,product {
 
 	ol > li {
 		margin-bottom: 1em;
+		padding: 0.1em;
 	}
 
 	.selected {
 		font-weight: 600;
 	}
+
+	*:focus {
+		outline: none;
+		box-shadow: 0 0 2pt 1pt maroon;
+	}
 }
 
 @media print {
diff --git a/passmate.js b/passmate.js
index c32ad76..1302c9f 100644
--- a/passmate.js
+++ b/passmate.js
@@ -65,9 +65,8 @@ class PassMate {
 		this.addElement('li', printreqs, 'Layout/Orientation: Landscape');
 		this.addElement('li', printreqs, 'Two-sided: Long edge (or just enabled)');
 
-		let printStep = this.addElement('li', instr, 'Click here to print the book!');
-		printStep.style.fontWeight = 'bold';
-		printStep.style.cursor = 'pointer';
+		let printStep = this.addElement('li', instr);
+		let print = this.addElement('button', printStep, 'Click here to print the book!');
 		printStep.addEventListener('click', () => {
 			window.print();
 		});