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

24
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,22 +272,27 @@ const ShowCertification = props => {
</Col> </Col>
</Row> </Row>
)} )}
<Row>
<Col md={8} mdOffset={2} xs={12}>
<DonateForm <DonateForm
handleProcessing={handleProcessing} handleProcessing={handleProcessing}
defaultTheme='light' defaultTheme='light'
isMinimalForm={true} 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'>
<Spacer size={2} /> <Col xs={12}>
<Button <Button
block={true} block={true}
bsSize='lg' bsSize='lg'
@ -312,14 +316,16 @@ const ShowCertification = props => {
> >
{t('profile.add-twitter')} {t('profile.add-twitter')}
</Button> </Button>
</Col>
<Spacer size={2} />
</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'>
@ -381,12 +387,12 @@ const ShowCertification = props => {
</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;
} }