Skip to content

Add pictures to landing page #17

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.

Sign up for GitHub

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

Open
TomiHiltunen wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add pictures to landing page #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 93 additions & 19 deletions src/app/components/Landing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import React from 'react';
import Scroll from 'react-scroll';
import { Row } from 'react-flexbox-grid';
import Welcome from './landing/Welcome';
import About from './landing/About';
import Events from './landing/Events';
import Tracks from './landing/Tracks';
import Partners from './landing/Partners';
import Hacktalks from './landing/Hacktalks';
import Media from './landing/Media';
import Volunteer from './landing/Volunteer';
import Footer from './landing/Footer';
import React from "react";
import Scroll from "react-scroll";
import { Row } from "react-flexbox-grid";
import Welcome from "./landing/Welcome";
import About from "./landing/About";
import Events from "./landing/Events";
import Tracks from "./landing/Tracks";
import Partners from "./landing/Partners";
import Hacktalks from "./landing/Hacktalks";
import Media from "./landing/Media";
import Volunteer from "./landing/Volunteer";
import Footer from "./landing/Footer";
import Pictures from "./landing/Pictures";

class Landing extends React.Component {
render() {
Expand Down Expand Up @@ -40,13 +41,83 @@ class Landing extends React.Component {
</nav>
<nav className="junction_menu">
<ul>
<li><Scroll.Link activeClass="active" to="welcome" spy={true} smooth={true} duration={500}>Welcome</Scroll.Link></li>
<li><Scroll.Link activeClass="active" to="about" spy={true} smooth={true} duration={500}>About</Scroll.Link></li>
<li><Scroll.Link activeClass="active" to="tracks" spy={true} smooth={true} duration={500}>Tracks</Scroll.Link></li>
<li><Scroll.Link activeClass="active" to="partners" spy={true} smooth={true} duration={500}>Partners</Scroll.Link></li>
<li><Scroll.Link activeClass="active" to="hacktalks" spy={true} smooth={true} duration={500}>FAQ</Scroll.Link></li>
<li><Scroll.Link activeClass="active" to="events" spy={true} smooth={true} duration={500}>Special Events</Scroll.Link></li>
<li><Scroll.Link activeClass="active" to="media" spy={true} smooth={true} duration={500}>Media</Scroll.Link></li>
<li>
<Scroll.Link
activeClass="active"
to="welcome"
spy={true}
smooth={true}
duration={500}
>
Welcome
</Scroll.Link>
</li>
<li>
<Scroll.Link
activeClass="active"
to="about"
spy={true}
smooth={true}
duration={500}
>
About
</Scroll.Link>
</li>
<li>
<Scroll.Link
activeClass="active"
to="tracks"
spy={true}
smooth={true}
duration={500}
>
Tracks
</Scroll.Link>
</li>
<li>
<Scroll.Link
activeClass="active"
to="partners"
spy={true}
smooth={true}
duration={500}
>
Partners
</Scroll.Link>
</li>
<li>
<Scroll.Link
activeClass="active"
to="hacktalks"
spy={true}
smooth={true}
duration={500}
>
FAQ
</Scroll.Link>
</li>
<li>
<Scroll.Link
activeClass="active"
to="events"
spy={true}
smooth={true}
duration={500}
>
Special Events
</Scroll.Link>
</li>
<li>
<Scroll.Link
activeClass="active"
to="media"
spy={true}
smooth={true}
duration={500}
>
Media
</Scroll.Link>
</li>
</ul>
</nav>
<div id="welcome">
Expand All @@ -73,6 +144,9 @@ class Landing extends React.Component {
<div id="volunteer">
<Volunteer />
</div>
<div id="picture">
<Pictures />
</div>
<div id="footer">
<Footer />
</div>
Expand Down
9 changes: 9 additions & 0 deletions src/app/components/landing/Pictures.c.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.block {
background-color: #232323;
}

.image {
display: block;
max-width: 100%;
padding-top: 16px;
}
135 changes: 35 additions & 100 deletions src/app/components/landing/Pictures.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,105 +1,40 @@
import React from "react";
import Slider from "react-slick";
import { Grid, Row, Col } from "react-flexbox-grid";
import Scroll from "react-scroll";
import { Row, Col } from "react-flexbox-grid";
import Block from "../viewBlocks/Block";
import BlockHeader from "../viewBlocks/BlockHeader";
import styles from "./Pictures.c.scss";

const settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
initialSlide: 0,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
initialSlide: 2,
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
},
},
],
};
const images = [
"http://lorempixel.com/400/200/",
"http://lorempixel.com/400/200/",
"http://lorempixel.com/400/200/",
"http://lorempixel.com/400/200/",
"http://lorempixel.com/400/200/",
"http://lorempixel.com/400/200/",
"http://lorempixel.com/400/200/",
"http://lorempixel.com/400/200/",
"http://lorempixel.com/400/200/",
"http://lorempixel.com/400/200/",
"http://lorempixel.com/400/200/",
"http://lorempixel.com/400/200/",
];

const Pictures = () =>
<Grid fluid>
<Row start="xs" className="junction_media">
<Col xsOffset={1} xs={5}>
<h1 className="text-underline">IN PICTURES</h1>
</Col>
</Row>
<Row start="xs">
<Col xsOffset={1} xs={9}>
<div className="picture_container">
<Slider {...settings}>
<div>
<img
className="responsive picture_container_image"
src="http://lorempixel.com/400/200/"
/>
</div>
<div>
<img
className="responsive picture_container_image"
src="http://lorempixel.com/400/200/"
/>
</div>
<div>
<img
className="responsive picture_container_image"
src="http://lorempixel.com/400/200/"
/>
</div>
<div>
<img
className="responsive picture_container_image"
src="http://lorempixel.com/400/200/"
/>
</div>
<div>
<img
className="responsive picture_container_image"
src="http://lorempixel.com/400/200/"
/>
</div>
<div>
<img
className="responsive picture_container_image"
src="http://lorempixel.com/400/200/"
/>
</div>
<div>
<img
className="responsive picture_container_image"
src="http://lorempixel.com/400/200/"
/>
</div>
<div>
<img
className="responsive picture_container_image"
src="http://lorempixel.com/400/200/"
/>
</div>
</Slider>
</div>
</Col>
</Row>
</Grid>;
const Pictures = () => (
<Scroll.Element name="pictures">
<Block className={styles.block}>
<BlockHeader title="IN PICTURES" />
<Row start="xs">
{images.map((url, index) => (
<Col xs={6} sm={4} md={2} key={index}>
<div>
<img src={url} className={styles.image} />
</div>
</Col>
))}
</Row>
</Block>
</Scroll.Element>
);

export default Pictures;