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

fix(ui): use react-bootstrap for layouting sponsor logos

Browse Source
This commit is contained in:
Valeriy S
2019-03-06 12:01:38 +03:00
committed by mrugesh mohapatra
parent 053c66cbef
commit f4a1659fa7
2 changed files with 59 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,3 @@
.img-responsive {
display: block;
max-width: 100%;
height: auto;
padding: 0;
margin: 0;
}
.sls { .sls {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -19,6 +11,7 @@
border-radius: 10px; border-radius: 10px;
width: 150px; width: 150px;
height: 100px; height: 100px;
margin: 0 auto;
margin-bottom: 50px; margin-bottom: 50px;
display: flex; display: flex;
align-items: center; align-items: center;

166
client/src/pages/sponsors.js
View File

@ -1,7 +1,6 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { Grid, Col, Row } from '@freecodecamp/react-bootstrap'; import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
import Media from 'react-media';
import { Link, Spacer } from '../components/helpers'; import { Link, Spacer } from '../components/helpers';
@ -29,14 +28,14 @@ const SponsorsPage = () => {
<Link className='sl' to='https://www.class-central.com'> <Link className='sl' to='https://www.class-central.com'>
<img <img
alt="Class Central's logo" alt="Class Central's logo"
className='img-responsive' className='img-responsive img-center'
src='https://s3.amazonaws.com/freecodecamp/class-central-logo.jpg' src='https://s3.amazonaws.com/freecodecamp/class-central-logo.jpg'
/> />
</Link> </Link>
<Link className='sl' to='https://www.tsugicloud.org'> <Link className='sl' to='https://www.tsugicloud.org'>
<img <img
alt="TsugiCloud's logo" alt="TsugiCloud's logo"
className='img-responsive' className='img-responsive img-center'
src='https://s3.amazonaws.com/freecodecamp/tsugicloud-logo.png' src='https://s3.amazonaws.com/freecodecamp/tsugicloud-logo.png'
/> />
</Link> </Link>
@ -45,111 +44,62 @@ const SponsorsPage = () => {
<h3>These companies donate their services to freeCodeCamp.org</h3> <h3>These companies donate their services to freeCodeCamp.org</h3>
<hr /> <hr />
<Media query='(min-width: 500px)'> <Row className='sls'>
{matches => <Col md={4} xs={6}>
matches ? ( <Link className='sl' to='https://netlify.com'>
<Fragment> <img
<Row className='sls'> alt="Netlify's logo"
<Link className='sl' to='https://netlify.com'> className='img-responsive img-center'
<img src='https://s3.amazonaws.com/freecodecamp/netlify-logo.jpg'
alt="Netlify's logo" />
className='img-responsive' </Link>
src='https://s3.amazonaws.com/freecodecamp/netlify-logo.jpg' </Col>
/> <Col md={4} xs={6}>
</Link> <Link className='sl' to='https://www.mlab.com/'>
<Link className='sl' to='https://www.mlab.com/'> <img
<img alt="mLab's logo"
alt="mLab's logo" className='img-responsive img-center'
className='img-responsive' src='https://s3.amazonaws.com/freecodecamp/mLab-logo.png'
src='https://s3.amazonaws.com/freecodecamp/mLab-logo.png' />
/> </Link>
</Link> </Col>
<Link className='sl' to='https://auth0.com'> <Col md={4} xs={6}>
<img <Link className='sl' to='https://auth0.com'>
alt="Auth0's logo" <img
className='img-responsive' alt="Auth0's logo"
src='https://s3.amazonaws.com/freecodecamp/auth0-logo.png' className='img-responsive img-center'
/> src='https://s3.amazonaws.com/freecodecamp/auth0-logo.png'
</Link> />
</Row> </Link>
<Row className='sls'> </Col>
<Link className='sl' to='https://www.discourse.org/'> <Col md={4} xs={6}>
<img <Link className='sl' to='https://www.discourse.org/'>
alt="Discourse's logo" <img
className='img-responsive' alt="Discourse's logo"
src='https://s3.amazonaws.com/freecodecamp/discourse-logo.png' className='img-responsive img-center'
/> src='https://s3.amazonaws.com/freecodecamp/discourse-logo.png'
</Link> />
<Link className='sl' to='https://algolia.com'> </Link>
<img </Col>
alt="Algolia's logo" <Col md={4} xs={6}>
className='img-responsive' <Link className='sl' to='https://algolia.com'>
src='https://s3.amazonaws.com/freecodecamp/algolia-logo.jpg' <img
/> alt="Algolia's logo"
</Link> className='img-responsive img-center'
<Link className='sl' to='https://cloudflare.com'> src='https://s3.amazonaws.com/freecodecamp/algolia-logo.jpg'
<img />
alt="Cloudflare's logo" </Link>
className='img-responsive' </Col>
src='https://s3.amazonaws.com/freecodecamp/cloudflare-logo.jpg' <Col md={4} xs={6}>
/> <Link className='sl' to='https://cloudflare.com'>
</Link> <img
</Row> alt="Cloudflare's logo"
</Fragment> className='img-responsive img-center'
) : ( src='https://s3.amazonaws.com/freecodecamp/cloudflare-logo.jpg'
<Fragment> />
<Row className='sls'> </Link>
<Link className='sl' to='https://netlify.com'> </Col>
<img </Row>
alt="Netlify's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/netlify-logo.jpg'
/>
</Link>
<Link className='sl' to='https://www.mlab.com/'>
<img
alt="mLab's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/mLab-logo.png'
/>
</Link>
</Row>
<Row className='sls'>
<Link className='sl' to='https://auth0.com'>
<img
alt="Auth0's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/auth0-logo.png'
/>
</Link>
<Link className='sl' to='https://www.discourse.org/'>
<img
alt="Discourse's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/discourse-logo.png'
/>
</Link>
</Row>
<Row className='sls'>
<Link className='sl' to='https://algolia.com'>
<img
alt="Algolia's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/algolia-logo.jpg'
/>
</Link>
<Link className='sl' to='https://cloudflare.com'>
<img
alt="Cloudflare's logo"
className='img-responsive'
src='https://s3.amazonaws.com/freecodecamp/cloudflare-logo.jpg'
/>
</Link>
</Row>
</Fragment>
)
}
</Media>
</Col> </Col>
</Row> </Row>
</Grid> </Grid>