fix: add scroll padding for mobile navbar scroll and fix fruits bug f…

…or anchor scroll
ucsddesignco · Jun 7, 2024 · b0c7e4c · b0c7e4c
1 parent 3a311d7
commit b0c7e4c
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/src/app/Home.scss b/src/app/Home.scss
@@ -10,8 +10,6 @@
     width: 100%;
     position: relative;
 
-    //For extremely large screen sizes
-
     @media (min-width: $desktop-breakpoint) {
       scroll-behavior: smooth;
       display: grid;
@@ -32,6 +30,7 @@
     }
 
     section {
+      scroll-margin: $main-padding-mobile-block;
       position: relative;
       background-color: $primary-white;
       scroll-snap-align: center;

diff --git a/src/app/components/Fruits/Fruits.tsx b/src/app/components/Fruits/Fruits.tsx
@@ -72,16 +72,18 @@ export default function Fruits() {
       navBarWidth = 0;
       basketBottomRatio = 0.2;
     }
+
     const basketRect = basketElement.getBoundingClientRect();
     const basketPadding = parseFloat(
       window.getComputedStyle(basketElement).paddingLeft
     );
     const basketBottomDistance = basketBottomRatio * basketRect.width + 5;
-
+    const landingSection = document.getElementById('landing') as HTMLDivElement;
+    const landingRect = landingSection.getBoundingClientRect();
     const basketHeightTest = basketRect.height;
     const leftSlant = Bodies.rectangle(
       basketRect.left - navBarWidth,
-      basketRect.top + basketHeightTest / 2,
+      basketRect.top - landingRect.top + basketHeightTest / 2,
       basketPadding * 1 + basketBottomDistance,
       basketHeightTest,
       {
@@ -96,7 +98,7 @@ export default function Fruits() {
     );
     const rightSlant = Bodies.rectangle(
       basketRect.right - navBarWidth,
-      basketRect.top + basketHeightTest / 2,
+      basketRect.top - landingRect.top + basketHeightTest / 2,
       basketPadding * 1 + basketBottomDistance,
       basketHeightTest,
       {
@@ -129,7 +131,7 @@ export default function Fruits() {
       width / 2,
       scene.current.clientHeight,
       scene.current.clientWidth,
-      25,
+      12,
       {
         isStatic: true,
         friction: 0.1, // Adjust this value, 0 means no friction

diff --git a/src/app/pages/Apply/Apply.scss b/src/app/pages/Apply/Apply.scss
@@ -1,7 +1,6 @@
 #apply {
   position: relative;
   width: 100%;
-  overflow-x: hidden;
 
   @media (min-width: $tablet-breakpoint) {
     display: flex;