From 413e1090e28d982cb660a79b57efd64c72ea61bb Mon Sep 17 00:00:00 2001
From: scammo <samuel.brinkmann@googlemail.com>
Date: Tue, 27 Apr 2021 12:16:27 +0200
Subject: [PATCH] I f**cking hate firefix oldschool style and better QR Code

---
 src/App.vue | 72 ++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 52 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 217b139..b54deb3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <header class="container">
     <div class="row">
-      <div class="col-9">
+      <div class="col-6">
         <img src="/img/wtf_logo.svg" style="height: 7rem" />
         <h1>Beitritts-/ Beteiligungserklärung WTF eG</h1>
         <p>
@@ -11,11 +11,13 @@
           Version {{ version }}
         </p>
       </div>
-      <div class="col-3">
+      <div class="col-6">
         <qrcode-vue
           :value="contentQrCode"
-          :size="200"
+          :size="350"
           level="L"
+          renderAs="svg"
+          margin="10"
           style="margin: 0 auto; display: block"
         />
         <!-- {{contentQrCode}} -->
@@ -26,7 +28,7 @@
       Bitte fülle alle Felder aus und klicke dann auf "Drucken". Das gedruckte
       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.
-      Bei Fragen gibt es unten ein FAQ.
+      Bei Fragen gibt es unten ein FAQ. Am besten Aktivierst du beim Drucken die Hintergrundgrafiken.
       <br/>
       Alle mit * markierten Felder sind Pflichtfelder.
     </p>
@@ -45,7 +47,7 @@
             id="confirm_membership"
             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,
             bestätige die mir zur Verfügung gestellte Satzung und verpflichte
             mich zur Leistung nach Gesetz und Satzung vorgesehenen Zahlungen in
@@ -255,7 +257,7 @@
           class="row"
           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>
             <input
               type="text"
@@ -266,7 +268,7 @@
               required
             />
           </div>
-          <div class="col-4 col-xs-12">
+          <div class="col-3 col-xs-12">
             <label for="company_place" class="form-label">Sitz:*</label>
             <input
               type="text"
@@ -277,7 +279,7 @@
               required
             />
           </div>
-          <div class="col-4 col-xs-12">
+          <div class="col-3 col-xs-12">
             <label for="registration_data" class="form-label"
               >Registerangaben:*</label
             >
@@ -293,7 +295,7 @@
         </div>
         <h3 class="mt-3">Deine Kontaktdaten</h3>
         <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"
               >Anschriftzeile 1 (Name/Firma)*:</label
             >
@@ -306,7 +308,7 @@
               required
             />
           </div>
-          <div class="col-6 col-xs-12">
+          <div class="col-4 col-xs-12">
             <label for="address_2_addtional" class="form-label"
               >Anschriftzeile 2 (Gebäude/Wohnung):</label
             >
@@ -320,7 +322,7 @@
           </div>
         </div>
         <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"
               >Anschriftzeile 3 (Straße)*:</label
             >
@@ -333,7 +335,7 @@
               required
             />
           </div>
-          <div class="col-6 col-xs-12">
+          <div class="col-4 col-xs-12">
             <label for="house_number" class="form-label">Hausnummer:*</label>
             <input
               type="text"
@@ -443,15 +445,17 @@
             <h3>Berufliche Situation & Finanzen</h3>
             <label>Ich bin zur Zeit:</label>
             <ul class="list-group">
-              <li class="list-group-item">
+              <li class="list-group-item"
+                :class="{ 'no-print': !status_1 }">
                 <input
                   class="form-check-input me-1"
                   v-model="status_1"
                   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 class="list-group-item">
+              <li class="list-group-item"
+                :class="{ 'no-print': !status_2 }">
                 <input
                   class="form-check-input me-1"
                   v-model="status_2"
@@ -459,7 +463,8 @@
                 />
                 Angestellt
               </li>
-              <li class="list-group-item">
+              <li class="list-group-item"
+                :class="{ 'no-print': !status_3}">
                 <input
                   class="form-check-input me-1"
                   v-model="status_3"
@@ -567,9 +572,9 @@
                 id="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
-                was für mich. (ggf. Name / Nick / Email angeben)
+                was für mich. (ggf. Name / Nick / Email angeben)</span>
               </label>
             </div>
           </article>
@@ -727,8 +732,8 @@ export default {
           country: this.country,
           phone_number: this.phone_number,
           pgp: this.pgp,
-          chaos_connection: this.chaos_connection,
-          public_nick: this.public_nick,
+          chaos_connection: this.chaos_connection.substring(0,200),
+          public_nick: this.public_nick.substring(0,100),
         };
 
         if (this.status_1) membership.nicht_erwerbstaetig = true;
@@ -748,6 +753,11 @@ export default {
             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);
       },
     },
@@ -782,9 +792,30 @@ h1 {
   font-weight: bold;
 }
 @media print {
+  .container{
+    max-width: 100% !important;
+    margin-left: none !important;
+    margin-right: none !important;
+  }
   h1 {
     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{
     font-size: 1.0rem !important;
   }
@@ -801,5 +832,6 @@ h1 {
     flex: 1 0 0%;
     padding: 15px;
   }
+
 }
 </style>