fix: refactor accordion content (#1391)

* fix: refactor accordion content * style: reduce mobile padding below faq accordion Co-authored-by: orun <orun@agencyundone.com>
web3-storage · Jun 10, 2022 · 1817d3b · 1817d3b
1 parent 29f45ca
commit 1817d3b
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 76 deletions.
diff --git a/packages/website/modules/zero/components/accordion/accordion.scss b/packages/website/modules/zero/components/accordion/accordion.scss
@@ -25,11 +25,12 @@
 // ///////////////////////////////////////////////////////// Accordion [Content]
 // -----------------------------------------------------------------------------
 .accordion-content {
-  position: relative;
-  transition: height 150ms ease-in-out;
-  &.measuring-content {
-    position: absolute;
-    visibility: hidden;
-    z-index: -1000px;
-  }
+  max-height: 0;
+  padding: 0 1em;
+  transition: all 0.35s;
+}
+
+.accordion-section.open .accordion-content {
+  max-height: 100vh;
+  padding: 1em;
 }
diff --git a/packages/website/modules/zero/components/accordion/accordionContent.js b/packages/website/modules/zero/components/accordion/accordionContent.js
diff --git a/packages/website/modules/zero/components/accordion/accordionSection.js b/packages/website/modules/zero/components/accordion/accordionSection.js
@@ -2,7 +2,6 @@ import { useRouter } from 'next/router';
 import React, { useState, useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import ZeroAccordionHeader from 'ZeroComponents/accordion/accordionHeader';
-import ZeroAccordionContent from 'ZeroComponents/accordion/accordionContent';
 
 /**
  * @param {any} props TODO: Define props
@@ -36,7 +35,6 @@ const generateUID = () => {
 function AccordionSection({ active, toggle, toggleOnLoad, reportUID, slug, disabled, children }) {
   const [uid, setUID] = useState(generateUID);
   const [openOnNavigate, setopenOnNavigate] = useState(false);
-  const firstUpdate = useRef(true);
   const router = useRouter();
   const header = children.find(child => child.type === Header);
   const content = children.find(child => child.type === Content);
@@ -71,10 +69,7 @@ function AccordionSection({ active, toggle, toggleOnLoad, reportUID, slug, disab
       >
         {header ? header.props.children : null}
       </ZeroAccordionHeader>
-
-      <ZeroAccordionContent uid={uid} toggle={toggle} open={open} toggleOnLoad={openOnNavigate || toggleOnLoad}>
-        {content ? content.props.children : null}
-      </ZeroAccordionContent>
+      <div className="accordion-content">{content ? content.props.children : null}</div>
     </div>
   );
 }

diff --git a/packages/website/pages/faq.scss b/packages/website/pages/faq.scss
@@ -3,6 +3,9 @@
   z-index: 1;
   padding-top: 6.5rem;
   padding-bottom: 20rem;
+  @include tiny {
+    padding-bottom: 8rem;
+  }
   .accordion-block {
     a {
       color: #3c3cd6;