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

fix: Portfolio styling

Browse Source
This commit is contained in:
Bouncey
2018-11-08 15:06:23 +00:00
committed by mrugesh mohapatra
parent d417ec9936
commit 7afa00f2aa
2 changed files with 35 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
client/src/components/profile/components/Portfolio.js
View File

@ -1,9 +1,11 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Thumbnail, Media } from '@freecodecamp/react-bootstrap'; import { Media } from '@freecodecamp/react-bootstrap';
import { FullWidthRow } from '../../helpers'; import { FullWidthRow } from '../../helpers';
import './portfolio.css';
const propTypes = { const propTypes = {
portfolio: PropTypes.arrayOf( portfolio: PropTypes.arrayOf(
PropTypes.shape({ PropTypes.shape({
@ -21,35 +23,31 @@ function Portfolio({ portfolio = [] }) {
return null; return null;
} }
return ( return (
<div> <FullWidthRow>
<FullWidthRow> <h2 className='text-center'>Portfolio</h2>
<h2 className='text-center'>Portfolio</h2> {portfolio.map(({ title, url, image, description, id }) => (
{portfolio.map(({ title, url, image, description, id }) => ( <Media key={id}>
<Media key={id}> <Media.Left align='middle'>
<Media.Left align='middle'> {image && (
{image && ( <img
<a href={url} rel='nofollow'> alt={`A screen shot of ${title}`}
<Thumbnail className='portfolio-screen-shot'
alt={`A screen shot of ${title}`} src={image}
src={image} />
style={{ width: '150px' }} )}
/> </Media.Left>
</a> <Media.Body>
)} <Media.Heading className='portfolio-heading'>
</Media.Left> <a href={url} rel='nofollow noopener noreferrer'>
<Media.Body> {title}
<Media.Heading> </a>
<a href={url} rel='nofollow'> </Media.Heading>
{title} <p>{description}</p>
</a> </Media.Body>
</Media.Heading> </Media>
<p>{description}</p> ))}
</Media.Body>
</Media>
))}
</FullWidthRow>
<hr /> <hr />
</div> </FullWidthRow>
); );
} }

8
client/src/components/profile/components/portfolio.css Normal file
View File

@ -0,0 +1,8 @@
.portfolio-heading.media-heading {
border-bottom: 1px solid rgba(0, 100, 0, 0.6);
padding-bottom: 10px;
}
.portfolio-screen-shot {
width: 150px;
min-width: 150px;
}