From 2e0c9d3194c22a55c091867bad05daf1180791eb Mon Sep 17 00:00:00 2001
From: Tobias Herre <tobias.herre@wikimedia.de>
Date: Mon, 13 Sep 2021 09:03:07 +0200
Subject: [PATCH] Moved form into form.php

---
 form.php       | 204 +++++++++++++++++++++++++++++++++++++++++++++++++
 ka.php         |   5 +-
 kaform.js      |   6 +-
 master.css     | 139 +++++++++++++++++++++++++--------
 scss/vars.scss |  12 +--
 5 files changed, 322 insertions(+), 44 deletions(-)
 create mode 100644 form.php

diff --git a/form.php b/form.php
new file mode 100644
index 0000000..58c222f
--- /dev/null
+++ b/form.php
@@ -0,0 +1,204 @@
+<h1>
+	<?php echo _( "Antrag auf Kostenerstattung")?>
+</h1>
+<p>
+	<?php echo _("Du möchtest dir Kosten erstatten lassen, welche im Rahmen deines Projektes entstanden sind?")?><BR>
+	<?php echo _("Bitte fülle dieses Formular aus. Pflichtfelder sind mit einem * gekennzeichnet.")?>
+</p>
+
+<form data-kube="kaform" name="theform" id="theform" action="submit.php" method="POST">
+
+	<fieldset> <legend><?php echo _("1. Erfasse deine Stammdaten")?></legend>
+
+		<div class="is-row">
+			<div class="is-col"> 
+				<input required type="input"
+					   size="32" id="projectid" name="project"
+					   placeholder="<?php echo _("Projekt/Zweck der Reise*")?>" />
+			</div>
+		</div>
+
+		<div class="is-row">
+			<div class="is-col"> 
+				<input required type="input" size="32"
+			`		id="realname"	name="realname" placeholder="<?php echo _("Dein Realname (Vorname Nachname)*")?>" />
+			</div>
+			<div class="is-col"> 
+				<input type="input" size="32"
+			`		id="wmdecontact"	name="wmdecontact" 
+						placeholder="<?= _("Deine Ansprechperson bei Wikimedia")?>" />
+			</div>
+		</div>
+
+		<div class="is-row">
+			<div class="is-col"> 
+				<input type="tel" size="32" 
+					id="phone" name="phone"
+					placeholder="<?= _("Deine Telefonnummer")?>" />
+			</div>
+			<div class="is-col"> 
+			</div>
+		</div>
+
+		<div class="is-row">
+			<div class="is-col"> 
+				<input required type="email" size="32" id="email"
+						name="email" placeholder="<?= _("Deine E-Mail-Adresse*")?>" />
+			</div>
+			<div class="is-col"> 
+			</div>
+		</div>
+
+		<div class="is-row">
+			<div class="is-col"> 
+
+				<nav class="tabs" data-kube="tabs" data-equal="false">
+					<a href="#bank-eu" class="is-active"><?=_("Banküberweisung")?></a>
+					<a href="#bank-noneu"><?=_("Banküberweisung (Non-EU)")?></a>
+				</nav>
+
+				<section id="bank-eu">
+					<div class="is-row">
+						<div class="is-col">
+							<input type="input" size="32" name="Owner" placeholder="<?=_("Kontoinhabende Person")?>" />
+						</div>
+						<div class="is-col">
+						</div>
+					</div>
+
+					<div class="is-row">
+						<div class="is-col">
+							<input type="input" size="32" id="iban" name="iban" placeholder="<?=_("IBAN*")?>" />
+						</div>
+						<div class="is-col">
+							<input type="input" size="32" id="bic" name="bic" placeholder="<?=_("BIC (wenn ausländische Bank)")?>" />
+						</div>
+					</div>
+					<textarea  id="comments" name="comments" style="resize:none;" cols="32" rows="4" 
+						placeholder="<?=_("Weitere Anmerkungen z.B. intermediäre Bank, Grund für abweichende Kontoinhbende Person")?>"></textarea >
+
+				</section>
+
+
+				<section id="bank-noneu">
+					<div class="is-row">
+						<div class="is-col">
+							<input type="input" size="32" name="Owner" placeholder="<?=_("Kontoinhabende Person")?>" />
+						</div>
+						<div class="is-col">
+						</div>
+					</div>
+
+					<div class="is-row">
+						<div class="is-col">
+							<input type="input" size="32" id="n_iban" name="n_iban" placeholder="<?=_("Kontonummer*")?>" />
+
+						</div>
+						<div class="is-col">
+							<input type="input" size="32" id="n_bic" name="n_bic" placeholder="<?=_("BIC/SWIFT*")?>" />
+						</div>
+					</div>
+					<input class="EU nonEU" type="input" size="32" id="n_bank" name="n_bankname" placeholder="<?="Name der Bank*"?>" />
+
+					<textarea  class="nonEU" name="n_bankaddress" id="n_bankaddress" style="resize:both;" cols="32" rows="4" 
+						placeholder="<?=_("Adresse der Bank (Stra&szlig;e und Hausnummer/Postleitzahl/Land)")?>"></textarea>
+					<br>
+					<textarea name="n_address" lang="de" class="nonEU" id="n_address" style="resize:both;" cols="32" rows="4" 
+						placeholder="<?=_("Deine Anschrift (Srta&szlig;e und Hausnummer/Postleitzahl/Land)")?>"></textarea>
+					<br>
+
+
+
+					<textarea  id="n_comments" name="n_comments"
+							style="resize:both;" cols="32" rows="4" 
+							placeholder="<?=_("Weitere Anmerkungen z.B. intermediäre Bank,Grund für abweichende kontoinhabende Person")?>"></textarea>
+
+				</section>
+
+			</div> <!-- i-col -->
+		</div> <!-- is-row -->
+
+	</fieldset>
+
+
+	<fieldset id="fieldset2"> <legend><?=_("2. Erfasse deine Ausgaben")?></legend>
+		<div class="is-row">
+			<div class="is-col">
+				<?=_("Währung:")?>
+			</div>
+			<div class="is-col">
+				<select onchange="renumberTableRows()" id="currency"  >
+					<option value="EUR">EUR</option>
+					<option value="USD">USD</option>
+					<option value="CHF">CHF</option>
+					<option value="XBT">XBT</option>
+				</select>`
+			</div>
+			<div class="is-col">
+			</div>
+		</div>
+
+		<table id="tabtab" class="is-responsive is-bordered is-striped">
+			<thead>
+				<tr>
+					<th><?=_("Pos.")?></th>
+					<th><?=_("Datum")?></th>
+					<th><?=_("Beschreibung")?></th>
+					<th><?=_("Betrag")?></th>
+					<th><?=_("Währung")?></th>
+					<th><?=_("Belege")?></th>
+					<th><?=_("L&ouml;schen")?></th>
+				</tr>
+			</thead>
+			<tbody id="tabbody">
+			</tbody>
+		</table>
+		<div class="is-col">
+			<button id="add_issue" type="button" onclick="addRow();" 
+			class="button is-green"><?=_("Ausgabe hinzuf&uuml;gen")?></button>
+		</div>
+
+	</fieldset>
+	<br>
+	<fieldset> <legend><?=_("3. Vorschuss und Sonstiges")?></legend>
+		<div class="is-row">
+			<div class="is-col valign="center"">
+					<?=_("Ich habe bereits einen Vorschuss erhalten in H&ouml;he von:")?>
+			</div>
+			<div class="is-col">
+				<input input name="advance" id="advance" type="text" placeholder="0,00 EUR"/>
+			</div>
+		</div>	
+
+		<div class="is-row">
+			<div class="is-col valign="center"">
+				<?=_("Hiermit bestätige ich die Vollständig- und Richtigkeit meiner Angaben:")?>*
+			</div>
+			<div class="is-col">
+				<input id="agree" type="checkbox" />
+			</div>
+		</div>	
+
+		<div class="is-row">
+			<div class="is-col">
+				<button type="button" onclick="downloadDocument(true);"
+				class="button is-green"><?=_("Antrag elektronisch direkt an WMDE schicken")?></button>
+			</div>
+	
+			<div class="is-col">
+				<button type="button" onclick="downloadDocument(false);"
+				class="button is-orange"><?=_("Antrag herunterladen und später einreichen")?></button>
+			</div>
+		</div>
+		</fieldset>
+
+	
+		
+	<input type="hidden" id="banktype" name="banktype"/>  
+	<input type="hidden" id="sendmail" name="sendmail"/>  
+ 
+
+
+</form>
+<?php
+
diff --git a/ka.php b/ka.php
index 2821266..37186fb 100644
--- a/ka.php
+++ b/ka.php
@@ -20,9 +20,6 @@
 	$results = putenv("LC_ALL=$loc");
 	$results = putenv("LC_MESSAGES=$loc");
 	$results = bindtextdomain($domain,"./locale");
-
-
-
 ?>
 <html >
 <head>
@@ -40,9 +37,11 @@
 </head>
 <body>
 	<div class="page is-container">
+
 	<div class="main-sidebar">
 		<img alt="wikimedia logo" src="Wikimedia_Deutschland-Logo.svg"/>
 	</div>      
+
 	<div class="main-content">
 		<h1>
 		<?php echo _( "Antrag auf Kostenerstattung")?>
diff --git a/kaform.js b/kaform.js
index 5f3d482..e2ebc9a 100644
--- a/kaform.js
+++ b/kaform.js
@@ -161,13 +161,13 @@ function getUploadField(rid)
 function getRow(rid,num) {
 	var cur = document.getElementById("currency").value;
 	return "" 
-		+ "<td>"
+		+ "<td data-label=\"Pos\">"
 		+ `${num}`
 		+"</td>"
-		+ "<td>"
+		+ "<td data-label=\"Datum\">"
 		+ 	`<input name="date[${rid}]" value="" type="date" placeholder="Datum*"/>`
 		+ "</td>"
-		+ "<td>"
+		+ "<td data-label=\"Beschr.\">"
 		+	 `<input name="desc[${rid}]" type="text" placeholder="Beschreibung"/>`
 		+ "</td>"
 		+ "<td>"
diff --git a/master.css b/master.css
index 03a3b73..25368d9 100644
--- a/master.css
+++ b/master.css
@@ -1,47 +1,105 @@
-
 body {
-    margin: 1em;
-    max-width: 100em;
+  margin: auto;
+  padding: 1em;
+  border: 1px solid red;
+  max-width: 90em;
+  min-width: 75em;
+}
+@media only screen and (max-width: 767px) {
+  body {
+    min-width: 2em;
+    padding: 0.5em;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  fieldset {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+  }
 }
 
+input {
+  width: 50%;
+}
+
+table {
+  text-align: right;
+  border: 1px solid red;
+  background-color: red;
+}
+
+@media only screen and (max-width: 767px) {
+  h1 {
+    font-size: 120%;
+  }
+}
+
+.is-col {
+  padding: 0;
+  border: 0px solid blue;
+  margin-bottom: 1.1em;
+}
 
 .main-sidebar {
-    @include make-sidebar(440px);
-/*    margin-right: 61px;*/
-    width:20em;
-    padding-right:2em;
-    
-    @include for-mobile {
-	margin-right: 0;
-    }
+  flex: 0 0 10em;
+  max-width: 10em;
+  padding-right: 2em;
+}
+@media only screen and (max-width: 767px) {
+  .main-sidebar {
+    flex: 0;
+    max-width: 100%;
+  }
+}
+@media only screen and (max-width: 767px) {
+  .main-sidebar {
+    margin: auto;
+    text-align: center;
+  }
 }
-.main-sidebar-secondary {
-    @include make-sidebar(240px);
-    margin-left: 16px;
 
-    @include for-mobile {
-	margin-left: 0;
-    }
+.main-sidebar-secondary {
+  flex: 0 0 240px;
+  max-width: 240px;
+  margin-left: 16px;
 }
+@media only screen and (max-width: 767px) {
+  .main-sidebar-secondary {
+    flex: 0;
+    max-width: 100%;
+  }
+}
+@media only screen and (max-width: 767px) {
+  .main-sidebar-secondary {
+    margin-left: 0;
+  }
+}
+
 .main-content {
-    /*    @include make-content;*/
-/*    width: 100em;*/
-/*    max-width:170em;*/
+  flex: 1;
+  min-width: 0;
+  width: 100%;
 }
 
+.wmdelogo {
+  min-width: 5em;
+}
 
 .button.is-green {
-/*    // $back-color, $text-color
-    @include make-button(#00ff00, #fff);*/
-	background-color:green;
+  /*    // $back-color, $text-color
+      @include make-button(#00ff00, #fff);*/
+  background-color: green;
+  margin-top: 5px;
 }
+
 .button.is-orange {
-/*    // $back-color, $text-color
-    @include make-button(#ffc000, #fff);*/
-	background-color:orange;
+  /*    // $back-color, $text-color
+      @include make-button(#ffc000, #fff);*/
+  background-color: orange;
+  margin-top: 5px;
 }
 
-
 /*
 #de:checked~header :lang(en) { display: none; }
 #en:checked~header :lang(de) { display: none; }
@@ -50,17 +108,32 @@ body {
 #de:checked~main :lang(en) { display: none; }
 #en:checked~main :lang(de) { display: none; }
 */
+:lang(en) {
+  display: none;
+}
 
-:lang(en) {display: none;}
+#bankdetails legend, #bankdetails input[type=radio], #bankdetails input[type=radio] + label, #bankdetails label.radio {
+  display: inline;
+}
+
+#bankdetails #eu:checked ~ .nonEU:not(.EU), #bankdetails #eu:checked ~ .paypal {
+  display: none;
+}
 
+#bankdetails #noneu:checked ~ .EU:not(.nonEU), #bankdetails #noneu:checked ~ .paypal {
+  display: none;
+}
 
+#bankdetails #paypal:checked ~ .EU, #bankdetails #paypal:checked ~ .nonEU {
+  display: none;
+}
+
+#bankdetails #bar:checked ~ .EU, #bankdetails #bar:checked ~ .nonEU, #bankdetails #bar:checked ~ .paypal {
+  display: none;
+}
 
-#bankdetails legend, #bankdetails input[type="radio"], #bankdetails input[type="radio"] + label, #bankdetails label.radio { display: inline; }
-#bankdetails #eu:checked ~ .nonEU:not(.EU), #bankdetails #eu:checked ~ .paypal { display: none; }
-#bankdetails #noneu:checked ~ .EU:not(.nonEU), #bankdetails #noneu:checked ~ .paypal  { display: none; }
-#bankdetails #paypal:checked ~ .EU, #bankdetails #paypal:checked ~ .nonEU { display: none; }
-#bankdetails #bar:checked ~ .EU, #bankdetails #bar:checked ~ .nonEU, #bankdetails #bar:checked ~ .paypal { display: none; } 
 .radiobutton {
   display: none !important;
 }
 
+/*# sourceMappingURL=master.css.map */
diff --git a/scss/vars.scss b/scss/vars.scss
index a2711f1..ef58238 100644
--- a/scss/vars.scss
+++ b/scss/vars.scss
@@ -1,9 +1,11 @@
+@use "sass:math";
+
 // =FUNCTIONS
 // ---------------------------------------------------------------------------
 @function strip-unit($number) {
     @if type-of($number) == 'number' and not unitless($number)
     {
-        @return $number / ($number * 0 + 1);
+        @return math.div($number , ($number * 0 + 1));
     }
 
     @return $number;
@@ -129,7 +131,7 @@ $color-button: #0c3dd7 !default;
 // ---------------------------------------------------------------------------
 
 // Font Metrics
-$letter-height: 12/16;
+$letter-height: math.div(12,16);
 $crop-top:  0.49em;
 $crop-bottom: 0.49em;
 
@@ -157,9 +159,9 @@ $border-radius: 4px !default;
 $border: 1px solid rgba($color-black, .07) !default;
 
 // Input/Buttons Height
-$controls-height: ((40/(strip-unit($font-size-ui)*16)) * 1em) !default; // 40px in ems
-$controls-height-small: ((32/(strip-unit($font-size-small)*16)) * 1em) !default; // 32px in ems
-$controls-height-big: ((44/(strip-unit($font-size-big)*16)) * 1em) !default; // 44px in ems
+$controls-height: ((math.div(40,(strip-unit($font-size-ui)*16))) * 1em) !default; // 40px in ems
+$controls-height-small: ((math.div(32,(strip-unit($font-size-small)*16))) * 1em) !default; // 32px in ems
+$controls-height-big: ((math.div(44,(strip-unit($font-size-big)*16))) * 1em) !default; // 44px in ems
 
 // Overlay
 $overlay-background-color: rgba($color-black, .18) !default;