fix: pop-up definition overlaps header (#51)

diplodoc-platform · Sep 24, 2024 · 6f7113f · 6f7113f
1 parent 0b36d30
commit 6f7113f
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
     "mini-css-extract-plugin": "^2.7.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-svg-loader": "^3.0.3",
+    "react-svg-loader": "^3.0.0",
     "rtlcss": "^4.1.1",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",

diff --git a/src/components/App/App.scss b/src/components/App/App.scss
@@ -26,6 +26,7 @@
 
     .dc-root_full-header & {
         --dc-header-height: 64px;
+        --dc-subnavigation-height: 52px;
     }
 }
 

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -8,6 +8,8 @@ import {
 } from '@gravity-ui/page-constructor';
 import {ThemeProvider} from '@gravity-ui/uikit';
 import {
+    ControlSizes,
+    CustomNavigation,
     DocContentPageData,
     DocLeadingPageData,
     DocPageData,
@@ -20,6 +22,10 @@ import {
     getPageByType,
     getPageType,
 } from '@diplodoc/components';
+import {MermaidRuntime} from '@diplodoc/mermaid-extension/react';
+import {LatexRuntime} from '@diplodoc/latex-extension/react';
+import {Runtime as OpenapiSandbox} from '@diplodoc/openapi-extension/runtime';
+import '@diplodoc/transform/dist/js/yfm';
 
 import {HeaderControls} from '../HeaderControls';
 import {getDirection, updateRootClassName} from '../../utils';
@@ -28,14 +34,11 @@ import {useSettings} from '../../hooks/useSettings';
 import {useMobile} from '../../hooks/useMobile';
 
 import '../../interceptors/leading-page-links';
-
-import '@diplodoc/transform/dist/js/yfm';
-import {MermaidRuntime} from '@diplodoc/mermaid-extension/react';
-import {LatexRuntime} from '@diplodoc/latex-extension/react';
-import {Runtime as OpenapiSandbox} from '@diplodoc/openapi-extension/runtime';
+import {ConstructorPage} from '../ConstructorPage';
 
 import './App.scss';
-import {ConstructorPage} from '../ConstructorPage';
+
+const HEADER_HEIGHT = 64;
 
 export interface AppProps {
     lang: Lang;
@@ -198,6 +201,13 @@ export function App(props: DocInnerProps): ReactElement {
     const {leftItems = [], rightItems = []} = header as NavigationData['header'];
     const headerWithControls = rightItems.some((item: {type: string}) => item.type === 'controls');
 
+    const controlSize: ControlSizes = ControlSizes.L;
+    const userSettings = settings;
+    const toc = data.toc;
+
+    const navigationTocData = {toc, router, headerHeight: HEADER_HEIGHT};
+    const mobileControlsData = {controlSize, lang, userSettings};
+
     return (
         <div className={appClassName}>
             <ThemeProvider theme={theme} direction={direction}>
@@ -247,10 +257,20 @@ export function App(props: DocInnerProps): ReactElement {
                             fullHeader
                                 ? {
                                       header: {
-                                          withBorder: true,
-                                          leftItems: leftItems,
-                                          rightItems: rightItems,
+                                          leftItems: [],
                                       },
+                                      renderNavigation: () => (
+                                          <CustomNavigation
+                                              logo={logo}
+                                              data={{
+                                                  withBorder: true,
+                                                  leftItems: leftItems,
+                                                  rightItems: rightItems,
+                                              }}
+                                              navigationTocData={navigationTocData}
+                                              mobileControlsData={mobileControlsData}
+                                          />
+                                      ),
                                       logo,
                                   }
                                 : undefined

diff --git a/src/components/Layout/Layout.scss b/src/components/Layout/Layout.scss
@@ -1,3 +1,5 @@
+@import "../../styles/variables";
+
 .Layout {
     &__header {
         position: sticky;
@@ -8,13 +10,13 @@
     &__body {
         display: flex;
         flex-flow: column;
-        min-height: calc(100vh - var(--dc-header-height));
+        min-height: calc(100vh - var(--dc-header-height, #{$headerHeight}));
     }
 
     .pc-page-constructor & {
         &__content {
             flex: 1 1 auto;
-            margin: 0 -10px;
+            margin: 0 -8px;
         }
     }
 

diff --git a/src/styles/default.scss b/src/styles/default.scss
@@ -14,6 +14,7 @@ body {
 .g-root {
     --dc-header-height: 0;
     --dc-subheader-height: 40px;
+    --dc-subnavigation-height: 52px;
 
     --dc-error-image-403: url('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=');
     --dc-error-image-404: url('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=');

diff --git a/src/styles/overrides.scss b/src/styles/overrides.scss
@@ -6,7 +6,6 @@
     }
 }
 
-
 .App.document-mode {
     .pc-Grid {
         padding-right: 40px;
@@ -16,7 +15,7 @@
             padding: 0;
         }
 
-        @media (max-width: map-get($screenBreakpoints, 'md')) {
+        @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
             padding-right: 20px;
             padding-left: 20px;
 
@@ -60,12 +59,29 @@
     padding: 20px 0 24px;
 }
 
+.dc-root_wide-format {
+    & .dc-subnavigation {
+        $wideFormatHorizontalPadding: 8px;
+
+        padding-left: 0;
+        padding-right: $wideFormatHorizontalPadding;
+        width: calc(100% - $wideFormatHorizontalPadding);
+    }
+
+    & .dc-doc-page__main {
+        @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+            padding-left: #{$wideFormatHorizontalPadding};
+            padding-right: #{$wideFormatHorizontalPadding};
+        }
+    }
+}
+
 .pc-block-base {
     padding: 0 !important;
 }
 
 .pc-navigation {
-    z-index:  101;
+    z-index: 120;
 
     .desktop .dc-root_wide-format & .container-fluid {
         padding: 0;
@@ -104,8 +120,12 @@
     }
 }
 
+.pc-mobile-navigation {
+    z-index: 119;
+}
+
 .pc-navigation {
-    z-index:  101;
+    z-index: 120;
 
     .desktop.dc-root_wide-format & .container-fluid {
         padding: 30px;
@@ -122,4 +142,18 @@
             padding: 0;
         }
     }
-}
+}
+
+@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+    .dc-toc {
+        height: fit-content !important;
+    }
+
+    body:has(.pc-navigation) .dc-sidebar {
+        --dc-header-height: var(--header-height, 64px);
+    }
+
+    .pc-navigation-item:has(.dc-controls) {
+        display: none;
+    }
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -1,5 +1,6 @@
 // Sizes
 $headerHeight: 0px;
+$subNavigationHeight: 52px;
 $normalOffset: 20px;
 $miniTocOffset: 56px;
 $blockMarginBottomLarge: 20px;
@@ -8,6 +9,7 @@ $headerMarginTopLarge: 40px;
 $headerMarginTopMedium: 32px;
 $popupPadding: 16px;
 $centerBlockMaxWidth: 736px;
+$wideFormatHorizontalPadding: 8px;
 
 $screenBreakpoints: (
     'xs': 375px,
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,6 +26,7 @@ @@
         .dc-root_full-header & {
             --dc-header-height: 64px;
+            --dc-subnavigation-height: 52px;
         }
     }
@@ Expand Down @@