);
};
diff --git a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
index 9efdf4ad0..95043b515 100644
--- a/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
+++ b/client/coral-admin/src/containers/Install/components/Steps/InitialStep.js
@@ -1,18 +1,17 @@
import React from 'react';
-// import styles from './style.css';
+import styles from './style.css';
import {Button} from 'coral-ui';
const InitialStep = props => {
const {nextStep} = props;
return (
-
-
Welcome to the Coral Project
+
- The remainder of the Talk installation will take about ten minutes.
- Once you complete the following three steps, you will have a free
- installation and provision of Mongo and Redis.
+ The remainder of the Talk installation will take about ten minutes.
+ Once you complete the following three steps, you will have a free
+ installation and provision of Mongo and Redis.
-
Get Started
+
Get Started
);
};
diff --git a/client/coral-admin/src/containers/Install/components/Steps/style.css b/client/coral-admin/src/containers/Install/components/Steps/style.css
new file mode 100644
index 000000000..5284b3470
--- /dev/null
+++ b/client/coral-admin/src/containers/Install/components/Steps/style.css
@@ -0,0 +1,30 @@
+.step {
+
+ p {
+ max-width: 450px;
+ margin: 10px auto 30px;
+ }
+
+ > button {
+ min-width: 140px;
+ }
+
+ form {
+ max-width: 300px;
+ margin: 30px auto;
+
+ label {
+ text-align: left;
+ display: block;
+ }
+
+ input {
+ border: solid 1px rgba(0, 0, 0, 0.23);
+ padding: 10px 2px;
+ border-radius: 3px;
+ width: 100%;
+ box-sizing: border-box;
+ margin: 10px 0;
+ }
+ }
+}
diff --git a/client/coral-admin/src/containers/Install/style.css b/client/coral-admin/src/containers/Install/style.css
index e69de29bb..90c62c20e 100644
--- a/client/coral-admin/src/containers/Install/style.css
+++ b/client/coral-admin/src/containers/Install/style.css
@@ -0,0 +1,12 @@
+.Install {
+ max-width: 900px;
+ margin: 0 auto;
+ text-align: center;
+ padding: 40px 0;
+
+ h2 {
+ font-size: 2em;
+ font-weight: 500;
+ margin: 0;
+ }
+}
diff --git a/client/coral-admin/src/reducers/install.js b/client/coral-admin/src/reducers/install.js
index 95febb887..d97c7f236 100644
--- a/client/coral-admin/src/reducers/install.js
+++ b/client/coral-admin/src/reducers/install.js
@@ -9,7 +9,6 @@ const initialState = Map({
export default function auth (state = initialState, action) {
switch (action.type) {
case actions.NEXT_STEP:
- console.log(state)
return state
.set('step', state.get('step') + 1);
case actions.PREVIOUS_STEP:
diff --git a/client/coral-ui/components/Wizard.js b/client/coral-ui/components/Wizard.js
index 1ba6e56a6..e598b3c30 100644
--- a/client/coral-ui/components/Wizard.js
+++ b/client/coral-ui/components/Wizard.js
@@ -3,7 +3,7 @@ import React, {PropTypes} from 'react';
const Wizard = (props) => {
const {children, currentStep, nextStep, previousStep, goToStep, className = ''} = props;
return (
-
+
{React.Children.toArray(children)
.filter((child, i) => i === currentStep)
.map((child, i) =>
@@ -15,7 +15,7 @@ const Wizard = (props) => {
goToStep
})
)}
-
+
);
};
diff --git a/client/coral-ui/components/WizardNav.css b/client/coral-ui/components/WizardNav.css
new file mode 100644
index 000000000..12b9b3841
--- /dev/null
+++ b/client/coral-ui/components/WizardNav.css
@@ -0,0 +1,109 @@
+.WizardNav {
+ ul {
+ list-style: none;
+ }
+
+ li {
+ border: solid 1px #DFDFDF;
+ background-color: #F0F0F0;
+ display: inline-block;
+ padding: 10px;
+ margin-right: 10px;
+ color: #A7A7A7;
+ position: relative;
+ padding-left: 40px;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &.active {
+ background-color: #FFFFFF;
+ color: #636363;
+ font-weight: 500;
+
+ span {
+ &::after {
+ border-color: transparent transparent transparent #FFFFFF;
+ }
+ }
+ }
+
+ span {
+ padding: 10px 20px;
+ margin-right: 10px;
+ position: absolute;
+ top: -1px;
+ right: -51px;
+ z-index: 10;
+
+ &::before {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ border: 23px solid #DFDFDF;
+ border-color: transparent transparent transparent #DFDFDF;
+ top: 0;
+ left: 0;
+ }
+
+ &::after {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ border: 23px solid white;
+ border-color: transparent transparent transparent #f0f0f0;
+ top: 0;
+ left: -1px;
+ }
+ }
+
+ &::before {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ border: 23px solid #DFDFDF;
+ border-color: transparent transparent transparent #DFDFDF;
+ top: 0;
+ left: 0;
+ }
+
+ &::after {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ border: 23px solid white;
+ border-color: transparent transparent transparent #fafafa;
+ top: 0;
+ left: -1px;
+ }
+/*
+ &::before {
+ position: absolute;
+ top: 0;
+ left: -1px;
+ display: block;
+ border-left: 23px solid white;
+ border-top: 23px solid transparent;
+ border-bottom: 23px solid transparent;
+ width: 0;
+ height: 0;
+ content: " ";
+ }
+
+ &::after{
+ z-index: 1;
+ position: absolute;
+ top: 0;
+ right: -23px;
+ display: block;
+ border-left: 23px solid #f0f0f0;
+ border-top: 23px solid transparent;
+ border-bottom: 23px solid transparent;
+ width: 0;
+ height: 0;
+ content: " ";
+ }*/
+
+ }
+}
diff --git a/client/coral-ui/components/WizardNav.js b/client/coral-ui/components/WizardNav.js
new file mode 100644
index 000000000..200adb216
--- /dev/null
+++ b/client/coral-ui/components/WizardNav.js
@@ -0,0 +1,29 @@
+import React, {PropTypes} from 'react';
+import styles from './WizardNav.css';
+
+const WizardNav = props => {
+ const {goToStep, currentStep, items} = props;
+ return (
+
+
+ {
+ items.map((item, i) => (
+ goToStep(item.step)}>
+ {item.text}
+
+ ))
+ }
+
+
+ );
+};
+
+WizardNav.propTypes = {
+ goToStep: PropTypes.func.isRequired,
+ currentStep: PropTypes.number.isRequired
+};
+
+export default WizardNav;
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index b58c2a74a..69f63e397 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -15,3 +15,4 @@ export {default as Item} from './components/Item';
export {default as Card} from './components/Card';
export {default as Pager} from './components/Pager';
export {default as Wizard} from './components/Wizard';
+export {default as WizardNav} from './components/WizardNav';