Merge pull request #8833 from weseek/imprv/145476-146792-use-hashmark-for-link-icon

imprv: Styling icon on the side of header

apps/app/src/components/ReactMarkdownComponents/Header.module.scss

@@ -3,18 +3,32 @@
     text-decoration: none;
   }
 
-  .revision-head-link,
-  .revision-head-edit-button {
+  .revision-head-link {
+    left: -1em;
+    width: 1em;
+    user-select: none;
+    opacity: 0;
+  }
+  .revision-head-edit-button{
     margin-left: 0.5em;
-    font-size: 0.6em;
+    font-size: 16px;
     user-select: none;
     opacity: 0;
+    .material-symbols-outlined{
+      vertical-align: middle;
+    }
   }
 }
 
 .revision-head:hover :global {
   .revision-head-link, .revision-head-edit-button {
-    opacity: 1 !important;
+    opacity: 0.5;
+  }
+  .revision-head-link:hover {
+    opacity: 1;
+  }
+  .revision-head-edit-button:hover {
+    opacity: 1;
   }
 }
 

apps/app/src/components/ReactMarkdownComponents/Header.tsx

@@ -16,6 +16,7 @@ import styles from './Header.module.scss';
 
 
 const logger = loggerFactory('growi:components:Header');
+const moduleClass = styles['revision-head'] ?? '';
 
 declare global {
   // eslint-disable-next-line vars-on-top, no-var
@@ -113,14 +114,18 @@ export const Header = (props: HeaderProps): JSX.Element => {
   const showEditButton = !isGuestUser && !isReadOnlyUser && !isSharedUser && shareLinkId == null;
 
   return (
-    <CustomTag id={id} className={`${styles['revision-head']} ${isActive ? styles.blink : ''}`}>
-      {children}
-      <NextLink href={`#${id}`} className="revision-head-link">
-        <span className="material-symbols-outlined">link</span>
-      </NextLink>
-      {showEditButton && (
-        <EditLink line={node.position?.start.line} />
-      )}
-    </CustomTag>
+    <>
+      <CustomTag id={id} className={`position-relative ${moduleClass} ${isActive ? styles.blink : ''} `}>
+        <NextLink href={`#${id}`} className="d-none d-md-inline revision-head-link position-absolute">
+          #
+        </NextLink>
+
+        {children}
+
+        { showEditButton && (
+          <EditLink line={node.position?.start.line} />
+        ) }
+      </CustomTag>
+    </>
   );
 };

apps/app/src/styles/_layout.scss

@@ -65,6 +65,18 @@ body {
       --bs-gutter-x: 3rem;
     }
   }
+
+  // set to double value to allow space for .revision-head-link
+  @include bs.media-breakpoint-up(xl) {
+    &,
+    .container,
+    .container-fluid,
+    .container-xxl,
+    .container-xl,
+    .container-lg {
+      padding-left: calc(var(--bs-gutter-x) * 1);
+    }
+  }
 }
 
 // printable style

apps/app/src/styles/organisms/_wiki.scss

@@ -13,79 +13,104 @@
 
   font-size: 16px;
 
+  // @extend .text-break;
+  // https://github.com/twbs/bootstrap/blob/v4.6.1/scss/utilities/_text.scss#L65-L68
+  word-break: break-word !important; // Deprecated, but avoids issues with flex containers
+  word-wrap: break-word !important; // Used instead of `overflow-wrap` for IE & Edge Legacy
+
   a {
     @extend .link-offset-2;
 
     text-decoration-line: underline;
   }
 
-  // @extend .text-break;
-  // https://github.com/twbs/bootstrap/blob/v4.6.1/scss/utilities/_text.scss#L65-L68
-  word-break: break-word !important; // Deprecated, but avoids issues with flex containers
-  word-wrap: break-word !important; // Used instead of `overflow-wrap` for IE & Edge Legacy
-
   h1,
   h2,
   h3,
   h4,
   h5,
-  h6 {
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
     margin-top: 1.6em;
     margin-bottom: 0.8em;
 
-    &:first-child {
-      margin-top: 0;
-    }
-
     scroll-margin-top: var.$grw-scroll-margin-top-in-view;
   }
 
-  /* stylelint-disable no-descending-specificity */
-  h1 {
+  h1, .h1 {
     padding: 0.3em 0;
     margin-top: 2em;
     font-size: 1.9em;
     line-height: 1.1em;
+  }
+
+  h1 {
     border-bottom: 2px solid var(--bs-border-color);
   }
 
-  h2 {
+  h2, .h2 {
     padding-bottom: 0.3em;
     font-size: 1.6em;
     font-weight: bold;
     line-height: 1.225;
+  }
+  h2 {
     border-bottom: 1px solid var(--bs-border-color);
   }
 
-  h3 {
+  h3, .h3 {
     font-size: 1.4em;
     font-weight: bold;
   }
 
-  h4 {
+  h4, .h4 {
     font-size: 1.35em;
     font-weight: normal;
-
+  }
+  h4 {
     // style
     @include add-left-border(6px);
   }
 
-  h5 {
+  h5, .h5 {
     font-size: 1.25em;
     font-weight: normal;
-
+  }
+  h5 {
     // style
     @include add-left-border(4px);
   }
 
-  h6 {
+  h6, .h6 {
     font-size: 1.2em;
     font-weight: normal;
-
+  }
+  h6 {
     // style
     @include add-left-border(2px);
   }
-  /* stylelint-enable no-descending-specificity */
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
+    &:first-child {
+      margin-top: 0;
+    }
+  }
 
   p {
     margin: 15px 0;
@@ -207,10 +232,6 @@
     h6 {
       margin-top: 1.6em * $ratio;
       margin-bottom: 0.8em * $ratio;
-
-      &:first-child {
-        margin-top: 15px;
-      }
     }
 
     /* stylelint-disable no-descending-specificity */
@@ -232,6 +253,17 @@
     }
     /* stylelint-enable no-descending-specificity */
 
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      &:first-child {
+        margin-top: 15px;
+      }
+    }
+
     blockquote {
       font-size: 0.9em * $ratio;
     }

packages/ui/src/utils/browser-utils.ts

@@ -1,4 +1,4 @@
-import { Breakpoint } from '../interfaces/breakpoints';
+import type { Breakpoint } from '../interfaces/breakpoints';
 
 const EVENT_TYPE_CHANGE = 'change';
 

packages/ui/src/utils/use-rect.ts

@@ -1,7 +1,8 @@
 // based on https://gist.github.com/morajabi/523d7a642d8c0a2f71fcfa0d8b3d2846?permalink_comment_id=4688158#gistcomment-4688158
 
+import type { RefObject } from 'react';
 import {
-  useState, useEffect, RefObject, useCallback,
+  useState, useEffect, useCallback,
 } from 'react';
 
 type MutableRefObject<T> = {