Merge pull request #38 from 1xINTERNET/feature/Collapsible

Add collapsible functionality
1xINTERNET · Jun 29, 2024 · d21e94a · d21e94a
2 parents 2058ff0 + 00480b5
commit d21e94a
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 12 deletions.
diff --git a/src/components/AboutUs.astro b/src/components/AboutUs.astro
@@ -7,19 +7,30 @@
     Hallo zusammen, liebe Fußballfans!
   </p>
   <p>
-    <img src="/images/dirk-von-meer.300.jpeg" class="float-left pr-6 pb-6" />
-    Ich bin Dirk, einer der Initiatoren und Unterstützer unseres Projekts WHY DO YOU LOVE FOOTBALL? Wie kam es dazu? Im Dezember letzten Jahres ist mein bester Freund Constantin gestorben. Wir hatten viele gemeinsame Träume, darunter eine Spendenaktion zur EM, da wir beide große Fußballfans sind. Nach einer traurigen Zeit beschloss ich im März, unser Vorhaben umzusetzen. Mit der Unterstützung vieler Menschen entwickelten wir THE EURO 2024 – A FESTIVAL OF LOVE. Danke allen, Audrey, Claudia, Jana, Leandra, Malou, Sara, Abdulbaset, Ali, Axel, Bert, Christoph, Claus &amp; Claus, Eric, George, Linus, Markus, Matthias, Neel, Stefan, Robin, Rolf, Vahin und Constantin! Ihr und Eure tollen Ideen haben das möglich gemacht. Jetzt versuchen wir unser Projekt bekannt zu machen. Lasst uns versuchen, unser Ziel 100.000 Fußbälle armen Kindern und Jugendlichen zu schenken, zu erreichen.
+    <img src="/images/dirk-von-meer.300.jpeg" class="float-left pr-6 pb-6" loading="eager"/>
+    Ich bin Dirk, einer der Initiatoren und Unterstützer unseres Projekts WHY DO YOU LOVE FOOTBALL? Wie kam es dazu? Im Januar ist mein bester Freund Constantin gestorben. Wir hatten viele gemeinsame Träume, darunter eine Spendenaktion zur EM, da wir beide große Fußballfans sind. Nach einer traurigen Zeit beschloss ich im März, unser Vorhaben umzusetzen.
   </p>
   <p>
-    Ich habe immer gerne soziale Projekte mit anderen Menschen umgesetzt. In den neunziger Jahren die Aktion Kartoffelsäcke e.V. für Kriegsopfer in Bosnien und Kroatien. Wir sammelten pro Aktionstag über 50 Tonnen Hilfsgüter. Beruflich arbeitete ich über 12 Jahre mit Unicef in Deutschland an verschiedenen Projekten. Später half ich beim Aufbau des Fundraisings für ProVeg International, wofür wir einen UNO-Preis gewannen. Besonders prägend war die Zusammenarbeit mit Christoph und Stefan von 1xINTERNET. Vor 25 Jahren entwickelten wir ONIUM – The Help Company und spendeten Einnahmen an Unicef und WWF. Jetzt arbeiten wir wieder zusammen am Projekt WHY DO YOU LOVE FOOTBALL? Einfach schön, dass wir wieder etwas Sinnvolles zusammen machen.
-  </p>
-  <p>
-    Ich wünsche Euch eine schöne, sonnige und superspannende EM! Wenn Ihr Fragen habt, schreibt mir gern eine Nachricht: <a href="mailto://[email protected]">[email protected]</a>
-  </p>
-  <p>
-    Euer Dirk
-  </p>
-  <p>
-    PS: Wenn ihr Organisationen oder Fußballschulen kennt, die Bälle brauchen oder bei der Verteilung der Bälle helfen können, gebt mir bitte Bescheid.
+    Mit der Unterstützung vieler Menschen konnten wir das projekt THE EURO 2024 – A FESTIVAL OF LOVE erfolgreich umsetzen. Ihr und Eure tollen Ideen haben das möglich gemacht. Jetzt sind wir dabei unser Projekt bekannt zu machen, um unserZiel 100.000 Fußbälle armen Kindern und Jugendlichen zu schenken, zu erreichen.
   </p>
+  <div class="collapsible"">
+    <p>
+      Ich habe immer gerne soziale Projekte mit anderen Menschen umgesetzt.<span class="expander italic">.. mehr anzeigen</span>
+    </p>
+    <p class="expanded">
+      In den neunziger Jahren habe ich die Aktion Kartoffelsäcke e.V. für Kriegsopfer in Bosnien und Kroatien entwickelt. Wir sammelten pro Aktionstag über 50 Tonnen Hilfsgüter. Beruflich arbeitete ich über 12 Jahre mit Unicef in Deutschland an verschiedenen Projekten. Später half ich beim Aufbau des Fundraisings für ProVeg International, wofür wir einen UNO-Preis gewannen. Besonders prägend war die Zusammenarbeit mit Christoph und Stefan von 1xINTERNET. Vor 25 Jahren entwickelten wir ONIUM – The Help Company und spendeten Einnahmen an Unicef und WWF. Jetzt arbeiten wir wieder zusammen am Projekt WHY DO YOU LOVE FOOTBALL? Einfach schön, dass wir wieder etwas Sinnvolles zusammen machen.
+    </p>
+    <p class="expanded">
+      Danke an alle, die schon mitlehfen, besonders Audrey, Claudia, Jana, Leandra, Malou, Sara, Abdulbaset, Ali, Axel, Bert, Christoph, Claus &amp; Claus, Eric, George, Linus, Markus, Matthias, Neel, Stefan, Robin, Rolf, Vahin und Constantin!
+    </p>
+    <p class="expanded">
+      Ich wünsche Euch eine schöne, sonnige und superspannende EM! Wenn Ihr Fragen habt, schreibt mir gern eine Nachricht: <a href="mailto://[email protected]">[email protected]</a>
+    </p>
+    <p class="expanded">
+      Euer Dirk
+    </p>
+    <p class="expanded">
+      PS: Wenn ihr Organisationen oder Fußballschulen kennt, die Bälle brauchen oder bei der Verteilung der Bälle helfen können, gebt mir bitte Bescheid.
+    </p>
+  </div>
 </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -10,6 +10,8 @@ import HowToHelp from "../components/HowToHelp.astro";
 import AboutUs from "../components/AboutUs.astro";
 ---
 
+<script src="../scripts/collapsible.js"></script>
+
 <Layout title="Welcome to Whyuluvfootball">
   <Hero />
   <Section

diff --git a/src/scripts/collapsible.js b/src/scripts/collapsible.js
@@ -0,0 +1,8 @@
+var coll = document.getElementsByClassName("collapsible");
+var i;
+
+for (i = 0; i < coll.length; i++) {
+  coll[i].addEventListener("click", function () {
+    this.classList.remove("collapsible");
+  });
+}
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -10,13 +10,15 @@
     font-style: normal;
     font-display: swap;
   }
+
   @font-face {
     font-family: "Stolzl";
     src: url("/fonts/Stolzl-Book.ttf") format("truetype");
     font-weight: 300;
     font-style: normal;
     font-display: swap;
   }
+
   @font-face {
     font-family: "Stolzl";
     src: url("/fonts/Stolzl-Regular.ttf") format("truetype");
@@ -67,6 +69,7 @@
       @apply text-[36px] leading-[48px];
     }
   }
+
   @media only screen and (max-width: 640px) {
     h2 {
       @apply text-[32px] leading-[40px];
@@ -76,36 +79,62 @@
   iframe {
     @apply aspect-video;
   }
+
+  .expander {
+    display: none;
+    cursor: pointer;
+  }
+
+  .expanded {
+    display: block
+  }
+
+  .collapsible .expander {
+    display: inline;
+  }
+
+  .collapsible .expanded {
+    display: none;
+  }
 }
 
 @layer components {
   .partner-links {
     @apply gap-4 grid grid-cols-5;
   }
+
   .partner-links div {
     @apply flex flex-col gap-4 items-center justify-center;
   }
+
   .partner-link {
     @apply aspect-square bg-white flex items-center justify-center overflow-hidden rounded-full;
   }
+
   .partner-link[data-size="1"] {
     @apply w-12 sm:w-20;
   }
+
   .partner-link[data-size="2"] {
     @apply w-14 sm:w-24;
   }
+
   .partner-link[data-size="3"] {
     @apply w-16 sm:w-28;
   }
+
   .partner-link img {
     @apply p-[2%];
   }
+
   .partner-link[data-size="1"] img {
     @apply w-[calc(48px_/_1.414)] sm:w-[calc(80px_/_1.414)];
   }
+
   .partner-link[data-size="2"] img {
     @apply w-[calc(56px_/_1.414)] sm:w-[calc(96px_/_1.414)];
   }
+
   .partner-link[data-size="3"] img {
     @apply w-[calc(64px_/_1.414)] sm:w-[calc(112px_/_1.414)];
   }