add a print button

paulfitz · Aug 10, 2020 · d673507 · d673507
1 parent 8a4ba74
commit d673507
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/invoices/index.html b/invoices/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <title>Custom Widget</title>
 
-    <link rel="stylesheet" href="invoice.css?ver=4">
+    <link rel="stylesheet" href="invoice.css?ver=8">
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
 
@@ -110,6 +110,10 @@
           Thank you!
         </div>
       </div>
+
+      <div class="print">
+        <a href="javascript:window.print()">Print</a>
+      </div>
     </div>
 
     <script>

diff --git a/invoices/invoice.css b/invoices/invoice.css
@@ -36,6 +36,8 @@ body {
   margin-top: 1em;
   margin-bottom: 1em;
   background: #ff8000;
+  -webkit-print-color-adjust: exact !important;
+  color-adjust: exact !important;
 }
 
 .client .title, .summary .title {
@@ -159,3 +161,36 @@ div.summary::after {
 div.instructions {
   white-space: pre-line;
 }
+
+.app {
+  position: relative;
+}
+
+@media print {
+  div.print {
+    display: none;
+  }
+}
+
+div.print {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+
+div.print a {
+  background: #C83200;
+  display: block;
+  font-size: 200%;
+  color: white;
+  text-decoration: none;
+  padding: 0.25em;
+  padding-top: 0.5em;
+  padding-right: 0.5em;
+  border-top-right-radius: 0.5em;
+  text-transform: uppercase;
+}
+
+div.print a:hover {
+  background: #4682B4;
+}