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

completed first task #21

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

completed first task #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
467d38c
completed first task
Urbanmisfit90 Sep 17, 2024
e4508a2
wip
Urbanmisfit90 Sep 18, 2024
109aca7
wip
Urbanmisfit90 Sep 18, 2024
c97ef90
wip
Urbanmisfit90 Sep 18, 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
85 changes: 73 additions & 12 deletions src/components/pages/Landing/RenderLandingPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React from 'react';
// ADD IMPORTS BACK FOR GRAPHS SECTION
// import GrantRatesByOfficeImg from '../../../styles/Images/bar-graph-no-text.png';
// import GrantRatesByNationalityImg from '../../../styles/Images/pie-chart-no-text.png';
// import GrantRatesOverTimeImg from '../../../styles/Images/line-graph-no-text.png';
import GrantRatesByOfficeImg from '../../../styles/Images/bar-graph-no-text.png';
import GrantRatesByNationalityImg from '../../../styles/Images/pie-chart-no-text.png';
import GrantRatesOverTimeImg from '../../../styles/Images/line-graph-no-text.png';
import HrfPhoto from '../../../styles/Images/paper-stack.jpg';
import '../../../styles/RenderLandingPage.less';
import { Button } from 'antd';
import { useHistory } from 'react-router-dom';
// for the purposes of testing PageNav
// import PageNav from '../../common/PageNav';
import PageNav from '../../common/PageNav';

function RenderLandingPage(props) {
const scrollToTop = () => {
Expand All @@ -17,7 +17,7 @@ function RenderLandingPage(props) {
};

const history = useHistory();

<PageNav />;
return (
<div className="main">
<div className="header">
Expand All @@ -26,13 +26,30 @@ function RenderLandingPage(props) {
<h3>
The Asylum Office Grant Rate Tracker provides asylum seekers,
researchers, policymakers, and the public an interactive tool to
explore USCIS data on Asylum Office decisions
explore USCIS data on Asylum Office decisions.
</h3>
</div>
</div>

{/* Graphs Section: Add code here for the graphs section for your first ticket */}
{/* <div className="graphs-section"> */}
<div className="graphs-section">
<div className="graph-item">
<img src={GrantRatesByOfficeImg} alt="Grant Rates by Office" />
<p>Search Grant Rates By Office</p>
</div>
<div className="graph-container">
<img
src={GrantRatesByNationalityImg}
alt="Grant Rates by Nationality"
/>
<p>Search Grant Rates By Nationality</p>
</div>
<div className="graph-container">
<img src={GrantRatesOverTimeImg} alt="Grant Rates Over Time" />
<p>Search Grant Rates Over Time</p>
</div>
</div>

<div className="view-more-data-btn-container">
<Button
type="default"
Expand All @@ -41,6 +58,13 @@ function RenderLandingPage(props) {
>
View the Data
</Button>
<Button
type="default"
style={{ backgroundColor: '#404C4A', color: '#FFFFFF' }}
onClick={() => history.push('/graphs')}
>
Download the Data
</Button>
</div>

<div className="middle-section">
Expand All @@ -55,18 +79,55 @@ function RenderLandingPage(props) {
through a Freedom of Information Act request. You can search for
information on asylum grant rates by year, nationality, and asylum
office, visualize the data with charts and heat maps, and download
the data set
the data set.
</h3>
</div>
</div>
<div>
{/* Bottom Section: Add code here for the graphs section for your first ticket */}
{/* <div className="bottom-section">*/}
<p onClick={() => scrollToTop()} className="back-to-top">
Back To Top ^
</p>
<div className="bottom-section">
<h1>Systematic Disparity Insights</h1>
<div className="h2-container">
<div className="h2-item">
<h2>36%</h2>
<h3>
By the end of the Trump administration, the average asylum
office grant rate had fallen 36 percent from an average of 44
percent in fiscal year 2016 to 28 percent in fiscal year 2020.
</h3>
</div>
<div className="h2-item">
<h2>5%</h2>
<h3>
The New York asylum office grant rate dropped to 5 percent in
fiscal year 2020.
</h3>
</div>
<div className="h2-item">
<h2>6x Lower</h2>
<h3>
Between fiscal year 2017 and 2020, the New York asylum office’s
average grant rate was six times lower than the San Francisco
asylum office.
</h3>
</div>
</div>
<div className="view-more-data-btn-container">
<Button
type="default"
style={{ backgroundColor: '#404C4A', color: '#FFFFFF' }}
onClick={() => history.push('/graphs')}
>
Read More
</Button>
</div>
<p onClick={() => scrollToTop()} className="back-to-top">
Back To Top ^
</p>
</div>
</div>
</div>
);
}
export default RenderLandingPage;

109 changes: 94 additions & 15 deletions src/styles/RenderLandingPage.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

.header {
background-color: @main-color;
display:flex;
display: flex;
text-align: center;
width: 100%;
height: 20vh;
Expand All @@ -27,31 +27,51 @@
text-align: center;
width: 100%;
align-items: center;
margin-bottom: 40px;
font-size: 24px;
}

.header-text-container h1 {
font-size: 3rem;
font-size: 48px;
color: @white;
font-family: 'moneta';
}

.header-text-container h3 {
font-family: 'beatrice regular';
font-family: 'moneta';
color: @white;
font-size: 1.2rem;
font-size: 24px;
}

// .graphs-section {
.graphs-section {
// ADD THIS BACK IN WHEN YOU HAVE THE GRAPHS SECTION
// }
display: flex;
justify-content: space-around; /* Distribute space between images */
align-items: flex-end; /* Align items to the bottom */
}

.graphs-section img {
display: block; /* Ensure images are block elements for margin */
margin: 0 auto; /* Center the images */
}

.graphs-section p {
text-align: center; /* Center the text below the image */
margin-top: 10px; /* Add space between the image and caption */
font-family: 'acumin';
font-size: 24px; /* Adjust the font size to be slightly larger */
}

.view-more-data-btn-container {
display: flex;
justify-content: center; /* Align buttons closer together */
align-items: center;
gap: 40px; /* Adjust this value to control spacing between buttons */
height: 44px;
width: 180px;
margin: 0 auto;
text-align: center;
margin-bottom: 10%;
}
width: 100%;
margin-bottom: 5%;
margin-top: 60px;
}

.middle-section {
display: flex;
Expand All @@ -75,16 +95,73 @@
font-size: 1.4rem;
}

// .bottom-section {
.bottom-section {
// ADD THIS BACK IN WHEN YOU HAVE A BOTTOM SECTION
// }
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40px;
margin-top: 130px;
}

h1 {
font-size: 56px;
font-family: 'Moneta';
}

.h2-container {
display: flex;
justify-content: space-between; /* Align items with space between them */
gap: 20px; /* Adjust spacing between the h2/h3 items */
margin-bottom: 20px; /* Space below the container */
margin-top: 80px;
}

.h2-item {
display: flex;
flex-direction: column; /* Align elements in a vertical column */
align-items: center; /* Center the content horizontally */
text-align: center; /* Ensure the text inside is centered */
margin-bottom: 20px; /* Add some spacing below */
}

.h2-item h2 {
margin: 0;
font-family: 'moneta';
font-size: 48px;
}

.h2-item h3 {
margin-top: 10px; /* Add some space between the <h2> and <h3> */
line-height: 1.4; /* Adjust the line height for readability */
max-width: 300px; /* Control the width for wrapping */
text-align: center; /* Center the text */
font-family: 'acumin';
font-size: 1.2rem;
}

.h2-container h2 {
margin: 0;
}

.h2-container h3 {
margin: 0;
text-align: center;
line-height: 1.5; /* Adjust line height for readability */
max-width: 500px; /* Adjust width to control text wrapping */
}

.back-to-top {
width: 8%;
font-size: 1.2rem;
cursor: pointer;
color: black;
margin: 5% auto;
margin: .2% auto;
margin-top: 20px;
margin-bottom: 30px;
display: flex;
justify-content: center;
align-items: center;
}

.ant-space-align-center {
Expand Down Expand Up @@ -179,7 +256,9 @@
}

.bottom-section h1 {
font-size: 2rem;
font-family: 'moneta', sans-serif;;
font-size: 48px;
margin-bottom: 10vh;
}

.data-container {
Expand Down