revert: SubNav commits (#266)

* Revert "fix: window causes errors in SSR (#256)" This reverts commit d8339cd. * Revert "fix: add SubNavigatino export in index.ts (#254)" This reverts commit b526356. * Revert "fix: rename subnavigation.scss to SubNavigation.scss (#250)" This reverts commit e3732a6. * Revert "fix: replace trimEnd to trim (#251)" This reverts commit b6ef27c. * Revert "feat: new SubNavigation component and new MiniToc for mobile (#249)" This reverts commit 6a1e69d. --------- Co-authored-by: Ruslan Bagautdinov <[email protected]>
diplodoc-platform · Jul 22, 2024 · d624d4a · d624d4a
1 parent ccb23c7
commit d624d4a
Show file tree

Hide file tree

Showing 11 changed files with 27 additions and 420 deletions.
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/src/components/DocLayout/DocLayout.scss b/src/components/DocLayout/DocLayout.scss
@@ -81,19 +81,8 @@
     @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
         flex-direction: column-reverse;
 
-        &__center + &__right:has(> .dc-subnavigation_invisible) {
-            margin-top: calc(0px - var(--dc-subheader-height, 52px));
-        }
-
         &__right {
-            position: sticky;
-            top: calc(var(--dc-header-height) - 1px);
-            left: 0;
-            z-index: 119;
-
-            height: fit-content;
-            width: 100%;
-            padding: 0;
+            display: none;
         }
 
         &__left {
@@ -104,7 +93,6 @@
             position: static;
             width: auto;
             height: auto;
-            padding: 0 20px;
 
             .dc-toc {
                 /* stylelint-disable-next-line declaration-no-important */

diff --git a/src/components/DocLeadingPage/DocLeadingPage.scss b/src/components/DocLeadingPage/DocLeadingPage.scss
@@ -20,10 +20,6 @@
         margin: 40px 0 $normalOffset;
 
         @include text-size(display-2);
-
-        @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
-            margin-top: 20px;
-        }
     }
 
     &__description {
@@ -47,10 +43,6 @@
             flex-direction: row;
             margin-top: 70px;
             margin-bottom: -$blockMarginBottomLarge;
-
-            @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
-                margin-top: 20px;
-            }
         }
     }
 

diff --git a/src/components/DocPage/DocPage.scss b/src/components/DocPage/DocPage.scss
@@ -27,41 +27,6 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
 
         @include text-size(body-1);
 
-        @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
-            position: absolute;
-            top: var(--dc-subheader-height);
-            z-index: 117;
-
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-
-            box-sizing: border-box;
-            max-height: 0px;
-            width: 100%;
-            padding: 0 16px 0 16px;
-
-            background: var(--g-color-base-background, #FFF);
-            box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
-
-            transition: max-height 300ms 0s;;
-
-            overflow-y: hidden;
-
-            &_open-mini-toc {
-                max-height: 80vh;
-            }
-
-            &_hidden-mini-toc {
-                padding: 0;
-            }
-
-            &-mini-toc {
-                width: 100%;
-                padding: 16px 0 16px 0;
-            }
-        }
-
         @media screen and (min-width: 1280px) {
             & {
                 width: 200px;
@@ -92,11 +57,11 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
     }
 
     &__controls {
-        display: none;
+        display: flex;
         top: 0;
         align-items: center;
         height: 40px;
-        z-index: 121;
+        z-index: 102;
         position: absolute;
         right: 7px;
 
@@ -115,8 +80,6 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
         }
 
         @media (min-width: map-get($screenBreakpoints, 'md')) {
-            display: flex;
-
             &_vertical {
                 top: calc(6px + var(--dc-header-height, #{$headerHeight}));
                 justify-content: center;
@@ -182,13 +145,9 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
     }
 
     &__title {
-        margin-top: 20px;
+        margin-bottom: 12px;
 
         @include text-size(display-2);
-
-        @media (min-width: map-get($screenBreakpoints, 'md')) {
-            margin-bottom: 12px;
-        }
     }
 
     &__content {
@@ -263,16 +222,15 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
 
     @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
         &__main {
-            margin-top: var(--dc-subheader-height);
             padding: 0 20px;
         }
 
         &__breadcrumbs {
             padding: 0 20px;
         }
-        /* CHECK display: block; temporarily hidden */
+
         &__content-mini-toc {
-            display: none;
+            display: block;
         }
 
         &__toc-nav-panel {
@@ -369,7 +327,7 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
     }
 
     & > p {
-        margin: 0 0 10px;
+        margin: 0 0 10px 0;
 
         &:first-child {
             &::before {
@@ -390,10 +348,10 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
     }
 
     $colors: (
-        dc-accent-info: $infoColor,
-        dc-accent-tip: $tipColor,
-        dc-accent-alert: $importantColor,
-        dc-accent-warning: $warningColor,
+            dc-accent-info: $infoColor,
+            dc-accent-tip: $tipColor,
+            dc-accent-alert: $importantColor,
+            dc-accent-warning: $warningColor
     );
 
     @each $type, $color in $colors {
@@ -407,10 +365,10 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
     }
 
     $backgroundColors: (
-        dc-accent-info: $infoBackgroundColor,
-        dc-accent-tip: $tipBackgroundColor,
-        dc-accent-alert: $importantBackgroundColor,
-        dc-accent-warning: $warningBackgroundColor,
+            dc-accent-info: $infoBackgroundColor,
+            dc-accent-tip: $tipBackgroundColor,
+            dc-accent-alert: $importantBackgroundColor,
+            dc-accent-warning: $warningBackgroundColor
     );
 
     @each $type, $color in $backgroundColors {

diff --git a/src/components/DocPage/DocPage.tsx b/src/components/DocPage/DocPage.tsx
@@ -28,7 +28,6 @@ import {Feedback, FeedbackView} from '../Feedback';
 import {HTML} from '../HTML';
 import {MiniToc} from '../MiniToc';
 import {SearchBar, withHighlightedSearchWords} from '../SearchBar';
-import {SubNavigation} from '../SubNavigation';
 import {TocNavPanel} from '../TocNavPanel';
 import UpdatedAtDate from '../UpdatedAtDate/UpdatedAtDate';
 
@@ -85,7 +84,6 @@ export interface DocPageProps extends DocPageData, DocSettings {
 
 type DocPageInnerProps = InnerProps<DocPageProps, DocSettings>;
 type DocPageState = {
-    mobileMiniTocOpen: boolean;
     loading: boolean;
     keyDOM: number;
     showNotification: boolean;
@@ -102,7 +100,6 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
         super(props);
 
         this.state = {
-            mobileMiniTocOpen: false,
             loading: props.singlePage,
             keyDOM: getRandomKey(),
             showNotification: true,
@@ -158,7 +155,6 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
             'full-screen': fullScreen,
             'hidden-mini-toc': hideMiniToc,
             'single-page': singlePage,
-            'open-mini-toc': this.state.mobileMiniTocOpen,
         };
 
         return (
@@ -168,6 +164,7 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
                 headerHeight={headerHeight}
                 className={b(modes)}
                 fullScreen={fullScreen}
+                hideRight={hideMiniToc}
                 tocTitleIcon={tocTitleIcon}
                 wideFormat={wideFormat}
                 hideTocHeader={hideTocHeader}
@@ -197,18 +194,9 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
                     {this.renderSinglePageControls()}
                 </DocLayout.Center>
                 <DocLayout.Right>
-                    <SubNavigation
-                        title={this.props.title}
-                        hideMiniToc={hideMiniToc}
-                        miniTocOpened={this.state.mobileMiniTocOpen}
-                        toggleMiniTocOpen={() =>
-                            this.setState({mobileMiniTocOpen: !this.state.mobileMiniTocOpen})
-                        }
-                        closeMiniToc={() => this.setState({mobileMiniTocOpen: false})}
-                    />
                     {/* This key allows recalculating the offset for the mini-toc for Safari */}
                     <div
-                        className={b('aside', modes)}
+                        className={b('aside')}
                         key={getStateKey(this.showMiniToc, wideFormat, singlePage)}
                     >
                         {hideMiniToc ? null : this.renderAsideMiniToc()}

diff --git a/src/components/MiniToc/MiniToc.scss b/src/components/MiniToc/MiniToc.scss
@@ -10,10 +10,6 @@
         color: var(--g-color-text-primary);
         margin-bottom: 12px;
         margin-top: 0;
-
-        @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
-            margin-bottom: 8px;
-        }
     }
 
     &__sections {
@@ -22,14 +18,8 @@
         height: calc(
             100vh - var(--dc-header-height, #{$headerHeight}) - #{$miniTocOffset} - var(--dc-subheader-height)
         );
-        overflow: hidden auto;
-
-        @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
-            height: fit-content;
-            max-height: calc(
-                80vh - var(--dc-header-height, #{$headerHeight}) - #{$miniTocOffset} - var(--dc-subheader-height)
-            );
-        }
+        overflow-y: auto;
+        overflow-x: hidden;
     }
 
     &__section {