anchor box for notifications (#1063)

* anchor box for notifications closes #202

* fix lint

* give priority click children pointer events too

* add iframe and simplify css

components/notifications.js

@@ -6,7 +6,6 @@ import ItemJob from './item-job'
 import { NOTIFICATIONS } from '@/fragments/notifications'
 import MoreFooter from './more-footer'
 import Invite from './invite'
-import { ignoreClick } from '@/lib/clicks'
 import { dayMonthYear, timeSince } from '@/lib/time'
 import Link from 'next/link'
 import Check from '@/svgs/check-double-line.svg'
@@ -62,21 +61,23 @@ function NotificationLayout ({ children, nid, href, as, fresh }) {
   if (!href) return <div className={fresh ? styles.fresh : ''}>{children}</div>
   return (
     <div
-      className={
+      className={`position-relative clickToContext ${styles.notificationLayout} ${fresh ? styles.fresh : ''} ${router?.query?.nid === nid ? 'outline-it' : ''}`}
-        `clickToContext ${fresh ? styles.fresh : ''} ${router?.query?.nid === nid ? 'outline-it' : ''}`
-      }
-      onClick={async (e) => {
-        if (ignoreClick(e)) return
-        nid && await router.replace({
-          pathname: router.pathname,
-          query: {
-            ...router.query,
-            nid
-          }
-        }, router.asPath, { ...router.options, shallow: true })
-        router.push(href, as)
-      }}
     >
+      <Link
+        className={styles.linkBox}
+        onClick={async (e) => {
+          e.preventDefault()
+          nid && await router.replace({
+            pathname: router.pathname,
+            query: {
+              ...router.query,
+              nid
+            }
+          }, router.asPath, { ...router.options, shallow: true })
+          router.push(href, as)
+        }}
+        href={typeof href === 'string' ? href : href.query.commentId ? as + '?commentId=' + href.query.commentId : as}
+      />
       {children}
     </div>
   )

components/notifications.module.css

@@ -26,4 +26,31 @@
 
 .subFormGroup > div {
     margin-right: 0 !important;
+}
+
+.linkBox {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.linkBox ~ * {
+    position: relative;
+}
+
+.notificationLayout > * {
+    pointer-events: none;
+}
+
+.notificationLayout :global(.upvoteParent),
+.notificationLayout :global(.pointer),
+.notificationLayout a,
+.notificationLayout form,
+.notificationLayout textarea,
+.notificationLayout button,
+.notificationLayout input,
+.notificationLayout iframe {
+    pointer-events: auto !important;
 }