New Responsive design

This commit is contained in:
2026-05-23 18:08:27 +02:00
parent 3fdbaf0285
commit 0d436d8190
19 changed files with 2152 additions and 607 deletions
@@ -100,8 +100,8 @@ async function sendData() {
type="text"
@keyup="invoiceCheckContactName();"
id="contact_name"
name="contact_name" v-model="userName"
style="font-size: 14pt; width: 550px;" /><br /><br />
class="refund-input"
name="contact_name" v-model="userName" /><br /><br />
<label v-if="userName !== ''">
<strong>E-Mail-Adresse (Für Rückfragen):</strong>
@@ -109,9 +109,9 @@ async function sendData() {
<input
v-if="userName !== ''"
type="email"
class="refund-input"
name="contact_email"
v-model="userEmail"
style="font-size: 14pt; width: 550px;" /><br /><br />
v-model="userEmail" /><br /><br />
<label v-if="userName !== ''">
<strong>Telefonnummer (für Rückfragen):</strong>
@@ -119,26 +119,26 @@ async function sendData() {
<input
v-if="userName !== ''"
type="text"
class="refund-input"
id="contact_telephone"
name="contact_telephone" v-model="userTelephone"
style="font-size: 14pt; width: 550px;" /><br /><br />
name="contact_telephone" v-model="userTelephone" /><br /><br />
<label v-if="userName !== ''">
<strong>Weitere Informationen zur Abrechnung (Max. 128 Zeichen):</strong>
</label><br />
<textarea
id="notices"
class="refund-input"
name="notices" v-model="notices"
maxlength="128"
style="font-size: 14pt; width: 550px;" /><br /><br />
maxlength="128" /><br /><br />
<span id="decision" v-if="userEmail !== '' && userTelephone !== '' && decision === ''">
<label><br />
<strong>Möchtest du den Betrag spenden?</strong>
</label><br />
<input type="button" style="border-radius: 0; width: 100px;" @click="decision='donation'" value="Ja" />
<input type="button" style="border-radius: 0; width: 100px;" @click="decision='payout'" value="Nein" />
<input type="button" class="refund-choice" @click="decision='donation'" value="Ja" />
<input type="button" class="refund-choice" @click="decision='payout'" value="Nein" />
</span>
<span id="confirm_donation" v-if="decision === 'donation'">
@@ -151,12 +151,12 @@ async function sendData() {
<span id="confirm_payment" v-if="decision === 'payout'">
<label>
<strong>Konto-Inhaber*in:</strong></label><br />
<input type="text" name="account_owner" id="account_owner" v-model="userAccountOwner" style="font-size: 14pt; width: 550px;" /><br /><br />
<input type="text" name="account_owner" id="account_owner" class="refund-input" v-model="userAccountOwner" /><br /><br />
<label>
<strong>IBAN:</strong>
</label><br />
<IbanInput id="account_iban" name="account_iban" v-model="userIban" style="font-size: 14pt; width: 550px;" /><br /><br />
<IbanInput id="account_iban" name="account_iban" class="refund-input" v-model="userIban" /><br /><br />
<ErrorText :message="receiptError" />
<span v-if="userAccountOwner != '' && userIban && userIban.length === 27"><br />
<input type="radio" name="confirmation_radio" value="payment" id="confirmation_radio_payment" v-model="confirmation">
@@ -168,6 +168,26 @@ async function sendData() {
</template>
<style scoped>
/* optional styling */
</style>
.refund-input {
font-size: 14pt;
width: 100%;
max-width: 550px;
box-sizing: border-box;
}
.refund-choice {
border-radius: 0;
width: 100px;
}
@media (max-width: 639px) {
.refund-input {
font-size: 12pt;
max-width: 100%;
}
.refund-choice {
width: calc(50% - 6px);
}
}
</style>