diff --git a/src/components/home.css b/src/components/home.css index 3d6d696..fc9a3e1 100644 --- a/src/components/home.css +++ b/src/components/home.css @@ -38,7 +38,7 @@ flex: 0 0 var(--middle-column-default-width); width: var(--middle-column-default-width); max-width: calc(100vw - var(--left-panel-min-width)); - + margin-bottom: 60px; position: relative; box-sizing: border-box; @media (--narrow-screen) { @@ -103,4 +103,43 @@ margin: var(--xsgrd); } } + + & .home__extention-banner { + position: fixed; + text-align: center; + font: var(--ui-basic-font); + font-size: medium; + line-height: 1.25em; + background-color: var(--prereview-red); + color: white; + flex: 0 0 var(--middle-column-default-width); + text-shadow: 0px 0px 10px #eb0000; + left: var(--left-panel-min-width); + bottom: 0; + width: var(--middle-column-default-width); + max-width: calc(80vw - var(--left-panel-min-width)); + padding: var(--xsgrd) var(--xlgrd); + margin: var(--mgrd) var(--sgrd) 0; + border-top-left-radius: var(--xsgrd); + border-top-right-radius: var(--xsgrd); + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); + z-index: 1000; + @media (--narrow-screen) { + left: 0; + font-size: inherit; + max-width: calc(100vw - 130px); + } + @media (--mobile) { + display: none; + } + & .home-extension-banner__close-button { + position: absolute; + right: 0; + top: 0; + color: inherit; + } + & :any-link { + color: white; + } + } } diff --git a/src/components/home.js b/src/components/home.js index 57560c4..1821c61 100644 --- a/src/components/home.js +++ b/src/components/home.js @@ -8,7 +8,8 @@ import { usePreprintSearchResults } from '../hooks/api-hooks'; import { useIsNewVisitor, useIsMobile, - useNewPreprints + useNewPreprints, + useDisplayExtensionBanner } from '../hooks/ui-hooks'; import { useUser } from '../contexts/user-context'; import { unprefix, getId } from '../utils/jsonld'; @@ -26,6 +27,9 @@ import { createPreprintQs, apifyPreprintQs } from '../utils/search'; import WelcomeModal from './welcome-modal'; import XLink from './xlink'; import AddButton from './add-button'; +import IconButton from './icon-button'; +import VisuallyHidden from '@reach/visually-hidden'; +import { MdClose } from 'react-icons/md'; import { ORG } from '../constants'; import Banner from './banner'; @@ -38,6 +42,7 @@ export default function Home() { const [showLeftPanel, setShowLeftPanel] = useState(!isMobile); const [loginModalOpenNext, setLoginModalOpenNext] = useState(null); const isNewVisitor = useIsNewVisitor(); + const [displayExtensionBanner, closeExtensionBanner, checkForExtension] = useDisplayExtensionBanner(); const [isWelcomeModalOpen, setIsWelcomeModalOpen] = useState(true); const [newPreprints, setNewPreprints] = useNewPreprints(); @@ -115,6 +120,7 @@ export default function Home() { { setIsWelcomeModalOpen(false); + checkForExtension(); }} /> )} @@ -323,6 +329,25 @@ export default function Home() {
+ { + displayExtensionBanner && (
+ You have not yet installed the Outbreak Science Rapid PREreivew browser extension to enable requesting, adding and/or reading rapid reviews on other websites. Install it  + + here + ! + + Close + + +
) + } ); diff --git a/src/hooks/ui-hooks.js b/src/hooks/ui-hooks.js index 7ce6d4b..98ad359 100644 --- a/src/hooks/ui-hooks.js +++ b/src/hooks/ui-hooks.js @@ -1,4 +1,7 @@ import { useState, useEffect, useCallback, useRef } from 'react'; +import { + CSS_SCOPE_ID +} from '../constants'; import { useStores } from '../contexts/store-context'; /** @@ -156,3 +159,27 @@ export function usePrevious(value) { // Return previous value (happens before update in useEffect above) return ref.current; } + +export function useDisplayExtensionBanner() { + const [displayExtensionBanner, setDisplayExtensionBanner] = useState(false); + + const checkForExtension = () => { + setTimeout(() => { + const shouldDisplayExtensionBanner = localStorage.getItem('displayExtensionBanner') !== 'false' && !document.getElementById(CSS_SCOPE_ID); + setDisplayExtensionBanner(shouldDisplayExtensionBanner); + },500); + } + + useEffect(() => { + if(document.readyState === 'interactive' || document.readyState === 'complete'){ + checkForExtension(); + } + }, []); + + const localSet = useCallback(() => { + localStorage.setItem('displayExtensionBanner', 'false'); + setDisplayExtensionBanner(false); + }, []); + + return [displayExtensionBanner, localSet, checkForExtension]; +} \ No newline at end of file