From c0fdb9b132dc933aad69e6217033fad48e45a5af Mon Sep 17 00:00:00 2001 From: Chaitanya Date: Fri, 14 Aug 2020 06:50:48 +0000 Subject: [PATCH 1/3] Add extension banner to the hompage --- src/components/header-bar.css | 6 +++++ src/components/home.css | 45 ++++++++++++++++++++++++++++++++++- src/components/home.js | 26 +++++++++++++++++++- src/hooks/ui-hooks.js | 23 ++++++++++++++++++ 4 files changed, 98 insertions(+), 2 deletions(-) diff --git a/src/components/header-bar.css b/src/components/header-bar.css index eba291f..40a9a3e 100644 --- a/src/components/header-bar.css +++ b/src/components/header-bar.css @@ -43,6 +43,12 @@ border-top-left-radius: var(--xsgrd); border-bottom-left-radius: var(--xsgrd); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); + @media (--narrow-screen) { + bottom: calc(var(--xlgrd) + 50px); + } + @media (--mobile) { + bottom: var(--xlgrd); + } & :any-link { color: white; text-decoration: none; diff --git a/src/components/home.css b/src/components/home.css index 3d6d696..bd4b3a7 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,47 @@ 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; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + } } diff --git a/src/components/home.js b/src/components/home.js index 57560c4..d971efd 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] = useDisplayExtensionBanner(); const [isWelcomeModalOpen, setIsWelcomeModalOpen] = useState(true); const [newPreprints, setNewPreprints] = useNewPreprints(); @@ -323,6 +328,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..f581dcc 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,23 @@ export function usePrevious(value) { // Return previous value (happens before update in useEffect above) return ref.current; } + +export function useDisplayExtensionBanner() { + const [displayExtensionBanner, setDisplayExtensionBanner] = useState(false); + + useEffect(() => { + if(document.readyState === 'interactive' || document.readyState === 'complete'){ + setTimeout(() => { + const shouldDisplayExtensionBanner = localStorage.getItem('displayExtensionBanner') !== 'false' && !document.getElementById(CSS_SCOPE_ID); + setDisplayExtensionBanner(shouldDisplayExtensionBanner); + },500) + } + }, []); + + const localSet = useCallback(() => { + localStorage.setItem('displayExtensionBanner', 'false'); + setDisplayExtensionBanner(false); + }, []); + + return [displayExtensionBanner, localSet]; +} \ No newline at end of file From c39de50dc930883f46e22911a68ff6808fd34bb8 Mon Sep 17 00:00:00 2001 From: Chaitanya Date: Fri, 14 Aug 2020 15:40:52 +0000 Subject: [PATCH 2/3] Fix first time visit modal issue --- src/components/home.js | 3 ++- src/hooks/ui-hooks.js | 14 +++++++++----- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/home.js b/src/components/home.js index d971efd..1821c61 100644 --- a/src/components/home.js +++ b/src/components/home.js @@ -42,7 +42,7 @@ export default function Home() { const [showLeftPanel, setShowLeftPanel] = useState(!isMobile); const [loginModalOpenNext, setLoginModalOpenNext] = useState(null); const isNewVisitor = useIsNewVisitor(); - const [displayExtensionBanner, closeExtensionBanner] = useDisplayExtensionBanner(); + const [displayExtensionBanner, closeExtensionBanner, checkForExtension] = useDisplayExtensionBanner(); const [isWelcomeModalOpen, setIsWelcomeModalOpen] = useState(true); const [newPreprints, setNewPreprints] = useNewPreprints(); @@ -120,6 +120,7 @@ export default function Home() { { setIsWelcomeModalOpen(false); + checkForExtension(); }} /> )} diff --git a/src/hooks/ui-hooks.js b/src/hooks/ui-hooks.js index f581dcc..98ad359 100644 --- a/src/hooks/ui-hooks.js +++ b/src/hooks/ui-hooks.js @@ -163,12 +163,16 @@ export function usePrevious(value) { 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'){ - setTimeout(() => { - const shouldDisplayExtensionBanner = localStorage.getItem('displayExtensionBanner') !== 'false' && !document.getElementById(CSS_SCOPE_ID); - setDisplayExtensionBanner(shouldDisplayExtensionBanner); - },500) + checkForExtension(); } }, []); @@ -177,5 +181,5 @@ export function useDisplayExtensionBanner() { setDisplayExtensionBanner(false); }, []); - return [displayExtensionBanner, localSet]; + return [displayExtensionBanner, localSet, checkForExtension]; } \ No newline at end of file From fe820dd21e01b7829331ea9b7e91044e626cb588 Mon Sep 17 00:00:00 2001 From: Chaitanya Date: Wed, 26 Aug 2020 15:06:00 +0000 Subject: [PATCH 3/3] Removed code that removes underline for link --- src/components/home.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/home.css b/src/components/home.css index bd4b3a7..fc9a3e1 100644 --- a/src/components/home.css +++ b/src/components/home.css @@ -140,10 +140,6 @@ } & :any-link { color: white; - text-decoration: none; - &:hover { - text-decoration: underline; - } } } }