Merge pull request #267 from tafel/master

Better styles for scissors in HTML output
sprain · Nov 22, 2024 · a28e081 · a28e081
2 parents bc66bbc + 0ddff27
commit a28e081
Show file tree

Hide file tree

Showing 132 changed files with 2,023 additions and 953 deletions.
diff --git a/src/PaymentPart/Output/HtmlOutput/Template/PaymentPartTemplate.php b/src/PaymentPart/Output/HtmlOutput/Template/PaymentPartTemplate.php
@@ -49,14 +49,14 @@ class PaymentPartTemplate
 
 #qr-bill-payment-part h2 {
     font-size: 8pt !important;
-    line-height: 11pt !important;    
+    line-height: 11pt !important;
     margin-top: 11pt !important;
     color: #000 !important;
 }
 
 #qr-bill-receipt h2 {
     font-size: 6pt !important;
-    line-height: 8pt !important;    
+    line-height: 8pt !important;
     margin-top: 8pt !important;
     color: #000 !important;
 }
@@ -179,6 +179,16 @@ class PaymentPartTemplate
     margin-top: -11pt;
 }
 
+#qr-bill-scissors {
+    display: none;
+    float: right;
+    width: 1mm;
+    line-height: 1mm;
+    font-size: 22px;
+    font-weight: normal;
+    position: relative;
+}
+
 {{ printable-content }}
 </style>
 
@@ -188,7 +198,7 @@ class PaymentPartTemplate
     </tr>
     <tr>
         <td id="qr-bill-receipt">
-            <h1>{{ text.receipt }}</h1>
+            <h1>{{ text.receipt }}<span id="qr-bill-scissors">&#9986;</span></h1>
             <div id="qr-bill-information-receipt">
                 {{ information-content-receipt }}
             </div>

diff --git a/src/PaymentPart/Output/HtmlOutput/Template/PrintableStylesTemplate.php b/src/PaymentPart/Output/HtmlOutput/Template/PrintableStylesTemplate.php
@@ -35,26 +35,20 @@ class PrintableStylesTemplate
     left: -23mm;
 }
 
-#qr-bill-receipt:after {
-    transform: rotate(90deg);
+#qr-bill-scissors {
     display: inline-block;
-    content: '\\2702';
-    position: fixed;
-    font-size: 16pt;
-    top: 12.5mm;
-    left: 61.1mm;
+    transform: rotate(90deg);
+    top: 2mm;
+    left: 0.7mm;
 }
 EOT;
 
     public const TEMPLATE_VERTICAL_SCISSORS_DOWN = <<<EOT
-#qr-bill-receipt:after {
-    transform: rotate(-90deg);
+#qr-bill-scissors {
     display: inline-block;
-    content: '\\2702';
-    position: fixed;
-    font-size: 16pt;
-    top: 91.8mm;
-    left: 61.7mm;
+    transform: rotate(-90deg);
+    top: 80mm;
+    left: 1.0mm;
 }
 EOT;
 

diff --git a/tests/TestData/HtmlOutput/qr-additional-information-compact.svg.html b/tests/TestData/HtmlOutput/qr-additional-information-compact.svg.html
@@ -42,14 +42,14 @@
 
 #qr-bill-payment-part h2 {
     font-size: 8pt !important;
-    line-height: 11pt !important;    
+    line-height: 11pt !important;
     margin-top: 11pt !important;
     color: #000 !important;
 }
 
 #qr-bill-receipt h2 {
     font-size: 6pt !important;
-    line-height: 8pt !important;    
+    line-height: 8pt !important;
     margin-top: 8pt !important;
     color: #000 !important;
 }
@@ -172,6 +172,16 @@
     margin-top: -11pt;
 }
 
+#qr-bill-scissors {
+    display: none;
+    float: right;
+    width: 1mm;
+    line-height: 1mm;
+    font-size: 22px;
+    font-weight: normal;
+    position: relative;
+}
+
 
 </style>
 
@@ -181,7 +191,7 @@
     </tr>
     <tr>
         <td id="qr-bill-receipt">
-            <h1>Receipt</h1>
+            <h1>Receipt<span id="qr-bill-scissors">&#9986;</span></h1>
             <div id="qr-bill-information-receipt">
                 <h2>Account / Payable to</h2><p>CH44 3199 9123 0008 8901 2<br />
 Thomas LeClaire<br />

diff --git a/tests/TestData/HtmlOutput/qr-additional-information-compact.svg.print.html b/tests/TestData/HtmlOutput/qr-additional-information-compact.svg.print.html
@@ -42,14 +42,14 @@
 
 #qr-bill-payment-part h2 {
     font-size: 8pt !important;
-    line-height: 11pt !important;    
+    line-height: 11pt !important;
     margin-top: 11pt !important;
     color: #000 !important;
 }
 
 #qr-bill-receipt h2 {
     font-size: 6pt !important;
-    line-height: 8pt !important;    
+    line-height: 8pt !important;
     margin-top: 8pt !important;
     color: #000 !important;
 }
@@ -172,6 +172,16 @@
     margin-top: -11pt;
 }
 
+#qr-bill-scissors {
+    display: none;
+    float: right;
+    width: 1mm;
+    line-height: 1mm;
+    font-size: 22px;
+    font-weight: normal;
+    position: relative;
+}
+
 #qr-bill-separate-info {
     border-bottom: 0;
 }
@@ -191,7 +201,7 @@
     </tr>
     <tr>
         <td id="qr-bill-receipt">
-            <h1>Receipt</h1>
+            <h1>Receipt<span id="qr-bill-scissors">&#9986;</span></h1>
             <div id="qr-bill-information-receipt">
                 <h2>Account / Payable to</h2><p>CH44 3199 9123 0008 8901 2<br />
 Thomas LeClaire<br />

diff --git a/tests/TestData/HtmlOutput/qr-additional-information-compact.svg.scissors.html b/tests/TestData/HtmlOutput/qr-additional-information-compact.svg.scissors.html
@@ -42,14 +42,14 @@
 
 #qr-bill-payment-part h2 {
     font-size: 8pt !important;
-    line-height: 11pt !important;    
+    line-height: 11pt !important;
     margin-top: 11pt !important;
     color: #000 !important;
 }
 
 #qr-bill-receipt h2 {
     font-size: 6pt !important;
-    line-height: 8pt !important;    
+    line-height: 8pt !important;
     margin-top: 8pt !important;
     color: #000 !important;
 }
@@ -172,6 +172,16 @@
     margin-top: -11pt;
 }
 
+#qr-bill-scissors {
+    display: none;
+    float: right;
+    width: 1mm;
+    line-height: 1mm;
+    font-size: 22px;
+    font-weight: normal;
+    position: relative;
+}
+
 #qr-bill-separate-info {
     border-bottom-style: dashed;
 }
@@ -188,14 +198,11 @@
     left: -23mm;
 }
 
-#qr-bill-receipt:after {
-    transform: rotate(90deg);
+#qr-bill-scissors {
     display: inline-block;
-    content: '\2702';
-    position: fixed;
-    font-size: 16pt;
-    top: 12.5mm;
-    left: 61.1mm;
+    transform: rotate(90deg);
+    top: 2mm;
+    left: 0.7mm;
 }
 
 #qr-bill-separate-info-text {
@@ -209,7 +216,7 @@
     </tr>
     <tr>
         <td id="qr-bill-receipt">
-            <h1>Receipt</h1>
+            <h1>Receipt<span id="qr-bill-scissors">&#9986;</span></h1>
             <div id="qr-bill-information-receipt">
                 <h2>Account / Payable to</h2><p>CH44 3199 9123 0008 8901 2<br />
 Thomas LeClaire<br />

diff --git a/tests/TestData/HtmlOutput/qr-additional-information-compact.svg.scissorsdown.html b/tests/TestData/HtmlOutput/qr-additional-information-compact.svg.scissorsdown.html
@@ -42,14 +42,14 @@
 
 #qr-bill-payment-part h2 {
     font-size: 8pt !important;
-    line-height: 11pt !important;    
+    line-height: 11pt !important;
     margin-top: 11pt !important;
     color: #000 !important;
 }
 
 #qr-bill-receipt h2 {
     font-size: 6pt !important;
-    line-height: 8pt !important;    
+    line-height: 8pt !important;
     margin-top: 8pt !important;
     color: #000 !important;
 }
@@ -172,6 +172,16 @@
     margin-top: -11pt;
 }
 
+#qr-bill-scissors {
+    display: none;
+    float: right;
+    width: 1mm;
+    line-height: 1mm;
+    font-size: 22px;
+    font-weight: normal;
+    position: relative;
+}
+
 #qr-bill-separate-info {
     border-bottom-style: dashed;
 }
@@ -188,24 +198,18 @@
     left: -23mm;
 }
 
-#qr-bill-receipt:after {
-    transform: rotate(90deg);
+#qr-bill-scissors {
     display: inline-block;
-    content: '\2702';
-    position: fixed;
-    font-size: 16pt;
-    top: 12.5mm;
-    left: 61.1mm;
+    transform: rotate(90deg);
+    top: 2mm;
+    left: 0.7mm;
 }
 
-#qr-bill-receipt:after {
-    transform: rotate(-90deg);
+#qr-bill-scissors {
     display: inline-block;
-    content: '\2702';
-    position: fixed;
-    font-size: 16pt;
-    top: 91.8mm;
-    left: 61.7mm;
+    transform: rotate(-90deg);
+    top: 80mm;
+    left: 1.0mm;
 }
 
 #qr-bill-separate-info-text {
@@ -219,7 +223,7 @@
     </tr>
     <tr>
         <td id="qr-bill-receipt">
-            <h1>Receipt</h1>
+            <h1>Receipt<span id="qr-bill-scissors">&#9986;</span></h1>
             <div id="qr-bill-information-receipt">
                 <h2>Account / Payable to</h2><p>CH44 3199 9123 0008 8901 2<br />
 Thomas LeClaire<br />

diff --git a/tests/TestData/HtmlOutput/qr-additional-information-compact.svg.textarrows.html b/tests/TestData/HtmlOutput/qr-additional-information-compact.svg.textarrows.html
@@ -42,14 +42,14 @@
 
 #qr-bill-payment-part h2 {
     font-size: 8pt !important;
-    line-height: 11pt !important;    
+    line-height: 11pt !important;
     margin-top: 11pt !important;
     color: #000 !important;
 }
 
 #qr-bill-receipt h2 {
     font-size: 6pt !important;
-    line-height: 8pt !important;    
+    line-height: 8pt !important;
     margin-top: 8pt !important;
     color: #000 !important;
 }
@@ -172,6 +172,16 @@
     margin-top: -11pt;
 }
 
+#qr-bill-scissors {
+    display: none;
+    float: right;
+    width: 1mm;
+    line-height: 1mm;
+    font-size: 22px;
+    font-weight: normal;
+    position: relative;
+}
+
 
 
 #qr-bill-separate-info-text:before {
@@ -199,7 +209,7 @@
     </tr>
     <tr>
         <td id="qr-bill-receipt">
-            <h1>Receipt</h1>
+            <h1>Receipt<span id="qr-bill-scissors">&#9986;</span></h1>
             <div id="qr-bill-information-receipt">
                 <h2>Account / Payable to</h2><p>CH44 3199 9123 0008 8901 2<br />
 Thomas LeClaire<br />

diff --git a/tests/TestData/HtmlOutput/qr-additional-information.svg.html b/tests/TestData/HtmlOutput/qr-additional-information.svg.html
@@ -42,14 +42,14 @@
 
 #qr-bill-payment-part h2 {
     font-size: 8pt !important;
-    line-height: 11pt !important;    
+    line-height: 11pt !important;
     margin-top: 11pt !important;
     color: #000 !important;
 }
 
 #qr-bill-receipt h2 {
     font-size: 6pt !important;
-    line-height: 8pt !important;    
+    line-height: 8pt !important;
     margin-top: 8pt !important;
     color: #000 !important;
 }
@@ -172,6 +172,16 @@
     margin-top: -11pt;
 }
 
+#qr-bill-scissors {
+    display: none;
+    float: right;
+    width: 1mm;
+    line-height: 1mm;
+    font-size: 22px;
+    font-weight: normal;
+    position: relative;
+}
+
 
 </style>
 
@@ -181,7 +191,7 @@
     </tr>
     <tr>
         <td id="qr-bill-receipt">
-            <h1>Receipt</h1>
+            <h1>Receipt<span id="qr-bill-scissors">&#9986;</span></h1>
             <div id="qr-bill-information-receipt">
                 <h2>Account / Payable to</h2><p>CH44 3199 9123 0008 8901 2<br />
 Thomas LeClaire<br />