wtf-eg/digitale-online-offline-registration
3
0
Fork 0
Code Issues 7 Pull Requests 4 Projects Releases Activity

I f**cking hate firefix oldschool style and better QR Code

Browse Source
This commit is contained in:
scammo 2021-04-27 12:16:27 +02:00
parent 74a71b5d4a
commit 413e1090e2
1 changed files with 52 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/App.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<header class="container"> <header class="container">
<div class="row"> <div class="row">
<div class="col-9"> <div class="col-6">
<img src="/img/wtf_logo.svg" style="height: 7rem" /> <img src="/img/wtf_logo.svg" style="height: 7rem" />
<h1>Beitritts-/ Beteiligungserklärung WTF eG</h1> <h1>Beitritts-/ Beteiligungserklärung WTF eG</h1>
<p> <p>
@ -11,11 +11,13 @@
Version {{ version }} Version {{ version }}
</p> </p>
</div> </div>
<div class="col-3"> <div class="col-6">
<qrcode-vue <qrcode-vue
:value="contentQrCode" :value="contentQrCode"
:size="200" :size="350"
level="L" level="L"
renderAs="svg"
margin="10"
style="margin: 0 auto; display: block" style="margin: 0 auto; display: block"
/> />
<!-- {{contentQrCode}} --> <!-- {{contentQrCode}} -->
@ -26,7 +28,7 @@
Bitte fülle alle Felder aus und klicke dann auf "Drucken". Das gedruckte Bitte fülle alle Felder aus und klicke dann auf "Drucken". Das gedruckte
Dokument muss dann noch mit Ort, Datum und Unterschrift versehen werden. Dokument muss dann noch mit Ort, Datum und Unterschrift versehen werden.
Danach kannst du die Unterlagen per Post in's Büro der WTF eG versenden. Danach kannst du die Unterlagen per Post in's Büro der WTF eG versenden.
Bei Fragen gibt es unten ein FAQ. Bei Fragen gibt es unten ein FAQ. Am besten Aktivierst du beim Drucken die Hintergrundgrafiken.
<br/> <br/>
Alle mit * markierten Felder sind Pflichtfelder. Alle mit * markierten Felder sind Pflichtfelder.
</p> </p>
@ -45,7 +47,7 @@
id="confirm_membership" id="confirm_membership"
required required
/> />
<label class="form-check-label" for="flexCheckDefault"> <label class="form-check-label beantraungs-text" for="flexCheckDefault">
Ich beantrage hiermit die Aufnahme in die WTF Kooperative eG, Ich beantrage hiermit die Aufnahme in die WTF Kooperative eG,
bestätige die mir zur Verfügung gestellte Satzung und verpflichte bestätige die mir zur Verfügung gestellte Satzung und verpflichte
mich zur Leistung nach Gesetz und Satzung vorgesehenen Zahlungen in mich zur Leistung nach Gesetz und Satzung vorgesehenen Zahlungen in
@ -255,7 +257,7 @@
class="row" class="row"
v-if="personhood_status === personhood_status_options[1]" v-if="personhood_status === personhood_status_options[1]"
> >
<div class="col-4 col-xs-12"> <div class="col-6 col-xs-12">
<label for="company_name" class="form-label">Firmenname:*</label> <label for="company_name" class="form-label">Firmenname:*</label>
<input <input
type="text" type="text"
@ -266,7 +268,7 @@
required required
/> />
</div> </div>
<div class="col-4 col-xs-12"> <div class="col-3 col-xs-12">
<label for="company_place" class="form-label">Sitz:*</label> <label for="company_place" class="form-label">Sitz:*</label>
<input <input
type="text" type="text"
@ -277,7 +279,7 @@
required required
/> />
</div> </div>
<div class="col-4 col-xs-12"> <div class="col-3 col-xs-12">
<label for="registration_data" class="form-label" <label for="registration_data" class="form-label"
>Registerangaben:*</label >Registerangaben:*</label
> >
@ -293,7 +295,7 @@
</div> </div>
<h3 class="mt-3">Deine Kontaktdaten</h3> <h3 class="mt-3">Deine Kontaktdaten</h3>
<div class="row"> <div class="row">
<div class="col-6 col-xs-12"> <div class="col-8 col-xs-12">
<label for="address_1_name" class="form-label" <label for="address_1_name" class="form-label"
>Anschriftzeile 1 (Name/Firma)*:</label >Anschriftzeile 1 (Name/Firma)*:</label
> >
@ -306,7 +308,7 @@
required required
/> />
</div> </div>
<div class="col-6 col-xs-12"> <div class="col-4 col-xs-12">
<label for="address_2_addtional" class="form-label" <label for="address_2_addtional" class="form-label"
>Anschriftzeile 2 (Gebäude/Wohnung):</label >Anschriftzeile 2 (Gebäude/Wohnung):</label
> >
@ -320,7 +322,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-6 col-xs-12"> <div class="col-8 col-xs-12">
<label for="address_4_street" class="form-label" <label for="address_4_street" class="form-label"
>Anschriftzeile 3 (Straße)*:</label >Anschriftzeile 3 (Straße)*:</label
> >
@ -333,7 +335,7 @@
required required
/> />
</div> </div>
<div class="col-6 col-xs-12"> <div class="col-4 col-xs-12">
<label for="house_number" class="form-label">Hausnummer:*</label> <label for="house_number" class="form-label">Hausnummer:*</label>
<input <input
type="text" type="text"
@ -443,15 +445,17 @@
<h3>Berufliche Situation & Finanzen</h3> <h3>Berufliche Situation & Finanzen</h3>
<label>Ich bin zur Zeit:</label> <label>Ich bin zur Zeit:</label>
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item"> <li class="list-group-item"
:class="{ 'no-print': !status_1 }">
<input <input
class="form-check-input me-1" class="form-check-input me-1"
v-model="status_1" v-model="status_1"
type="checkbox" type="checkbox"
/> />
nicht erwerbstätig (Student:in, Rentner:in, Sozialleistungsempfänger:in o.ä.) nicht erwerbstätig <span class="no-print">(Student:in, Rentner:in, Sozialleistungsempfänger:in o.ä.)</span>
</li> </li>
<li class="list-group-item"> <li class="list-group-item"
:class="{ 'no-print': !status_2 }">
<input <input
class="form-check-input me-1" class="form-check-input me-1"
v-model="status_2" v-model="status_2"
@ -459,7 +463,8 @@
/> />
Angestellt Angestellt
</li> </li>
<li class="list-group-item"> <li class="list-group-item"
:class="{ 'no-print': !status_3}">
<input <input
class="form-check-input me-1" class="form-check-input me-1"
v-model="status_3" v-model="status_3"
@ -567,9 +572,9 @@
id="status_public_projects" id="status_public_projects"
/> />
<label class="form-check-label" for="status_public_projects"> <label class="form-check-label" for="status_public_projects">
Auf mich trifft das alles nicht so zu, aber ich kenne Leute aus Auf mich trifft das alles nicht so zu<span class="no-print">, aber ich kenne Leute aus
dem Chaos / aus der WTF eG, die meinen, die Genossenschaft wäre dem Chaos / aus der WTF eG, die meinen, die Genossenschaft wäre
was für mich. (ggf. Name / Nick / Email angeben) was für mich. (ggf. Name / Nick / Email angeben)</span>
</label> </label>
</div> </div>
</article> </article>
@ -727,8 +732,8 @@ export default {
country: this.country, country: this.country,
phone_number: this.phone_number, phone_number: this.phone_number,
pgp: this.pgp, pgp: this.pgp,
chaos_connection: this.chaos_connection, chaos_connection: this.chaos_connection.substring(0,200),
public_nick: this.public_nick, public_nick: this.public_nick.substring(0,100),
}; };
if (this.status_1) membership.nicht_erwerbstaetig = true; if (this.status_1) membership.nicht_erwerbstaetig = true;
@ -748,6 +753,11 @@ export default {
registration_data: this.registration_data, registration_data: this.registration_data,
}; };
} }
Object.keys(membership).map((item, index)=>{
console.log(index, item)
membership[index] = membership[item];
delete membership[item]
})
return JSON.stringify(membership); return JSON.stringify(membership);
}, },
}, },
@ -782,9 +792,30 @@ h1 {
font-weight: bold; font-weight: bold;
} }
@media print { @media print {
.container{
max-width: 100% !important;
margin-left: none !important;
margin-right: none !important;
}
h1 { h1 {
font-size: 1.2rem !important; font-size: 1.2rem !important;
} }
h2{
font-size: 1.1rem !important;
}
h3{
font-size: 1.1rem !important;
}
.mt-3{
margin-top: none !important;
}
input{
font-size: 0.5rem;
}
.beantraungs-text{
font-size: 0.8rem !important;
}
.zulassung{ .zulassung{
font-size: 1.0rem !important; font-size: 1.0rem !important;
} }
@ -801,5 +832,6 @@ h1 {
flex: 1 0 0%; flex: 1 0 0%;
padding: 15px; padding: 15px;
} }
} }
</style> </style>