From fc244f0b8354da5c0b65e67c122ac853a1046af7 Mon Sep 17 00:00:00 2001 From: shivam-kumar Date: Tue, 9 Sep 2025 20:10:20 +0530 Subject: [PATCH 1/7] SCAL-213939 Refactor layout styles and improve responsiveness --- src/assets/styles/index.scss | 130 ++++++++++++++++++---- src/assets/styles/variables.scss | 2 + src/components/DevDocTemplate/askDocs.tsx | 1 + src/components/DevDocTemplate/index.tsx | 71 ++++-------- src/components/Docmap/index.scss | 6 +- src/components/Docmap/index.tsx | 11 +- src/components/Document/index.scss | 14 +-- src/components/Header/index.scss | 6 +- src/components/LeftSidebar/NavContent.tsx | 7 +- src/components/LeftSidebar/index.scss | 21 +++- src/components/LeftSidebar/index.tsx | 72 ++++++------ src/components/Search/index.tsx | 1 - 12 files changed, 201 insertions(+), 141 deletions(-) diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index c5dccb4d0..992192808 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -36,30 +36,26 @@ main { } main.withHeaderFooter { - padding-top: 64px; display: flex; - min-height: 100vh; - overflow: hidden; } - - * { box-sizing: border-box; } -strong, b { - font-weight: bold; +strong, +b { + font-weight: bold; } .anchor { - display: block; - padding-top: 80px; /* height of sticky header */ - margin-top: -80px; + display: block; + padding-top: 80px; /* height of sticky header */ + margin-top: -80px; } .anchor-link { - scroll-margin: 120px; + scroll-margin: 120px; } a { @@ -106,6 +102,39 @@ a { .introWrapper { display: flex; } + +.documentWrapperContainer { + height: calc(100vh - $header-height - $document-padding); + width: calc(100%); + overflow-y: auto; + + &:not(:last-child) { + margin-right: 4rem; + } +} + +.documentWrapperContainer::-webkit-scrollbar { + display: none; +} + +.docmapWrapper { + height: calc(100vh - $header-height - $document-padding); + padding: 10px $padding-md 80px $padding-md; + width: 25%; + overflow-y: auto; +} + +.docmapWrapper::-webkit-scrollbar { + display: none; +} + +.playgroundWrapper { + margin-top: $header-height; + height: calc(100vh - $header-height); + width: 100%; + overflow-y: auto; +} + .pb-10 { padding-bottom: 10px; } @@ -125,7 +154,7 @@ a { // in case header is loaded .withHeaderFooter .restApiWrapper { - height: calc(100vh - 65px); + height: calc(100vh - $header-height); } button { @@ -241,7 +270,6 @@ button { align-items: center; } - .earlyAccess { border-radius: $beta-border-radius; display: inline-flex; @@ -258,7 +286,6 @@ button { align-items: center; } - .blueBackground { background-color: $note-color; } @@ -633,12 +660,33 @@ a.anchor { border-radius: 4px; } -/* Scrollbar styling end*/ -@media screen and (min-width: 767px) and (max-width: 1024px) { - .documentBody { - width: calc(100% - 260px); +.documentBody { + width: 100%; + margin-top: $header-height; + height: calc(100vh - $header-height); + overflow-x: auto; +} + +@media screen and (min-width: 1024px) and (max-width: 1300px) { + .docmapWrapper { + width: 35%; } +} +@media screen and (min-width: $tablet-resolution-min) and (max-width: $tablet-resolution-max) { + .docmapWrapper { + display: none; + } +} + +@media screen and (max-width: $tablet-resolution-max) { + .docmapWrapper { + display: none; + } +} + +/* Scrollbar styling end*/ +@media screen and (min-width: 767px) and (max-width: 1024px) { .homeBanner { display: none; } @@ -648,8 +696,12 @@ a.anchor { max-width: 100%; } - .documentWrapper { + .documentWrapperContainer { width: 100%; + + &:not(:last-child) { + margin-right: 0px; + } } .homeHeaderText { width: 100%; @@ -667,8 +719,39 @@ a.anchor { } } +@media screen and (max-width: $tablet-resolution-min) { + .documentWrapperContainer { + width: 100%; + overflow-x: auto; + + &:not(:last-child) { + margin-right: 0px; + } + + pre { + overflow-x: auto; + } + } +} + +@media screen and (max-width: $mobile-resolution-max) { + .documentWrapperContainer { + width: 100%; + overflow-x: auto; + + &:not(:last-child) { + margin-right: 0px; + } + + pre { + overflow-x: auto; + } + } +} + .leftNavContainer { - margin-top: 0; + margin-top: $header-height; + height: calc(100vh - $header-height); } @media screen and (max-width: $mobile-resolution-max) { @@ -690,8 +773,8 @@ a.anchor { } .documentBody { - width: 100%; padding-left: 0; + padding-right: 0; } .homeHeaderText { @@ -723,6 +806,10 @@ a.anchor { .tableContainer { overflow: scroll; } + .leftNavContainer { + margin-top: 0px; + height: auto; + } } @media screen and (max-width: $mobile-resolution-max) { @@ -894,7 +981,6 @@ a.anchor { } } - .document-body-wrapper { padding: 30px; } diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index 2f856750e..4b286002f 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -251,3 +251,5 @@ $tag-color-light: $lightgrey; --box-shadow-hover: 0 16px 20px 0 rgb(255 255 255 / 6%), 0 16px 20px 0 rgb(255 255 255 / 6%); } + +$header-height: 65px; diff --git a/src/components/DevDocTemplate/askDocs.tsx b/src/components/DevDocTemplate/askDocs.tsx index c6d9e3882..0f90d1744 100644 --- a/src/components/DevDocTemplate/askDocs.tsx +++ b/src/components/DevDocTemplate/askDocs.tsx @@ -7,6 +7,7 @@ export const AskDocs = () => { src="https://tse-app-builder.vercel.app/complete?embed=true" frameBorder="0" id="iframe" + width="100%" /> ); }; diff --git a/src/components/DevDocTemplate/index.tsx b/src/components/DevDocTemplate/index.tsx index b74626fe5..e3dcb8e53 100644 --- a/src/components/DevDocTemplate/index.tsx +++ b/src/components/DevDocTemplate/index.tsx @@ -93,11 +93,6 @@ const DevDocTemplate: FC = (props) => { fetchChild(initialNavContentData) || [], ); const [showSearch, setShowSearch] = useState(false); - const [leftNavWidth, setLeftNavWidth] = useState( - width > MAX_TABLET_RESOLUTION - ? LEFT_NAV_WIDTH_DESKTOP - : LEFT_NAV_WIDTH_TABLET, - ); const [leftNavOpen, setLeftNavOpen] = useState(false); const [keyword, updateKeyword] = useState(''); const [isPublicSiteOpen, setIsPublicSiteOpen] = useState(false); @@ -327,16 +322,6 @@ const DevDocTemplate: FC = (props) => { }); } - const calculateDocumentBodyWidth = () => { - if (isMaxMobileResolution && !isCustomPage) { - if (width > MAX_CONTENT_WIDTH_DESKTOP) { - if (isHomePage) return width - leftNavWidth; - return `${MAX_CONTENT_WIDTH_DESKTOP - 300}px`; - } - return `${width - 300}px`; - } - return '100%'; - }; const shouldShowRightNav = params[TS_PAGE_ID_PARAM] !== HOME_PAGE_ID; Modal.setAppElement('#___gatsby'); const renderSearch = () => { @@ -385,7 +370,6 @@ const DevDocTemplate: FC = (props) => { setDarkMode={setDarkMode} isDarkMode={isDarkMode} isPublicSiteOpen={isPublicSiteOpen} - leftNavWidth={leftNavWidth} /> @@ -406,7 +390,6 @@ const DevDocTemplate: FC = (props) => { navTitle={navTitle} navContent={navContent} docWidth={width} - handleLeftNavChange={setLeftNavWidth} location={location} setLeftNavOpen={setLeftNavOpen} leftNavOpen={leftNavOpen} @@ -422,16 +405,7 @@ const DevDocTemplate: FC = (props) => { /> {isAskDocsPage ? ( -
+
) : ( @@ -439,24 +413,20 @@ const DevDocTemplate: FC = (props) => { className={`documentBody ${ isHomePage ? 'doc-home' : 'doc-wrapper-detail' }`} - style={{ - width: calculateDocumentBodyWidth(), - marginLeft: isMaxMobileResolution - ? `${leftNavWidth}px` - : '0px', - }} >
- +
+ +
{shouldShowRightNav && ( -
+
= (props) => { id="wrapper" data-theme={isDarkMode ? 'dark' : 'light'} key={key} - style={{ height: '100vh', overflow: 'hidden' }} > {isPublicSiteOpen && (
= (props) => { /> )}
} className={getClassName()} - style={{ - height: !docContent - ? MAIN_HEIGHT_WITHOUT_DOC_CONTENT - : 'calc(100vh - 60px)', - overflow: 'auto', - }} + ref={ref as React.RefObject} > - {isPlayGround ? renderPlayGround() : renderDocTemplate()} + {isPlayGround ? ( +
+ {renderPlayGround()} +
+ ) : ( + renderDocTemplate() + )}
diff --git a/src/components/Docmap/index.scss b/src/components/Docmap/index.scss index a9bf5bf11..309630f56 100644 --- a/src/components/Docmap/index.scss +++ b/src/components/Docmap/index.scss @@ -1,13 +1,9 @@ @import '../../assets/styles/variables.scss'; .docmapLinks { - width: 16%; - padding: 10px $padding-md 80px $padding-md; - position: fixed; - right: 0; + width: -webkit-fill-available; font-size: 14px; height: 100vh; - overflow-y: auto; .tocTitle { margin: 0; diff --git a/src/components/Docmap/index.tsx b/src/components/Docmap/index.tsx index 0a4150dde..9254e5b74 100644 --- a/src/components/Docmap/index.tsx +++ b/src/components/Docmap/index.tsx @@ -21,9 +21,9 @@ const Docmap = (props: { if (hash) { const ele = document.querySelector(hash); if (ele) { - document.documentElement.scrollTop = - (ele as HTMLElement).offsetTop - - INTRO_WRAPPER_MARGIN_TOP; + ele.scrollIntoView({ + block: 'start', + }); } } setToc(tocEl.innerHTML); @@ -50,7 +50,10 @@ const Docmap = (props: { toc !== '' && (

{t('RIGHT_NAV_SIDERBAR_TITLE')}

-
+
) ); diff --git a/src/components/Document/index.scss b/src/components/Document/index.scss index 7adb26298..957f0871e 100644 --- a/src/components/Document/index.scss +++ b/src/components/Document/index.scss @@ -4,7 +4,7 @@ @import '../../assets/styles/grid.scss'; .documentWrapper { - width: calc(100% - #{$docmap-width-desktop}); + width: calc(100%); color: var(--primary-color); .documentView { @@ -24,16 +24,6 @@ visibility: hidden; } - /* Optional: apply scroll-margin to headings */ - h1[id], - h2[id], - h3[id], - h4[id], - h5[id], - h6[id] { - scroll-margin-top: 70px; - } - .scroll-container { scroll-behavior: smooth; scroll-padding-top: 65px; @@ -330,7 +320,7 @@ pre { @media screen and (min-width: $tablet-resolution-min) and (max-width: $tablet-resolution-max) { .documentWrapper { - width: calc(100% - #{$docmap-width-tablet}); + width: -webkit-fill-available; } } diff --git a/src/components/Header/index.scss b/src/components/Header/index.scss index 85ad2f782..f0bc8632e 100644 --- a/src/components/Header/index.scss +++ b/src/components/Header/index.scss @@ -2,9 +2,11 @@ header { background: var(--header-color); - position: fixed; + position: absolute; + top: 0; + left: 0; width: 100%; - height: 65px; + height: $header-height; border-bottom: var(--header-border-color); z-index: $header-zIndex; diff --git a/src/components/LeftSidebar/NavContent.tsx b/src/components/LeftSidebar/NavContent.tsx index 52ce03f79..5eacbd8a1 100644 --- a/src/components/LeftSidebar/NavContent.tsx +++ b/src/components/LeftSidebar/NavContent.tsx @@ -16,10 +16,15 @@ const NavContent = (props: { setDarkMode: Function; searchClickHandler: Function; }) => { + if (props.navContent === '') { + return ; + } + return (