feat: Kontaktformular von Homepage auf "Was wir tun" verlegt. WIP: FAQ auf homepage.

Enthält Fix dafür, dass ohne JS nur ein Teil des Kontaktformulars ausgeblendet wird, was das Layout zerschießt.

assets/js/contact_form_toggle.js

@@ -1,7 +1,7 @@
 /* Unhide contact form if JS is enabled */
 window.addEventListener('DOMContentLoaded', (event) => {
-    const contact_form_wrapper = document.getElementsByClassName('content__contact_form_wrapper')[0];
+    const contact_form_wrapper = document.getElementsByClassName('contact__box')[0];
     if (contact_form_wrapper) {
-        contact_form_wrapper.style.setProperty('display', 'block');
+        contact_form_wrapper.style.setProperty('display', 'grid');
     }
 });

content/about/contents+en.lr

@@ -36,7 +36,6 @@ card_image: icon_connected_servers.svg
 card_text: After the project, we do not leave you out in the cold with the result, but offer you services for the operation of the completed project and the administration of the infrastructure beyond the project.
 ----
 image_credits: servers by IYIKON from <a href="https://thenounproject.com/browse/icons/term/servers/" target="_blank" title="servers Icons">Noun Project</a>
-----
 #### flow_icon_bubbles ####
 icon_path: Python_logo_and_wordmark.svg
 ----
@@ -110,3 +109,20 @@ kompetenzen_body:
 - Translation & Internationalisation (i18n/l10n)
 ---
 kompetenzen_heading: Expertise
+---
+contact_form_button: Send message
+---
+contact_form_email: Email address
+---
+contact_form_heading: Contact
+---
+contact_form_info:
+
+Your email address will not be published.<br>
+<span aria-hidden="true">Required fields are marked <span class="contact_form--required" aria-hidden="true">*</span>
+---
+contact_form_message: Message
+---
+contact_form_subheading: Contact form
+---
+contact_form_subject: Subject

content/about/contents.lr

@@ -109,3 +109,22 @@ kompetenzen_body:
 - Übersetzung & Internationalisierung (i18n/l10n)
 ---
 kompetenzen_heading: Kompetenzen
+---
+contact_form_button: Kommentar abschicken
+---
+contact_form_email: E-Mail-Adresse
+---
+contact_form_heading: Kontakt
+---
+contact_form_info:
+
+Deine E-Mail-Adresse wird nicht veröffentlicht.<br>
+<span aria-hidden="true">Erforderliche Felder sind gekennzeichnet <span class="contact_form--required" aria-hidden="true">*</span>
+---
+contact_form_message: Nachricht
+---
+contact_form_name: Name
+---
+contact_form_subheading: Kontaktformular
+---
+contact_form_subject: Betreff

content/contents+en.lr

@@ -39,22 +39,4 @@ content_image: map.png
 content_image_alt: Map of the Federal Republic of Germany with regions in which members are active
 ----
 content_image_src:
----
-contact_form_button: Send message
----
-contact_form_email: Email address
----
-contact_form_heading: Contact
----
-contact_form_info:
 
-Your email address will not be published.<br>
-<span aria-hidden="true">Required fields are marked <span class="contact_form--required" aria-hidden="true">*</span>
----
-contact_form_message: Message
----
-contact_form_name: Name
----
-contact_form_subheading: Contact form
----
-contact_form_subject: Subject

content/contents.lr

@@ -40,21 +40,13 @@ content_image_alt: Karte der Bundesrepublik mit Regionen in denen Member aktiv s
 ----
 content_image_src:
 ---
-contact_form_button: Kommentar abschicken
+faq:
----
-contact_form_email: E-Mail-Adresse
----
-contact_form_heading: Kontakt
----
-contact_form_info:
 
-Deine E-Mail-Adresse wird nicht veröffentlicht.<br>
+## FAQ
-<span aria-hidden="true">Erforderliche Felder sind gekennzeichnet <span class="contact_form--required" aria-hidden="true">*</span>
+
----
+- Ich bin hauptberuflich angestellt, welche Vorteile habe ich von euch?
-contact_form_message: Nachricht
+- Ich bin Freelancer, kann ich über euch arbeiten?
----
+- Ich habe eine zündende Idee aber keine Ahnung wie/wo ich anfangen soll. Kann ich die Idee mit euch umsetzen?
-contact_form_name: Name
+- Ich habe ein Nebeneinkommen und möchte meine Rechnungen über euch abwickeln, wie genau läuft das?
----
+- Welche Daten speichert ihr?
-contact_form_subheading: Kontaktformular
+- Welche weltlichen Güter kann ich mir über die Geno holen?
----
-contact_form_subject: Betreff

models/about_page.ini

@@ -30,3 +30,37 @@ type = string
 [fields.kompetenzen_body]
 label = Kompetenzen Inhalt
 type = markdown
+
+# Kontakt-Formular
+
+[fields.contact_form_heading]
+label = Kontaktformular: Überschrift
+type = string
+
+[fields.contact_form_subheading]
+label = Kontaktformular: Unterüberschrift
+type = string
+
+[fields.contact_form_info]
+label = Kontaktformular: Einleitung
+type = markdown
+
+[fields.contact_form_subject]
+label = Kontaktformular: Betreff
+type = string
+
+[fields.contact_form_message]
+label = Kontaktformular: Nachricht
+type = string
+
+[fields.contact_form_name]
+label = Kontaktformular: Name
+type = string
+
+[fields.contact_form_email]
+label = Kontaktformular: E-Mail-Adresse
+type = string
+
+[fields.contact_form_button]
+label = Kontaktformular: Buttonbeschriftung
+type = string

models/homepage.ini

@@ -35,43 +35,13 @@ label = Sub-Claim-Inhalt
 description = Inhalt des Subclaims im Kopf der Seite
 type = markdown
 
+[fields.faq]
+label = faq
+type = markdown
+
 # Flow Block Section
 
 [fields.section]
 label = Sections
 type = flow
 flow_blocks = flow_text_image_section
-
-# Kontakt-Formular
-
-[fields.contact_form_heading]
-label = Kontaktformular: Überschrift
-type = string
-
-[fields.contact_form_subheading]
-label = Kontaktformular: Unterüberschrift
-type = string
-
-[fields.contact_form_info]
-label = Kontaktformular: Einleitung
-type = markdown
-
-[fields.contact_form_subject]
-label = Kontaktformular: Betreff
-type = string
-
-[fields.contact_form_message]
-label = Kontaktformular: Nachricht
-type = string
-
-[fields.contact_form_name]
-label = Kontaktformular: Name
-type = string
-
-[fields.contact_form_email]
-label = Kontaktformular: E-Mail-Adresse
-type = string
-
-[fields.contact_form_button]
-label = Kontaktformular: Buttonbeschriftung
-type = string

templates/about_page.html

@@ -29,7 +29,63 @@
             {% endfor %}
           </div>
         </div>
+      </div>
 
+  <div class="contact__box" style="display:none">
+    <h1>{{ this.contact_form_headig }}</h1>
+
+      <div class="contact_info__box">
+      <p>
+        <strong>WTF Kooperative eG</strong><br>
+        Forsmannstr. 14 b<br>
+        Hinterhaus, 3. OG<br>
+        22303 Hamburg
+      </p>
+      <p>
+        <strong>E-Mail:</strong><br>
+        office@wtf-eg.de
+      </p>
+      <p>
+        <strong>GnuPG Key:</strong><br>
+        <a href="/gnupg/1129A9F509FE1B36287202A2FE8772F9FB5D572F.asc" title="1129A9F509FE1B36287202A2FE8772F9FB5D572F">wtf_eg.asc</a>
+      </p>
+    </div>
+    <section class="contact_form_box">
+      <div class="content__box">
+          <div class="content__inner_box -width_constraint content__contact_form_wrapper">
+            <h2>{{ this.contact_form_subheading }}</h2>
+            <form id="contact_form" class="content__contact_form">
+              <p class="contact_form__note">
+                {{ this.contact_form_info }}
+              </p>
+              <p class="contact_form__text_input">
+                <label for="name">{{ this.contact_form_subject }} <span class="contact_form--required" aria-hidden="true">*</span></label>
+                <input id="name" class="contact_form__subject" name="subject" type="text" value="" size="30" maxlength="245" required />
+              </p>
+              <p class="contact_form__textarea">
+                <label for="message">{{ this.contact_form_message }} <span class="contact_form--required" aria-hidden="true">*</span></label>
+                <textarea id="message" class="contact_form__message" aria-label="message" aria-hidden="true" cols="65" rows="7" name="message" required></textarea>
+              </p>
+              <p class="contact_form__text_input">
+                <label for="name">{{ this.contact_form_name }} <span class="contact_form--required" aria-hidden="true">*</span></label>
+                <input id="name" class="contact_form__name" name="name" type="text" value="" size="30" maxlength="245" required />
+              </p>
+              <p class="contact_form__text_input">
+                <label for="email">{{ this.contact_form_email }} <span class="contact_form--required" aria-hidden="true">*</span></label>
+                <input id="email" class="contact_form__email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-address" required />
+              </p>
+              <p class="contact_form__captcha">
+                <label for="captcha">Captcha <span class="contact_form--required" aria-hidden="true">*</span></label>
+                <input id="captcha" class="contact_form__captcha" name="captcha" type="captcha" value="…" size="30" maxlength="100" required placeholder="Wie viele Ecken hat ein Pentagramm?"/>
+              </p>
+              <p class="contact_form__submit">
+                <input name="submit" type="submit" id="submit" class="contact_form__submit_button" value="{{ this.contact_form_button }}" />
+                <p class="contact_form__feedback"></p>
+              </p>
+            </form>
+          </div>
+      </div>
+    </section>
   </div>
 
       <div class="content__box">

templates/homepage.html

@@ -15,61 +15,11 @@
     {{ blk }}
   {% endfor %}
 
-  <div class="contact__box">
-    <h1>{{ this.contact_form_headig }}</h1>
-
-      <div class="contact_info__box">
-      <p>
-        <strong>WTF Kooperative eG</strong><br>
-        Forsmannstr. 14 b<br>
-        Hinterhaus, 3. OG<br>
-        22303 Hamburg
-      </p>
-      <p>
-        <strong>E-Mail:</strong><br>
-        office@wtf-eg.de
-      </p>
-      <p>
-        <strong>GnuPG Key:</strong><br>
-        <a href="/gnupg/1129A9F509FE1B36287202A2FE8772F9FB5D572F.asc" title="1129A9F509FE1B36287202A2FE8772F9FB5D572F">wtf_eg.asc</a>
-      </p>
-    </div>
-      <section class="contact_form_box">
   <div class="content__box">
-          <div class="content__inner_box -width_constraint content__contact_form_wrapper" style="display:none">
+      <div class="content__box">
-            <h2>{{ this.contact_form_subheading }}</h2>
+          <div class="content__inner_box">
-            <form id="contact_form" class="content__contact_form">
+              {{ this.faq }}
-              <p class="contact_form__note">
-                {{ this.contact_form_info }}
-              </p>
-              <p class="contact_form__text_input">
-                <label for="name">{{ this.contact_form_subject }} <span class="contact_form--required" aria-hidden="true">*</span></label>
-                <input id="name" class="contact_form__subject" name="subject" type="text" value="" size="30" maxlength="245" required />
-              </p>
-              <p class="contact_form__textarea">
-                <label for="message">{{ this.contact_form_message }} <span class="contact_form--required" aria-hidden="true">*</span></label>
-                <textarea id="message" class="contact_form__message" aria-label="message" aria-hidden="true" cols="65" rows="7" name="message" required></textarea>
-              </p>
-              <p class="contact_form__text_input">
-                <label for="name">{{ this.contact_form_name }} <span class="contact_form--required" aria-hidden="true">*</span></label>
-                <input id="name" class="contact_form__name" name="name" type="text" value="" size="30" maxlength="245" required />
-              </p>
-              <p class="contact_form__text_input">
-                <label for="email">{{ this.contact_form_email }} <span class="contact_form--required" aria-hidden="true">*</span></label>
-                <input id="email" class="contact_form__email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-address" required />
-              </p>
-              <p class="contact_form__captcha">
-                <label for="captcha">Captcha <span class="contact_form--required" aria-hidden="true">*</span></label>
-                <input id="captcha" class="contact_form__captcha" name="captcha" type="captcha" value="…" size="30" maxlength="100" required placeholder="Wie viele Ecken hat ein Pentagramm?"/>
-              </p>
-              <p class="contact_form__submit">
-                <input name="submit" type="submit" id="submit" class="contact_form__submit_button" value="{{ this.contact_form_button }}" />
-                <p class="contact_form__feedback"></p>
-              </p>
-            </form>
           </div>
       </div>
-    </section>
-
   </div>
 {% endblock %}