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.

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

merge: update branch with latest dev #6012

Merged
merged 2 commits into from
Nov 27, 2024
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
feat(datatrakWeb): RN-1469 Mobile reports disabled page (#5996)
* Update ReportsPage.tsx

* Update ReportsPage.tsx

* Update ReportsPage.tsx

* Update packages/datatrak-web/src/views/ReportsPage.tsx

Co-authored-by: Jasper Lai <33956381+jaskfla@users.noreply.github.com>

* Update packages/datatrak-web/src/views/ReportsPage.tsx

Co-authored-by: Jasper Lai <33956381+jaskfla@users.noreply.github.com>

* Update packages/datatrak-web/src/views/ReportsPage.tsx

Co-authored-by: Jasper Lai <33956381+jaskfla@users.noreply.github.com>

* Update ReportsPage.tsx

---------

Co-authored-by: Jasper Lai <33956381+jaskfla@users.noreply.github.com>
Co-authored-by: Andrew <vanbeekandrew@gmail.com>
  • Loading branch information
3 people authored Nov 26, 2024
commit bb45af83de27d031cf03f89384bf3b2f9a9da965
57 changes: 47 additions & 10 deletions packages/datatrak-web/src/views/ReportsPage.tsx
Original file line number Diff line number Diff line change
@@ -5,28 +5,25 @@
import React from 'react';
import styled from 'styled-components';
import { Paper, Typography, Link } from '@material-ui/core';
import { PageContainer, PageTitleBar, ReportsIcon } from '../components';
import { Button, PageContainer, PageTitleBar, ReportsIcon, Modal } from '../components';
import { Reports } from '../features';
import { useIsMobile } from '../utils';
import { useNavigate } from 'react-router-dom';

const Wrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
${({ theme }) => theme.breakpoints.up('sm')} {
padding-top: 1.5rem;
}
padding-block-start: 1.5rem;
`;

const Container = styled(Paper).attrs({
elevation: 0,
})`
width: 100%;
max-width: 38rem;
padding: 1rem;
inline-size: 100%;
max-inline-size: 38rem;
border-radius: 0.625rem;
${({ theme }) => theme.breakpoints.up('sm')} {
padding: 1.81rem 3.12rem;
}
padding: 1.81rem 3.12rem;
`;

const InlineLink = styled(Link)`
@@ -37,7 +34,47 @@ const Text = styled(Typography)`
line-height: 1.56;
`;

const MobileContainer = styled(Paper).attrs({
elevation: 0,
})`
text-align: center;
max-width: 19rem;
padding: 0.5rem 0 0;

h1.MuiTypography-root {
margin-block-end: 1rem;
}
p.MuiTypography-root {
margin-block-end: 1.5rem;
}
a.MuiButtonBase-root {
width: 100%;
}
`;

const MobileTemplate = () => {
const navigate = useNavigate();
const onClose = () => navigate('/');
return (
<Modal open={true} onClose={onClose}>
<MobileContainer>
<Typography variant="h1">Reports not available on mobile</Typography>
<Typography>
The reports feature is only available on desktop. Please visit Tupaia DataTrak on desktop
to proceed.
</Typography>
<Button to="/">Close</Button>
</MobileContainer>
</Modal>
);
};

export const ReportsPage = () => {
const isMobile = useIsMobile();
if (isMobile) {
return <MobileTemplate />;
}

return (
<PageContainer>
<PageTitleBar title="Reports" Icon={ReportsIcon} isTransparent />