gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: center certificates vertically when viewed on large scree… (#37427)

Browse Source 
* fix: center certificates vertically when viewed on large screens

* adjust alignment for all screen sizes

* change height to min-height
This commit is contained in:
Derryk Boyd
2019-10-22 09:44:04 -06:00
committed by mrugesh
parent 5b1ee9c177
commit 3483a04ba1
2 changed files with 67 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
client/src/client-only-routes/ShowCertification.js
View File

@ -104,69 +104,71 @@ class ShowCertification extends Component {
completionTime
} = cert;
return (
<Grid className='certificate-wrapper certification-namespace'>
<Row>
<header>
<Col md={5} sm={12}>
<div className='logo'>
<div className='certificate-outer-wrapper'>
<Grid className='certificate-wrapper certification-namespace'>
<Row>
<header>
<Col md={5} sm={12}>
<div className='logo'>
<Image
alt="freeCodeCamp.org's Logo"
responsive={true}
src={
'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo' +
'.svg'
}
/>
</div>
</Col>
<Col md={7} sm={12}>
<div className='issue-date'>
Issued&nbsp;
<strong>{issueDate}</strong>
</div>
</Col>
</header>
<main className='information'>
<div className='information-container'>
<h3>This certifies that</h3>
<h1>
<strong>{userFullName}</strong>
</h1>
<h3>has successfully completed the freeCodeCamp.org</h3>
<h1>
<strong>{certTitle} Certification</strong>
</h1>
<h4>
Developer Certification, representing approximately{' '}
{completionTime} hours of coursework
</h4>
</div>
</main>
<footer>
<div className='row signatures'>
<Image
alt="freeCodeCamp.org's Logo"
responsive={true}
alt="Quincy Larson's Signature"
src={
'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo' +
'.svg'
'https://cdn.freecodecamp.org' +
'/platform/english/images/quincy-larson-signature.svg'
}
/>
<p>
<strong>Quincy Larson</strong>
</p>
<p>Executive Director, freeCodeCamp.org</p>
</div>
</Col>
<Col md={7} sm={12}>
<div className='issue-date'>
Issued&nbsp;
<strong>{issueDate}</strong>
</div>
</Col>
</header>
<main className='information'>
<div className='information-container'>
<h3>This certifies that</h3>
<h1>
<strong>{userFullName}</strong>
</h1>
<h3>has successfully completed the freeCodeCamp.org</h3>
<h1>
<strong>{certTitle} Certification</strong>
</h1>
<h4>
Developer Certification, representing approximately{' '}
{completionTime} hours of coursework
</h4>
</div>
</main>
<footer>
<div className='row signatures'>
<Image
alt="Quincy Larson's Signature"
src={
'https://cdn.freecodecamp.org' +
'/platform/english/images/quincy-larson-signature.svg'
}
/>
<p>
<strong>Quincy Larson</strong>
</p>
<p>Executive Director, freeCodeCamp.org</p>
</div>
<Row>
<p className='verify'>
Verify this certification at:
https://www.freecodecamp.org/certification/
{username}/{certName}
</p>
</Row>
</footer>
</Row>
</Grid>
<Row>
<p className='verify'>
Verify this certification at:
https://www.freecodecamp.org/certification/
{username}/{certName}
</p>
</Row>
</footer>
</Row>
</Grid>
</div>
);
}
}

7
client/src/pages/certification.css
View File

@ -30,6 +30,13 @@
font-family: 'Sax Mono', monospace;
}
/* center the certificate vertically */
.certificate-outer-wrapper {
display: flex;
align-items: center;
min-height: 100vh;
}
.certification-namespace header {
width: 100%;
height: 140px;