feat: update mobile-ui (#282)

* feat: mobile SubNavigation * feat: mobile MiniToc; * feat: share button; * feat: mobile Sidebar with Toc and main menu; * feat: language and theme settings; * feat: search has been moved to the header * feat: updated dropdown in the mobile menu * feat: changed the styles of the Feedback block * feat: changed the styles of TocNavPanel * fix: bug with search on mobile devices * fix: bug with control-popups
diplodoc-platform · Sep 17, 2024 · 2e3f0d0 · 2e3f0d0
1 parent 896b973
commit 2e3f0d0
Show file tree

Hide file tree

Showing 63 changed files with 3,331 additions and 1,977 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -69,6 +69,7 @@
   },
   "dependencies": {
     "@gravity-ui/components": "^3.6.0",
+    "@gravity-ui/page-constructor": "^5.22.0",
     "@gravity-ui/icons": "^2.5.0",
     "@gravity-ui/uikit": "^6.2.0",
     "@popperjs/core": "^2.11.2",
@@ -81,6 +82,7 @@
     "react-hotkeys-hook": "^3.3.1",
     "react-i18next": "11.15.6",
     "react-popper": "^2.2.5",
+    "react-transition-group": "^4.4.5",
     "scroll-into-view-if-needed": "2.2.29",
     "url": "^0.11.1"
   },
@@ -96,6 +98,7 @@
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@types/react-gtm-module": "^2.0.3",
+    "@types/react-transition-group": "^4.4.10",
     "autoprefixer": "^10.4.15",
     "esbuild": "^0.19.2",
     "esbuild-sass-plugin": "^2.13.0",

diff --git a/src/components/BookmarkButton/BookmarkButton.scss b/src/components/BookmarkButton/BookmarkButton.scss
@@ -1,6 +1,6 @@
 .dc-bookmark-button {
     vertical-align: middle;
-    margin: 0 4px 4px;
+    margin: 0 0 4px 12px;
 
     &:hover::before {
         background-color: transparent;

diff --git a/src/components/Control/Control.tsx b/src/components/Control/Control.tsx
@@ -35,6 +35,7 @@ export interface ControlProps {
 const ICONS_SIZES = {
     [ControlSizes.M]: 16,
     [ControlSizes.L]: 20,
+    [ControlSizes.XL]: 20,
 };
 
 const Control = forwardRef((props: ControlProps, ref) => {

diff --git a/src/components/Controls/single-controls/LangControl/LangControl.tsx b/src/components/Controls/single-controls/LangControl/LangControl.tsx
@@ -4,6 +4,7 @@ import {List, Popover} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import allLangs from 'langs';
 
+import {DEFAULT_LANGS, LEGACY_LANG_ITEMS} from '../../../../constants';
 import {usePopupState, useTranslation} from '../../../../hooks';
 import {Lang} from '../../../../models';
 import {getPopupPosition} from '../../../../utils';
@@ -12,13 +13,6 @@ import {ControlsLayoutContext} from '../../ControlsLayout';
 
 import './LangControl.scss';
 
-const DEFAULT_LANGS = ['en', 'ru', 'he'];
-const LEGACY_LANG_ITEMS = [
-    {value: Lang.En, text: 'English'},
-    {value: Lang.Ru, text: 'Русский'},
-    {value: Lang.He, text: 'Hebrew'},
-];
-
 const b = block('dc-lang-control');
 
 interface ControlProps {
@@ -50,7 +44,7 @@ const LangControl = (props: ControlProps) => {
 
                 return langData
                     ? {
-                          text: langData.name,
+                          text: langData.local,
                           value: langData['1'],
                       }
                     : undefined;

diff --git a/src/components/DocLayout/DocLayout.scss b/src/components/DocLayout/DocLayout.scss
@@ -84,18 +84,63 @@
     @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
         flex-direction: column-reverse;
 
+        &__center + &__right:has(> .dc-subnavigation_hidden) {
+            margin-top: calc(0px - var(--dc-subnavigation-height, #{$subNavigationHeight}));
+        }
+
         &__right {
-            display: none;
+            position: sticky;
+            top: calc(var(--dc-header-height, #{$headerHeight}) - 1px);
+            left: 0;
+            z-index: 118;
+
+            height: fit-content;
+            width: 100%;
+            padding: 0;
         }
 
         &__left {
-            width: auto;
+            position: fixed;
+            top: calc(
+                var(--dc-header-height, #{$headerHeight}) +
+                    var(--dc-subnavigation-height, #{$subNavigationHeight}) + 1px
+            );
+            left: calc(0px - 105vw);
+            z-index: 119;
+
+            box-sizing: border-box;
+            max-height: calc(
+                100vh - var(--dc-header-height, #{$headerHeight}) - var(
+                        --dc-subnavigation-height,
+                        #{$subNavigationHeight}
+                    ) + 1px
+            );
+            height: 100%;
+            width: 100vw;
+
+            padding: 0;
+
+            background-color: var(--g-color-base-background, #fff);
+            border-right: 1px solid var(--g-color-line-generic, #0000001a);
+
+            transition: left 300ms 0ms;
+
+            &_visible {
+                left: 0;
+
+                body:has(&) {
+                    overflow-y: hidden;
+                }
+            }
         }
 
         &__toc {
             position: static;
-            width: auto;
-            height: auto;
+            width: 100%;
+            height: 100%;
+            padding: 0;
+
+            @include text-size(body-2);
 
             .dc-toc {
                 /* stylelint-disable-next-line declaration-no-important */

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

diff --git a/src/components/DocPage/DocPage.scss b/src/components/DocPage/DocPage.scss
@@ -27,6 +27,20 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
 
         @include text-size(body-1);
 
+        @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+            position: absolute;
+            top: 0;
+            z-index: 117;
+
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+
+            box-sizing: border-box;
+            width: 100%;
+            padding: 0;
+        }
+
         @media screen and (min-width: 1280px) {
             & {
                 width: 200px;
@@ -40,7 +54,7 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
         display: flex;
         flex-direction: column;
         min-height: calc(
-            100vh - var(--dc-header-height, #{$headerHeight}) - var(--dc-subheader-height)
+            100vh - var(--dc-header-height, #{$headerHeight}) - var(--dc-subnavigation-height)
         );
     }
 
@@ -79,6 +93,10 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
             }
         }
 
+        @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
+            display: none;
+        }
+
         @media (min-width: map-get($screenBreakpoints, 'md')) {
             &_vertical {
                 top: calc(6px + var(--dc-header-height, #{$headerHeight}));
@@ -129,14 +147,15 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
     }
 
     &__breadcrumbs {
-        height: 40px;
         display: flex;
         align-items: center;
+
+        height: 40px;
         padding: 0 36px;
     }
 
     &__feedback {
-        margin-top: 84px;
+        margin-top: 20px;
     }
 
     &__edit-button {
@@ -145,14 +164,38 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
     }
 
     &__title {
-        margin-bottom: 12px;
+        margin-top: 20px;
+
+        text-wrap: balance;
 
         @include text-size(display-2);
+
+        @media (min-width: map-get($screenBreakpoints, 'md')) {
+            margin-top: 0px;
+            margin-bottom: 12px;
+
+            text-wrap: unset;
+        }
+    }
+
+    &__share-button {
+        vertical-align: middle;
+        margin-inline: 12px 4px;
+        margin-bottom: 4px;
+
+        &:hover::before {
+            background-color: transparent;
+        }
+
+        // ShareButton in title is currently only available on mobile devices.
+        @media (min-width: map-get($screenBreakpoints, 'md')) {
+            display: none;
+        }
     }
 
     &__content {
         flex: 1;
-        margin-bottom: 50px;
+        margin-bottom: 20px;
     }
 
     &__content-mini-toc {
@@ -222,15 +265,23 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
 
     @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
         &__main {
+            margin-top: var(--dc-subnavigation-height, $subNavigationHeight);
             padding: 0 20px;
+
+            body:has(.dc-subnavigation_hidden) & {
+                margin-top: 0;
+                min-height: calc(100vh - var(--dc-header-height, 0px));
+            }
         }
 
         &__breadcrumbs {
+            display: none;
+
             padding: 0 20px;
         }
 
         &__content-mini-toc {
-            display: block;
+            display: none;
         }
 
         &__toc-nav-panel {
@@ -327,7 +378,7 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
     }
 
     & > p {
-        margin: 0 0 10px 0;
+        margin: 0 0 10px;
 
         &:first-child {
             &::before {
@@ -348,10 +399,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 {
@@ -365,10 +416,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 {