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

WIP: Automatically collapse info section on user interaction #309

Draft
wants to merge 2 commits into
base: develop
Choose a base branch
from
Draft

WIP: Automatically collapse info section on user interaction #309

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5979eac
progress with Alex
azheng1991 Feb 18, 2021
e507a21
progress with Jed
azheng1991 Feb 20, 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
2 changes: 1 addition & 1 deletion frontend/.env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
REACT_APP_BASE_API_URL=http://52.204.195.181:8000/api/v1/jobs
REACT_APP_BASE_API_URL=https://jobhopper.aballslab.com/api/v1/jobs
0 frontend/src/ui/LandingBlurb.stories.tsx → .../ui/LandingBlurb/LandingBlurb.stories.tsx
View file
Open in desktop
File renamed without changes.
12 changes: 7 additions & 5 deletions frontend/src/ui/LandingBlurb.tsx → ...tend/src/ui/LandingBlurb/LandingBlurb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { Collapse } from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import React, { useState } from 'react';
import styled from 'styled-components';
import { Section } from './Common';
import { Body, Title } from './Typography';
import { Section } from '../Common';
import { Body, Title } from '../Typography';

const CollapsingSection = styled(Section)`
& p {
Expand All @@ -16,14 +16,16 @@ const CollapseIcon = styled(ExpandMoreIcon)`
vertical-align: middle;
`;

export default function LandingBlurb() {
const [show, setShow] = useState(true);
export default function LandingBlurb({show, onClick}: {show: boolean, onClick: () => {}}) {
return (
<CollapsingSection>
<Title onClick={() => setShow(show => !show)}>
<Title onClick={() => onClick()}>
Occupation Transitions
<CollapseIcon transform={`rotate(${show ? 180 : 0})`} />
</Title>

//if Title text of Occupation Selection container has text, then show first 2 lines of text from Occupation Transitions

<Collapse in={show}>
<Body>
JobHopper is a tool to explore new data on mobility between
Expand Down
60 changes: 60 additions & 0 deletions frontend/src/ui/LandingBlurb/LandingBlurbContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { Collapse } from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import React, { useState } from 'react';
import styled from 'styled-components';
import { Section } from '../Common';
import { Body, Title } from '../Typography';
import { LandingBlurb } from './LandingBlurb';
import { useEffect, useOccupationState } from 'react';

export const LandingBlurbContainer = () => {
const [show, setShow] = useState(true);
const [hasClicked, setHasClicked] = useState(false);
const {selectedOccupation} = useOccupationState();

useEffect(() => {
if (selectedOccupation && show && !hasClicked) {
setShow(false);
}
})

return <LandingBlurb show={show} onClick={() => {
setShow(show => !show);
setHasClicked(true);
}}/>;
},

const CollapsingSection = styled(Section)`
& p {
margin-block: 0;
margin-bottom: 48px;
}
`;

const CollapseIcon = styled(ExpandMoreIcon)`
vertical-align: middle;
`;

export default function LandingBlurb() {
const [show, setShow] = useState(true);
return (
<CollapsingSection>
<Title onClick={() => setShow(show => !show)}>
Occupation Transitions
<CollapseIcon transform={`rotate(${show ? 180 : 0})`} />
</Title>
<Collapse in={show}>
<Body>
JobHopper is a tool to explore new data on mobility between
occupations. This data was calculated by academic researchers from
around 16 million resumes of U.S. workers (which were obtained and
parsed by Burning Glass Technologies). The tool is designed to help
program managers, policy analysts and job coaches explore occupational
transitions that job changers have made in recent years. Understanding
these transitions can support labor market analysis, program and
policy development, and individual job seekers’ aspiration.
</Body>
</Collapse>
</CollapsingSection>
);
}
5 changes: 3 additions & 2 deletions frontend/src/ui/TransitionPage/TransitionPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import React from 'react';
import { LabeledSection } from '../Common';
import Page from '../Page';
import { ResultsContainer } from '../Results';
import LandingBlurb from '../LandingBlurb';
import { LandingBlurbContainer } from '../LandingBlurb';
import { OccupationSelectContainer, StateSelectContainer } from '../Select';
import { createContainerContext } from '../utils';


const { ContainerContext, useContainerContext } = createContainerContext({
OccupationSelectContainer,
StateSelectContainer,
Expand All @@ -20,7 +21,7 @@ const TransitionPage: React.FC = () => {
} = useContainerContext();
return (
<Page>
<LandingBlurb />
<LandingBlurbContainer />
<LabeledSection
title="Enter occupation"
subtitle="Type in an occupation by name or SOC code."
Expand Down