From ea8b2bd365906a4fb09e322bf7ac20bb17863647 Mon Sep 17 00:00:00 2001
From: karl <noreply@maennchen1.de>
Date: Tue, 8 Aug 2023 09:53:10 +0000
Subject: - Anpassung: Johns CSS Änderungen nochmal überarbeitet und ergänzt
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

git-svn-id: https://[internal]/wordpress/plugins/wpsg4@8353 0d5edaf7-2b12-4e95-93f4-047927463d4b
---
 views/css/frontend.css                     | 23 +++++++-
 views/mods/mod_prepayment/order_done.phtml | 93 +++++++++++++++---------------
 2 files changed, 69 insertions(+), 47 deletions(-)

diff --git a/views/css/frontend.css b/views/css/frontend.css
index fcf16b4..f249aa0 100644
--- a/views/css/frontend.css
+++ b/views/css/frontend.css
@@ -558,6 +558,27 @@ input.wpsg_error { border-color:red !important; }
 #AmazonLoginButton_wrap { text-align:right; margin-bottom:2rem; width:100%; justify-content:flex-end; display:flex; }
 
 /* wpsg_mod_prepayment - QR-Code auf Bestellabschlussseite */
+.wpsg_mod_prepayment_info_wrap { display:flex; justify-content:center; flex-direction:column; gap:20px; }
 .wpsg_mod_prepayment_info { display: flex; gap: 20px; border: 1px solid #000000; padding: 20px; }
+.wpsg_mod_prepayment_info h4{ margin: 0; }
 .wpsg_mod_prepayment_info_left { display: flex; flex-direction: column; }
-.wpsg_mod_prepayment_info h4{ margin: 0; }
\ No newline at end of file
+.wpsg_mod_prepayment_info_left_qrcodeimg { width:240px; height:240px; }
+.wpsg_mod_prepayment_info_left_wrap { display:flex; gap:25%; }
+.wpsg_mod_prepayment_info_left_currency { display:flex; flex-direction:column; }
+.wpsg_mod_prepayment_info_left_amount { display:flex; flex-direction:column; }
+
+.wpsg_mod_prepayment_girocode { display: flex; gap: 20px; border: 1px solid #000000; padding: 20px;}
+.wpsg_mod_prepayment_girocode h4{ margin: 0; }
+.wpsg_mod_prepayment_girocode_left { display: flex; flex-direction: column; }
+.wpsg_mod_prepayment_girocode_left_qrcodeimg { width:240px; height:240px; }
+.wpsg_mod_prepayment_girocode_left_wrap { display:flex; gap:25%; }
+.wpsg_mod_prepayment_girocode_left_currency { display:flex; flex-direction:column; }
+.wpsg_mod_prepayment_girocode_left_amount { display:flex; flex-direction:column; }
+
+.wpsg_mod_prepayment_qrrechnung { display: flex; gap: 20px; border: 1px solid #000000; padding: 20px; }
+.wpsg_mod_prepayment_qrrechnung h4{ margin: 0; }
+.wpsg_mod_prepayment_qrrechnung_left { display: flex; flex-direction: column; }
+.wpsg_mod_prepayment_qrrechnung_left_qrcodeimg { width:240px; height:240px; }
+.wpsg_mod_prepayment_qrrechnung_left_wrap { display:flex; gap:25%; }
+.wpsg_mod_prepayment_qrrechnung_left_currency { display:flex; flex-direction:column; }
+.wpsg_mod_prepayment_qrrechnung_left_amount { display:flex; flex-direction:column; }
\ No newline at end of file
diff --git a/views/mods/mod_prepayment/order_done.phtml b/views/mods/mod_prepayment/order_done.phtml
index 4e0bc03..bd52650 100644
--- a/views/mods/mod_prepayment/order_done.phtml
+++ b/views/mods/mod_prepayment/order_done.phtml
@@ -33,39 +33,41 @@
 
 		?>
 
-		<div style="display: flex; justify-content: center; flex-direction: column; gap: 20px;">
+		<div class="wpsg_mod_prepayment_info_wrap">
 			<?php foreach ($img as $i) { ?>
-				<div class="wpsg_mod_prepayment_info" style="display: flex; gap: 20px; border: 1px solid #000; padding: 20px;">
-					<div class="wpsg_mod_prepayment_info_left" style="display: flex; flex-direction: column;">
-						<h4 style="margin: 0;"><?php echo wpsg_translate(__($i['title'], $wpsg)); ?></h4>
-						<?php if (isset($i['filepath'])) { ?><a title="Downloadlink für die QR-Rechnung" style="box-shadow:none; font-size:smaller; font-style:italic; text-decoration:underline;" target="_blank" href="<?php echo $this->callMod('wpsg_mod_prepayment', 'getFrontendLink', [$i['order_id']]); ?>">Download</a><?php } ?>
+				<div class="wpsg_mod_prepayment_info">
+					<div class="wpsg_mod_prepayment_info_left">
+                    <div class="wpsg_mod_prepayment_info_left_qr-download">
+						<h4><?php echo wpsg_translate(__($i['title'], $wpsg)); ?></h4>
+						<?php if (isset($i['filepath'])) { ?><a title="Downloadlink für die QR-Rechnung" target="_blank" href="<?php echo $this->callMod('wpsg_mod_prepayment', 'getFrontendLink', [$i['order_id']]); ?>"><i class="fa fa-download" aria-hidden="true"></i></a><?php } ?>
+                    </div>	
+                        <br />
+						<?php echo '<img class="wpsg_mod_prepayment_info_left_qrcodeimg" src="data:image/png;base64,'.$i['hash'].'" />'; ?>
 						<br />
-						<?php echo '<img style="width: 240px; height:240px;" src="data:image/png;base64,'.$i['hash'].'" />'; ?>
-						<br />
-						<div style="display: flex; gap: 25%;">
-							<div style="display: flex; flex-direction: column;">
-								<h4 style="margin: 0;"><?php echo wpsg_translate(__('Währung', $wpsg)); ?></h4>
+						<div class="wpsg_mod_prepayment_info_left_wrap">
+							<div class="wpsg_mod_prepayment_info_left_currency">
+								<h4><?php echo wpsg_translate(__('Währung', $wpsg)); ?></h4>
 								<?php echo $this->get_option('wpsg_currency'); ?>
 							</div>
-							<div style="display: flex; flex-direction: column;">
-								<h4 style="margin: 0;"><?php echo wpsg_translate(__('Betrag', $wpsg)); ?></h4>
+							<div class="wpsg_mod_prepayment_info_left_amount">
+								<h4><?php echo wpsg_translate(__('Betrag', $wpsg)); ?></h4>
 								<?php echo sprintf("%.2f", $i['invoiceAmount']); ?>
 							</div>
 						</div>
 					</div>
-					<div class="wpsg_mod_prepayment_info_right" style="display: flex; flex-direction: column;">
-						<h4 style="margin: 0;"><?php echo wpsg_translate(__('Konto / Zahlbar an', $wpsg)); ?></h4>
+					<div class="wpsg_mod_prepayment_info_right">
+						<h4><?php echo wpsg_translate(__('Konto / Zahlbar an', $wpsg)); ?></h4>
 						<?php echo $this->replaceUniversalPlatzhalter($this->get_option('wpsg_mod_prepayment_iban')); ?><br />
 						<?php echo $this->replaceUniversalPlatzhalter($this->get_option('wpsg_mod_prepayment_kinhaber')); ?><br />
 						<?php echo $this->replaceUniversalPlatzhalter($this->get_option('wpsg_shopdata_street')); ?><br />
 						<?php echo $this->replaceUniversalPlatzhalter($this->get_option('wpsg_shopdata_zip')).' '.$this->replaceUniversalPlatzhalter($this->get_option('wpsg_shopdata_city')); ?><br />
 						<?php if (!empty($i['referenceNumber'])) { ?>
-							<h4 style="margin: 0;"><?php echo wpsg_translate(__('Referenz', $wpsg)); ?></h4>
+							<h4><?php echo wpsg_translate(__('Referenz', $wpsg)); ?></h4>
 							<?php echo $i['referenceNumber']; ?><br />
 						<?php } ?>
-						<h4 style="margin: 0;"><?php echo wpsg_translate(__('Zusätzliche Informationen', $wpsg)); ?></h4>
+						<h4><?php echo wpsg_translate(__('Zusätzliche Informationen', $wpsg)); ?></h4>
 						<?php echo $i['additionalInformation']; ?><br /> 
-						<h4 style="margin: 0;"><?php echo wpsg_translate(__('Zahlbar durch', $wpsg)); ?></h4>
+						<h4><?php echo wpsg_translate(__('Zahlbar durch', $wpsg)); ?></h4>
 						<?php echo $i['customerdata']['vname'].' '.$i['customerdata']['name']; ?><br />
 						<?php echo $i['customerdata']['strasse'].' '.$i['customerdata']['nr']; ?><br />
 						<?php echo $i['customerdata']['plz'].' '.$i['customerdata']['ort']; ?><br />
@@ -90,36 +92,36 @@
 
 		?>
 
-		<div class="wpsg_mod_prepayment_girocode" style="display: flex; gap: 20px; border: 1px solid #000; padding: 20px;">
-			<div class="wpsg_mod_prepayment_girocode_left" style="display: flex; flex-direction: column;">
-				<h4 style="margin: 0;"><?php echo wpsg_translate(__($img['title'], $wpsg)); ?></h4>
+		<div class="wpsg_mod_prepayment_girocode">
+			<div class="wpsg_mod_prepayment_girocode_left" >
+				<h4><?php echo wpsg_translate(__($img['title'], $wpsg)); ?></h4>
 				<br />
-				<?php echo '<img style="width: 240px; height:240px;" src="data:image/png;base64,'.$img['hash'].'" />'; ?>
+				<?php echo '<img class="wpsg_mod_prepayment_girocode_left_qrcodeimg" src="data:image/png;base64,'.$img['hash'].'" />'; ?>
 				<br>
-				<div style="display: flex; gap: 25%;">
-					<div style="display: flex; flex-direction: column;">
-						<h4 style="margin: 0;"><?php echo wpsg_translate(__('Währung', $wpsg)); ?></h4>
+				<div class="wpsg_mod_prepayment_girocode_left_wrap">
+					<div class="wpsg_mod_prepayment_girocode_left_currency">
+						<h4><?php echo wpsg_translate(__('Währung', $wpsg)); ?></h4>
 						<?php echo $this->get_option('wpsg_currency'); ?>
 					</div>
-					<div style="display: flex; flex-direction: column;">
-						<h4 style="margin: 0;"><?php echo wpsg_translate(__('Betrag', $wpsg)); ?></h4>
+					<div class="wpsg_mod_prepayment_girocode_left_amount">
+						<h4><?php echo wpsg_translate(__('Betrag', $wpsg)); ?></h4>
 						<?php echo sprintf("%.2f", $img['invoiceAmount']); ?>
 					</div>
 				</div>
 			</div>
-			<div class="wpsg_mod_prepayment_girocode_right" style="display: flex; flex-direction: column;">
-				<h4 style="margin: 0;"><?php echo wpsg_translate(__('Konto / Zahlbar an', $wpsg)); ?></h4>
+			<div class="wpsg_mod_prepayment_girocode_right">
+				<h4><?php echo wpsg_translate(__('Konto / Zahlbar an', $wpsg)); ?></h4>
 				<?php echo $this->replaceUniversalPlatzhalter($this->get_option('wpsg_mod_prepayment_iban')); ?><br />
 				<?php echo $this->replaceUniversalPlatzhalter($this->get_option('wpsg_mod_prepayment_kinhaber')); ?><br />
 				<?php echo $this->replaceUniversalPlatzhalter($this->get_option('wpsg_shopdata_street')); ?><br />
 				<?php echo $this->replaceUniversalPlatzhalter($this->get_option('wpsg_shopdata_zip')).' '.$this->replaceUniversalPlatzhalter($this->get_option('wpsg_shopdata_city')); ?><br />
 				<?php if (!empty($img['referenceNumber'])) { ?>
-					<h4 style="margin: 0;"><?php echo wpsg_translate(__('Referenz', $wpsg)); ?></h4>
+					<h4><?php echo wpsg_translate(__('Referenz', $wpsg)); ?></h4>
 					<?php echo $img['referenceNumber']; ?><br />
 				<?php } ?>
-				<h4 style="margin: 0;"><?php echo wpsg_translate(__('Zusätzliche Informationen', $wpsg)); ?></h4>
+				<h4><?php echo wpsg_translate(__('Zusätzliche Informationen', $wpsg)); ?></h4>
 				<?php echo $img['additionalInformation']; ?><br /> 
-				<h4 style="margin: 0;"><?php echo wpsg_translate(__('Zahlbar durch', $wpsg)); ?></h4>
+				<h4><?php echo wpsg_translate(__('Zahlbar durch', $wpsg)); ?></h4>
 				<?php echo $img['customerdata']['vname'].' '.$img['customerdata']['name']; ?><br />
 				<?php echo $img['customerdata']['strasse'].' '.$img['customerdata']['nr']; ?><br />
 				<?php echo $img['customerdata']['plz'].' '.$img['customerdata']['ort']; ?><br />
@@ -137,37 +139,36 @@
 		
 		?>
 		
-		<div class="wpsg_mod_prepayment_qrrechnung" style="display: flex; gap: 20px; border: 1px solid #000; padding: 20px;">
-			<div class="wpsg_mod_prepayment_qrrechnung_left" style="display: flex; flex-direction: column;">
-				<h4 style="margin: 0;"><?php echo wpsg_translate(__($img['title'], $wpsg)); ?></h4>
-				<?php if (isset($i['filepath'])) { ?><a title="Downloadlink für die QR-Rechnung" style="box-shadow:none; font-size:smaller; font-style:italic; text-decoration:underline;" target="_blank" href="<?php echo $this->callMod('wpsg_mod_prepayment', 'getFrontendLink', [$i['order_id']]); ?>">Download</a><?php } ?>
+		<div class="wpsg_mod_prepayment_qrrechnung">
+			<div class="wpsg_mod_prepayment_qrrechnung_left">
+				<h4><?php echo wpsg_translate(__($img['title'], $wpsg)); ?></h4>
 				<br />
-				<?php echo '<img style="width: 240px; height:240px;" src="data:image/png;base64,'.$img['hash'].'" />'; ?>
+				<?php echo '<img class="wpsg_mod_prepayment_qrrechnung_left_qrcodeimg" src="data:image/png;base64,'.$img['hash'].'" />'; ?>
 				<br>
-				<div style="display: flex; gap: 25%;">
-					<div style="display: flex; flex-direction: column;">
-						<h4 style="margin: 0;"><?php echo wpsg_translate(__('Währung', $wpsg)); ?></h4>
+				<div class="wpsg_mod_prepayment_qrrechnung_left_wrap">
+					<div class="wpsg_mod_prepayment_qrrechnung_left_currency">
+						<h4><?php echo wpsg_translate(__('Währung', $wpsg)); ?></h4>
 						<?php echo $this->get_option('wpsg_currency'); ?>
 					</div>
-					<div style="display: flex; flex-direction: column;">
-						<h4 style="margin: 0;"><?php echo wpsg_translate(__('Betrag', $wpsg)); ?></h4>
+					<div class="wpsg_mod_prepayment_qrrechnung_left_amount">
+						<h4><?php echo wpsg_translate(__('Betrag', $wpsg)); ?></h4>
 						<?php echo sprintf("%.2f", $img['invoiceAmount']); ?>
 					</div>
 				</div>
 			</div>
-			<div class="wpsg_mod_prepayment_qrrechnung_right" style="display: flex; flex-direction: column;">
-				<h4 style="margin: 0;"><?php echo wpsg_translate(__('Konto / Zahlbar an', $wpsg)); ?></h4>
+			<div class="wpsg_mod_prepayment_qrrechnung_right">
+				<h4><?php echo wpsg_translate(__('Konto / Zahlbar an', $wpsg)); ?></h4>
 				<?php echo $this->replaceUniversalPlatzhalter($this->get_option('wpsg_mod_prepayment_iban')); ?><br />
 				<?php echo $this->replaceUniversalPlatzhalter($this->get_option('wpsg_mod_prepayment_kinhaber')); ?><br />
 				<?php echo $this->replaceUniversalPlatzhalter($this->get_option('wpsg_shopdata_street')); ?><br />
 				<?php echo $this->replaceUniversalPlatzhalter($this->get_option('wpsg_shopdata_zip')).' '.$this->replaceUniversalPlatzhalter($this->get_option('wpsg_shopdata_city')); ?><br />
 				<?php if (!empty($img['referenceNumber'])) { ?>
-					<h4 style="margin: 0;"><?php echo wpsg_translate(__('Referenz', $wpsg)); ?></h4>
+					<h4><?php echo wpsg_translate(__('Referenz', $wpsg)); ?></h4>
 					<?php echo $img['referenceNumber']; ?><br />
 				<?php } ?>
-				<h4 style="margin: 0;"><?php echo wpsg_translate(__('Zusätzliche Informationen', $wpsg)); ?></h4>
+				<h4><?php echo wpsg_translate(__('Zusätzliche Informationen', $wpsg)); ?></h4>
 				<?php echo $img['additionalInformation']; ?><br /> 
-				<h4 style="margin: 0;"><?php echo wpsg_translate(__('Zahlbar durch', $wpsg)); ?></h4>
+				<h4><?php echo wpsg_translate(__('Zahlbar durch', $wpsg)); ?></h4>
 				<?php echo $img['customerdata']['vname'].' '.$img['customerdata']['name']; ?><br />
 				<?php echo $img['customerdata']['strasse'].' '.$img['customerdata']['nr']; ?><br />
 				<?php echo $img['customerdata']['plz'].' '.$img['customerdata']['ort']; ?><br />
-- 
cgit v1.2.3