CORE-4968: add responsive docs

oacore · Aug 20, 2024 · 275f1cf · 275f1cf
1 parent 01255c0
commit 275f1cf
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 1 deletion.
diff --git a/src/modules/documentation-membership-nav/documentation-membership-nav.jsx b/src/modules/documentation-membership-nav/documentation-membership-nav.jsx
@@ -14,6 +14,7 @@ const DocumentationMembershipNav = ({
 }) => {
   const [activeItem, setActiveItem] = useState(null)
   const headerHeight = 56
+  const mobileHeaderHeight = 150
 
   const handleClick = (obj, item) => {
     window.location.href = obj.href
@@ -23,9 +24,11 @@ const DocumentationMembershipNav = ({
     const element = document.getElementById(obj.href.replace('#', ''))
     if (element) {
       const rect = element.getBoundingClientRect()
+      const isMobile = window.matchMedia('(max-width: 768px)').matches
+      const adjustedHeaderHeight = isMobile ? mobileHeaderHeight : headerHeight
 
       window.scrollTo({
-        top: rect.top + window.scrollY - headerHeight,
+        top: rect.top + window.scrollY - adjustedHeaderHeight,
         behavior: 'smooth',
         block: 'center',
       })

diff --git a/src/modules/documentation-membership-nav/styles.css b/src/modules/documentation-membership-nav/styles.css
@@ -3,6 +3,12 @@
   height: calc(100vh - 146px);
   margin-right: 32px;
   overflow-y: scroll;
+  @media (max-width: 768px) {
+    width: 100%;
+    height: max-content;
+    margin-bottom: 16px;
+    overflow-y: unset;
+  }
 }
 
 .sider-mullty {
@@ -36,6 +42,10 @@
   line-height: 24px;
   color: #424242;
   cursor: pointer;
+  @media (max-width: 768px) {
+    padding: 16px;
+    font-size: 16px;
+  }
 }
 
 .sider-item-link {
@@ -73,4 +83,7 @@
   line-height: 130%;
   color: #212121;
   letter-spacing: .035px;
+  @media (max-width: 768px) {
+    font-size: 16px;
+  }
 }
diff --git a/src/modules/documentation-membership/documentation-membership.jsx b/src/modules/documentation-membership/documentation-membership.jsx
@@ -3,6 +3,7 @@ import ReactMarkdown from 'react-markdown'
 
 import styles from './styles.css'
 import { classNames } from '../../utils'
+import Icon from '../../elements/icon'
 
 const DocumentationMembership = ({
   headerTitle,
@@ -16,6 +17,8 @@ const DocumentationMembership = ({
   handleContentOpen,
   videoIcon,
   redirectLink,
+  showNavigator,
+  handleScrollToTop,
 }) => (
   <div
     className={classNames.use(styles.documentationWrapper, {
@@ -155,6 +158,15 @@ const DocumentationMembership = ({
           </>
         ))}
       </div>
+      {showNavigator && (
+        // eslint-disable-next-line max-len
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+        <div className={styles.navigator} onClick={handleScrollToTop}>
+          <span className={styles.navigatorLogo}>
+            <Icon src="#active-arrow" />
+          </span>
+        </div>
+      )}
     </div>
   </div>
 )

diff --git a/src/modules/documentation-membership/styles.css b/src/modules/documentation-membership/styles.css
@@ -12,6 +12,9 @@
   width: calc(100% - 370px);
   padding-right: 5px;
   overflow-y: scroll;
+  @media (max-width: 768px) {
+    width: 100%;
+  }
 }
 
 .documentation-inner-wrapper::-webkit-scrollbar {
@@ -46,9 +49,17 @@
 }
 
 .placement {
+  position: relative;
   display: flex;
   justify-content: space-between;
   height: calc(100vh - 146px);
+  @media (max-width: 768px) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: unset;
+    max-height: max-content;
+  }
 }
 
 .placement::-webkit-scrollbar {
@@ -61,6 +72,9 @@
 
 .placement-height {
   max-height: 2224px;
+  @media (max-width: 768px) {
+    max-height: unset;
+  }
 }
 
 .placement-height::-webkit-scrollbar {
@@ -263,3 +277,25 @@
   cursor: pointer;
   gap: 4px;
 }
+
+.navigator {
+  position: fixed;
+  right: 52px;
+  bottom: 52px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  cursor: pointer;
+  background: #e0e0e0;
+  border: 1px solid #b75400;
+  border-radius: 2px;
+  @media (max-width: 768px) {
+    display: flex;
+  }
+}
+
+.navigator-logo {
+  transform: rotate(-90deg);
+}