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

Moved form into form.php

master
Tobias Herre 1 year ago
parent
37eba4283b
commit
2e0c9d3194
5 changed files with 322 additions and 44 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 204
      form.php
  2. 5
      ka.php
  3. 6
      kaform.js
  4. 139
      master.css
  5. 12
      scss/vars.scss

204
form.php
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_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")?>

6
kaform.js
View File

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

139
master.css
View File

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

12
scss/vars.scss
View File

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

Write Preview
Loading…
Cancel
Save