fix(anchors) Use scroll-padding for headings anchoring

diplodoc-platform · Jul 25, 2023 · 6d38fc8 · 6d38fc8
1 parent 2ece8dc
commit 6d38fc8
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 17 deletions.
diff --git a/src/demo/Components/DocPage/page-ru.json b/src/demo/Components/DocPage/page-ru.json
diff --git a/src/demo/reset-storybook.scss b/src/demo/reset-storybook.scss
@@ -10,10 +10,6 @@
     }
 }
 
-body.yc-root {
-    --dc-header-height: 64px;
-}
-
 .yc-root .Header {
     display: flex;
     justify-content: flex-end;

diff --git a/styles/default.scss b/styles/default.scss
@@ -10,7 +10,7 @@ body {
     padding: 0;
     box-sizing: border-box;
 
-    --dc-header-height: 0;
+    --dc-header-height: 64px;
     --dc-subheader-height: 40px;
 
     --dc-error-image-403: url('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=');
@@ -33,6 +33,10 @@ body {
     }
 }
 
+html {
+    scroll-padding-top: var(--dc-header-height);
+}
+
 #root {
     min-height: 100vh;
 }
diff --git a/styles/mixins.scss b/styles/mixins.scss
@@ -12,8 +12,8 @@
 }
 
 @mixin fixAnchorPosition($offset: 0px) {
-    padding-top: calc(var(--dc-header-height, #{$headerHeight}));
-    margin-top: calc(#{$offset} - var(--dc-header-height, #{$headerHeight}));
+    // Works with scroll-padding-top (see /styles/default.css)
+    padding-top: calc(var(--dc-header-height, #{$headerHeight}) - #{$offset});
 }
 
 @mixin reset-link-style() {

diff --git a/styles/yfm.scss b/styles/yfm.scss
@@ -121,14 +121,6 @@
         @include fixAnchorPosition(calc(#{$headerMarginTopMedium} - #{$blockMarginBottomMedium}));
     }
 
-    h1 + h2,
-    h2 + h3,
-    h3 + h4,
-    h4 + h5,
-    h5 + h6 {
-        @include fixAnchorPosition();
-    }
-
     // Use 0px for the top offset of the header if it is the first child element,
     // because it is located after the page title
     h1,
@@ -142,6 +134,28 @@
         }
     }
 
+    h1 + h2,
+    h2 + h3,
+    h3 + h4,
+    h4 + h5,
+    h5 + h6 {
+        padding-top: 0;
+    }
+
+    table {
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            // Непонятно, как нормально переопределить селектор с &:first-child
+            /* stylelint-disable-next-line declaration-no-important */
+            padding-top: 0 !important;
+            margin-bottom: 0;
+        }
+    }
+
     .yfm-page__delimeter {
         height: 4px;
         border-radius: 2px;