diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.css | 2 | ||||
| -rw-r--r-- | src/App.js | 88 | ||||
| -rw-r--r-- | src/Card.css | 4 | ||||
| -rw-r--r-- | src/Card.js | 6 |
4 files changed, 62 insertions, 38 deletions
diff --git a/src/App.css b/src/App.css index 0f57d9d..da16c9c 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,7 @@ .App { text-align: center; + padding-bottom: 2rem; + padding-top: 1rem; } .Section { @@ -30,7 +30,7 @@ function App() { return ( <div className="App"> - <h1>RIT Covid Dashboard</h1> + <h1 className="text-4xl">RIT Covid Dashboard</h1> <h3> Last Updated:{" "} {lastUpdate.toLocaleString({ @@ -41,43 +41,65 @@ function App() { minute: "2-digit", })} </h3> - <div className="Section"> - <Card name="Total Student Cases" latest={latest.total_students} prior={prior.total_students} /> - <Card name="Total Staff Cases" latest={latest.total_staff} prior={prior.total_staff} /> + <br /> + <br /> + <div id="total"> + <h4 className="text-2xl">Total Positive Cases Since August 19 (First Day of Classes)</h4> + <div className="Section"> + <Card name="Students" latest={latest.total_students} prior={prior.total_students} /> + <Card name="Staff" latest={latest.total_staff} prior={prior.total_staff} /> + </div> </div> - <div className="Section"> - <Card name="New Student Cases" latest={latest.new_students} prior={prior.new_students} /> - <Card name="New Staff Cases" latest={latest.new_staff} prior={prior.new_staff} /> + <br /> + <div id="new"> + <h4 className="text-2xl">New Positive Cases From Past 14 Days</h4> + + <div className="Section"> + <Card name="Students" latest={latest.new_students} prior={prior.new_students} /> + <Card name="Staff" latest={latest.new_staff} prior={prior.new_staff} /> + </div> </div> - <div className="Section"> - <Card - name="Quarantine On Campus" - latest={latest.quarantine_on_campus} - prior={prior.quarantine_on_campus} - /> - <Card - name="Quarantine Off Campus" - latest={latest.quarantine_off_campus} - prior={prior.quarantine_off_campus} - /> + <br /> + <div id="quarantine"> + <h4 className="text-2xl">Number of Students in Quarantine</h4> + <h5 className="text-base"> + Quarantine separates and restricts the movement of people who were exposed to a contagious disease + to see if they become sick. + </h5> + <div className="Section"> + <Card name="On Campus" latest={latest.quarantine_on_campus} prior={prior.quarantine_on_campus} /> + <Card name="Off Campus" latest={latest.quarantine_off_campus} prior={prior.quarantine_off_campus} /> + </div> </div> - <div className="Section"> - <Card - name="Isolation On Campus" - latest={latest.isolation_on_campus} - prior={prior.isolation_on_campus} - /> - <Card - name="Isolation Off Campus" - latest={latest.isolation_off_campus} - prior={prior.isolation_off_campus} - /> + <br /> + <div id="isolation"> + <h4 className="text-2xl">Number of Students in Isolation</h4> + <h5 className="text-base"> + Isolation separates sick people with a contagious disease from people who are not sick. + </h5> + <div className="Section"> + <Card name="On Campus" latest={latest.isolation_on_campus} prior={prior.isolation_on_campus} /> + <Card name="Off Campus" latest={latest.isolation_off_campus} prior={prior.isolation_off_campus} /> + </div> </div> - <div className="Section"> - <Card name="Tests Administered" latest={latest.tests_administered} prior={prior.tests_administered} /> + <br /> + <div id="tests"> + <h4 className="text-2xl">Number of Tests Administered by Student Health Center</h4> + <div className="Section"> + <Card name="Tests to date" latest={latest.tests_administered} prior={prior.tests_administered} /> + </div> </div> - <div className="Section"> - <Card name="Beds Available" latest={latest.beds_available} prior={prior.beds_available} suffix="%" /> + <br /> + <div id="beds"> + <h4 className="text-2xl">Quarantine/Isolation Bed Availability On-campus</h4> + <div className="Section"> + <Card + name="Beds Available" + latest={latest.beds_available} + prior={prior.beds_available} + suffix="%" + /> + </div> </div> </div> ); diff --git a/src/Card.css b/src/Card.css index a9ef4ee..a4b3d2e 100644 --- a/src/Card.css +++ b/src/Card.css @@ -1,10 +1,10 @@ .Card { padding: 16px; - width: 50%; + width: 40%; } @media screen and (min-width: 768px) { .Card { - width: 20%; + width: 18%; } } diff --git a/src/Card.js b/src/Card.js index 310848d..fea3cda 100644 --- a/src/Card.js +++ b/src/Card.js @@ -7,12 +7,12 @@ const Card = (props) => { diff = "+" + diff.toString(); } return ( - <div className="Card"> - <h3>{props.name}</h3> + <div className="Card bg-white rounded-lg border-2 border-orange-300 p-4 m-4"> + <h3 className="text-lg">{props.name}</h3> <p> {props.latest} {props.suffix}{" "} - <span className="Diff"> + <span className="Diff text-gray-600 text-sm"> ({diff} {props.suffix}) </span> |