Skip to content

Commit

Permalink
Offers mockup (#16)
Browse files Browse the repository at this point in the history
* Created mockup with KTM SX info

* Created Form in Detail view

* Added all fields to DetailForm

* Optional Header in Container (for Detail view)

* Added icons to DetailForm

* Added dummy DetailForm calculation

* Style fixes for DetialForm

* Added details to Detail View (owener, short description)

* Added husaberg & freeride to mockup

* Implementing routing for mockup offers

* Small fixes, all tests pass

* Added hardcoded comments to Detail view

* Small fixes after PR #16
  • Loading branch information
jonzee authored and michalmikolajczyk committed Mar 8, 2017
1 parent 12d1ce1 commit fd70b54
Show file tree
Hide file tree
Showing 16 changed files with 629 additions and 206 deletions.
1 change: 1 addition & 0 deletions package.json
Expand Up @@ -65,6 +65,7 @@
"formsy-react": "^0.18.1",
"material-ui": "^0.16.7",
"material-ui-superselectfield": "^1.0.0",
"moment": "^2.17.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-router": "^3.0.2",
Expand Down
174 changes: 151 additions & 23 deletions src/sass/Detail.scss
@@ -1,45 +1,66 @@
.detail {
width: 100%;
min-width: 300px;
padding: 112px 0;
padding: 112px 0 0 0;
display: flex;
flex-direction: row;
justify-content: space-between;
.image {
padding-right: 137px;
margin-right: 100px;
height: 420px;
background-size: cover;
background-position: center center;
img {
margin: auto;
width: 100%;
height: auto;
max-height: 420px;
}
}
.params {
.form-detail {
text-align: left;
flex: 0 0 301px;
padding-right: 61px;
padding-right: 64px;
min-width: 0;
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
text-transform: uppercase;
font-size: 28px;
letter-spacing: 2px;
margin-bottom: 62px;
font-weight: 600;
margin: 54px 0 39px;
}
.trait {
.field {
flex: 1 1 100%;
height: 50px;
display: flex;
font-size: 21px;
letter-spacing: 2px;
margin-bottom: 13px;
.name {
flex: 1 auto;
width: 50%;
font-weight: bolder;
}
.value {
flex: 1 auto;
width: 50%;
text-align: right;
letter-spacing: 3px;
padding-right: 8px;
}
flex-direction: row;
flex-wrap: nowrap;
}
.fa, .material-icons {
flex: 0 0 35px;
line-height: 46px;
font-size: 18px !important;
padding-left: 2px;
}
.date-picker {
flex: 1 1 100%;
}
hr {
width: calc(100% + 35px) !important;
left: -35px !important;
border-bottom-color: black !important;
}
svg {
display: none !important;
}
.price {
font-weight: 700;
padding-left: 35px;
padding-top: 46px;
}
.ride-btn {
display: flex;
Expand All @@ -48,8 +69,8 @@
align-items: center;
width: 100%;
height: 66px;
margin-top: 90px;
border: 1px solid #6B6B6B;
margin-top: 43px;
border: 2px solid #6B6B6B;
font-size: 24px;
letter-spacing: 5px;
background: transparent;
Expand All @@ -61,3 +82,110 @@
}
}
}
.description {
.title {
font-size: 32px;
margin-top: 57px;
margin-left: 30px;
font-weight: 700;
letter-spacing: 4px;
}
.owner {
padding: 34px 30px;
.picture {
display: inline-block;
width: 71px;
height: 71px;
background-size: cover;
}
.owner-details {
display: inline-block;
padding: 10px;
vertical-align: top;
font-size: 24px;
letter-spacing: 0.5px;
}
}
.text {
padding: 17px 10px 30px 30px;
font-size: 21px;
letter-spacing: 2.2px;
line-height: 30px;
font-weight: 300;
}
}
.comments {
padding: 30px 30px 100px;
.comments-cont {
padding: 22px 30px;
.references {
letter-spacing: 1px;
}
.ratings {
margin-top: 45px;
}
.row {
display: flex;
margin-bottom: 17px;
.rate {
display: flex;
flex: 1;
justify-content: space-between;
padding-right: 25px;
.type {
font-style: italic;
letter-spacing: -0.3px;
padding-right: 20px;
}
.stars {
.fa {
font-size: 14px !important;
padding: 4px;
}
}
}
}
.comment {
margin-top: 57px;
.author {
display: flex;
font-size: 15px;
font-weight: 200;
letter-spacing: 1px;
.picture {
width: 35px;
height: 35px;
background-image: url('https://scontent-waw1-1.cdninstagram.com/t51.2885-15/e35/15877344_344661349253204_5404343355553349632_n.jpg');
background-size: cover;
background-position: center center;
}
.fullname {
padding: 9px 0px 0 19px;
}
.location {
padding: 9px 0px 0 19px;
}
}
.text {
padding: 14px 0;
font-size: 13px;
font-style: italic;
letter-spacing: 1.4px;
line-height: 30px;
font-weight: 300;
}
}
}
.view-all {
border-top: 1px solid black;
margin-top: 8px;
height: 54px;
font-size: 13px;
text-decoration: underline;
text-align: center;
padding-top: 21px;
letter-spacing: 0.5px;
cursor: pointer;
box-sizing: border-box;
}
}
1 change: 0 additions & 1 deletion src/sass/Global.scss
Expand Up @@ -69,7 +69,6 @@ ul {
max-width: 1120px;
width: 100%;
margin: auto;
display: flex;
box-sizing: border-box;
}

Expand Down
1 change: 1 addition & 0 deletions src/sass/Header.scss
@@ -1,5 +1,6 @@
.header {
padding: 139px 0 85px 0;
display: flex;
.title {
display: flex;
flex-direction: column;
Expand Down
4 changes: 3 additions & 1 deletion src/sass/Offers.scss
Expand Up @@ -14,7 +14,9 @@
position: relative;
.image {
width: 100%;
height: auto;
height: 100%;
background-size: cover;
background-position: center center;
position: absolute;
bottom: 0;
}
Expand Down
3 changes: 2 additions & 1 deletion src/ts/Container/index.tsx
Expand Up @@ -5,10 +5,11 @@ import Footer from '../Footer';
import Header from '../Header';

export default function Container(props) {
const header = !props.close && <Header />;
return (
<div>
<AppBarVG />
<Header />
{ header }
{props.children}
<Footer />
</div>
Expand Down
69 changes: 69 additions & 0 deletions src/ts/Detail/Comments.tsx
@@ -0,0 +1,69 @@
import * as React from 'react';
import {
FontIcon,
Paper,
} from 'material-ui';
import * as _ from 'lodash';

export default function Comments(props) {
const stars = _.times(5, i => <FontIcon key={i} className="fa fa-star"/>);
return (
<div className="comments">
<Paper style={{ width: '100%' }} zDepth={2} rounded={false}>
<div className="comments-cont">
<div className="references">
55 References
</div>
<div className="ratings">
<div className="row">
<div className="rate">
<div className="type">Bike performance</div>
<div className="stars">{stars}</div>
</div>
<div className="rate">
<div className="type">Communication</div>
<div className="stars">{stars}</div>
</div>
</div>
<div className="row">
<div className="rate">
<div className="type">Mechanical condition</div>
<div className="stars">{stars}</div>
</div>
<div className="rate">
<div className="type">Rating</div>
<div className="stars">{stars}</div>
</div>
</div>
</div>
<div className="comment">
<div className="author">
<div className="picture"></div>
<div className="fullname">Gustaw Mikolajczyk</div>
<div className="location">Warsaw, Poland</div>
</div>
<div className="text">
The motorcycle looks and rides as described. Mint condition, raw power.
<br/>
I can also recommend the owner, he is my dad.
</div>
</div>
<div className="comment">
<div className="author">
<div className="picture"></div>
<div className="fullname">Henryk Mikolajczyk</div>
<div className="location">Warsaw, Poland</div>
</div>
<div className="text">
Aba. By that I mean a comment which is actually quite in-depth, but I can't really
<br/>
articulate it well just yet, because I am only two years old.
</div>
</div>
</div>
<div className="view-all">
<a href="">View all references</a>
</div>
</Paper>
</div>);
}
3 changes: 1 addition & 2 deletions src/ts/Detail/Detail.spec.tsx
Expand Up @@ -6,10 +6,9 @@ import { mountWithTheme } from '../helpers/test-theme';

describe('<Detail />', () => {
it('check for inner components: Container and traits', () => {
const wrapper = mountWithTheme(<Detail />);
const wrapper = mountWithTheme(<Detail params={{ offer: 'husaberg-fe-390-poland-warsaw' }} />);
expect(wrapper.find('Container')).to.have.length(1);
expect(wrapper.find('.image')).to.have.length(1);
expect(wrapper.find('.trait')).to.have.length(5);
expect(wrapper.find('.ride-btn')).to.have.length(1);
});
});

0 comments on commit fd70b54

Please sign in to comment.