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 {
display: flex;
flex-wrap: wrap;
@ -19,6 +11,7 @@
border-radius: 10px;
width: 150px;
height: 100px;
margin: 0 auto;
margin-bottom: 50px;
display: flex;
align-items: center;

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

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