Skip to content

Commit 5cbf820

Browse files
committed
Rename folder, implement browse page
1 parent 277ce3a commit 5cbf820

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+463
-1667
lines changed

boomrentshop/README.md

-1,623
This file was deleted.

boomrentshop/src/components/App/index.js

-23
This file was deleted.

boomrentshop/src/components/Home/index.js

-13
This file was deleted.

boomrentshop/src/components/NotFound/style.css

Whitespace-only changes.

boomrentshop/src/components/layout/style.css

-4
This file was deleted.
File renamed without changes.

selling-website/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
#Instruction
2+
#Dev
3+
npm install
4+
npm start
5+
#Production
6+
npm run build
File renamed without changes.
File renamed without changes.

boomrentshop/public/index.html renamed to selling-website/public/index.html

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
77
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
88
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
9+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
10+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
911
<!--
1012
Notice the use of %PUBLIC_URL% in the tag above.
1113
It will be replaced with the URL of the `public` folder during the build.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import Header from '../Layout/header';
3+
import Footer from '../Layout/footer';
4+
import Home from '../Home/';
5+
import Browse from '../Browse/';
6+
7+
import './style.css';
8+
9+
const App = (props) => (
10+
<div className="main-container">
11+
<Header />
12+
<div className="body-wrapper" id="mainContainer">
13+
{(() => {
14+
switch (props.location.pathname) {
15+
case '/browse-items':
16+
return <Browse />
17+
default :
18+
return <Home />
19+
}
20+
})()}
21+
</div>
22+
<Footer />
23+
</div>
24+
)
25+
26+
export default App

boomrentshop/src/components/App/style.css renamed to selling-website/src/components/App/style.css

+10-4
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,18 @@
2323
to { transform: rotate(360deg); }
2424
}
2525

26-
.main-container {
26+
div#mainContainer {
27+
margin-top: 110px;
2728
}
2829

29-
.header-container {
30+
.main-container {
31+
min-height: 100vh;
32+
display: flex;
33+
display: -webkit-flex; /* Safari */
34+
flex-direction: column;
35+
-webkit-flex-direction: column; /* Safari 6.1+ */
3036
}
3137

32-
div#mainContainer {
33-
margin-top: 110px;
38+
.body-wrapper {
39+
flex: 1;
3440
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, { PropTypes } from 'react';
2+
import Slider from 'react-slick';
3+
import './style.css';
4+
import Search from '../Layout/search';
5+
6+
const Browse = ({ }) => (
7+
<div className="browse-container">
8+
<div className="left-container">
9+
<div className="cat-wrapper">
10+
<p>CATEGORIES:</p>
11+
<a href="#">This is Category 1</a>
12+
<a href="#">This is Category 2</a>
13+
<a href="#">This is Category 3</a>
14+
<a href="#">This is Category 4</a>
15+
<a href="#">This is Category 5</a>
16+
<a href="#">This is Category 6</a>
17+
</div>
18+
</div>
19+
<div className="center-container">
20+
<Search />
21+
</div>
22+
<div className="right-container">
23+
24+
</div>
25+
<div className="main-content-wrapper">
26+
</div>
27+
</div>
28+
)
29+
30+
Browse.propTypes = {
31+
}
32+
33+
export default Browse
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.browse-container {
2+
display: -webkit-flex;
3+
display: flex;
4+
flex-flow: nowrap row;
5+
-webkit-flex-flow: nowrap row;
6+
margin: 0;
7+
font-size: 12px;
8+
}
9+
10+
@media only screen and (min-width: 992px) {
11+
.browse-container {
12+
font-size: 16px;
13+
}
14+
}
15+
16+
.browse-container .left-container {
17+
width: 20%;
18+
margin: 5px;
19+
}
20+
21+
.left-container .cat-wrapper {
22+
display: -webkit-flex;
23+
display: flex;
24+
flex-flow: wrap column;
25+
-webkit-flex-flow: wrap column;
26+
}
27+
28+
.left-container .cat-wrapper a {
29+
margin: 5px 0;
30+
}
31+
32+
.browse-container .center-container {
33+
width: 60%;
34+
}
35+
36+
.browse-container .right-container {
37+
width: 20%;
38+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import React, { PropTypes } from 'react';
2+
import Slider from 'react-slick';
3+
import './style.css';
4+
import Search from '../Layout/search';
5+
6+
const settings = {
7+
dots: false,
8+
infinite: false,
9+
speed: 500,
10+
slidesToShow: 4,
11+
slidesToScroll:1,
12+
arrows: true
13+
};
14+
15+
const Home = ({ }) => (
16+
<div className="home-container">
17+
<div className="slogan-wrapper">
18+
<p>Borrow stuff you need.</p>
19+
<p>Lend stuff you don't.</p>
20+
</div>
21+
<Search />
22+
<div className="main-content-wrapper">
23+
<h3>Recently Viewed Items:</h3>
24+
<Slider {...settings}>
25+
<div className="carousel-item-container">
26+
<div className="img-wrapper">
27+
<img src="https://fat-lama-all-images-resized.s3-eu-west-1.amazonaws.com/images/medium/playstation-vr-03430626.jpg" width="100%" height="150px"/>
28+
</div>
29+
<div className="item-details-wrapper">
30+
<a target="_blank" href="#" className="production">
31+
Playstation VR
32+
</a>
33+
<a target="_blank" className="author" href="#">
34+
By HoaDang
35+
</a>
36+
</div>
37+
</div>
38+
<div className="carousel-item-container">
39+
<div className="img-wrapper">
40+
<img src="https://fat-lama-all-images-resized.s3-eu-west-1.amazonaws.com/images/medium/canon-eos-7d-camera--11067947.jpg" width="100%" height="150px"/>
41+
</div>
42+
<div className="item-details-wrapper">
43+
<a target="_blank" href="#" className="production">
44+
Playstation VR
45+
</a>
46+
<a target="_blank" className="author" href="#">
47+
By HoaDang
48+
</a>
49+
</div>
50+
</div>
51+
<div className="carousel-item-container">
52+
<div className="img-wrapper">
53+
<img src="https://fat-lama-all-images-resized.s3-eu-west-1.amazonaws.com/images/medium/pioneer-djm850-mixer-11796811.jpg" width="100%" height="150px"/>
54+
</div>
55+
<div className="item-details-wrapper">
56+
<a target="_blank" href="#" className="production">
57+
Playstation VR
58+
</a>
59+
<a target="_blank" className="author" href="#">
60+
By HoaDang
61+
</a>
62+
</div>
63+
</div>
64+
<div className="carousel-item-container">
65+
<div className="img-wrapper">
66+
<img src="https://fat-lama-all-images-resized.s3-eu-west-1.amazonaws.com/images/medium/samsung-360-camera-73848770.jpg" width="100%" height="150px"/>
67+
</div>
68+
<div className="item-details-wrapper">
69+
<a target="_blank" href="#" className="production">
70+
Playstation VR
71+
</a>
72+
<a target="_blank" className="author" href="#">
73+
By HoaDang
74+
</a>
75+
</div>
76+
</div>
77+
</Slider>
78+
</div>
79+
80+
<div className="main-content-wrapper">
81+
<h3>FEATURED LISTINGS:</h3>
82+
<Slider {...settings}>
83+
<div className="carousel-item-container">
84+
<div className="img-wrapper">
85+
<img src="https://fat-lama-all-images-resized.s3-eu-west-1.amazonaws.com/images/medium/playstation-vr-03430626.jpg" width="100%" height="150px"/>
86+
</div>
87+
<div className="item-details-wrapper">
88+
<a target="_blank" href="#" className="production">
89+
Playstation VR
90+
</a>
91+
<a target="_blank" className="author" href="#">
92+
By HoaDang
93+
</a>
94+
</div>
95+
</div>
96+
<div className="carousel-item-container">
97+
<div className="img-wrapper">
98+
<img src="https://fat-lama-all-images-resized.s3-eu-west-1.amazonaws.com/images/medium/canon-eos-7d-camera--11067947.jpg" width="100%" height="150px"/>
99+
</div>
100+
<div className="item-details-wrapper">
101+
<a target="_blank" href="#" className="production">
102+
Playstation VR
103+
</a>
104+
<a target="_blank" className="author" href="#">
105+
By HoaDang
106+
</a>
107+
</div>
108+
</div>
109+
<div className="carousel-item-container">
110+
<div className="img-wrapper">
111+
<img src="https://fat-lama-all-images-resized.s3-eu-west-1.amazonaws.com/images/medium/pioneer-djm850-mixer-11796811.jpg" width="100%" height="150px"/>
112+
</div>
113+
<div className="item-details-wrapper">
114+
<a target="_blank" href="#" className="production">
115+
Playstation VR
116+
</a>
117+
<a target="_blank" className="author" href="#">
118+
By HoaDang
119+
</a>
120+
</div>
121+
</div>
122+
<div className="carousel-item-container">
123+
<div className="img-wrapper">
124+
<img src="https://fat-lama-all-images-resized.s3-eu-west-1.amazonaws.com/images/medium/samsung-360-camera-73848770.jpg" width="100%" height="150px"/>
125+
</div>
126+
<div className="item-details-wrapper">
127+
<a target="_blank" href="#" className="production">
128+
Playstation VR
129+
</a>
130+
<a target="_blank" className="author" href="#">
131+
By HoaDang
132+
</a>
133+
</div>
134+
</div>
135+
<div className="carousel-item-container">
136+
<div className="img-wrapper">
137+
<img src="https://fat-lama-all-images-resized.s3-eu-west-1.amazonaws.com/images/medium/epson-ebx31-projector-79645197.jpg" width="100%" height="150px"/>
138+
</div>
139+
<div className="item-details-wrapper">
140+
<a target="_blank" href="#" className="production">
141+
Playstation VR
142+
</a>
143+
<a target="_blank" className="author" href="#">
144+
By HoaDang
145+
</a>
146+
</div>
147+
</div>
148+
<div className="carousel-item-container">
149+
<div className="img-wrapper">
150+
<img src="https://fat-lama-all-images-resized.s3-eu-west-1.amazonaws.com/images/medium/dji-phantom-4-16189153.jpg" width="100%" height="150px"/>
151+
</div>
152+
<div className="item-details-wrapper">
153+
<a target="_blank" href="#" className="production">
154+
Playstation VR
155+
</a>
156+
<a target="_blank" className="author" href="#">
157+
By HoaDang
158+
</a>
159+
</div>
160+
</div>
161+
</Slider>
162+
</div>
163+
</div>
164+
)
165+
166+
Home.propTypes = {
167+
}
168+
169+
export default Home

0 commit comments

Comments
 (0)