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 !isDonating
) { ) {
setIsDonationDisplayed(true); setIsDonationDisplayed(true);
executeGA({ executeGA({
type: 'event', type: 'event',
data: { data: {
@ -265,7 +264,7 @@ const ShowCertification = props => {
); );
let donationSection = ( let donationSection = (
<Grid className='donation-section'> <div className='donation-section'>
{!isDonationSubmitted && ( {!isDonationSubmitted && (
<Row> <Row>
<Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}> <Col lg={8} lgOffset={2} sm={10} smOffset={1} xs={12}>
@ -273,120 +272,127 @@ const ShowCertification = props => {
</Col> </Col>
</Row> </Row>
)} )}
<DonateForm <Row>
handleProcessing={handleProcessing} <Col md={8} mdOffset={2} xs={12}>
defaultTheme='light' <DonateForm
isMinimalForm={true} handleProcessing={handleProcessing}
/> defaultTheme='light'
isMinimalForm={true}
/>
</Col>
</Row>
<Row> <Row>
<Col sm={4} smOffset={4} xs={6} xsOffset={3}> <Col sm={4} smOffset={4} xs={6} xsOffset={3}>
{isDonationSubmitted && donationCloseBtn} {isDonationSubmitted && donationCloseBtn}
</Col> </Col>
</Row> </Row>
</Grid> <Spacer size={2} />
</div>
); );
const shareCertBtns = ( const shareCertBtns = (
<Row className='text-center'> <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} /> <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> </Row>
); );
return ( return (
<div className='certificate-outer-wrapper'> <Grid className='certificate-outer-wrapper'>
<Spacer size={2} />
{isDonationDisplayed && !isDonationClosed ? donationSection : ''} {isDonationDisplayed && !isDonationClosed ? donationSection : ''}
<Grid className='certificate-wrapper certification-namespace'> <Row className='certificate-wrapper certification-namespace'>
<Row> <header>
<header> <Col md={5} sm={12}>
<Col md={5} sm={12}> <div className='logo'>
<div className='logo'> <FreeCodeCampLogo />
<FreeCodeCampLogo /> </div>
</div> </Col>
</Col> <Col md={7} sm={12}>
<Col md={7} sm={12}> <div data-cy='issue-date' className='issue-date'>
<div data-cy='issue-date' className='issue-date'> {t('certification.issued')}&nbsp;
{t('certification.issued')}&nbsp; <strong>
<strong> {certDate.toLocaleString([localeCode, 'en-US'], {
{certDate.toLocaleString([localeCode, 'en-US'], { year: 'numeric',
year: 'numeric', month: 'long',
month: 'long', day: 'numeric'
day: 'numeric' })}
})} </strong>
</strong> </div>
</div> </Col>
</Col> </header>
</header>
<main className='information'> <main className='information'>
<div className='information-container'> <div className='information-container'>
<Trans <Trans
user={displayName} user={displayName}
title={certTitle} title={certTitle}
time={completionTime} time={completionTime}
i18nKey='certification.fulltext' i18nKey='certification.fulltext'
> >
<h3>placeholder</h3> <h3>placeholder</h3>
<h1> <h1>
<strong>{{ user: displayName }}</strong> <strong>{{ user: displayName }}</strong>
</h1> </h1>
<h3>placeholder</h3> <h3>placeholder</h3>
<h1> <h1>
<strong>{{ title: certTitle }}</strong> <strong>{{ title: certTitle }}</strong>
</h1> </h1>
<h4>{{ time: completionTime }}</h4> <h4>{{ time: completionTime }}</h4>
</Trans> </Trans>
</div> </div>
</main> </main>
<footer> <footer>
<div className='row signatures'> <div className='row signatures'>
<Image <Image
alt="Quincy Larson's Signature" alt="Quincy Larson's Signature"
src={ src={
'https://cdn.freecodecamp.org' + 'https://cdn.freecodecamp.org' +
'/platform/english/images/quincy-larson-signature.svg' '/platform/english/images/quincy-larson-signature.svg'
} }
/> />
<p> <p>
<strong>Quincy Larson</strong> <strong>Quincy Larson</strong>
</p> </p>
<p>{t('certification.executive')}</p> <p>{t('certification.executive')}</p>
</div> </div>
<Row> <Row>
<p className='verify'> <p className='verify'>
{t('certification.verify', { certURL: certURL })} {t('certification.verify', { certURL: certURL })}
</p> </p>
</Row> </Row>
</footer> </footer>
</Row> </Row>
</Grid> <Spacer size={2} />
{signedInUserName === username ? shareCertBtns : ''} {signedInUserName === username ? shareCertBtns : ''}
<Spacer size={2} /> <Spacer size={2} />
<ShowProjectLinks user={user} name={displayName} certName={certTitle} /> <ShowProjectLinks user={user} name={displayName} certName={certTitle} />
<Spacer size={2} /> <Spacer size={2} />
</div> </Grid>
); );
}; };

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

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