Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add next/previous incident buttons in cite header #2689

Merged
merged 12 commits into from
Apr 30, 2024
Merged

Add next/previous incident buttons in cite header #2689

Changes from 2 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c76e580
Add next/previous incident buttons in cite header
lmcnulty Mar 13, 2024
d6e7711
Stop from appearing on first and last pages
lmcnulty Mar 18, 2024
437bc32
wip
lmcnulty Mar 19, 2024
156c1c7
Uncomment
lmcnulty Apr 1, 2024
7c0d311
Merge branch 'staging' of https://github.com/responsible-ai-collabora…
lmcnulty Apr 1, 2024
d95088a
Test that buttons appear only when applicable
lmcnulty Apr 2, 2024
2993e79
Merge
lmcnulty Apr 23, 2024
38ab3b1
Don't change sponsors
lmcnulty Apr 23, 2024
845a934
wip
lmcnulty Apr 23, 2024
35f8373
Remove sponsors
lmcnulty Apr 23, 2024
d15a9b1
Remove sponsors
lmcnulty Apr 23, 2024
3759062
Show in grey instead of hiding when not applicable
lmcnulty Apr 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 62 additions & 28 deletions site/gatsby-site/src/templates/citeTemplate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,12 @@ import { SUBSCRIPTION_TYPE } from 'utils/subscriptions';
import VariantList from 'components/variants/VariantList';
import Tools from 'components/cite/Tools';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';
import {
faCircleArrowLeft,
faCircleArrowRight,
faArrowLeft,
faArrowRight,
} from '@fortawesome/free-solid-svg-icons';
import ClassificationsEditor from 'components/taxa/ClassificationsEditor';
import ClassificationsDisplay from 'components/taxa/ClassificationsDisplay';

Expand Down Expand Up @@ -176,11 +181,34 @@ function CiteTemplate({
</div>
)}
{!readOnly && (
<SocialShareButtons
metaTitle={metaTitle}
path={locationPathName}
page="cite"
></SocialShareButtons>
<>
<SocialShareButtons
metaTitle={metaTitle}
path={locationPathName}
page="cite"
></SocialShareButtons>

<div className="ml-4 text-lg">
{prevIncident && (
<a
title={t('Previous Incident')}
className="text-black hover:text-primary-blue h-[50px] leading-[50px]"
href={localizePath({ path: `/cite/${prevIncident}` })}
>
<FontAwesomeIcon icon={faCircleArrowLeft} className="mr-2" />
</a>
)}
{nextIncident && (
<a
title={t('Next Incident')}
className="text-black hover:text-primary-blue h-[50px] leading-[50px]"
href={localizePath({ path: `/cite/${nextIncident}` })}
>
<FontAwesomeIcon icon={faCircleArrowRight} className="mr-2" />
</a>
)}
</div>
</>
)}
</div>
</div>
Expand Down Expand Up @@ -348,28 +376,7 @@ function CiteTemplate({
/>
)}

{!readOnly && (
<div className="flex justify-between">
<Button
color={'gray'}
href={localizePath({ path: `/cite/${prevIncident}` })}
disabled={!prevIncident}
className="hover:no-underline"
>
<FontAwesomeIcon icon={faArrowLeft} className="mr-2" />
<Trans>Previous Incident</Trans>
</Button>
<Button
color={'gray'}
href={localizePath({ path: `/cite/${nextIncident}` })}
disabled={!nextIncident}
className="hover:no-underline"
>
<Trans>Next Incident</Trans>
<FontAwesomeIcon icon={faArrowRight} className="ml-2" />
</Button>
</div>
)}
{!readOnly && <NextPreviousButtons {...{ prevIncident, nextIncident }} />}
</Container>
</div>
{!readOnly && (
Expand All @@ -389,4 +396,31 @@ function CiteTemplate({
);
}

const NextPreviousButtons = ({ prevIncident, nextIncident }) => {
const localizePath = useLocalizePath();

return (
<div className="flex justify-between">
<Button
color={'gray'}
href={localizePath({ path: `/cite/${prevIncident}` })}
disabled={!prevIncident}
className="hover:no-underline"
>
<FontAwesomeIcon icon={faArrowLeft} className="mr-2" />
<Trans>Previous Incident</Trans>
</Button>
<Button
color={'gray'}
href={localizePath({ path: `/cite/${nextIncident}` })}
disabled={!nextIncident}
className="hover:no-underline"
>
<Trans>Next Incident</Trans>
<FontAwesomeIcon icon={faArrowRight} className="ml-2" />
</Button>
</div>
);
};

export default CiteTemplate;