From 443edb4c98ba541a7942b117a3f2865db36b1f43 Mon Sep 17 00:00:00 2001
From: Taly <vitalik7tv@yandex.ru>
Date: Thu, 9 Jun 2022 14:12:20 +0300
Subject: [PATCH] update view

---
 src/backend/views/pages/page.twig                |  2 +-
 src/frontend/js/modules/table-of-content.js      |  8 ++++++--
 .../styles/components/table-of-content.pcss      | 16 +++++++++-------
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/backend/views/pages/page.twig b/src/backend/views/pages/page.twig
index 627e945..09f850d 100644
--- a/src/backend/views/pages/page.twig
+++ b/src/backend/views/pages/page.twig
@@ -3,7 +3,7 @@
 {% block body %}
 
   {# Remove after testing #}
-  <div class="page-intersection-field"></div>
+{#  <div class="page-intersection-field"></div>#}
 
   <article class="page" data-module="page">
     <header class="page__header">
diff --git a/src/frontend/js/modules/table-of-content.js b/src/frontend/js/modules/table-of-content.js
index e4a4bfc..2d839db 100644
--- a/src/frontend/js/modules/table-of-content.js
+++ b/src/frontend/js/modules/table-of-content.js
@@ -107,8 +107,12 @@ export default class TableOfContent {
         const targetLink = target.querySelector('a').getAttribute('href');
 
         // @todo remove after testing
-        document.querySelector('.page-intersection-field').style.top = `${entry.rootBounds.top}px`;
-        document.querySelector('.page-intersection-field').style.height = `${entry.rootBounds.height}px`;
+        try {
+          const pageIntersectionField = document.querySelector('.page-intersection-field');
+
+          pageIntersectionField.style.top = `${entry.rootBounds.top}px`;
+          pageIntersectionField.style.height = `${entry.rootBounds.height}px`;
+        } catch (e) {}
 
         /**
          * Intersection state of block
diff --git a/src/frontend/styles/components/table-of-content.pcss b/src/frontend/styles/components/table-of-content.pcss
index dfa9678..dc0cd70 100644
--- a/src/frontend/styles/components/table-of-content.pcss
+++ b/src/frontend/styles/components/table-of-content.pcss
@@ -32,14 +32,8 @@
     gap: 6px;
 
     &-item {
-      padding: 4px 8px;
-      font-size: 14px;
       border-radius: 8px;
 
-      letter-spacing: -0.01em;
-      font-size: 14px;
-      line-height: 150%;
-
       &:hover {
         background-color: #F3F6F8;
         cursor: pointer;
@@ -53,6 +47,14 @@
       &--h4 { margin-left: 12px; }
       &--h5 { margin-left: 18px; }
       &--h6 { margin-left: 24px; }
+
+      & > a {
+        margin: 4px 8px;
+        display: block;
+        font-size: 14px;
+        letter-spacing: -0.01em;
+        line-height: 150%;
+      }
     }
   }
 }
@@ -64,7 +66,7 @@
 
 
 .page-intersection-field {
-  //background-color: rgba(255,0,0,.1);
+  background-color: rgba(255,0,0,.1);
   position: fixed;
   left: 0;
   width: 100%;