Commit 153bbb2e authored by Jan Bürling's avatar Jan Bürling

created classes for stylings

parent 482da8b1
......@@ -5,4 +5,51 @@ body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.flex {
display: flex;
}
.flex-between {
justify-content: space-between;
}
.flex-middle {
align-items: center;
}
.padding {
padding: 15px;
}
.margin {
margin: 15px;
&-bottom {
margin-bottom: 15px;
}
}
.remove-margin {
margin: 0;
}
.text-center {
text-align: center;
}
.card {
display: inline-block;
width: 350px;
border: 1px solid grey;
border-radius: 4px;
.image-container {
}
}
img {
width: 100%;
}
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types';
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>
</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>
{`BJ ${props.car.buildYear}`}
</p>
<p>
{`${props.car.price} €`}
</p>
</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>
);
Card.propTypes = {
car: PropTypes.shape({
id: PropTypes.number,
brand: PropTypes.string,
type: PropTypes.string,
isFavorite: PropTypes.bool,
imageUrl: PropTypes.string,
buildYear: PropTypes.string,
price: PropTypes.number,
}).isRequired,
};
export default Card;
\ No newline at end of file
......@@ -5,26 +5,23 @@ import cars from '../../mocks/cars';
export class StupidCarList extends React.Component {
render() {
return (
<div className='stupid-car-list' style={{ display: 'flex' }}>
<div className='stupid-car-list flex flex-between'>
{/* Container for a list of all cars */}
<div style={{ float: 'left', width: '100%', padding: '15px' }}>
<div className='cars-container padding'>
<div style={{ padding: '15px' }}>
<div className='search-container padding'>
<Search />
</div>
{/* Loop over all cars */}
{cars.map(car => (
<div
key={car.id}
style={{ display: 'inline-block', width: '31.21%', margin: '15px', border: '1px solid grey' }}
>
<div className='card margin' key={car.id}>
{/* Title container */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '15px' }}>
<div className='header-bar-container flex flex-between flex-middle padding'>
<h4 style={{ margin: '0' }}>
<h4 className='remove-margin'>
{`${car.brand} ${car.type}`}
</h4>
......@@ -33,10 +30,12 @@ export class StupidCarList extends React.Component {
</div>
{/* Image */}
<img src={car.imageUrl} style={{ width: '100%', height: '260px' }} />
<div style={{ maxHeight: '180px', overflow: 'hidden' }}>
<img src={car.imageUrl} style={{ minHeight: '180px' }} />
</div>
{/* Information container */}
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '15px' }}>
<div className='information-container flex flex-between padding'>
<p>
{ `BJ ${car.buildYear}` }
......@@ -49,7 +48,7 @@ export class StupidCarList extends React.Component {
</div>
{/* Button container */}
<div style={{ textAlign: 'center', marginBottom: '15px' }}>
<div className='text-center margin-bottom'>
<button type='button' style={{ padding: '10px 35px', background: 'light-grey' }}>
<Icon name='expand arrows alternate' />
......@@ -63,32 +62,31 @@ export class StupidCarList extends React.Component {
</div>
{/* Container for a list of favorit cars */}
<div style={{ float: 'right', width: '25%', background: '#DCDCDC', padding: '15px' }}>
{/* Container for a list of favorite cars */}
<div style={{ background: '#DCDCDC', padding: '15px' }}>
<h2>
Favorits
Favorites
</h2>
{cars.filter(car => car.isFavorite).map(car => (
<div
key={car.id}
style={{ margin: '15px', border: '1px solid grey', background: 'white' }}
>
<div className='card margin' key={car.id} style={{ background: '#FFFFFF' }}>
{/* Title container */}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '15px' }}>
<div className='header-bar-container flex flex-between flex-middle padding'>
<h4 style={{ margin: '0' }}>
<h4 className='remove-margin'>
{`${car.brand} ${car.type}`}
</h4>
</div>
{/* Image */}
<img src={car.imageUrl} style={{ width: '100%', height: '180px' }} />
<div style={{ maxHeight: '180px', overflow: 'hidden' }}>
<img src={car.imageUrl} style={{ minHeight: '180px' }} />
</div>
{/* Information container */}
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '15px' }}>
<div className='information-container flex flex-between padding'>
<p>
{ `BJ ${car.buildYear}` }
......@@ -100,12 +98,12 @@ export class StupidCarList extends React.Component {
</div>
<p style={{ padding: '0 15px' }}>
<p className='padding'>
Last viewed: { car.lastViewed }
</p>
{/* Button container */}
<div style={{ textAlign: 'center', marginBottom: '15px' }}>
<div className='text-center margin-bottom'>
<button type='button' style={{ padding: '10px 35px', background: 'light-grey' }}>
<Icon name='expand arrows alternate' />
......
import React, { Component } from 'react';
import { Accordion } from 'semantic-ui-react';
import logo from '../assets/images/logo.svg';
import Card from './Card';
import { StupidCarList } from './StupidCarList';
import cars from '../mocks/cars';
import './styles.css';
......@@ -48,6 +50,14 @@ class App extends Component {
<Accordion.Content active={activeIndex === 0}>
<StupidCarList />
</Accordion.Content>
<Accordion.Title active={activeIndex === 1} index={1} onClick={this.handleClick}>
<h2 style={{ padding: '0 15px' }}>Card</h2>
</Accordion.Title>
<Accordion.Content active={activeIndex === 1}>
<Card car={cars[0]} />
</Accordion.Content>
</Accordion>
</div>
</div>
......
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