From 723dfee714323efaa932ef69fdc543e0cf315ca4 Mon Sep 17 00:00:00 2001
From: Bereczki Sandor <bsandor453@gmail.com>
Date: Sun, 28 Jan 2018 00:06:57 +0100
Subject: [PATCH] created header, base pages, changes with routes
---
package-lock.json | 30 +++
src/components/App.js | 11 +-
src/components/Header.js | 34 ++-
src/components/Main.js | 258 ++--------------------
src/components/Profile.js | 242 --------------------
src/components/pages/Home.js | 124 ++++++++++-
src/components/pages/NotFound.js | 124 ++++++++++-
src/components/pages/Profile.js | 121 ++++++++++
src/components/pages/Roster.js | 14 --
src/components/pages/Schedule.js | 130 ++++++++++-
src/components/pages/Trainers.js | 121 ++++++++++
src/components/pages/roster/FullRoster.js | 12 -
src/components/pages/roster/Player.js | 11 -
13 files changed, 673 insertions(+), 559 deletions(-)
delete mode 100644 src/components/Profile.js
create mode 100644 src/components/pages/Profile.js
delete mode 100644 src/components/pages/Roster.js
create mode 100644 src/components/pages/Trainers.js
delete mode 100644 src/components/pages/roster/FullRoster.js
delete mode 100644 src/components/pages/roster/Player.js
diff --git a/package-lock.json b/package-lock.json
index 83e05ec..e773c0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1603,6 +1603,11 @@
"chalk": "1.1.3"
}
},
+ "classnames": {
+ "version": "2.2.5",
+ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz",
+ "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0="
+ },
"clean-css": {
"version": "4.1.9",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.9.tgz",
@@ -5601,6 +5606,11 @@
"pretty-format": "20.0.3"
}
},
+ "jquery": {
+ "version": "3.3.1",
+ "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+ "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+ },
"js-base64": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.2.tgz",
@@ -8894,6 +8904,26 @@
"node-forge": "0.6.33"
}
},
+ "semantic-ui-css": {
+ "version": "2.2.12",
+ "resolved": "https://registry.npmjs.org/semantic-ui-css/-/semantic-ui-css-2.2.12.tgz",
+ "integrity": "sha512-RrA3k6hya+kEMDmVLT38SBTDQD8FgdnFi16eMPuQ1N1xUOoBxKzr+HZASb7Zo3xlMvkYqEWvPIp58Wjl6Zcsfg==",
+ "requires": {
+ "jquery": "3.3.1"
+ }
+ },
+ "semantic-ui-react": {
+ "version": "0.77.2",
+ "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-0.77.2.tgz",
+ "integrity": "sha512-VwxY6oGLrBO2xoJiAW/vn40GL4WGZYWxtbrHIKYE1xChTOFlDxyIULMdnuAHOTbrbOYbLQ0X7LpdvEEYmieiJw==",
+ "requires": {
+ "babel-runtime": "6.26.0",
+ "classnames": "2.2.5",
+ "fbjs": "0.8.16",
+ "lodash": "4.17.4",
+ "prop-types": "15.6.0"
+ }
+ },
"semver": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
diff --git a/src/components/App.js b/src/components/App.js
index cc988fb..12b55b4 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,12 +1,11 @@
-import React from 'react';
-import Header from './Header';
-import Main from './Main';
-import Profile from './Profile'
+import React from "react";
+import Header from "./Header";
+import Main from "./Main";
const App = () => (
<div>
- {/*<Header />*/}
- <Profile />
+ <Header />
+ <Main />
</div>
);
diff --git a/src/components/Header.js b/src/components/Header.js
index 0ac6f1d..7d2d389 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,16 +1,28 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React from "react";
+import { NavLink } from "react-router-dom";
+import { Menu, Container, Button, Segment } from "semantic-ui-react";
const Header = () => (
- <header>
- <nav>
- <ul>
- <li><Link to='/'>Home</Link></li>
- <li><Link to='/roster'>Roster</Link></li>
- <li><Link to='/schedule'>Schedule</Link></li>
- </ul>
- </nav>
- </header>
+ <Segment inverted textAlign="center" vertical>
+ <Container>
+ <Menu inverted secondary size="large">
+ <Menu.Item as={NavLink} to="/home">
+ FĹoldal
+ </Menu.Item>
+ <Menu.Item as={NavLink} to="/trainers">
+ KĂŠpzĹk
+ </Menu.Item>
+ <Menu.Item as={NavLink} to="/schedule">
+ Ătemterv
+ </Menu.Item>
+ <Menu.Item position="right">
+ <Button as="a" href="/api/v1/login/authsch/" inverted>
+ BejelentkezĂŠs
+ </Button>
+ </Menu.Item>
+ </Menu>
+ </Container>
+ </Segment>
);
export default Header;
diff --git a/src/components/Main.js b/src/components/Main.js
index 552be51..8c74471 100644
--- a/src/components/Main.js
+++ b/src/components/Main.js
@@ -1,242 +1,20 @@
-import React, { Component } from "react";
-import { NavLink } from "react-router-dom";
-import {
- Button,
- Container,
- Divider,
- Grid,
- Header,
- Icon,
- Image,
- List,
- Menu,
- Segment,
- Visibility
-} from "semantic-ui-react";
-
-const FixedMenu = () => (
- <Menu fixed="top" size="large">
- <Container>
- <Menu.Item as={NavLink} to="/home">
- Home
- </Menu.Item>
- <Menu.Item as={NavLink} to="/roster">
- Roster
- </Menu.Item>
- <Menu.Item as={NavLink} to="/schedule">
- Schedule
- </Menu.Item>
- <Menu.Menu position="right">
- <Menu.Item className="item">
- <Button>Log in</Button>
- </Menu.Item>
- </Menu.Menu>
- </Container>
- </Menu>
+import React from "react";
+import { Switch, Route, Redirect } from "react-router-dom";
+import Home from "./pages/Home";
+import Trainers from "./pages/Trainers";
+import Schedule from "./pages/Schedule";
+import NotFound from "./pages/NotFound";
+
+const Main = () => (
+ <main>
+ <Switch>
+ <Redirect exact from="/" to="/home" />
+ <Route exact path="/home" component={Home} />
+ <Route path="/trainers" component={Trainers} />
+ <Route path="/schedule" component={Schedule} />
+ <Route component={NotFound} />
+ </Switch>
+ </main>
);
-export default class HomepageLayout extends Component {
- state = {};
-
- hideFixedMenu = () => this.setState({ visible: false });
- showFixedMenu = () => this.setState({ visible: true });
-
- render() {
- const { visible } = this.state;
-
- return (
- <div>
- {visible ? <FixedMenu /> : null}
-
- <Visibility
- onBottomPassed={this.showFixedMenu}
- onBottomVisible={this.hideFixedMenu}
- once={false}
- >
- <Segment
- inverted
- textAlign="center"
- style={{ minHeight: 700, padding: "1em 0em" }}
- vertical
- >
- <Container>
- <Menu inverted pointing secondary size="large">
- <Menu.Item as={NavLink} to="/home">
- Home
- </Menu.Item>
- <Menu.Item as={NavLink} to="/roster">
- Roster
- </Menu.Item>
- <Menu.Item as={NavLink} to="/schedule">
- Schedule
- </Menu.Item>
- <Menu.Item position="right">
- <Button as="a" href='/api/v1/login/authsch/' inverted>
- Log in
- </Button>
- </Menu.Item>
- </Menu>
- </Container>
-
- <Container text>
- <Header
- as="h1"
- content="KSZK"
- inverted
- style={{
- fontSize: "4em",
- fontWeight: "normal",
- marginBottom: 0,
- marginTop: "3em"
- }}
- />
- <Header
- as="h2"
- content="Do whatever you want when you want to."
- inverted
- style={{ fontSize: "1.7em", fontWeight: "normal" }}
- />
- <Button primary size="huge">
- Get Started
- <Icon name="right arrow" />
- </Button>
- </Container>
- </Segment>
- </Visibility>
-
- <Segment style={{ padding: "8em 0em" }} vertical>
- <Grid container stackable verticalAlign="middle">
- <Grid.Row>
- <Grid.Column width={8}>
- <Header as="h3" style={{ fontSize: "2em" }}>
- We Help Companies and Companions
- </Header>
- <p style={{ fontSize: "1.33em" }}>
- We can give your company superpowers to do things that they
- never thought possible. Let us delight your customers and
- empower your needs... through pure data analytics.
- </p>
- <Header as="h3" style={{ fontSize: "2em" }}>
- We Make Bananas That Can Dance
- </Header>
- <p style={{ fontSize: "1.33em" }}>
- Yes that's right, you thought it was the stuff of dreams, but
- even bananas can be bioengineered.
- </p>
- </Grid.Column>
- <Grid.Column floated="right" width={6}>
- <Image
- bordered
- rounded
- size="large"
- src="/assets/images/wireframe/white-image.png"
- />
- </Grid.Column>
- </Grid.Row>
- <Grid.Row>
- <Grid.Column textAlign="center">
- <Button size="huge">Check Them Out</Button>
- </Grid.Column>
- </Grid.Row>
- </Grid>
- </Segment>
-
- <Segment style={{ padding: "0em" }} vertical>
- <Grid celled="internally" columns="equal" stackable>
- <Grid.Row textAlign="center">
- <Grid.Column style={{ paddingBottom: "5em", paddingTop: "5em" }}>
- <Header as="h3" style={{ fontSize: "2em" }}>
- "What a Company"
- </Header>
- <p style={{ fontSize: "1.33em" }}>
- That is what they all say about us
- </p>
- </Grid.Column>
- <Grid.Column style={{ paddingBottom: "5em", paddingTop: "5em" }}>
- <Header as="h3" style={{ fontSize: "2em" }}>
- "I shouldn't have gone with their competitor."
- </Header>
- <p style={{ fontSize: "1.33em" }}>
- <Image avatar src="/assets/images/avatar/large/nan.jpg" />
- <b>Nan</b> Chief Fun Officer Acme Toys
- </p>
- </Grid.Column>
- </Grid.Row>
- </Grid>
- </Segment>
-
- <Segment style={{ padding: "8em 0em" }} vertical>
- <Container text>
- <Header as="h3" style={{ fontSize: "2em" }}>
- Breaking The Grid, Grabs Your Attention
- </Header>
- <p style={{ fontSize: "1.33em" }}>
- Instead of focusing on content creation and hard work, we have
- learned how to master the art of doing nothing by providing
- massive amounts of whitespace and generic content that can seem
- massive, monolithic and worth your attention.
- </p>
- <Button as="a" size="large">
- Read More
- </Button>
-
- <Divider
- as="h4"
- className="header"
- horizontal
- style={{ margin: "3em 0em", textTransform: "uppercase" }}
- >
- <a href="#">Case Studies</a>
- </Divider>
-
- <Header as="h3" style={{ fontSize: "2em" }}>
- Did We Tell You About Our Bananas?
- </Header>
- <p style={{ fontSize: "1.33em" }}>
- Yes I know you probably disregarded the earlier boasts as
- non-sequitur filler content, but it's really true. It took years
- of gene splicing and combinatory DNA research, but our bananas can
- really dance.
- </p>
- <Button as="a" size="large">
- I'm Still Quite Interested
- </Button>
- </Container>
- </Segment>
-
- <Segment inverted vertical style={{ padding: "5em 0em" }}>
- <Container>
- <Grid divided inverted stackable>
- <Grid.Row>
- <Grid.Column width={3}>
- <Header inverted as="h4" content="About" />
- <List link inverted>
- <List.Item as="a">Sitemap</List.Item>
- <List.Item as="a">Contact Us</List.Item>
- <List.Item as="a">Religious Ceremonies</List.Item>
- <List.Item as="a">Gazebo Plans</List.Item>
- </List>
- </Grid.Column>
- <Grid.Column width={3}>
- <Header inverted as="h4" content="Services" />
- <List link inverted>
- <List.Item as="a">Banana Pre-Order</List.Item>
- <List.Item as="a">DNA FAQ</List.Item>
- <List.Item as="a">How To Access</List.Item>
- <List.Item as="a">Favorite X-Men</List.Item>
- </List>
- </Grid.Column>
- <Grid.Column width={7}>
- <Header as="h4" inverted>
- Footer Header
- </Header>
- <p>Created by DevTeam 2017.</p>
- </Grid.Column>
- </Grid.Row>
- </Grid>
- </Container>
- </Segment>
- </div>
- );
- }
-}
+export default Main;
diff --git a/src/components/Profile.js b/src/components/Profile.js
deleted file mode 100644
index d101d58..0000000
--- a/src/components/Profile.js
+++ /dev/null
@@ -1,242 +0,0 @@
-import React, { Component } from "react";
-import { NavLink } from "react-router-dom";
-import {
- Button,
- Container,
- Divider,
- Grid,
- Header,
- Icon,
- Image,
- List,
- Menu,
- Segment,
- Visibility
-} from "semantic-ui-react";
-
-const FixedMenu = () => (
- <Menu fixed="top" size="large">
- <Container>
- <Menu.Item as={NavLink} to="/home">
- Home
- </Menu.Item>
- <Menu.Item as={NavLink} to="/roster">
- Roster
- </Menu.Item>
- <Menu.Item as={NavLink} to="/schedule">
- Schedule
- </Menu.Item>
- <Menu.Menu position="right">
- <Menu.Item className="item">
- <Button>Log in</Button>
- </Menu.Item>
- </Menu.Menu>
- </Container>
- </Menu>
-);
-
-export default class HomepageLayout extends Component {
- state = {};
-
- hideFixedMenu = () => this.setState({ visible: false });
- showFixedMenu = () => this.setState({ visible: true });
-
- render() {
- const { visible } = this.state;
-
- return (
- <div>
- {visible ? <FixedMenu /> : null}
-
- <Visibility
- onBottomPassed={this.showFixedMenu}
- onBottomVisible={this.hideFixedMenu}
- once={false}
- >
- <Segment
- inverted
- textAlign="center"
- style={{ minHeight: 700, padding: "1em 0em" }}
- vertical
- >
- <Container>
- <Menu inverted pointing secondary size="large">
- <Menu.Item as={NavLink} to="/home">
- Home
- </Menu.Item>
- <Menu.Item as={NavLink} to="/roster">
- Roster
- </Menu.Item>
- <Menu.Item as={NavLink} to="/schedule">
- Schedule
- </Menu.Item>
- <Menu.Item position="right">
- <Button as="a" inverted>
- Log in
- </Button>
- </Menu.Item>
- </Menu>
- </Container>
-
- <Container text>
- <Header
- as="h1"
- content="Profil"
- inverted
- style={{
- fontSize: "4em",
- fontWeight: "normal",
- marginBottom: 0,
- marginTop: "3em"
- }}
- />
- <Header
- as="h2"
- content="Do whatever you want when you want to."
- inverted
- style={{ fontSize: "1.7em", fontWeight: "normal" }}
- />
- <Button primary size="huge">
- Get Started
- <Icon name="right arrow" />
- </Button>
- </Container>
- </Segment>
- </Visibility>
-
- <Segment style={{ padding: "8em 0em" }} vertical>
- <Grid container stackable verticalAlign="middle">
- <Grid.Row>
- <Grid.Column width={8}>
- <Header as="h3" style={{ fontSize: "2em" }}>
- We Help Companies and Companions
- </Header>
- <p style={{ fontSize: "1.33em" }}>
- We can give your company superpowers to do things that they
- never thought possible. Let us delight your customers and
- empower your needs... through pure data analytics.
- </p>
- <Header as="h3" style={{ fontSize: "2em" }}>
- We Make Bananas That Can Dance
- </Header>
- <p style={{ fontSize: "1.33em" }}>
- Yes that's right, you thought it was the stuff of dreams, but
- even bananas can be bioengineered.
- </p>
- </Grid.Column>
- <Grid.Column floated="right" width={6}>
- <Image
- bordered
- rounded
- size="large"
- src="/assets/images/wireframe/white-image.png"
- />
- </Grid.Column>
- </Grid.Row>
- <Grid.Row>
- <Grid.Column textAlign="center">
- <Button size="huge">Check Them Out</Button>
- </Grid.Column>
- </Grid.Row>
- </Grid>
- </Segment>
-
- <Segment style={{ padding: "0em" }} vertical>
- <Grid celled="internally" columns="equal" stackable>
- <Grid.Row textAlign="center">
- <Grid.Column style={{ paddingBottom: "5em", paddingTop: "5em" }}>
- <Header as="h3" style={{ fontSize: "2em" }}>
- "What a Company"
- </Header>
- <p style={{ fontSize: "1.33em" }}>
- That is what they all say about us
- </p>
- </Grid.Column>
- <Grid.Column style={{ paddingBottom: "5em", paddingTop: "5em" }}>
- <Header as="h3" style={{ fontSize: "2em" }}>
- "I shouldn't have gone with their competitor."
- </Header>
- <p style={{ fontSize: "1.33em" }}>
- <Image avatar src="/assets/images/avatar/large/nan.jpg" />
- <b>Nan</b> Chief Fun Officer Acme Toys
- </p>
- </Grid.Column>
- </Grid.Row>
- </Grid>
- </Segment>
-
- <Segment style={{ padding: "8em 0em" }} vertical>
- <Container text>
- <Header as="h3" style={{ fontSize: "2em" }}>
- Breaking The Grid, Grabs Your Attention
- </Header>
- <p style={{ fontSize: "1.33em" }}>
- Instead of focusing on content creation and hard work, we have
- learned how to master the art of doing nothing by providing
- massive amounts of whitespace and generic content that can seem
- massive, monolithic and worth your attention.
- </p>
- <Button as="a" size="large">
- Read More
- </Button>
-
- <Divider
- as="h4"
- className="header"
- horizontal
- style={{ margin: "3em 0em", textTransform: "uppercase" }}
- >
- <a href="#">Case Studies</a>
- </Divider>
-
- <Header as="h3" style={{ fontSize: "2em" }}>
- Did We Tell You About Our Bananas?
- </Header>
- <p style={{ fontSize: "1.33em" }}>
- Yes I know you probably disregarded the earlier boasts as
- non-sequitur filler content, but it's really true. It took years
- of gene splicing and combinatory DNA research, but our bananas can
- really dance.
- </p>
- <Button as="a" size="large">
- I'm Still Quite Interested
- </Button>
- </Container>
- </Segment>
-
- <Segment inverted vertical style={{ padding: "5em 0em" }}>
- <Container>
- <Grid divided inverted stackable>
- <Grid.Row>
- <Grid.Column width={3}>
- <Header inverted as="h4" content="About" />
- <List link inverted>
- <List.Item as="a">Sitemap</List.Item>
- <List.Item as="a">Contact Us</List.Item>
- <List.Item as="a">Religious Ceremonies</List.Item>
- <List.Item as="a">Gazebo Plans</List.Item>
- </List>
- </Grid.Column>
- <Grid.Column width={3}>
- <Header inverted as="h4" content="Services" />
- <List link inverted>
- <List.Item as="a">Banana Pre-Order</List.Item>
- <List.Item as="a">DNA FAQ</List.Item>
- <List.Item as="a">How To Access</List.Item>
- <List.Item as="a">Favorite X-Men</List.Item>
- </List>
- </Grid.Column>
- <Grid.Column width={7}>
- <Header as="h4" inverted>
- Footer Header
- </Header>
- <p>Created by DevTeam 2017.</p>
- </Grid.Column>
- </Grid.Row>
- </Grid>
- </Container>
- </Segment>
- </div>
- );
- }
-}
diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js
index be5d632..f16a091 100644
--- a/src/components/pages/Home.js
+++ b/src/components/pages/Home.js
@@ -1,9 +1,121 @@
-import React from 'react';
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+import {
+ Button,
+ Container,
+ Grid,
+ Header,
+ Icon,
+ List,
+ Menu,
+ Segment,
+ Visibility
+} from "semantic-ui-react";
-const Home = () => (
- <div>
- <h1>Welcome to the Tornadoes Website!</h1>
- </div>
+const FixedMenu = () => (
+ <Menu fixed="top" size="large">
+ <Container>
+ <Menu.Item as={NavLink} to="/home">
+ Home
+ </Menu.Item>
+ <Menu.Item as={NavLink} to="/roster">
+ Roster
+ </Menu.Item>
+ <Menu.Item as={NavLink} to="/schedule">
+ Schedule
+ </Menu.Item>
+ <Menu.Menu position="right">
+ <Menu.Item className="item">
+ <Button>Log in</Button>
+ </Menu.Item>
+ </Menu.Menu>
+ </Container>
+ </Menu>
);
-export default Home;
+export default class Home extends Component {
+ state = {};
+
+ hideFixedMenu = () => this.setState({ visible: false });
+ showFixedMenu = () => this.setState({ visible: true });
+
+ render() {
+ const { visible } = this.state;
+
+ return (
+ <div>
+ {visible ? <FixedMenu /> : null}
+
+ <Visibility
+ onBottomPassed={this.showFixedMenu}
+ onBottomVisible={this.hideFixedMenu}
+ once={false}
+ >
+ <Segment
+ inverted
+ textAlign="center"
+ style={{ minHeight: 700, padding: "1em 0em" }}
+ vertical
+ >
+ <Container text>
+ <Header
+ as="h1"
+ content="KSZK"
+ inverted
+ style={{
+ fontSize: "4em",
+ fontWeight: "normal",
+ marginBottom: 0,
+ marginTop: "3em"
+ }}
+ />
+ <Header
+ as="h2"
+ content="FĹoldal"
+ inverted
+ style={{ fontSize: "1.7em", fontWeight: "normal" }}
+ />
+ <Button primary size="huge">
+ Get Started
+ <Icon name="right arrow" />
+ </Button>
+ </Container>
+ </Segment>
+ </Visibility>
+
+ <Segment inverted vertical style={{ padding: "5em 0em" }}>
+ <Container>
+ <Grid divided inverted stackable>
+ <Grid.Row>
+ <Grid.Column width={3}>
+ <Header inverted as="h4" content="About" />
+ <List link inverted>
+ <List.Item as="a">Sitemap</List.Item>
+ <List.Item as="a">Contact Us</List.Item>
+ <List.Item as="a">Religious Ceremonies</List.Item>
+ <List.Item as="a">Gazebo Plans</List.Item>
+ </List>
+ </Grid.Column>
+ <Grid.Column width={3}>
+ <Header inverted as="h4" content="Services" />
+ <List link inverted>
+ <List.Item as="a">Banana Pre-Order</List.Item>
+ <List.Item as="a">DNA FAQ</List.Item>
+ <List.Item as="a">How To Access</List.Item>
+ <List.Item as="a">Favorite X-Men</List.Item>
+ </List>
+ </Grid.Column>
+ <Grid.Column width={7}>
+ <Header as="h4" inverted>
+ Footer Header
+ </Header>
+ <p>Created by DevTeam 2017.</p>
+ </Grid.Column>
+ </Grid.Row>
+ </Grid>
+ </Container>
+ </Segment>
+ </div>
+ );
+ }
+}
diff --git a/src/components/pages/NotFound.js b/src/components/pages/NotFound.js
index 78aba0d..69d438b 100644
--- a/src/components/pages/NotFound.js
+++ b/src/components/pages/NotFound.js
@@ -1,9 +1,121 @@
-import React from 'react';
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+import {
+ Button,
+ Container,
+ Grid,
+ Header,
+ Icon,
+ List,
+ Menu,
+ Segment,
+ Visibility
+} from "semantic-ui-react";
-const NotFound = () => (
- <div>
- <p>404: Page not found</p>
- </div>
+const FixedMenu = () => (
+ <Menu fixed="top" size="large">
+ <Container>
+ <Menu.Item as={NavLink} to="/home">
+ Home
+ </Menu.Item>
+ <Menu.Item as={NavLink} to="/roster">
+ Roster
+ </Menu.Item>
+ <Menu.Item as={NavLink} to="/schedule">
+ Schedule
+ </Menu.Item>
+ <Menu.Menu position="right">
+ <Menu.Item className="item">
+ <Button>Log in</Button>
+ </Menu.Item>
+ </Menu.Menu>
+ </Container>
+ </Menu>
);
-export default NotFound;
+export default class NotFound extends Component {
+ state = {};
+
+ hideFixedMenu = () => this.setState({ visible: false });
+ showFixedMenu = () => this.setState({ visible: true });
+
+ render() {
+ const { visible } = this.state;
+
+ return (
+ <div>
+ {visible ? <FixedMenu /> : null}
+
+ <Visibility
+ onBottomPassed={this.showFixedMenu}
+ onBottomVisible={this.hideFixedMenu}
+ once={false}
+ >
+ <Segment
+ inverted
+ textAlign="center"
+ style={{ minHeight: 700, padding: "1em 0em" }}
+ vertical
+ >
+ <Container text>
+ <Header
+ as="h1"
+ content="KSZK"
+ inverted
+ style={{
+ fontSize: "4em",
+ fontWeight: "normal",
+ marginBottom: 0,
+ marginTop: "3em"
+ }}
+ />
+ <Header
+ as="h2"
+ content="404"
+ inverted
+ style={{ fontSize: "1.7em", fontWeight: "normal" }}
+ />
+ <Button primary size="huge">
+ Get Started
+ <Icon name="right arrow" />
+ </Button>
+ </Container>
+ </Segment>
+ </Visibility>
+
+ <Segment inverted vertical style={{ padding: "5em 0em" }}>
+ <Container>
+ <Grid divided inverted stackable>
+ <Grid.Row>
+ <Grid.Column width={3}>
+ <Header inverted as="h4" content="About" />
+ <List link inverted>
+ <List.Item as="a">Sitemap</List.Item>
+ <List.Item as="a">Contact Us</List.Item>
+ <List.Item as="a">Religious Ceremonies</List.Item>
+ <List.Item as="a">Gazebo Plans</List.Item>
+ </List>
+ </Grid.Column>
+ <Grid.Column width={3}>
+ <Header inverted as="h4" content="Services" />
+ <List link inverted>
+ <List.Item as="a">Banana Pre-Order</List.Item>
+ <List.Item as="a">DNA FAQ</List.Item>
+ <List.Item as="a">How To Access</List.Item>
+ <List.Item as="a">Favorite X-Men</List.Item>
+ </List>
+ </Grid.Column>
+ <Grid.Column width={7}>
+ <Header as="h4" inverted>
+ Footer Header
+ </Header>
+ <p>Created by DevTeam 2017.</p>
+ </Grid.Column>
+ </Grid.Row>
+ </Grid>
+ </Container>
+ </Segment>
+ </div>
+ );
+ }
+}
diff --git a/src/components/pages/Profile.js b/src/components/pages/Profile.js
new file mode 100644
index 0000000..c23e159
--- /dev/null
+++ b/src/components/pages/Profile.js
@@ -0,0 +1,121 @@
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+import {
+ Button,
+ Container,
+ Grid,
+ Header,
+ Icon,
+ List,
+ Menu,
+ Segment,
+ Visibility
+} from "semantic-ui-react";
+
+const FixedMenu = () => (
+ <Menu fixed="top" size="large">
+ <Container>
+ <Menu.Item as={NavLink} to="/home">
+ Home
+ </Menu.Item>
+ <Menu.Item as={NavLink} to="/roster">
+ Roster
+ </Menu.Item>
+ <Menu.Item as={NavLink} to="/schedule">
+ Schedule
+ </Menu.Item>
+ <Menu.Menu position="right">
+ <Menu.Item className="item">
+ <Button>Log in</Button>
+ </Menu.Item>
+ </Menu.Menu>
+ </Container>
+ </Menu>
+);
+
+export default class Profile extends Component {
+ state = {};
+
+ hideFixedMenu = () => this.setState({ visible: false });
+ showFixedMenu = () => this.setState({ visible: true });
+
+ render() {
+ const { visible } = this.state;
+
+ return (
+ <div>
+ {visible ? <FixedMenu /> : null}
+
+ <Visibility
+ onBottomPassed={this.showFixedMenu}
+ onBottomVisible={this.hideFixedMenu}
+ once={false}
+ >
+ <Segment
+ inverted
+ textAlign="center"
+ style={{ minHeight: 700, padding: "1em 0em" }}
+ vertical
+ >
+ <Container text>
+ <Header
+ as="h1"
+ content="KSZK"
+ inverted
+ style={{
+ fontSize: "4em",
+ fontWeight: "normal",
+ marginBottom: 0,
+ marginTop: "3em"
+ }}
+ />
+ <Header
+ as="h2"
+ content="Profil"
+ inverted
+ style={{ fontSize: "1.7em", fontWeight: "normal" }}
+ />
+ <Button primary size="huge">
+ Get Started
+ <Icon name="right arrow" />
+ </Button>
+ </Container>
+ </Segment>
+ </Visibility>
+
+ <Segment inverted vertical style={{ padding: "5em 0em" }}>
+ <Container>
+ <Grid divided inverted stackable>
+ <Grid.Row>
+ <Grid.Column width={3}>
+ <Header inverted as="h4" content="About" />
+ <List link inverted>
+ <List.Item as="a">Sitemap</List.Item>
+ <List.Item as="a">Contact Us</List.Item>
+ <List.Item as="a">Religious Ceremonies</List.Item>
+ <List.Item as="a">Gazebo Plans</List.Item>
+ </List>
+ </Grid.Column>
+ <Grid.Column width={3}>
+ <Header inverted as="h4" content="Services" />
+ <List link inverted>
+ <List.Item as="a">Banana Pre-Order</List.Item>
+ <List.Item as="a">DNA FAQ</List.Item>
+ <List.Item as="a">How To Access</List.Item>
+ <List.Item as="a">Favorite X-Men</List.Item>
+ </List>
+ </Grid.Column>
+ <Grid.Column width={7}>
+ <Header as="h4" inverted>
+ Footer Header
+ </Header>
+ <p>Created by DevTeam 2017.</p>
+ </Grid.Column>
+ </Grid.Row>
+ </Grid>
+ </Container>
+ </Segment>
+ </div>
+ );
+ }
+}
diff --git a/src/components/pages/Roster.js b/src/components/pages/Roster.js
deleted file mode 100644
index 6a57933..0000000
--- a/src/components/pages/Roster.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Switch, Route } from 'react-router-dom';
-import FullRoster from './roster/FullRoster';
-import Player from './roster/Player';
-
-const Roster = () => (
- <Switch>
- <Route exact path='/roster' component={FullRoster} />
- <Route path='/roster/:number' component={Player} />
- </Switch>
-);
-
-
-export default Roster;
diff --git a/src/components/pages/Schedule.js b/src/components/pages/Schedule.js
index 4332ee0..2c20022 100644
--- a/src/components/pages/Schedule.js
+++ b/src/components/pages/Schedule.js
@@ -1,13 +1,121 @@
-import React from 'react';
-
-const Schedule = () => (
- <div>
- <ul>
- <li>6/5 @ Evergreens</li>
- <li>6/8 vs Kickers</li>
- <li>6/14 @ United</li>
- </ul>
- </div>
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+import {
+ Button,
+ Container,
+ Grid,
+ Header,
+ Icon,
+ List,
+ Menu,
+ Segment,
+ Visibility
+} from "semantic-ui-react";
+
+const FixedMenu = () => (
+ <Menu fixed="top" size="large">
+ <Container>
+ <Menu.Item as={NavLink} to="/home">
+ Home
+ </Menu.Item>
+ <Menu.Item as={NavLink} to="/roster">
+ Roster
+ </Menu.Item>
+ <Menu.Item as={NavLink} to="/schedule">
+ Schedule
+ </Menu.Item>
+ <Menu.Menu position="right">
+ <Menu.Item className="item">
+ <Button>Log in</Button>
+ </Menu.Item>
+ </Menu.Menu>
+ </Container>
+ </Menu>
);
-export default Schedule;
+export default class Schedule extends Component {
+ state = {};
+
+ hideFixedMenu = () => this.setState({ visible: false });
+ showFixedMenu = () => this.setState({ visible: true });
+
+ render() {
+ const { visible } = this.state;
+
+ return (
+ <div>
+ {visible ? <FixedMenu /> : null}
+
+ <Visibility
+ onBottomPassed={this.showFixedMenu}
+ onBottomVisible={this.hideFixedMenu}
+ once={false}
+ >
+ <Segment
+ inverted
+ textAlign="center"
+ style={{ minHeight: 700, padding: "1em 0em" }}
+ vertical
+ >
+ <Container text>
+ <Header
+ as="h1"
+ content="KSZK"
+ inverted
+ style={{
+ fontSize: "4em",
+ fontWeight: "normal",
+ marginBottom: 0,
+ marginTop: "3em"
+ }}
+ />
+ <Header
+ as="h2"
+ content="Ătemterv"
+ inverted
+ style={{ fontSize: "1.7em", fontWeight: "normal" }}
+ />
+ <Button primary size="huge">
+ Get Started
+ <Icon name="right arrow" />
+ </Button>
+ </Container>
+ </Segment>
+ </Visibility>
+
+ <Segment inverted vertical style={{ padding: "5em 0em" }}>
+ <Container>
+ <Grid divided inverted stackable>
+ <Grid.Row>
+ <Grid.Column width={3}>
+ <Header inverted as="h4" content="About" />
+ <List link inverted>
+ <List.Item as="a">Sitemap</List.Item>
+ <List.Item as="a">Contact Us</List.Item>
+ <List.Item as="a">Religious Ceremonies</List.Item>
+ <List.Item as="a">Gazebo Plans</List.Item>
+ </List>
+ </Grid.Column>
+ <Grid.Column width={3}>
+ <Header inverted as="h4" content="Services" />
+ <List link inverted>
+ <List.Item as="a">Banana Pre-Order</List.Item>
+ <List.Item as="a">DNA FAQ</List.Item>
+ <List.Item as="a">How To Access</List.Item>
+ <List.Item as="a">Favorite X-Men</List.Item>
+ </List>
+ </Grid.Column>
+ <Grid.Column width={7}>
+ <Header as="h4" inverted>
+ Footer Header
+ </Header>
+ <p>Created by DevTeam 2017.</p>
+ </Grid.Column>
+ </Grid.Row>
+ </Grid>
+ </Container>
+ </Segment>
+ </div>
+ );
+ }
+}
diff --git a/src/components/pages/Trainers.js b/src/components/pages/Trainers.js
new file mode 100644
index 0000000..c69eab7
--- /dev/null
+++ b/src/components/pages/Trainers.js
@@ -0,0 +1,121 @@
+import React, { Component } from "react";
+import { NavLink } from "react-router-dom";
+import {
+ Button,
+ Container,
+ Grid,
+ Header,
+ Icon,
+ List,
+ Menu,
+ Segment,
+ Visibility
+} from "semantic-ui-react";
+
+const FixedMenu = () => (
+ <Menu fixed="top" size="large">
+ <Container>
+ <Menu.Item as={NavLink} to="/home">
+ Home
+ </Menu.Item>
+ <Menu.Item as={NavLink} to="/roster">
+ Roster
+ </Menu.Item>
+ <Menu.Item as={NavLink} to="/schedule">
+ Schedule
+ </Menu.Item>
+ <Menu.Menu position="right">
+ <Menu.Item className="item">
+ <Button>Log in</Button>
+ </Menu.Item>
+ </Menu.Menu>
+ </Container>
+ </Menu>
+);
+
+export default class Trainers extends Component {
+ state = {};
+
+ hideFixedMenu = () => this.setState({ visible: false });
+ showFixedMenu = () => this.setState({ visible: true });
+
+ render() {
+ const { visible } = this.state;
+
+ return (
+ <div>
+ {visible ? <FixedMenu /> : null}
+
+ <Visibility
+ onBottomPassed={this.showFixedMenu}
+ onBottomVisible={this.hideFixedMenu}
+ once={false}
+ >
+ <Segment
+ inverted
+ textAlign="center"
+ style={{ minHeight: 700, padding: "1em 0em" }}
+ vertical
+ >
+ <Container text>
+ <Header
+ as="h1"
+ content="KSZK"
+ inverted
+ style={{
+ fontSize: "4em",
+ fontWeight: "normal",
+ marginBottom: 0,
+ marginTop: "3em"
+ }}
+ />
+ <Header
+ as="h2"
+ content="KĂŠpzĹk"
+ inverted
+ style={{ fontSize: "1.7em", fontWeight: "normal" }}
+ />
+ <Button primary size="huge">
+ Get Started
+ <Icon name="right arrow" />
+ </Button>
+ </Container>
+ </Segment>
+ </Visibility>
+
+ <Segment inverted vertical style={{ padding: "5em 0em" }}>
+ <Container>
+ <Grid divided inverted stackable>
+ <Grid.Row>
+ <Grid.Column width={3}>
+ <Header inverted as="h4" content="About" />
+ <List link inverted>
+ <List.Item as="a">Sitemap</List.Item>
+ <List.Item as="a">Contact Us</List.Item>
+ <List.Item as="a">Religious Ceremonies</List.Item>
+ <List.Item as="a">Gazebo Plans</List.Item>
+ </List>
+ </Grid.Column>
+ <Grid.Column width={3}>
+ <Header inverted as="h4" content="Services" />
+ <List link inverted>
+ <List.Item as="a">Banana Pre-Order</List.Item>
+ <List.Item as="a">DNA FAQ</List.Item>
+ <List.Item as="a">How To Access</List.Item>
+ <List.Item as="a">Favorite X-Men</List.Item>
+ </List>
+ </Grid.Column>
+ <Grid.Column width={7}>
+ <Header as="h4" inverted>
+ Footer Header
+ </Header>
+ <p>Created by DevTeam 2017.</p>
+ </Grid.Column>
+ </Grid.Row>
+ </Grid>
+ </Container>
+ </Segment>
+ </div>
+ );
+ }
+}
diff --git a/src/components/pages/roster/FullRoster.js b/src/components/pages/roster/FullRoster.js
deleted file mode 100644
index e30a39b..0000000
--- a/src/components/pages/roster/FullRoster.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-const FullRoster = () => (
- <div>
- <ul>
- <Link to={'/roster/0'}>0</Link>
- </ul>
- </div>
-);
-
-export default FullRoster;
diff --git a/src/components/pages/roster/Player.js b/src/components/pages/roster/Player.js
deleted file mode 100644
index 55d49b7..0000000
--- a/src/components/pages/roster/Player.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-const Player = () => (
- <div>
- Sorry
- <Link to='/roster'>Back</Link>
- </div>
-);
-
-export default Player;
--
GitLab