Allow setting additional cards to print (#275)

* Add setting for additional cards to print

* Render additional cards to print

* Do not render additional cards if amount is less than 1

* Render additional cards when printing

* Improve layout for portrait printing

* Render eap and identity textfields conditionally so that they dont use space

* Use all width in print-area

* Change additionalCards setting to Input and react to changes

* Allow hiding tip (legend) on card

* Print only full cards

* Move print-area - not-displayed - to the bottom of the page

* Set default ssid back to empty, additional cards to 0

* Lower marginBottom of password field to 5 instead of 24 (default)

* Use conditional rendering instead of class to hide password

* Set marginBottom to QR code only on portrait mode

* Set row-gap to 0 to allow up to 6 cards to fit in portrait mode in A4

* Move hideTip setting right after hiddenSSID

1 files changed, 18 insertions, 6 deletions

diff --git a/src/components/style.css b/src/components/style.css
index 5275770..10eac9b 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -3,21 +3,25 @@
   src: url(./SourceSerif4-Semibold.otf);
 }
 
-#print-area {
+.card-print {
   border-color: #aaa;
   margin-bottom: 1em;
   margin-top: 2em;
   padding: 1em;
 }
 
+#print-area {
+  display: none;
+}
+
 .details {
   display: flex;
   align-items: center;
 }
 
 .qrcode {
-  margin-bottom: 1em;
   max-width: 175px;
+  padding: 1em;
 }
 
 .hidden {
@@ -65,12 +69,20 @@ button {
     visibility: visible;
   }
   #print-area {
-    border-style: dashed;
-    box-shadow: none;
-  }
-  #print-area {
     position: absolute;
     left: 0;
     top: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    row-gap: 0em;
+  }
+  .card-print {
+    border-style: dashed;
+    box-shadow: none;
+    margin-bottom: 0;
+    margin-top: 0;
+    break-inside: avoid;
+    page-break-inside: avoid;
   }
 }