Commit 68efd38a authored by Jan Bürling's avatar Jan Bürling

added structure

parent 153bbb2e
......@@ -7,6 +7,19 @@ body {
font-family: sans-serif;
}
button {
cursor: pointer;
&.icon-button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
outline: inherit;
}
}
.flex {
display: flex;
}
......
......@@ -5,46 +5,41 @@ import { Icon } from 'semantic-ui-react';
export const Card = (props) => (
<div className='card margin' key={props.car.id} style={{ background: '#FFFFFF' }}>
{/* Title container */}
<div className='header-bar-container flex flex-between flex-middle padding'>
<h4 className='remove-margin'>
{`${props.car.brand} ${props.car.type}`}
</h4>
<Icon name={props.car.isFavorite ? 'heart' : 'heart outline' } size='big' />
{/*
<button type='button' className='icon-button' onClick={() => {}}>
<Icon name={props.car.isFavorite ? 'heart' : 'heart outline' } size='big' />
</button>
*/}
</div>
{/* Image */}
<div style={{ maxHeight: '180px', overflow: 'hidden' }}>
<img src={props.car.imageUrl} style={{ minHeight: '180px' }} />
</div>
{/* Information container */}
<div className='information-container flex flex-between padding'>
<p>
<span>
{`BJ ${props.car.buildYear}`}
</p>
</span>
<p>
<span>
{`${props.car.price} €`}
</p>
</span>
</div>
<p className='padding'>
Last viewed: {props.car.lastViewed}
</p>
{/* Button container */}
<div className='text-center margin-bottom'>
<button type='button' style={{ padding: '10px 35px', background: 'light-grey' }}>
<Icon name='expand arrows alternate' />
Details
</button>
</div>
</div>
);
......
......@@ -6,56 +6,42 @@ export class StupidCarList extends React.Component {
render() {
return (
<div className='stupid-car-list flex flex-between'>
{/* Container for a list of all cars */}
<div className='cars-container padding'>
<div className='search-container padding'>
<Search />
</div>
{/* Loop over all cars */}
{cars.map(car => (
<div className='card margin' key={car.id}>
{/* Title container */}
<div className='header-bar-container flex flex-between flex-middle padding'>
<h4 className='remove-margin'>
{`${car.brand} ${car.type}`}
</h4>
<Icon name={car.isFavorite ? 'heart' : 'heart outline' } size='big' />
</div>
{/* Image */}
<div style={{ maxHeight: '180px', overflow: 'hidden' }}>
<img src={car.imageUrl} style={{ minHeight: '180px' }} />
</div>
{/* Information container */}
<div className='information-container flex flex-between padding'>
<p>
<span>
{ `BJ ${car.buildYear}` }
</p>
</span>
<p>
<span>
{ `${car.price} €` }
</p>
</span>
</div>
{/* Button container */}
<div className='text-center margin-bottom'>
<button type='button' style={{ padding: '10px 35px', background: 'light-grey' }}>
<Icon name='expand arrows alternate' />
Details
</button>
</div>
</div>
))}
......@@ -70,47 +56,35 @@ export class StupidCarList extends React.Component {
{cars.filter(car => car.isFavorite).map(car => (
<div className='card margin' key={car.id} style={{ background: '#FFFFFF' }}>
{/* Title container */}
<div className='header-bar-container flex flex-between flex-middle padding'>
<h4 className='remove-margin'>
{`${car.brand} ${car.type}`}
</h4>
</div>
{/* Image */}
<div style={{ maxHeight: '180px', overflow: 'hidden' }}>
<img src={car.imageUrl} style={{ minHeight: '180px' }} />
</div>
{/* Information container */}
<div className='information-container flex flex-between padding'>
<p>
<span>
{ `BJ ${car.buildYear}` }
</p>
</span>
<p>
<span>
{ `${car.price} €` }
</p>
</span>
</div>
<p className='padding'>
Last viewed: { car.lastViewed }
</p>
{/* Button container */}
<div className='text-center margin-bottom'>
<button type='button' style={{ padding: '10px 35px', background: 'light-grey' }}>
<Icon name='expand arrows alternate' />
Details
</button>
</div>
</div>
))}
......
import React from 'react';
import PropTypes from 'prop-types';
export const Button = props => (
<div/>
);
Button.propTypes = {};
export default Button;
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types';
export const CarSummary = props => (
<div/>
);
CarSummary.propTypes = {};
export default CarSummary;
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types';
export const HeaderBar = props => (
<div/>
);
HeaderBar.propTypes = {};
export default HeaderBar;
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types';
export const IconLabel = props => (
<div/>
);
IconLabel.propTypes = {};
export default IconLabel;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment