stub styling of side and main content
This commit is contained in:
parent
3068b94c5b
commit
9d10ed4fe2
12 changed files with 221 additions and 65 deletions
|
@ -0,0 +1,11 @@
|
||||||
|
@mixin fullspan {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin flexAround($direction) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: $direction;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
|
@ -0,0 +1,17 @@
|
||||||
|
$dev-colors: (
|
||||||
|
"a": #34dc90,
|
||||||
|
"b": #9034dc,
|
||||||
|
"c": #dc9034,
|
||||||
|
"d": #dc34dc,
|
||||||
|
"e": #34dcdc,
|
||||||
|
"f": #dcdc34
|
||||||
|
);
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
$break-points: (
|
||||||
|
"500": "only screen and (min-width: 500px)",
|
||||||
|
"570": "only screen and (min-width: 570px)",
|
||||||
|
"590": "only screen and (min-width: 590px)",
|
||||||
|
"700": "only screen and (min-width: 700px)",
|
||||||
|
"900": "only screen and (min-width: 900px)"
|
||||||
|
)
|
|
@ -6,13 +6,7 @@ import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
|
||||||
|
|
||||||
import socketIOClient from 'socket.io-client';
|
import socketIOClient from 'socket.io-client';
|
||||||
|
|
||||||
import Sidebar from './components/Sidebar/Sidebar';
|
import MainWrapper from './components/MainWrapper/MainWrapper';
|
||||||
|
|
||||||
import Account from './pages/Account/Account';
|
|
||||||
import Game from './pages/Game/Game';
|
|
||||||
import Home from './pages/Home/Home';
|
|
||||||
import News from './pages/News/News';
|
|
||||||
import Room from './pages/Room/Room';
|
|
||||||
|
|
||||||
import { stateReducer } from './reducers/stateReducer';
|
import { stateReducer } from './reducers/stateReducer';
|
||||||
import { initState } from './reducers/init/stateReducer.init';
|
import { initState } from './reducers/init/stateReducer.init';
|
||||||
|
@ -47,41 +41,35 @@ function App() {
|
||||||
return (
|
return (
|
||||||
<Router>
|
<Router>
|
||||||
|
|
||||||
<div data-testid="App" className="App">
|
<div data-testid="App" className="App">
|
||||||
|
<Switch>
|
||||||
|
|
||||||
|
<Route path="/account">
|
||||||
|
<MainWrapper page="account" state={state} dispatch={dispatch}/>
|
||||||
|
</Route>
|
||||||
|
|
||||||
|
<Route path="/rooms">
|
||||||
|
<MainWrapper page="room" state={state} dispatch={dispatch}/>
|
||||||
|
</Route>
|
||||||
|
|
||||||
|
<Route path="/games">
|
||||||
|
<MainWrapper page="game" state={state} dispatch={dispatch}/>
|
||||||
|
</Route>
|
||||||
|
|
||||||
|
<Route path="/news">
|
||||||
|
<MainWrapper page="news" state={state} dispatch={dispatch}/>
|
||||||
|
</Route>
|
||||||
|
|
||||||
|
<Route path="/">
|
||||||
|
{/* Add ternary for login */}
|
||||||
|
<MainWrapper page="home" state={state} dispatch={dispatch}/>
|
||||||
|
</Route>
|
||||||
|
|
||||||
|
</Switch>
|
||||||
<h1>React Boilerplate</h1>
|
<h1>React Boilerplate</h1>
|
||||||
{fetchData ? <p>{fetchData}</p> : <></>}
|
{fetchData ? <p>{fetchData}</p> : <></>}
|
||||||
{socketData ? <p>{socketData}</p> : <></>}
|
{socketData ? <p>{socketData}</p> : <></>}
|
||||||
{error ? error.map(err => <p>{err}</p>): <></>}
|
{error ? error.map(err => <p>{err}</p>): <></>}
|
||||||
|
|
||||||
<Switch>
|
|
||||||
|
|
||||||
<Route path="/account">
|
|
||||||
<Sidebar page="account" state={state} dispatch={dispatch}/>
|
|
||||||
<Account state={state} dispatch={dispatch}/>
|
|
||||||
</Route>
|
|
||||||
|
|
||||||
<Route path="/rooms">
|
|
||||||
<Sidebar page="rooms"/>
|
|
||||||
<Room state={state} dispatch={dispatch}/>
|
|
||||||
</Route>
|
|
||||||
|
|
||||||
<Route path="/games">
|
|
||||||
<Sidebar page="games"/>
|
|
||||||
<Game state={state} dispatch={dispatch}/>
|
|
||||||
</Route>
|
|
||||||
|
|
||||||
<Route path="/news">
|
|
||||||
<Sidebar page="news"/>
|
|
||||||
<News state={state} dispatch={dispatch}/>
|
|
||||||
</Route>
|
|
||||||
|
|
||||||
<Route path="/">
|
|
||||||
<Sidebar page="home" state={state} dispatch={dispatch}/>
|
|
||||||
{/* Add ternary for login */}
|
|
||||||
<Home state={state} dispatch={dispatch}/>
|
|
||||||
</Route>
|
|
||||||
|
|
||||||
</Switch>
|
|
||||||
</div>
|
</div>
|
||||||
</Router>
|
</Router>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,15 +1,37 @@
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import './Login.scss';
|
import './Login.scss';
|
||||||
|
|
||||||
const Login = () => {
|
const Login = (props) => {
|
||||||
const [username, setUsername] = useState('');
|
const [username, setUsername] = useState('');
|
||||||
const [password, setPassword] = useState('');
|
const [password, setPassword] = useState('');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="Login" data-testid="Login">
|
<div className="Login" data-testid="Login">
|
||||||
|
<form data-testid="Login__form">
|
||||||
|
|
||||||
|
<label htmlFor="username-input">Username:</label>
|
||||||
|
<input
|
||||||
|
name="username"
|
||||||
|
id="username-input"
|
||||||
|
type="text"
|
||||||
|
onChange={e => setUsername(e.target.value)}
|
||||||
|
default="username"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<label htmlFor="password-input">Password:</label>
|
||||||
|
<input
|
||||||
|
name="password"
|
||||||
|
id="password-input"
|
||||||
|
type="text"
|
||||||
|
onChange={e => setPassword(e.target.value)}
|
||||||
|
default=""
|
||||||
|
/>
|
||||||
|
|
||||||
|
<input type="submit" value="Login!" />
|
||||||
|
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Login;
|
export default Login;
|
|
@ -0,0 +1,49 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import './MainWrapper.scss';
|
||||||
|
|
||||||
|
import Sidebar from '../Sidebar/Sidebar';
|
||||||
|
import Account from '../../pages/Account/Account';
|
||||||
|
import Game from '../../pages/Game/Game';
|
||||||
|
import Home from '../../pages/Home/Home';
|
||||||
|
import News from '../../pages/News/News';
|
||||||
|
import Room from '../../pages/Room/Room';
|
||||||
|
|
||||||
|
const MainWrapper = (props) => {
|
||||||
|
|
||||||
|
const setWrapperWithSidebarAndPage = props => {
|
||||||
|
if (props.page === 'game') return selectPage(props)
|
||||||
|
return (
|
||||||
|
<div className="main-wrapper" data-testid="main-wrapper">
|
||||||
|
<Sidebar page={props.page} state={props.state} dispatch={props.dispatch}/>
|
||||||
|
<main>
|
||||||
|
{selectPage(props)}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectPage = props =>{
|
||||||
|
switch (props.page) {
|
||||||
|
case 'account':
|
||||||
|
return <Account state={props.state} dispatch={props.dispatch}/>
|
||||||
|
case 'game':
|
||||||
|
return <Game state={props.state} dispatch={props.dispatch}/>
|
||||||
|
case 'home':
|
||||||
|
return <Home state={props.state} dispatch={props.dispatch}/>
|
||||||
|
case 'news':
|
||||||
|
return <News state={props.state} dispatch={props.dispatch}/>
|
||||||
|
case 'room':
|
||||||
|
return <Room state={props.state} dispatch={props.dispatch}/>
|
||||||
|
default:
|
||||||
|
return <></>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{ setWrapperWithSidebarAndPage(props) }
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MainWrapper;
|
|
@ -0,0 +1,38 @@
|
||||||
|
@import '../../../public/stylesheets/partials/mixins';
|
||||||
|
|
||||||
|
div.main-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
@include fullspan;
|
||||||
|
|
||||||
|
aside {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-grow: 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div.Game {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
@include fullspan;
|
||||||
|
aside {
|
||||||
|
@include flexAround(column);
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.game-area {
|
||||||
|
@include flexAround(column);
|
||||||
|
flex-grow: 2;
|
||||||
|
}
|
||||||
|
}
|
|
@ -2,7 +2,6 @@ import React, { useState } from 'react';
|
||||||
import './Sidebar.scss';
|
import './Sidebar.scss';
|
||||||
|
|
||||||
import AccountSidebar from '../../pages/Account/AccountSidebar';
|
import AccountSidebar from '../../pages/Account/AccountSidebar';
|
||||||
import GameSidebar from '../../pages/Game/GameSidebar';
|
|
||||||
import HomeSidebar from '../../pages/Home/HomeSidebar';
|
import HomeSidebar from '../../pages/Home/HomeSidebar';
|
||||||
import NewsSidebar from '../../pages/News/NewsSidebar';
|
import NewsSidebar from '../../pages/News/NewsSidebar';
|
||||||
import RoomSidebar from '../../pages/Room/RoomSidebar';
|
import RoomSidebar from '../../pages/Room/RoomSidebar';
|
||||||
|
@ -12,15 +11,13 @@ const Sidebar = (props) => {
|
||||||
const displayComponent = props =>{
|
const displayComponent = props =>{
|
||||||
switch (props.page) {
|
switch (props.page) {
|
||||||
case 'account':
|
case 'account':
|
||||||
return <AccountSidebar state={props.state}/>
|
return <AccountSidebar state={props.state} dispatch={props.dispatch}/>
|
||||||
case 'game':
|
|
||||||
return <GameSidebar state={props.state}/>
|
|
||||||
case 'home':
|
case 'home':
|
||||||
return <HomeSidebar state={props.state}/>
|
return <HomeSidebar state={props.state} dispatch={props.dispatch}/>
|
||||||
case 'news':
|
case 'news':
|
||||||
return <NewsSidebar state={props.state}/>
|
return <NewsSidebar state={props.state} dispatch={props.dispatch}/>
|
||||||
case 'room':
|
case 'room':
|
||||||
return <RoomSidebar state={props.state}/>
|
return <RoomSidebar state={props.state} dispatch={props.dispatch}/>
|
||||||
default:
|
default:
|
||||||
return <></>
|
return <></>
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import './Signup.scss';
|
import './Signup.scss';
|
||||||
|
|
||||||
const Signup = () => {
|
const Signup = (props) => {
|
||||||
const [ username, setUsername ] = useState('');
|
const [ username, setUsername ] = useState('');
|
||||||
const [ password, setPassword ] = useState('');
|
const [ password, setPassword ] = useState('');
|
||||||
const [ confirmPassword, setConfirmPassword ] = useState('');
|
const [ confirmPassword, setConfirmPassword ] = useState('');
|
||||||
|
@ -28,7 +28,7 @@ const Signup = () => {
|
||||||
default=""
|
default=""
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<label htmlFor="confirmPassword-input">confirmPassword:</label>
|
<label htmlFor="confirmPassword-input">Confirm password:</label>
|
||||||
<input
|
<input
|
||||||
name="confirmPassword"
|
name="confirmPassword"
|
||||||
id="confirmPassword-input"
|
id="confirmPassword-input"
|
||||||
|
@ -37,6 +37,8 @@ const Signup = () => {
|
||||||
default=""
|
default=""
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<input type="submit" value="Create Account!"/>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,46 @@
|
||||||
* {
|
@import '../public/stylesheets/partials/_variables';
|
||||||
box-sizing: border-box;
|
@import '../public/stylesheets/partials/_mixins';
|
||||||
|
|
||||||
|
html * {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
@media #{map-get($break-points, "500")} {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||||
|
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||||
|
sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
|
||||||
|
div#root {
|
||||||
|
@include fullspan;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.App {
|
||||||
|
@include fullspan;
|
||||||
|
// ! dev settings
|
||||||
|
background-color: map-get($dev-colors, "f");
|
||||||
|
}
|
||||||
|
|
||||||
|
// ! dev settings
|
||||||
|
aside {
|
||||||
|
background-color: map-get($dev-colors, "e");
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
background-color: map-get($dev-colors, "d");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
||||||
|
monospace;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
const GameSidebar = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default GameSidebar;
|
|
|
@ -3,8 +3,11 @@ import './Home.scss';
|
||||||
|
|
||||||
const Home = () => {
|
const Home = () => {
|
||||||
return (
|
return (
|
||||||
<div className="Home" data-testid="Home">
|
<div className="page">
|
||||||
<p>Home</p>
|
|
||||||
|
<div className="Home" data-testid="Home">
|
||||||
|
<p>Home</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,10 +10,10 @@ const HomeSidebar = (props) => {
|
||||||
<nav>
|
<nav>
|
||||||
{props.state.user ? <></> : <>
|
{props.state.user ? <></> : <>
|
||||||
<p onClick={()=>{setShowForm('login')}}>Login</p>
|
<p onClick={()=>{setShowForm('login')}}>Login</p>
|
||||||
|
{showForm === 'login' ? <Login /> : <></>}
|
||||||
<p onClick={()=>{setShowForm('signup')}}>Signup</p>
|
<p onClick={()=>{setShowForm('signup')}}>Signup</p>
|
||||||
|
{showForm === 'signup' ? <Signup /> : <></>}
|
||||||
</>}
|
</>}
|
||||||
{showForm === 'signup' ? <Signup /> : <></>}
|
|
||||||
{showForm === 'login' ? <Login /> : <></>}
|
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue