Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Offers mockup #16

Merged
merged 13 commits into from Mar 8, 2017
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;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

?? what's this for?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's convenient way to keep images with different dimensions in the same frame (I assume that pictures from users have different sizes)

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep, but do we use it as backgrounds? Is that better then <img>?

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.
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😂
(laughing at my own jokes)

</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);
});
});