re-organize .revision-toc styles

packages/app/src/components/Page/DisplaySwitcher.tsx

@@ -21,8 +21,6 @@ import { Page } from '../Page';
 import TableOfContents from '../TableOfContents';
 import UserInfo from '../User/UserInfo';
 
-import styles from '../TableOfContents.module.scss';
-
 
 const WIKI_HEADER_LINK = 120;
 
@@ -111,9 +109,7 @@ const DisplaySwitcher = (): JSX.Element => {
                   ) }
 
                   <div className="d-none d-lg-block">
-                    <div id="revision-toc" className={`revision-toc ${styles['revision-toc']}`}>
-                      <TableOfContents />
-                    </div>
+                    <TableOfContents />
                     <ContentLinkButtons />
                   </div>
 

packages/app/src/components/TableOfContents.module.scss

@@ -1,3 +1,4 @@
+@use '~/styles/bootstrap/init' as bs;
 
 .revision-toc :global {
   // to get on the Attachment row
@@ -26,3 +27,13 @@
     }
   }
 }
+
+.revision-toc {
+  @media print {
+    float: none;
+    max-width: 100%;
+    margin-bottom: 20px;
+    font-size: 0.9em;
+    border: solid 1px bs.$gray-400;
+  }
+}

packages/app/src/components/TableOfContents.tsx

@@ -11,6 +11,11 @@ import loggerFactory from '~/utils/logger';
 
 import { StickyStretchableScroller } from './StickyStretchableScroller';
 
+
+import styles from './TableOfContents.module.scss';
+
+
+
 // eslint-disable-next-line no-unused-vars
 const logger = loggerFactory('growi:TableOfContents');
 
@@ -53,20 +58,22 @@ const TableOfContents = (): JSX.Element => {
   }, [tocHtml]);
 
   return (
-    <StickyStretchableScroller
-      stickyElemSelector=".grw-side-contents-sticky-container"
-      calcViewHeight={calcViewHeight}
-    >
-      <div
-        id="revision-toc-content"
-        className="revision-toc-content mb-3"
+    <div id="revision-toc" className={`revision-toc ${styles['revision-toc']}`}>
+      <StickyStretchableScroller
+        stickyElemSelector=".grw-side-contents-sticky-container"
+        calcViewHeight={calcViewHeight}
       >
-        {/* parse blank to show toc (https://github.com/weseek/growi/pull/6277) */}
-        <ReactMarkdown {...rendererOptions}>
-          {''}
-        </ReactMarkdown>
-      </div>
-    </StickyStretchableScroller>
+        <div
+          id="revision-toc-content"
+          className="revision-toc-content mb-3"
+        >
+          {/* parse blank to show toc (https://github.com/weseek/growi/pull/6277) */}
+          <ReactMarkdown {...rendererOptions}>
+            {''}
+          </ReactMarkdown>
+        </div>
+      </StickyStretchableScroller>
+    </div>
   );
 
 };

packages/app/src/styles/_layout.scss

@@ -116,14 +116,6 @@ body.not-found-page .grw-container-convertible {
       display: block !important;
     }
 
-    .revision-toc {
-      float: none;
-      max-width: 100%;
-      margin-bottom: 20px;
-      font-size: 0.9em;
-      border: solid 1px bs.$gray-400;
-    }
-
     .meta {
       margin-top: 32px;
       color: bs.$secondary;

packages/app/src/styles/_toc.scss

@@ -1,31 +1,3 @@
-.revision-toc {
-  // to get on the Attachment row
-  z-index: 1;
-  padding: 5px;
-  font-size: 0.9em;
-
-  border-bottom: 1px solid transparent;
-
-  .revision-toc-content {
-    li {
-      margin: 6px;
-    }
-    > ul {
-      padding-left: 0;
-      ul {
-        padding-left: 1em;
-      }
-    }
-
-    // first level of li
-    > ul > li {
-      padding: 5px;
-      margin-right: 4px;
-      margin-left: 17px;
-    }
-  }
-}
-
 .grw-icon-container-recently-created {
   svg {
     width: 14px;