New Responsive design
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user