Skip to content

Commit 529f6b5

Browse files
TomiHiltunenTomiHiltunen
committed
add pictures to landing page
1 parent 14085d8 commit 529f6b5

3 files changed

Lines changed: 137 additions & 119 deletions

File tree

‎src/app/components/Landing.js‎

Lines changed: 93 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import React from 'react';
2-
import Scroll from 'react-scroll';
3-
import { Row } from 'react-flexbox-grid';
4-
import Welcome from './landing/Welcome';
5-
import About from './landing/About';
6-
import Events from './landing/Events';
7-
import Tracks from './landing/Tracks';
8-
import Partners from './landing/Partners';
9-
import Hacktalks from './landing/Hacktalks';
10-
import Media from './landing/Media';
11-
import Volunteer from './landing/Volunteer';
12-
import Footer from './landing/Footer';
1+
import React from "react";
2+
import Scroll from "react-scroll";
3+
import { Row } from "react-flexbox-grid";
4+
import Welcome from "./landing/Welcome";
5+
import About from "./landing/About";
6+
import Events from "./landing/Events";
7+
import Tracks from "./landing/Tracks";
8+
import Partners from "./landing/Partners";
9+
import Hacktalks from "./landing/Hacktalks";
10+
import Media from "./landing/Media";
11+
import Volunteer from "./landing/Volunteer";
12+
import Footer from "./landing/Footer";
13+
import Pictures from "./landing/Pictures";
1314

1415
class Landing extends React.Component {
1516
render() {
@@ -40,13 +41,83 @@ class Landing extends React.Component {
4041
</nav>
4142
<nav className="junction_menu">
4243
<ul>
43-
<li><Scroll.Link activeClass="active" to="welcome" spy={true} smooth={true} duration={500}>Welcome</Scroll.Link></li>
44-
<li><Scroll.Link activeClass="active" to="about" spy={true} smooth={true} duration={500}>About</Scroll.Link></li>
45-
<li><Scroll.Link activeClass="active" to="tracks" spy={true} smooth={true} duration={500}>Tracks</Scroll.Link></li>
46-
<li><Scroll.Link activeClass="active" to="partners" spy={true} smooth={true} duration={500}>Partners</Scroll.Link></li>
47-
<li><Scroll.Link activeClass="active" to="hacktalks" spy={true} smooth={true} duration={500}>FAQ</Scroll.Link></li>
48-
<li><Scroll.Link activeClass="active" to="events" spy={true} smooth={true} duration={500}>Special Events</Scroll.Link></li>
49-
<li><Scroll.Link activeClass="active" to="media" spy={true} smooth={true} duration={500}>Media</Scroll.Link></li>
44+
<li>
45+
<Scroll.Link
46+
activeClass="active"
47+
to="welcome"
48+
spy={true}
49+
smooth={true}
50+
duration={500}
51+
>
52+
Welcome
53+
</Scroll.Link>
54+
</li>
55+
<li>
56+
<Scroll.Link
57+
activeClass="active"
58+
to="about"
59+
spy={true}
60+
smooth={true}
61+
duration={500}
62+
>
63+
About
64+
</Scroll.Link>
65+
</li>
66+
<li>
67+
<Scroll.Link
68+
activeClass="active"
69+
to="tracks"
70+
spy={true}
71+
smooth={true}
72+
duration={500}
73+
>
74+
Tracks
75+
</Scroll.Link>
76+
</li>
77+
<li>
78+
<Scroll.Link
79+
activeClass="active"
80+
to="partners"
81+
spy={true}
82+
smooth={true}
83+
duration={500}
84+
>
85+
Partners
86+
</Scroll.Link>
87+
</li>
88+
<li>
89+
<Scroll.Link
90+
activeClass="active"
91+
to="hacktalks"
92+
spy={true}
93+
smooth={true}
94+
duration={500}
95+
>
96+
FAQ
97+
</Scroll.Link>
98+
</li>
99+
<li>
100+
<Scroll.Link
101+
activeClass="active"
102+
to="events"
103+
spy={true}
104+
smooth={true}
105+
duration={500}
106+
>
107+
Special Events
108+
</Scroll.Link>
109+
</li>
110+
<li>
111+
<Scroll.Link
112+
activeClass="active"
113+
to="media"
114+
spy={true}
115+
smooth={true}
116+
duration={500}
117+
>
118+
Media
119+
</Scroll.Link>
120+
</li>
50121
</ul>
51122
</nav>
52123
<div id="welcome">
@@ -73,6 +144,9 @@ class Landing extends React.Component {
73144
<div id="volunteer">
74145
<Volunteer />
75146
</div>
147+
<div id="picture">
148+
<Pictures />
149+
</div>
76150
<div id="footer">
77151
<Footer />
78152
</div>

‎src/app/components/landing/Pictures.c.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.block {
2+
background-color: #232323;
3+
}
4+
5+
.image {
6+
display: block;
7+
max-width: 100%;
8+
padding-top: 16px;
9+
}

‎src/app/components/landing/Pictures.js‎

Lines changed: 35 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,40 @@
11
import React from "react";
2-
import Slider from "react-slick";
3-
import { Grid, Row, Col } from "react-flexbox-grid";
2+
import Scroll from "react-scroll";
3+
import { Row, Col } from "react-flexbox-grid";
4+
import Block from "../viewBlocks/Block";
5+
import BlockHeader from "../viewBlocks/BlockHeader";
6+
import styles from "./Pictures.c.scss";
47

5-
const settings = {
6-
dots: true,
7-
infinite: false,
8-
speed: 500,
9-
slidesToShow: 4,
10-
slidesToScroll: 4,
11-
initialSlide: 0,
12-
responsive: [
13-
{
14-
breakpoint: 1024,
15-
settings: {
16-
slidesToShow: 3,
17-
slidesToScroll: 3,
18-
infinite: true,
19-
dots: true,
20-
},
21-
},
22-
{
23-
breakpoint: 600,
24-
settings: {
25-
slidesToShow: 2,
26-
slidesToScroll: 2,
27-
initialSlide: 2,
28-
},
29-
},
30-
{
31-
breakpoint: 480,
32-
settings: {
33-
slidesToShow: 1,
34-
slidesToScroll: 1,
35-
},
36-
},
37-
],
38-
};
8+
const images = [
9+
"http://lorempixel.com/400/200/",
10+
"http://lorempixel.com/400/200/",
11+
"http://lorempixel.com/400/200/",
12+
"http://lorempixel.com/400/200/",
13+
"http://lorempixel.com/400/200/",
14+
"http://lorempixel.com/400/200/",
15+
"http://lorempixel.com/400/200/",
16+
"http://lorempixel.com/400/200/",
17+
"http://lorempixel.com/400/200/",
18+
"http://lorempixel.com/400/200/",
19+
"http://lorempixel.com/400/200/",
20+
"http://lorempixel.com/400/200/",
21+
];
3922

40-
const Pictures = () =>
41-
<Grid fluid>
42-
<Row start="xs" className="junction_media">
43-
<Col xsOffset={1} xs={5}>
44-
<h1 className="text-underline">IN PICTURES</h1>
45-
</Col>
46-
</Row>
47-
<Row start="xs">
48-
<Col xsOffset={1} xs={9}>
49-
<div className="picture_container">
50-
<Slider {...settings}>
51-
<div>
52-
<img
53-
className="responsive picture_container_image"
54-
src="http://lorempixel.com/400/200/"
55-
/>
56-
</div>
57-
<div>
58-
<img
59-
className="responsive picture_container_image"
60-
src="http://lorempixel.com/400/200/"
61-
/>
62-
</div>
63-
<div>
64-
<img
65-
className="responsive picture_container_image"
66-
src="http://lorempixel.com/400/200/"
67-
/>
68-
</div>
69-
<div>
70-
<img
71-
className="responsive picture_container_image"
72-
src="http://lorempixel.com/400/200/"
73-
/>
74-
</div>
75-
<div>
76-
<img
77-
className="responsive picture_container_image"
78-
src="http://lorempixel.com/400/200/"
79-
/>
80-
</div>
81-
<div>
82-
<img
83-
className="responsive picture_container_image"
84-
src="http://lorempixel.com/400/200/"
85-
/>
86-
</div>
87-
<div>
88-
<img
89-
className="responsive picture_container_image"
90-
src="http://lorempixel.com/400/200/"
91-
/>
92-
</div>
93-
<div>
94-
<img
95-
className="responsive picture_container_image"
96-
src="http://lorempixel.com/400/200/"
97-
/>
98-
</div>
99-
</Slider>
100-
</div>
101-
</Col>
102-
</Row>
103-
</Grid>;
23+
const Pictures = () => (
24+
<Scroll.Element name="pictures">
25+
<Block className={styles.block}>
26+
<BlockHeader title="IN PICTURES" />
27+
<Row start="xs">
28+
{images.map((url, index) => (
29+
<Col xs={6} sm={4} md={2} key={index}>
30+
<div>
31+
<img src={url} className={styles.image} />
32+
</div>
33+
</Col>
34+
))}
35+
</Row>
36+
</Block>
37+
</Scroll.Element>
38+
);
10439

10540
export default Pictures;

0 commit comments

Comments
 (0)