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

[BHBC-965] Project Page UI Clean-up / Refactor Markup #212

Merged
merged 3 commits into from
Apr 8, 2021
Merged

[BHBC-965] Project Page UI Clean-up / Refactor Markup #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d0d5f4a
[BHBC-965] Project Page UI Clean-up / Refactor Markup
jeznorth Apr 7, 2021
0a141e9
Trigger Build
jeznorth Apr 8, 2021
c2ee470
Update app/src/features/projects/view/ProjectPage.tsx
sdevalapurkar Apr 8, 2021
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
70 changes: 34 additions & 36 deletions app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, CircularProgress, ThemeProvider } from '@material-ui/core';
import { CircularProgress, ThemeProvider } from '@material-ui/core';
// Strange looking `type {}` import below, see: https://github.com/microsoft/TypeScript/issues/36812
import type {} from '@material-ui/lab/themeAugmentation'; // this allows `@material-ui/lab` components to be themed
import { KeycloakProvider } from '@react-keycloak/web';
Expand All @@ -13,43 +13,41 @@ import getKeycloakEventHandler from 'utils/KeycloakEventHandler';

const App: React.FC = () => {
return (
<Box height="100vh" width="100vw" display="flex" overflow="hidden">
<ThemeProvider theme={appTheme}>
<ConfigContextProvider>
<ConfigContext.Consumer>
{(config) => {
if (!config) {
return <CircularProgress />;
}
<ThemeProvider theme={appTheme}>
<ConfigContextProvider>
<ConfigContext.Consumer>
{(config) => {
if (!config) {
return <CircularProgress />;
}

//@ts-ignore
const keycloak: KeycloakInstance = new Keycloak(config.KEYCLOAK_CONFIG);
//@ts-ignore
const keycloak: KeycloakInstance = new Keycloak(config.KEYCLOAK_CONFIG);

return (
<KeycloakProvider
keycloak={keycloak}
initConfig={{ onLoad: 'login-required', checkLoginIframe: false }}
LoadingComponent={<CircularProgress />}
onEvent={getKeycloakEventHandler()}>
<AuthStateContextProvider>
<BrowserRouter>
<AuthStateContext.Consumer>
{(context: IAuthState) => {
if (!context.ready) {
return <CircularProgress />;
}
return <AppRouter />;
}}
</AuthStateContext.Consumer>
</BrowserRouter>
</AuthStateContextProvider>
</KeycloakProvider>
);
}}
</ConfigContext.Consumer>
</ConfigContextProvider>
</ThemeProvider>
</Box>
return (
<KeycloakProvider
keycloak={keycloak}
initConfig={{ onLoad: 'login-required', checkLoginIframe: false }}
LoadingComponent={<CircularProgress />}
onEvent={getKeycloakEventHandler()}>
<AuthStateContextProvider>
<BrowserRouter>
<AuthStateContext.Consumer>
{(context: IAuthState) => {
if (!context.ready) {
return <CircularProgress />;
}
return <AppRouter />;
}}
</AuthStateContext.Consumer>
</BrowserRouter>
</AuthStateContextProvider>
</KeycloakProvider>
);
}}
</ConfigContext.Consumer>
</ConfigContextProvider>
</ThemeProvider>
);
};

Expand Down
42 changes: 19 additions & 23 deletions app/src/components/fields/ReadMoreField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,7 @@ export const ReadMoreField: React.FC<IReadMoreFieldProps> = (props) => {

const renderParagraph = (paragraph: string) => {
if (paragraph) {
return (
<Typography style={{ wordBreak: 'break-all' }} key={uuidv4()}>
{paragraph}
</Typography>
);
return <Typography key={uuidv4()}>{paragraph}</Typography>;
}
return <p key={uuidv4()}></p>;
};
Expand All @@ -50,30 +46,30 @@ export const ReadMoreField: React.FC<IReadMoreFieldProps> = (props) => {
<Box>
{isTruncatedText && (
<>
<Box>
{text
.slice(0, determineTruncatingLength())
.split('\n')
.map((paragraph: string) => {
return renderParagraph(paragraph);
})}
{text
.slice(0, determineTruncatingLength())
.split('\n')
.map((paragraph: string) => {
return renderParagraph(paragraph);
})}
<Box mt={3}>
<Button size="small" variant="outlined" color="primary" onClick={() => setIsTruncatedText(false)}>
Read More
</Button>
</Box>
<Button color="primary" onClick={() => setIsTruncatedText(false)}>
Read More
</Button>
</>
)}
{!isTruncatedText && (
<>
<Box>
{text?.split('\n').map((paragraph: string) => {
return renderParagraph(paragraph);
})}
</Box>
{text?.split('\n').map((paragraph: string) => {
return renderParagraph(paragraph);
})}
{text?.length > maxCharLength && (
<Button color="primary" onClick={() => setIsTruncatedText(true)}>
Read Less
</Button>
<Box mt={3}>
<Button size="small" variant="outlined" color="primary" onClick={() => setIsTruncatedText(true)}>
Read Less
</Button>
</Box>
)}
</>
)}
Expand Down
4 changes: 2 additions & 2 deletions app/src/components/layout/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import headerImageSmall from 'assets/images/gov-bc-logo-vert.png';

const Header: React.FC = () => {
return (
<AppBar position="static" style={{ boxShadow: 'none' }}>
<Toolbar className={'app-header'}>
<AppBar position="sticky" style={{ boxShadow: 'none' }}>
<Toolbar className={'headerToolbar'}>
<Link to="/projects" className={'brand'} aria-label="Go to BioHub Home">
<picture>
<source srcSet={headerImageLarge} media="(min-width: 1200px)"></source>
Expand Down
4 changes: 2 additions & 2 deletions app/src/components/layout/__snapshots__/Header.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
exports[`NotFoundPage renders correctly 1`] = `
<DocumentFragment>
<header
class="MuiPaper-root MuiAppBar-root MuiAppBar-positionStatic MuiAppBar-colorPrimary MuiPaper-elevation4"
class="MuiPaper-root MuiAppBar-root MuiAppBar-positionSticky MuiAppBar-colorPrimary MuiPaper-elevation4"
style="box-shadow: none;"
>
<div
class="MuiToolbar-root MuiToolbar-regular app-header MuiToolbar-gutters"
class="MuiToolbar-root MuiToolbar-regular headerToolbar MuiToolbar-gutters"
>
<a
aria-label="Go to BioHub Home"
Expand Down
4 changes: 2 additions & 2 deletions app/src/constants/i18n.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ export const EditLocationBoundaryI18N = {
};

export const EditIUCNI18N = {
editTitle: 'Edit IUCN Classification',
editErrorTitle: 'Error Editing IUCN Classification',
editTitle: 'Edit IUCN Classifications',
editErrorTitle: 'Error Editing IUCN Classifications',
editErrorText:
'An error has occurred while attempting to edit your IUCN classification, please try again. If the error persists, please contact your system administrator.'
};
Expand Down
95 changes: 34 additions & 61 deletions app/src/features/projects/view/ProjectDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Paper, Typography } from '@material-ui/core';
import { Box, Divider, Paper, Typography } from '@material-ui/core';
import FundingSource from 'features/projects/view/components/FundingSource';
import GeneralInformation from 'features/projects/view/components/GeneralInformation';
import IUCNClassification from 'features/projects/view/components/IUCNClassification';
Expand Down Expand Up @@ -27,69 +27,42 @@ const ProjectDetails: React.FC<IProjectDetailsProps> = (props) => {

return (
<>
<Box mb={4}>
<Box mb={6}>
<Typography variant="h2">Project Details</Typography>
</Box>
<Box mb={3}>
<Paper>
<ProjectObjectives projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
</Paper>
</Box>

<Box mb={4}>
<Paper>
<Box m={3}>
<GeneralInformation projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
</Box>
</Paper>
</Box>

<Box mb={4}>
<Paper>
<Box m={3}>
<ProjectCoordinator projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
</Box>
</Paper>
</Box>

<Box mb={4}>
<Paper>
<Box m={3}>
<LocationBoundary projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
</Box>
</Paper>
</Box>

<Box mb={4}>
<Paper>
<Box m={3}>
<Species projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
</Box>
</Paper>
</Box>

<Box mb={4}>
<Paper>
<Box m={3}>
<IUCNClassification projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
</Box>
</Paper>
</Box>

<Box mb={4}>
<Paper>
<Box m={3}>
<FundingSource projectForViewData={projectForViewData} />
</Box>
</Paper>
</Box>

<Box mb={4}>
<Paper>
<Box m={3}>
<Partnerships projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
</Box>
</Paper>
<Box component={Paper} p={4}>
<Box component="section" mb={5}>
<ProjectObjectives projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
</Box>
<Divider />
<Box component="section" mt={4} mb={5}>
<GeneralInformation projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
</Box>
<Divider />
<Box component="section" mt={4} mb={5}>
<ProjectCoordinator projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
</Box>
<Divider />
<Box component="section" mt={4} mb={5}>
<LocationBoundary projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
</Box>
<Divider />
<Box component="section" mt={4} mb={5}>
<Species projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
</Box>
<Divider />
<Box component="section" mt={4} mb={5}>
<IUCNClassification projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
</Box>
<Divider />
<Box component="section" mt={4} mb={5}>
<Partnerships projectForViewData={projectForViewData} codes={codes} refresh={props.refresh} />
</Box>
<Divider />
<Box component="section" mt={4}>
<FundingSource projectForViewData={projectForViewData} />
</Box>
</Box>
</>
);
Expand Down
Loading