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

fix(client): make certification responsive (#41222)

Browse Source
This commit is contained in:
Ahmad Abdolsaheb
2021-02-22 16:30:25 +03:00
committed by GitHub
parent dd8202d7fa
commit 11428ef5ff
2 changed files with 104 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -162,7 +162,6 @@ const ShowCertification = props => {
!isDonating
) {
setIsDonationDisplayed(true);
executeGA({
type: 'event',
data: {
@ -265,7 +264,7 @@ const ShowCertification = props => {
);
let donationSection = (
<Grid className='donation-section'>
<div className='donation-section'>
{!isDonationSubmitted && (
<Row>
<Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
@ -273,120 +272,127 @@ const ShowCertification = props => {
</Col>
</Row>
)}
<DonateForm
handleProcessing={handleProcessing}
defaultTheme='light'
isMinimalForm={true}
/>
<Row>
<Col md={8} mdOffset={2} xs={12}>
<DonateForm
handleProcessing={handleProcessing}
defaultTheme='light'
isMinimalForm={true}
/>
</Col>
</Row>
<Row>
<Col sm={4} smOffset={4} xs={6} xsOffset={3}>
{isDonationSubmitted && donationCloseBtn}
</Col>
</Row>
</Grid>
<Spacer size={2} />
</div>
);
const shareCertBtns = (
<Row className='text-center'>
<Col xs={12}>
<Button
block={true}
bsSize='lg'
bsStyle='primary'
target='_blank'
href={`https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=${certTitle}&organizationId=4831032&issueYear=${certYear}&issueMonth=${certMonth +
1}&certUrl=${certURL}`}
>
{t('profile.add-linkedin')}
</Button>
<Spacer />
<Button
block={true}
bsSize='lg'
bsStyle='primary'
target='_blank'
href={`https://twitter.com/intent/tweet?text=${t('profile.tweet', {
certTitle: certTitle,
certURL: certURL
})}`}
>
{t('profile.add-twitter')}
</Button>
</Col>
<Spacer size={2} />
<Button
block={true}
bsSize='lg'
bsStyle='primary'
target='_blank'
href={`https://www.linkedin.com/profile/add?startTask=CERTIFICATION_NAME&name=${certTitle}&organizationId=4831032&issueYear=${certYear}&issueMonth=${certMonth +
1}&certUrl=${certURL}`}
>
{t('profile.add-linkedin')}
</Button>
<Spacer />
<Button
block={true}
bsSize='lg'
bsStyle='primary'
target='_blank'
href={`https://twitter.com/intent/tweet?text=${t('profile.tweet', {
certTitle: certTitle,
certURL: certURL
})}`}
>
{t('profile.add-twitter')}
</Button>
</Row>
);
return (
<div className='certificate-outer-wrapper'>
<Grid className='certificate-outer-wrapper'>
<Spacer size={2} />
{isDonationDisplayed && !isDonationClosed ? donationSection : ''}
<Grid className='certificate-wrapper certification-namespace'>
<Row>
<header>
<Col md={5} sm={12}>
<div className='logo'>
<FreeCodeCampLogo />
</div>
</Col>
<Col md={7} sm={12}>
<div data-cy='issue-date' className='issue-date'>
{t('certification.issued')}&nbsp;
<strong>
{certDate.toLocaleString([localeCode, 'en-US'], {
year: 'numeric',
month: 'long',
day: 'numeric'
})}
</strong>
</div>
</Col>
</header>
<Row className='certificate-wrapper certification-namespace'>
<header>
<Col md={5} sm={12}>
<div className='logo'>
<FreeCodeCampLogo />
</div>
</Col>
<Col md={7} sm={12}>
<div data-cy='issue-date' className='issue-date'>
{t('certification.issued')}&nbsp;
<strong>
{certDate.toLocaleString([localeCode, 'en-US'], {
year: 'numeric',
month: 'long',
day: 'numeric'
})}
</strong>
</div>
</Col>
</header>
<main className='information'>
<div className='information-container'>
<Trans
user={displayName}
title={certTitle}
time={completionTime}
i18nKey='certification.fulltext'
>
<h3>placeholder</h3>
<h1>
<strong>{{ user: displayName }}</strong>
</h1>
<h3>placeholder</h3>
<h1>
<strong>{{ title: certTitle }}</strong>
</h1>
<h4>{{ time: completionTime }}</h4>
</Trans>
</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>{t('certification.executive')}</p>
</div>
<Row>
<p className='verify'>
{t('certification.verify', { certURL: certURL })}
</p>
</Row>
</footer>
</Row>
</Grid>
<main className='information'>
<div className='information-container'>
<Trans
user={displayName}
title={certTitle}
time={completionTime}
i18nKey='certification.fulltext'
>
<h3>placeholder</h3>
<h1>
<strong>{{ user: displayName }}</strong>
</h1>
<h3>placeholder</h3>
<h1>
<strong>{{ title: certTitle }}</strong>
</h1>
<h4>{{ time: completionTime }}</h4>
</Trans>
</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>{t('certification.executive')}</p>
</div>
<Row>
<p className='verify'>
{t('certification.verify', { certURL: certURL })}
</p>
</Row>
</footer>
</Row>
<Spacer size={2} />
{signedInUserName === username ? shareCertBtns : ''}
<Spacer size={2} />
<ShowProjectLinks user={user} name={displayName} certName={certTitle} />
<Spacer size={2} />
</div>
</Grid>
);
};

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

@ -13,12 +13,13 @@
margin: 12px 0;
}
.certification-namespace.container {
.certification-namespace {
max-width: 1500px;
width: 100%;
padding: 30px;
border: var(--theme-color) 15px solid;
border-radius: 3px;
background-color: var(--gray-00);
}
.certification-namespace .row {
@ -39,11 +40,6 @@
align-items: center;
min-height: 100vh;
flex-direction: column;
padding: 50px;
}
.certificate-outer-wrapper .donation-section {
padding-bottom: 100px;
}
.certificate-outer-wrapper .donation-section hr {
@ -263,5 +259,4 @@
.certificate-outer-wrapper {
margin-top: calc(-1 * var(--header-height));
background-color: #fff;
}