ayushya/vaxandme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.1.1/release styling fixes, add links

Browse Source
This commit is contained in:
ayushya
2021-04-22 23:47:22 -04:00
parent 87e4916db6
commit 329265aabb
4 changed files with 50 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/public/index.html
+11 -4
View File
@@ -117,16 +117,23 @@
<div id="root"></div>
<footer data-font="sans">
<div class="link-container">
<div>
<div id="data-sources">
<h6 class="overline" data-font="sans">FDA Data Sources</h6>
<a href="https://www.fda.gov/media/144416/download">PFizer-BioNTech</a>
<a href="https://www.fda.gov/media/144637/download">Moderna</a>
<a href="https://www.fda.gov/media/146304/download">J&J Janssen</a>
<a id="fda-pfizer" href="https://www.fda.gov/media/144416/download">PFizer-BioNTech</a>
<a id="fda-moderna" href="https://www.fda.gov/media/144637/download">Moderna</a>
<a id="fda-j&j" href="https://www.fda.gov/media/146304/download">J&J Janssen</a>
</div>
<div>
<h6 class="overline" data-font="sans">Links</h6>
<a href="%PUBLIC_URL%/vaxandme_chart.pdf">Download Chart</a>
<a href="/">Home</a>
<a
target="_blank"
href="https://www.gavi.org/vaccineswork/what-difference-between-efficacy-and-effectiveness"
rel="noreferrer"
>
What is efficacy? ↗
</a>
</div>
<div>
<h6 class="overline" data-font="sans">Legal</h6>
website/public/styles/extrasmall.css
+12 -6
View File
@@ -8,6 +8,7 @@
html {
font-size: 10px;
scroll-behavior: smooth;
}
body {
display: flex;
@@ -349,18 +350,14 @@ footer .by {
.tip-container {
display: flex;
flex-direction: row;
padding: 2rem 4rem;
padding-left: 2rem;
padding: 2rem 0;
margin: 2rem 0;
border-radius: 1rem;
margin-bottom: 2rem;
border: 1px solid var(--color-secondary);
}
.tip-icon {
font-size: 3rem;
}
.tip {
padding-left: 2rem;
}
.tip .overline {
font-size: 1.6rem;
}
@@ -373,6 +370,12 @@ footer .by {
font-size: 6rem;
letter-spacing: 0.5rem;
}
.tip-container .overline[data-button] {
margin-top: 1rem;
}
.tip-container .overline[data-button]:first-of-type {
margin-top: 2rem;
}
@keyframes loading {
0% {
@@ -403,6 +406,9 @@ footer .by {
margin-top: 5rem;
flex-direction: column;
margin-bottom: 2rem;
border: 1px solid var(--color-secondary);
border-radius: 1rem;
padding: 3rem 2rem;
}
.result-header-container .symptom-container {
website/public/styles/medium.css
+9 -4
View File
@@ -104,11 +104,16 @@ footer {
max-width: 50%;
}
.tip-container {
width: fit-content;
max-width: 45rem;
.tip-container .overline[data-button] {
margin-top: 2rem;
margin-left: 0;
}
.tip-container .overline[data-button]:last-of-type {
margin-left: 1.2rem;
}
.tip {
padding-left: 2rem;
}
.result-header-container {
flex-direction: row;
website/src/index.js
+18 -2
View File
@@ -860,7 +860,7 @@ class App extends React.Component {
{this.shouldShowResults() ? (
<div className="tip-container">
<div className="tip-icon">&#9432;</div>
{/* <div className="tip-icon">&#9432;</div> */}
<div className="tip">
<h6 className="subheader" data-font="sans">
NET EFFICACY
@@ -868,10 +868,26 @@ class App extends React.Component {
<h3 className="header" data-font="sans-bold">
{VAX_EFFICACY[name][age]}%
</h3>
<h6 className="overline" data-font="sans">
<h6
className="overline"
style={{ wordBreak: "break-word" }}
data-font="sans"
>
of vaccine trial participants who took the <u>{name}</u>{" "}
vaccine (in the <u>{age}</u> age group) did not get COVID-19
</h6>
<h6 className="overline" data-font="sans" data-button>
<a href="#data-sources">See Data Sources ↗</a>
</h6>
<h6 className="overline" data-font="sans" data-button>
<a
target="_blank"
href="https://www.gavi.org/vaccineswork/what-difference-between-efficacy-and-effectiveness"
rel="noreferrer"
>
What is efficacy? ↗
</a>
</h6>
</div>
</div>
) : null}