stub styling of side and main content
This commit is contained in:
parent
16c10d9038
commit
285d9b7a46
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 Sidebar from './components/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';
|
||||
import MainWrapper from './components/MainWrapper/MainWrapper';
|
||||
|
||||
import { stateReducer } from './reducers/stateReducer';
|
||||
import { initState } from './reducers/init/stateReducer.init';
|
||||
|
@ -48,40 +42,34 @@ function App() {
|
|||
<Router>
|
||||
|
||||
<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>
|
||||
{fetchData ? <p>{fetchData}</p> : <></>}
|
||||
{socketData ? <p>{socketData}</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>
|
||||
</Router>
|
||||
);
|
||||
|
|
|
@ -1,13 +1,35 @@
|
|||
import React, { useState } from 'react';
|
||||
import './Login.scss';
|
||||
|
||||
const Login = () => {
|
||||
const Login = (props) => {
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 AccountSidebar from '../../pages/Account/AccountSidebar';
|
||||
import GameSidebar from '../../pages/Game/GameSidebar';
|
||||
import HomeSidebar from '../../pages/Home/HomeSidebar';
|
||||
import NewsSidebar from '../../pages/News/NewsSidebar';
|
||||
import RoomSidebar from '../../pages/Room/RoomSidebar';
|
||||
|
@ -12,15 +11,13 @@ const Sidebar = (props) => {
|
|||
const displayComponent = props =>{
|
||||
switch (props.page) {
|
||||
case 'account':
|
||||
return <AccountSidebar state={props.state}/>
|
||||
case 'game':
|
||||
return <GameSidebar state={props.state}/>
|
||||
return <AccountSidebar state={props.state} dispatch={props.dispatch}/>
|
||||
case 'home':
|
||||
return <HomeSidebar state={props.state}/>
|
||||
return <HomeSidebar state={props.state} dispatch={props.dispatch}/>
|
||||
case 'news':
|
||||
return <NewsSidebar state={props.state}/>
|
||||
return <NewsSidebar state={props.state} dispatch={props.dispatch}/>
|
||||
case 'room':
|
||||
return <RoomSidebar state={props.state}/>
|
||||
return <RoomSidebar state={props.state} dispatch={props.dispatch}/>
|
||||
default:
|
||||
return <></>
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useState } from 'react';
|
||||
import './Signup.scss';
|
||||
|
||||
const Signup = () => {
|
||||
const Signup = (props) => {
|
||||
const [ username, setUsername ] = useState('');
|
||||
const [ password, setPassword ] = useState('');
|
||||
const [ confirmPassword, setConfirmPassword ] = useState('');
|
||||
|
@ -28,7 +28,7 @@ const Signup = () => {
|
|||
default=""
|
||||
/>
|
||||
|
||||
<label htmlFor="confirmPassword-input">confirmPassword:</label>
|
||||
<label htmlFor="confirmPassword-input">Confirm password:</label>
|
||||
<input
|
||||
name="confirmPassword"
|
||||
id="confirmPassword-input"
|
||||
|
@ -37,6 +37,8 @@ const Signup = () => {
|
|||
default=""
|
||||
/>
|
||||
|
||||
<input type="submit" value="Create Account!"/>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -1,7 +1,46 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
@import '../public/stylesheets/partials/_variables';
|
||||
@import '../public/stylesheets/partials/_mixins';
|
||||
|
||||
html * {
|
||||
margin: 0;
|
||||
|
||||
@media #{map-get($break-points, "500")} {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
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 = () => {
|
||||
return (
|
||||
<div className="Home" data-testid="Home">
|
||||
<p>Home</p>
|
||||
<div className="page">
|
||||
|
||||
<div className="Home" data-testid="Home">
|
||||
<p>Home</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -10,10 +10,10 @@ const HomeSidebar = (props) => {
|
|||
<nav>
|
||||
{props.state.user ? <></> : <>
|
||||
<p onClick={()=>{setShowForm('login')}}>Login</p>
|
||||
{showForm === 'login' ? <Login /> : <></>}
|
||||
<p onClick={()=>{setShowForm('signup')}}>Signup</p>
|
||||
{showForm === 'signup' ? <Signup /> : <></>}
|
||||
</>}
|
||||
{showForm === 'signup' ? <Signup /> : <></>}
|
||||
{showForm === 'login' ? <Login /> : <></>}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue