tracking and options added
This commit is contained in:
parent
35e1d4b08c
commit
c7e7a70f18
|
|
@ -3,8 +3,10 @@ import Axios from 'axios';
|
|||
import HomePage from "./components/HomePage";
|
||||
import PricingPlan from "./components/PricingPlan";
|
||||
import LogInContainer from "./components/LogInContainer";
|
||||
import { BrowserRouter, Route, Switch } from 'react-router-dom';
|
||||
import { Router,BrowserRouter, Route, Switch } from 'react-router-dom';
|
||||
import UserContext from "./context/UserContext";
|
||||
import Tracking from "./components/Tracking";
|
||||
import Options from "./components/Options";
|
||||
|
||||
export default function App() {
|
||||
const [userData, setUserData ] = useState({
|
||||
|
|
@ -45,9 +47,11 @@ export default function App() {
|
|||
<BrowserRouter>
|
||||
<UserContext.Provider value= {{userData, setUserData}}>
|
||||
<Switch>
|
||||
<Route exact path="/home" component={HomePage} />
|
||||
<Route exact path="/" component={HomePage} />
|
||||
<Route path="/user" component={LogInContainer} />
|
||||
<Route path="/pricing" component={PricingPlan} />
|
||||
<Route path="/track" component={Tracking} />
|
||||
<Route path="/options" component={Options} />
|
||||
</Switch>
|
||||
</UserContext.Provider>
|
||||
</BrowserRouter>
|
||||
|
|
|
|||
|
|
@ -17,9 +17,6 @@ class HomePage extends Component {
|
|||
<div className="HomePage">
|
||||
< NavBar />
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="colored-section" id="title">
|
||||
|
||||
<div class="container-fluid">
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ export default function NavBar() {
|
|||
|
||||
const history = useHistory();
|
||||
|
||||
const register = () => history.push("/register");
|
||||
const login = () => history.push("/login");
|
||||
const register = () => history.push("/user/register");
|
||||
const login = () => history.push("/home");
|
||||
const logout = () => {
|
||||
setUserData({
|
||||
token: undefined,
|
||||
|
|
@ -38,11 +38,13 @@ export default function NavBar() {
|
|||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Contact us</a></li>
|
||||
<li><a href="#">Log In</a></li>
|
||||
{userData.user ? (
|
||||
<li><a href="#">Log Out</a></li>
|
||||
<li><a href="#" onClick={logout}>Log Out</a></li>
|
||||
) : (
|
||||
<li><a href="#">Register</a></li>
|
||||
<React.Fragment>
|
||||
<li><a href="#" onclick={register}>Register</a></li>
|
||||
<li><button type="button" onclick={login}>login</button></li>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
import React from 'react';
|
||||
import "./options.css";
|
||||
|
||||
export default function Options() {
|
||||
|
||||
const previousBtn = document.getElementById('previousBtn');
|
||||
const nextBtn = document.getElementById('nextBtn');
|
||||
const finishBtn = document.getElementById('finishBtn');
|
||||
const content = document.getElementById('content');
|
||||
const bullets = [...document.querySelectorAll('.bullet')];
|
||||
|
||||
const MAX_STEPS = 4;
|
||||
let currentStep = 1;
|
||||
if(nextBtn){
|
||||
nextBtn.addEventListener('click', () => {
|
||||
bullets[currentStep - 1].classList.add('completed');
|
||||
currentStep += 1;
|
||||
previousBtn.disabled = false;
|
||||
if (currentStep === MAX_STEPS) {
|
||||
nextBtn.disabled = true;
|
||||
finishBtn.disabled = false;
|
||||
}
|
||||
content.innerText = `Step Number ${currentStep}`;
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if(previousBtn){
|
||||
previousBtn.addEventListener('click', () => {
|
||||
bullets[currentStep - 2].classList.remove('completed');
|
||||
currentStep -= 1;
|
||||
nextBtn.disabled = false;
|
||||
finishBtn.disabled = true;
|
||||
if (currentStep === 1) {
|
||||
previousBtn.disabled = true;
|
||||
}
|
||||
content.innerText = `Step Number ${currentStep}`;
|
||||
});
|
||||
}
|
||||
|
||||
if(finishBtn){
|
||||
finishBtn.addEventListener('click', () => {
|
||||
window.location.reload();
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
<div class="container">
|
||||
<div id="stepProgressBar">
|
||||
<div class="step">
|
||||
<p class="step-text">About</p>
|
||||
<div class="bullet">1</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<p class="step-text">Contact</p>
|
||||
<div class="bullet">2</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<p class="step-text">Step 3</p>
|
||||
<div class="bullet">3</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<p class="step-text">Step 4</p>
|
||||
<div class="bullet ">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<p id="content" class="text-center">Step Number 1</p>
|
||||
<button id="previousBtn" >Previous</button>
|
||||
<button id="nextBtn">Next</button>
|
||||
<button id="finishBtn" >Finish</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -30,9 +30,9 @@ import ErrorNotice from "./ErrorNotice";
|
|||
user: loginRes.data.user,
|
||||
});
|
||||
localStorage.setItem("auth-token", loginRes.data.token);
|
||||
history.push("/");
|
||||
history.push("/home");
|
||||
} catch (err) {
|
||||
err.response.data.msg && setError(err.response.data.msg);
|
||||
return err.response.data.msg && setError(err.response.data.msg);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -81,7 +81,7 @@ import ErrorNotice from "./ErrorNotice";
|
|||
id="phonenumber"
|
||||
className="FormField__Input"
|
||||
placeholder="Enter your Phone no. (+91)"
|
||||
onChange= { (e) => setPhonenumber(e.target.value)}
|
||||
onChange= { (e) => setPhonenumber(parseInt( e.target.value,10))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -92,7 +92,7 @@ import ErrorNotice from "./ErrorNotice";
|
|||
</div>
|
||||
|
||||
<div className="FormField">
|
||||
<button className="FormField__Button mr-20">Sign Up</button> <Link to="/sign-in" className="FormField__Link">already a member?</Link>
|
||||
<button className="FormField__Button mr-20" type="submit">Sign Up</button> <Link to="/sign-in" className="FormField__Link">already a member?</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react';
|
||||
import "./tracking.css";
|
||||
|
||||
export default function Tracking() {
|
||||
return (
|
||||
<div class="wrapper">
|
||||
<ul class="StepProgress">
|
||||
<li class="StepProgress-item is-done"><strong>Post a contest</strong></li>
|
||||
<li class="StepProgress-item is-done"><strong>Award an entry</strong>
|
||||
Got more entries that you love? Buy more entries anytime! Just hover on your favorite entry and click the Buy button
|
||||
</li>
|
||||
<li class="StepProgress-item current"><strong>Post a contest</strong></li>
|
||||
<li class="StepProgress-item"><strong>Handover</strong></li>
|
||||
<li class="StepProgress-item"><strong>Provide feedback</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
#stepProgressBar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.step {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
margin-bottom: 10px;
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
|
||||
.bullet {
|
||||
border: 1px solid #28a745;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 100%;
|
||||
color: #28a745;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition: background-color 500ms;
|
||||
line-height:20px;
|
||||
}
|
||||
|
||||
|
||||
.bullet.completed {
|
||||
color: white;
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bullet.completed::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -60px;
|
||||
bottom: 10px;
|
||||
height: 1px;
|
||||
width: 54px;
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
/* Base styles and helper stuff */
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 5px 10px;
|
||||
border: 1px solid black;
|
||||
transition: 250ms background-color;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button:disabled:hover {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
.wrapper {
|
||||
width: 100vw;
|
||||
font-family: 'Helvetica';
|
||||
font-size: 14px;
|
||||
border: 1px solid #CCC;
|
||||
height: 100vh;
|
||||
}
|
||||
.StepProgress {
|
||||
position: relative;
|
||||
padding-left: 45px;
|
||||
list-style: none;
|
||||
}
|
||||
.StepProgress::before {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 15px;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
border-left: 2px solid #CCC;
|
||||
}
|
||||
.StepProgress-item {
|
||||
position: relative;
|
||||
counter-increment: list;
|
||||
}
|
||||
.StepProgress-item:not(:last-child) {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.StepProgress-item::before {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
height: 100%;
|
||||
width: 10px;
|
||||
}
|
||||
.StepProgress-item::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -37px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid #CCC;
|
||||
border-radius: 50%;
|
||||
background-color: #FFF;
|
||||
}
|
||||
.StepProgress-item.is-done::before {
|
||||
border-left: 5px solid green;
|
||||
}
|
||||
.StepProgress-item.is-done::after {
|
||||
content: "✔";
|
||||
font-size: 10px;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
border: 10px solid green;
|
||||
background-color: green;
|
||||
}
|
||||
.StepProgress-item.current::before {
|
||||
border-left: 2px solid green;
|
||||
}
|
||||
.StepProgress-item.current::after {
|
||||
content: counter(list);
|
||||
padding-top: 1px;
|
||||
width: 19px;
|
||||
height: 18px;
|
||||
top: -4px;
|
||||
left: -40px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: green;
|
||||
border: 2px solid green;
|
||||
background-color: white;
|
||||
}
|
||||
.StepProgress strong {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -69,24 +69,16 @@ header ul li a {
|
|||
|
||||
|
||||
}
|
||||
header ul li a:before{
|
||||
header ul li a button:before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
left:0;
|
||||
bottom: 0;
|
||||
height: 5px;
|
||||
text-decoration: none;
|
||||
width:100%;
|
||||
background: #ffffff;
|
||||
transform: scaleX(0);
|
||||
transform-origin: right;
|
||||
transition: transform .4s linear;
|
||||
}
|
||||
header ul li a:hover:before{
|
||||
|
||||
transform: scaleX(1);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
header.sticky ul li a{
|
||||
color: #fff;
|
||||
|
||||
|
|
@ -129,7 +121,6 @@ header.sticky ul li a{
|
|||
height: 100vh;
|
||||
background: #66bfbf;
|
||||
text-align: center;
|
||||
transition: all .5s;
|
||||
}
|
||||
header ul li{
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue