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 completionTime
} = cert; } = cert;
return ( return (
<Grid className='certificate-wrapper certification-namespace'> <div className='certificate-outer-wrapper'>
<Row> <Grid className='certificate-wrapper certification-namespace'>
<header> <Row>
<Col md={5} sm={12}> <header>
<div className='logo'> <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 <Image
alt="freeCodeCamp.org's Logo" alt="Quincy Larson's Signature"
responsive={true}
src={ src={
'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo' + 'https://cdn.freecodecamp.org' +
'.svg' '/platform/english/images/quincy-larson-signature.svg'
} }
/> />
<p>
<strong>Quincy Larson</strong>
</p>
<p>Executive Director, freeCodeCamp.org</p>
</div> </div>
</Col> <Row>
<Col md={7} sm={12}> <p className='verify'>
<div className='issue-date'> Verify this certification at:
Issued&nbsp; https://www.freecodecamp.org/certification/
<strong>{issueDate}</strong> {username}/{certName}
</div> </p>
</Col> </Row>
</header> </footer>
</Row>
<main className='information'> </Grid>
<div className='information-container'> </div>
<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>
); );
} }
} }

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

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