Merge pull request #14 from technologiestiftung/staging

Staging

index.html

@@ -59,19 +59,19 @@
     <meta name="twitter:card" content="summary_large_image" />
     <meta
       itemprop="image"
-      content="https://2024.technologiestiftung-berlin.de/assets/Hero.jpg"
+      content="https://2024.technologiestiftung-berlin.de/assets/Hero.webp"
     />
     <meta
       name="twitter:image"
-      content="https://2024.technologiestiftung-berlin.de/assets/Hero.jpg"
+      content="https://2024.technologiestiftung-berlin.de/assets/Hero.webp"
     />
     <meta
       property="og:url"
-      content="https://2024.technologiestiftung-berlin.de/assets/Hero.jpg"
+      content="https://2024.technologiestiftung-berlin.de/assets/Hero.webp"
     />
     <meta
       property="og:image"
-      content="https://2024.technologiestiftung-berlin.de/assets/Hero.jpg"
+      content="https://2024.technologiestiftung-berlin.de/assets/Hero.webp"
     />
     <meta name="theme-color" content="#ffffff" />
     <meta name="msapplication-TileColor" content="#1E3791" />

src/App.module.scss

@@ -5,6 +5,6 @@
   .app {
     max-width: $max-width-content;
     margin: 0 auto;
-    width: 100vw;
+    width: 100%;
   }
 }

src/components/Icons/index.jsx

@@ -1,12 +1,42 @@
 import SmartCityIcon from "../../icons/SmartCity.svg";
+import SmartCityIconMobile from "../../icons/SmartCityMobile.svg";
 import NeueTechnologienIcon from "../../icons/NeueTechnologien.svg";
+import NeueTechnologienIconMobile from "../../icons/NeueTechnologienMobile.svg";
 import BildungIcon from "../../icons/Bildung.svg";
+import BildungIconMobile from "../../icons/BildungMobile.svg";
 import KulturIcon from "../../icons/Kultur.svg";
+import KulturIconMobile from "../../icons/KulturMobile.svg";
 import ProtoypingIcon from "../../icons/Prototyping.svg";
+import ProtoypingIconMobile from "../../icons/PrototypingMobile.svg";
 import WeiteresIcon from "../../icons/Weiteres.svg";
+import WeiteresIconMobile from "../../icons/WeiteresMobile.svg";
 import cn from "./Icons.module.scss";
+import React, { useState, useEffect } from "react";
 
 function Icons({ type }) {
+  const [resizeCount, setResizeCount] = useState(0);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setResizeCount(prev => prev + 1);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  if (window.innerWidth <= 768)
+    return (
+      <div className={cn.iconWrapper}>
+        {type === "smartCity" && <SmartCityIconMobile />}
+        {type === "neueTechnologien" && <NeueTechnologienIconMobile />}
+        {type === "bildung" && <BildungIconMobile />}
+        {type === "kultur" && <KulturIconMobile />}
+        {type === "prototyping" && <ProtoypingIconMobile />}
+        {type === "weitereAktivitaeten" && <WeiteresIconMobile />}
+      </div>
+    );
   return (
     <div className={cn.iconWrapper}>
       {type === "smartCity" && <SmartCityIcon />}

src/components/NavBar/SingleNavBarIcon.jsx

@@ -17,9 +17,8 @@ function SingleNavBarIcon({ icon, name, index, handleSingleNavBarIconClick }) {
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      {/* <div className={cn.icon}>{icon}</div> */}
       {icon}
-      {isHovered && (
+      {isHovered && window.innerWidth >= 768 && (
         <div className={cx(cn.speechBubble, cn.down)}>
           <p>{name}</p>
         </div>

src/components/NavBar/index.jsx

@@ -1,14 +1,14 @@
-import { useEffect, useState, useCallback, useRef } from "react";
-import cn from "./NavBar.module.scss";
-import SmartCityIcon from "../../icons/SmartCityNav.svg";
-import NeueTechnologienIcon from "../../icons/NeueTechnologienNav.svg";
+import { useCallback, useEffect, useRef, useState } from "react";
+import content from "../../content";
 import BildungIcon from "../../icons/BildungNav.svg";
 import KulturIcon from "../../icons/KulturNav.svg";
+import NeueTechnologienIcon from "../../icons/NeueTechnologienNav.svg";
 import PrototypingIcon from "../../icons/PrototypingNav.svg";
+import SmartCityIcon from "../../icons/SmartCityNav.svg";
 import UpIcon from "../../icons/Up.svg";
 import WeiteresIcon from "../../icons/WeiteresNav.svg";
+import cn from "./NavBar.module.scss";
 import SingleNavBarIcon from "./SingleNavBarIcon";
-import content from "../../content";
 
 function NavBar() {
   const scrollThreshold = true;
@@ -76,58 +76,61 @@ function NavBar() {
     return 0;
   };
 
-  function checkCurrentSection() {
-    if (scrollThreshold) {
-      let newCurrentSection = null;
-      sections.forEach(section => {
-        if (section) {
-          const rect = section.getBoundingClientRect();
-          if (
-            rect.top <= window.innerHeight / 2 &&
-            rect.bottom >= window.innerHeight / 2
-          ) {
-            newCurrentSection = section.id;
+  const handleScroll = useCallback(() => {
+    function checkCurrentSection() {
+      if (scrollThreshold) {
+        let newCurrentSection = null;
+        sections.forEach(section => {
+          if (section) {
+            const rect = section.getBoundingClientRect();
+            if (
+              rect.top <= window.innerHeight / 2 &&
+              rect.bottom >= window.innerHeight / 2
+            ) {
+              newCurrentSection = section.id;
+            }
+          }
+        });
+        if (newCurrentSection) {
+          const getID = newCurrentSection.replace("-sticky", "");
+          if (indicator !== getID) {
+            setIndicator(getID);
           }
         }
-      });
-      if (newCurrentSection) {
-        const getID = newCurrentSection.replace("-sticky", "");
-        if (indicator !== getID) {
-          setIndicator(getID);
-        }
-      }
-    } else {
-      const scrollPosition = window.scrollY + window.innerHeight / 2; // Middle of the viewport
-      let currentSection = null;
-      sections.forEach(section => {
-        if (section) {
-          const rect = section.getBoundingClientRect();
-          const sectionTop = window.scrollY + rect.top;
-          const sectionBottom = sectionTop + section.offsetHeight;
+      } else {
+        const scrollPosition = window.scrollY + window.innerHeight / 2; // Middle of the viewport
+        let currentSection = null;
+        sections.forEach(section => {
+          if (section) {
+            const rect = section.getBoundingClientRect();
+            const sectionTop = window.scrollY + rect.top;
+            const sectionBottom = sectionTop + section.offsetHeight;
 
-          if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
-            currentSection = section.id;
+            if (
+              scrollPosition >= sectionTop &&
+              scrollPosition < sectionBottom
+            ) {
+              currentSection = section.id;
+            }
+          }
+        });
+        if (currentSection) {
+          const getID = currentSection.replace("-sticky", "");
+          if (indicator !== getID) {
+            setIndicator(getID);
           }
-        }
-      });
-      if (currentSection) {
-        const getID = currentSection.replace("-sticky", "");
-        if (indicator !== getID) {
-          setIndicator(getID);
         }
       }
     }
-  }
-
-  const handleScroll = useCallback(() => {
     // console.log("handleScroll", trackScrolling.current);
     if (!trackScrolling.current) return;
     checkCurrentSection();
     const chaptersContent = document
       .getElementById("chapters")
       .getBoundingClientRect();
     const position = window.scrollY;
-    const getScrollPosition = chaptersContent.top + window.scrollY;
+    const getScrollPosition =
+      chaptersContent.top + window.scrollY + window.innerHeight * 0.666666666;
     const getEndPosition =
       chaptersContent.top +
       window.scrollY +
@@ -146,15 +149,12 @@ function NavBar() {
     ) {
       setShowNav(false);
     }
-  }, [showNav]);
+  }, [showNav, indicator, sections, scrollThreshold]);
 
   useEffect(() => {
     window.addEventListener("scroll", handleScroll);
     return () => window.removeEventListener("scroll", handleScroll);
   }, [handleScroll]);
-  useEffect(() => {
-    console.log("indicator", indicator);
-  }, [indicator]);
 
   return (
     <div

src/components/SingleAccordion/SingleAccordion.module.scss

@@ -45,13 +45,14 @@
       padding-top: $spacing-l;
       padding-bottom: $spacing-l;
       height: 100%;
+
       .paragraph {
-        padding: 0px $spacing-s 0px $spacing-l;
-        max-width: 552px;
+        padding: 0px $spacing-l;
         p {
           height: 100%;
           color: $color-primary-dark !important;
           @include base.body;
+          hyphens: auto;
         }
       }
     }

src/components/Slider/Slider.module.scss

@@ -3,16 +3,18 @@
 
 :local {
   .sliderContainer {
+    // min-height: 100vh;
     margin-bottom: 160px;
-    // height: 100vh;
     @media screen and (max-width: $absolute-break) {
       margin: 0;
       width: 100%;
       box-sizing: border-box;
       padding: $spacing-4xl $spacing-l $spacing-5xl $spacing-l;
     }
     @media screen and (min-width: $absolute-break) and (max-width: $max-width-content) {
-      padding: 0 $spacing-l;
+      box-sizing: border-box;
+      margin: 0;
+      padding: $spacing-4xl $spacing-l $spacing-4xl $spacing-l;
     }
     .headingContainer {
       margin-left: -$spacing-xl;
@@ -84,15 +86,13 @@
             .content {
               box-sizing: border-box;
               height: 100%;
-
               padding: $spacing-xl $spacing-l;
               border: $spacing-xs solid $color-primary-dark;
               border-radius: $border-radius;
-
               h3 {
                 color: $color-primary-dark;
                 font-size: $spacing-l;
-                margin-bottom: 34px;
+                margin-bottom: $spacing-l;
                 @media screen and (max-width: $absolute-break) {
                   font-size: 20px;
                 }
@@ -114,18 +114,12 @@
               background-size: cover;
               background-position: center;
               background-repeat: no-repeat;
-
               transition: $transition-slow;
-
               @media screen and (max-width: $max-width-content) {
                 width: 100%;
                 height: 240px;
                 margin-bottom: $spacing-l;
               }
-              @media screen and (min-width: $absolute-break) and (max-width: $max-width-content) {
-                width: 100%;
-                height: 360px;
-              }
             }
 
             .mobile {
@@ -134,6 +128,13 @@
                 width: 100%;
                 height: 100%;
                 display: block;
+                .mobileNavText {
+                  text-align: center !important;
+                  padding-top: $spacing-l !important;
+                  color: $color-primary-dark !important;
+                  user-select: none;
+                  @include base.body-bold;
+                }
               }
             }
           }
@@ -183,10 +184,6 @@
         background-color: $color-white;
         box-shadow: $drop-shadow;
       }
-      // checken
-      @media screen and (min-width: $absolute-break) and (max-width: $max-width-content) {
-        top: 160px;
-      }
     }
   }
 }

src/components/Slider/index.jsx

@@ -102,7 +102,6 @@ const Slider = () => {
                     )}
                   </div>
                 ))}
-
                 <div className={cn.mobile}>
                   <div
                     className={cn.bgImage}
@@ -115,6 +114,9 @@ const Slider = () => {
                       <Button to={slide.link} label={slide.btnText} />
                     )}
                   </div>
+                  <p className={cn.mobileNavText}>
+                    {indexActive + 1} / {rueckblick.length}
+                  </p>
                 </div>
               </div>
             ))}