tohe
/
wmdeit_kaform
2
1
Fork 3
Code Issues 7 Pull Requests 2 Releases 2 Wiki Activity

Moved form into form.php

This commit is contained in:
Tobias Herre 2021-09-13 09:03:07 +02:00
parent 37eba4283b
commit 2e0c9d3194
5 changed files with 323 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
form.php Normal file
View File

@ -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

5
ka.php
View File

@ -20,9 +20,6 @@
$results = putenv("LC_ALL=$loc"); $results = putenv("LC_ALL=$loc");
$results = putenv("LC_MESSAGES=$loc"); $results = putenv("LC_MESSAGES=$loc");
$results = bindtextdomain($domain,"./locale"); $results = bindtextdomain($domain,"./locale");
?> ?>
<html > <html >
<head> <head>
@ -40,9 +37,11 @@
</head> </head>
<body> <body>
<div class="page is-container"> <div class="page is-container">
<div class="main-sidebar"> <div class="main-sidebar">
<img alt="wikimedia logo" src="Wikimedia_Deutschland-Logo.svg"/> <img alt="wikimedia logo" src="Wikimedia_Deutschland-Logo.svg"/>
</div> </div>
<div class="main-content"> <div class="main-content">
<h1> <h1>
<?php echo _( "Antrag auf Kostenerstattung")?> <?php echo _( "Antrag auf Kostenerstattung")?>

6
kaform.js
View File

@ -161,13 +161,13 @@ function getUploadField(rid)
function getRow(rid,num) { function getRow(rid,num) {
var cur = document.getElementById("currency").value; var cur = document.getElementById("currency").value;
return "" return ""
+ "<td>" + "<td data-label=\"Pos\">"
+ `${num}` + `${num}`
+"</td>" +"</td>"
+ "<td>" + "<td data-label=\"Datum\">"
+ `<input name="date[${rid}]" value="" type="date" placeholder="Datum*"/>` + `<input name="date[${rid}]" value="" type="date" placeholder="Datum*"/>`
+ "</td>" + "</td>"
+ "<td>" + "<td data-label=\"Beschr.\">"
+ `<input name="desc[${rid}]" type="text" placeholder="Beschreibung"/>` + `<input name="desc[${rid}]" type="text" placeholder="Beschreibung"/>`
+ "</td>" + "</td>"
+ "<td>" + "<td>"

139
master.css
View File

@ -1,46 +1,104 @@
body { body {
margin: 1em; margin: auto;
max-width: 100em; padding: 1em;
border: 1px solid red;
max-width: 90em;
min-width: 75em;
} }
@media only screen and (max-width: 767px) {
body {
.main-sidebar { min-width: 2em;
@include make-sidebar(440px); padding: 0.5em;
/* margin-right: 61px;*/
width:20em;
padding-right:2em;
@include for-mobile {
margin-right: 0;
} }
} }
.main-sidebar-secondary {
@include make-sidebar(240px);
margin-left: 16px;
@include for-mobile { @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 {
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 {
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; margin-left: 0;
} }
} }
.main-content { .main-content {
/* @include make-content;*/ flex: 1;
/* width: 100em;*/ min-width: 0;
/* max-width:170em;*/ width: 100%;
} }
.wmdelogo {
min-width: 5em;
}
.button.is-green { .button.is-green {
/* // $back-color, $text-color /* // $back-color, $text-color
@include make-button(#00ff00, #fff);*/ @include make-button(#00ff00, #fff);*/
background-color:green; background-color: green;
} margin-top: 5px;
.button.is-orange {
/* // $back-color, $text-color
@include make-button(#ffc000, #fff);*/
background-color:orange;
} }
.button.is-orange {
/* // $back-color, $text-color
@include make-button(#ffc000, #fff);*/
background-color: orange;
margin-top: 5px;
}
/* /*
#de:checked~header :lang(en) { display: none; } #de:checked~header :lang(en) { display: none; }
@ -50,17 +108,32 @@ body {
#de:checked~main :lang(en) { display: none; } #de:checked~main :lang(en) { display: none; }
#en:checked~main :lang(de) { 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 { .radiobutton {
display: none !important; display: none !important;
} }
/*# sourceMappingURL=master.css.map */

12
scss/vars.scss
View File

@ -1,9 +1,11 @@
@use "sass:math";
// =FUNCTIONS // =FUNCTIONS
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
@function strip-unit($number) { @function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number) @if type-of($number) == 'number' and not unitless($number)
{ {
@return $number / ($number * 0 + 1); @return math.div($number , ($number * 0 + 1));
} }
@return $number; @return $number;
@ -129,7 +131,7 @@ $color-button: #0c3dd7 !default;
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------
// Font Metrics // Font Metrics
$letter-height: 12/16; $letter-height: math.div(12,16);
$crop-top: 0.49em; $crop-top: 0.49em;
$crop-bottom: 0.49em; $crop-bottom: 0.49em;
@ -157,9 +159,9 @@ $border-radius: 4px !default;
$border: 1px solid rgba($color-black, .07) !default; $border: 1px solid rgba($color-black, .07) !default;
// Input/Buttons Height // Input/Buttons Height
$controls-height: ((40/(strip-unit($font-size-ui)*16)) * 1em) !default; // 40px in ems $controls-height: ((math.div(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-small: ((math.div(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-big: ((math.div(44,(strip-unit($font-size-big)*16))) * 1em) !default; // 44px in ems
// Overlay // Overlay
$overlay-background-color: rgba($color-black, .18) !default; $overlay-background-color: rgba($color-black, .18) !default;