Finetuneing

Author: AareFabrik

next/app/(main)/PageHome.tsx

@@ -25,7 +25,7 @@ export interface Props {
 }
 
 export default function HomePage({ pageData, posts, partyTips, event }: Props) {
-  let promo_box = pageData && pageData.promo_box as ItemsPromoBox;
+  let promo_box = pageData && (pageData.promo_box as ItemsPromoBox);
 
   return (
     <View>
@@ -37,15 +37,17 @@ export default function HomePage({ pageData, posts, partyTips, event }: Props) {
         }}
       >
         {event && (
-          <PromoBox
-            title={event.promo_title}
-            text={event.promo_text}
-            backgroundColor={event.color}
-            textColor={Colors.white}
-            imageId={event.title_image as string}
-            buttonLabel={event.promo_button_label}
-            buttonUrl={event.promo_button_url}
-          ></PromoBox>
+          <View style={{ paddingBottom: Metrics.tripleBaseMargin }}>
+            <PromoBox
+              title={event.promo_title}
+              text={event.promo_text}
+              backgroundColor={event.color}
+              textColor={Colors.white}
+              imageId={event.title_image as string}
+              buttonLabel={event.promo_button_label}
+              buttonUrl={event.promo_button_url}
+            ></PromoBox>
+          </View>
         )}
 
         <View
@@ -143,5 +145,6 @@ const { styles, ids } = StyleSheet.create({
   },
   promoBoxContainer: {
     paddingHorizontal: Metrics.tripleBaseMargin,
+    paddingBottom: Metrics.tripleBaseMargin,
   },
 });

next/app/(main)/[slug]/PageProgram.tsx

@@ -67,7 +67,7 @@ export default function ProgramPage({
         start: "0 top",
 
         end: () =>
-          `${postRef.current.getBoundingClientRect().y - memberButtonRef.current.getBoundingClientRect().y} bottom`,
+          `${postRef.current.getBoundingClientRect().y - memberButtonRef.current.getBoundingClientRect().y + memberButtonRef.current.getBoundingClientRect().height / 2} bottom`,
         scrub: true,
         pin: true,
         // markers: true, // Remove after debugging
@@ -273,7 +273,7 @@ export default function ProgramPage({
         </View>
       </View>
       {promo_box && (
-        <View style={{ width: "90%" }}>
+        <View style={{ width: "90%", paddingTop: Metrics.tripleBaseMargin }}>
           <PromoBox
             title={promo_box.title}
             text={promo_box.text}
@@ -288,7 +288,7 @@ export default function ProgramPage({
       )}
       <View ref={postRef}>
         {posts && posts.length > 0 && (
-          <View style={{ width: "90vw" }}>
+          <View style={{ width: "90vw", paddingTop: Metrics.tripleBaseMargin }}>
             <View
               style={{
                 flexDirection: "row",
@@ -374,7 +374,7 @@ const { ids, styles } = StyleSheet.create({
   image: { width: "100%" },
   contentContainer: {
     width: "74vw",
-    paddingVertical: Metrics.tripleBaseMargin,
+    paddingTop: Metrics.tripleBaseMargin,
     "@media (max-width: 910px)": {
       width: "90vw",
     },

next/app/(main)/beitrag/[date]/[postslug]/PagePost.tsx

@@ -53,7 +53,7 @@ export default function BeitragPage({ post, morePosts }: Props) {
         start: "0 top",
 
         end: () =>
-          `${postRef.current.getBoundingClientRect().y - memberButtonRef.current.getBoundingClientRect().y} bottom`,
+          `${postRef.current.getBoundingClientRect().y - memberButtonRef.current.getBoundingClientRect().y + memberButtonRef.current.getBoundingClientRect().height / 2} bottom`,
         scrub: true,
         pin: true,
         // markers: true, // Remove after debugging

next/components/PromoBox.tsx

@@ -48,7 +48,9 @@ const PromoBox = ({
           layout={!isMobile ? undefined : "responsive"}
           fill={!isMobile}
           alt={title}
-          onError={event => { console.log("IMAGE ERROR ECONNRESET: ", event);}}
+          onError={(event) => {
+            console.log("IMAGE ERROR ECONNRESET: ", event);
+          }}
         />
       </View>
 
@@ -92,7 +94,6 @@ const { ids, styles } = StyleSheet.create({
   container: {
     borderRadius: 9,
     padding: Metrics.doubleBaseMargin,
-    marginBottom: Metrics.tripleBaseMargin,
     flexDirection: "row",
     justifyContent: "space-between",
     "@media (max-width: 910px)": {