mirror of
https://github.com/chaoticbackup/chaoticbackup.github.io.git
synced 2026-08-21 16:14:37 -05:00
split mobile and desktop based on width #29
This commit is contained in:
Daniel
129
src/components/desktop.js
Normal file
129
src/components/desktop.js
Normal file
@@ -0,0 +1,129 @@
|
||||
import React from 'react';
|
||||
import {Link} from 'react-router-dom';
|
||||
import API from './SpreadsheetData';
|
||||
import {Donate} from './Snippets';
|
||||
|
||||
// Configuration for the language and background
|
||||
// Images managed in css file
|
||||
const language = "ENG";
|
||||
const bkgrnd = "05";
|
||||
|
||||
export default function(props) {
|
||||
const children = props.routing();
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="fix-pgBkgrnd-repeat-x">
|
||||
<div className={"fix-img-bkgrnd fix-img-bkgrnd_"+bkgrnd}></div>
|
||||
</div>
|
||||
<div className="pgBkgrnd-repeat-x">
|
||||
<div className="img-bkgrnd">
|
||||
<div className="content-wrap">
|
||||
<div className="legacy legacy-header">
|
||||
<div className="header">
|
||||
<div id="nav">
|
||||
<div className="zero-clear-line headerSpriteNav-wrap">
|
||||
<ul id="unity-sprite" className={language}>
|
||||
<li id="unity-nav1" className={language}></li>
|
||||
<li id="unity-nav2" className={language}><Link to={`/collection/`}><span>Collect</span></Link></li>
|
||||
<li id="unity-nav3" className={language}><a href="/create/"><span>Build</span></a></li>
|
||||
<li id="unity-nav4" className={language}><a href="http://chaoticbackup.forumotion.com/f16-trading-buying-and-selling"><span>Trade</span></a></li>
|
||||
<li id="unity-nav5" className={language}><Link to={`/`}><span>Home</span></Link></li>
|
||||
<li id="unity-nav6" className={language}><a href="http://chaoticbackup.forumotion.com"><span>Forums</span></a></li>
|
||||
<li id="unity-nav7" className={language}><Link to={`/portal/`}><span>Portal</span></Link></li>
|
||||
<li id="unity-nav8" className={language}><a href="https://untap.in"><span>Play</span></a></li>
|
||||
<li id="unity-nav9" className={language}></li>
|
||||
</ul>
|
||||
<ul id="unityETC-sprite" className={language}>
|
||||
<li id="unity-nav10" className={language}><Link to={`/EnterTheCode`}><span>Enter the Code</span></Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="banner-ad-top">
|
||||
</div>
|
||||
<div className="legacy content">
|
||||
<div className="left-column">
|
||||
<div className="full-width clear-line" style={{marginBottom: "5px"}}>
|
||||
</div>
|
||||
</div>
|
||||
<div className="full-column">
|
||||
<div className="pods-wrap pad5px-btm">
|
||||
<div className="clear-line full-width">
|
||||
<div className="adPod-top-wrap">
|
||||
<div className="videoAdPod-topleft">
|
||||
<div className="videoAdPod-topLeft-repeat-x"></div>
|
||||
</div>
|
||||
<div className="videoAdPod-topright">
|
||||
<div className="videoAdPod-topRight-repeat-x"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content-area-repeat-xy">
|
||||
<div className="content-area-top-repeat-x">
|
||||
<div className="content-area-left-repeat-y">
|
||||
<div className="content-area-right-repeat-y">
|
||||
<div className="content-area-inner-space">
|
||||
<div id="player">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content-btm-wrap">
|
||||
<div className="content-area-btm-left">
|
||||
<div className="content-left-btm-repeat-x">
|
||||
</div>
|
||||
</div>
|
||||
<div className="content-area-btm-right">
|
||||
<div className="content-right-btm-repeat-x">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right-column">
|
||||
<div className="full-width clear-line" style={{marginBottom: "5px"}}>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="banner-ad-bottom">
|
||||
</div>
|
||||
<div className="legacy legacy-footer">
|
||||
<div className="footer-wrap">
|
||||
<div className="footer-repeat-x">
|
||||
<div className="footer-left">
|
||||
<div className="footer-right">
|
||||
<div className="footer-text">
|
||||
<div className="footer-search">
|
||||
<br /><br />
|
||||
<Donate />
|
||||
</div>
|
||||
<div className="footer-nav">
|
||||
<div className="copyright">
|
||||
©2008 Chaotic USA Entertainment Group, Inc.
|
||||
<br />
|
||||
U.S. Pat 5810666 and 5954332 and other pending patent applications. All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-language">
|
||||
<a href='#' onClick={(e) => {e.stopPropagation(); e.preventDefault(); API.purgeDB()}} className="page-options" title="Change Language">
|
||||
<img src="/src/img/flag_usa_.gif" alt="English (Change Language)" width="40" height="27"/>
|
||||
<br />English (Change Language)
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +1,14 @@
|
||||
import React from 'react';
|
||||
import {render} from 'react-dom';
|
||||
import {BrowserRouter as Router, Link, Route, Switch} from 'react-router-dom';
|
||||
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
|
||||
import loadable from '@loadable/component';
|
||||
import windowWidth from './windowWidth';
|
||||
import Desktop from './desktop';
|
||||
import Mobile from './mobile';
|
||||
import s from '../styles/app.style';
|
||||
|
||||
/* Components */
|
||||
import API from './SpreadsheetData';
|
||||
import {PageNotFound, UnderConstruction, Donate, Loading} from './Snippets';
|
||||
import {PageNotFound, UnderConstruction, Loading} from './Snippets';
|
||||
import Create from './create/index';
|
||||
|
||||
const EnterTheCode = loadable(
|
||||
@@ -29,12 +31,10 @@ const Collection = loadable(
|
||||
{fallback: <Loading />}
|
||||
);
|
||||
|
||||
function Routing(props) {
|
||||
function Routing() {
|
||||
return (
|
||||
<Switch>
|
||||
<Route exact path="/" component={Home} />
|
||||
<Route path="/PageNotFound" component={PageNotFound} />
|
||||
<Route path="/UnderConstruction" component={UnderConstruction} />
|
||||
<Route path="/EnterTheCode" component={EnterTheCode} />
|
||||
<Route path="/create" component={Create} />
|
||||
<Route path="/collection" component={Collection} />
|
||||
@@ -43,134 +43,14 @@ function Routing(props) {
|
||||
);
|
||||
}
|
||||
|
||||
function Base(props) {
|
||||
// Configuration for the language and background
|
||||
// Images managed in css file
|
||||
const language = "ENG";
|
||||
const bkgrnd = "05";
|
||||
|
||||
const children = <Routing {...props} />;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="fix-pgBkgrnd-repeat-x">
|
||||
<div className={"fix-img-bkgrnd fix-img-bkgrnd_"+bkgrnd}></div>
|
||||
</div>
|
||||
<div className="pgBkgrnd-repeat-x">
|
||||
<div className="img-bkgrnd">
|
||||
<div className="content-wrap">
|
||||
<div className="legacy legacy-header">
|
||||
<div className="header">
|
||||
<div id="nav">
|
||||
<div className="zero-clear-line headerSpriteNav-wrap">
|
||||
<ul id="unity-sprite" className={language}>
|
||||
<li id="unity-nav1" className={language}></li>
|
||||
<li id="unity-nav2" className={language}><Link to={`/collection/`}><span>Collect</span></Link></li>
|
||||
<li id="unity-nav3" className={language}><a href="/create/"><span>Build</span></a></li>
|
||||
<li id="unity-nav4" className={language}><a href="http://chaoticbackup.forumotion.com/f16-trading-buying-and-selling"><span>Trade</span></a></li>
|
||||
<li id="unity-nav5" className={language}><Link to={`/`}><span>Home</span></Link></li>
|
||||
<li id="unity-nav6" className={language}><a href="http://chaoticbackup.forumotion.com"><span>Forums</span></a></li>
|
||||
<li id="unity-nav7" className={language}><Link to={`/portal/`}><span>Portal</span></Link></li>
|
||||
<li id="unity-nav8" className={language}><a href="https://untap.in"><span>Play</span></a></li>
|
||||
<li id="unity-nav9" className={language}></li>
|
||||
</ul>
|
||||
<ul id="unityETC-sprite" className={language}>
|
||||
<li id="unity-nav10" className={language}><Link to={`/EnterTheCode`}><span>Enter the Code</span></Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="banner-ad-top">
|
||||
</div>
|
||||
<div className="legacy content">
|
||||
<div className="left-column">
|
||||
<div className="full-width clear-line" style={{marginBottom: "5px"}}>
|
||||
</div>
|
||||
</div>
|
||||
<div className="full-column">
|
||||
<div className="pods-wrap pad5px-btm">
|
||||
<div className="clear-line full-width">
|
||||
<div className="adPod-top-wrap">
|
||||
<div className="videoAdPod-topleft">
|
||||
<div className="videoAdPod-topLeft-repeat-x"></div>
|
||||
</div>
|
||||
<div className="videoAdPod-topright">
|
||||
<div className="videoAdPod-topRight-repeat-x"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content-area-repeat-xy">
|
||||
<div className="content-area-top-repeat-x">
|
||||
<div className="content-area-left-repeat-y">
|
||||
<div className="content-area-right-repeat-y">
|
||||
<div className="content-area-inner-space">
|
||||
<div id="player">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="content-btm-wrap">
|
||||
<div className="content-area-btm-left">
|
||||
<div className="content-left-btm-repeat-x">
|
||||
</div>
|
||||
</div>
|
||||
<div className="content-area-btm-right">
|
||||
<div className="content-right-btm-repeat-x">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="right-column">
|
||||
<div className="full-width clear-line" style={{marginBottom: "5px"}}>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="banner-ad-bottom">
|
||||
</div>
|
||||
<div className="legacy legacy-footer">
|
||||
<div className="footer-wrap">
|
||||
<div className="footer-repeat-x">
|
||||
<div className="footer-left">
|
||||
<div className="footer-right">
|
||||
<div className="footer-text">
|
||||
<div className="footer-search">
|
||||
<br /><br />
|
||||
<Donate />
|
||||
</div>
|
||||
<div className="footer-nav">
|
||||
<div className="copyright">
|
||||
©2008 Chaotic USA Entertainment Group, Inc.
|
||||
<br />
|
||||
U.S. Pat 5810666 and 5954332 and other pending patent applications. All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-language">
|
||||
<a href='#' onClick={(e) => {e.stopPropagation(); e.preventDefault(); API.purgeDB()}} className="page-options" title="Change Language">
|
||||
<img src="/src/img/flag_usa_.gif" alt="English (Change Language)" width="40" height="27"/>
|
||||
<br />English (Change Language)
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
function Base() {
|
||||
if (windowWidth() < 975) {
|
||||
return (<Mobile routing={Routing} />);
|
||||
}
|
||||
return (<Desktop routing={Routing} />);
|
||||
}
|
||||
|
||||
render(
|
||||
<Router>
|
||||
<Base path="/*" href="/" />
|
||||
</Router>
|
||||
, document.getElementById('root'),
|
||||
<Router><Base path="/*" href="/" /></Router>,
|
||||
document.getElementById('root'),
|
||||
);
|
||||
86
src/components/mobile.tsx
Normal file
86
src/components/mobile.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { makeStyles, useTheme, ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
|
||||
import { Toolbar, IconButton, AppBar, Typography, Container, Box
|
||||
} from '@material-ui/core';
|
||||
import {Menu as MenuIcon} from '@material-ui/icons';
|
||||
import { blue } from '@material-ui/core/colors';
|
||||
|
||||
const theme = createMuiTheme({
|
||||
palette: {
|
||||
primary: {
|
||||
main: blue[900],
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
export default function(props: { routing: any; }) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
theme={theme}
|
||||
>
|
||||
<Base {...props} />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const headerStyles = makeStyles(theme => ({
|
||||
root: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
menuButton: {
|
||||
marginRight: theme.spacing(2),
|
||||
},
|
||||
title: {
|
||||
flexGrow: 1,
|
||||
}
|
||||
}));
|
||||
|
||||
const mainStyles = makeStyles(theme => ({
|
||||
root: {
|
||||
padding: 0,
|
||||
},
|
||||
content: {
|
||||
padding: "0 24px",
|
||||
}
|
||||
}));
|
||||
|
||||
function Base(props: { routing: any; }) {
|
||||
const children = props.routing();
|
||||
const header = headerStyles(useTheme());
|
||||
const main = mainStyles(useTheme());
|
||||
|
||||
const handleClick = (event) => {
|
||||
console.log("toggle");
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<AppBar className={header.root} position="static">
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
edge="start"
|
||||
className={header.menuButton}
|
||||
color="inherit"
|
||||
aria-label="menu"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" className={header.title}>
|
||||
Chaotic Backup
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Container className={main.root}>
|
||||
<Box
|
||||
className={main.content}
|
||||
bgcolor="text.secondary"
|
||||
color="background.paper"
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</Container>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
15
src/components/windowWidth.ts
Normal file
15
src/components/windowWidth.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import {useState, useEffect} from 'react';
|
||||
|
||||
export default function() {
|
||||
const [width, setWidth] = useState(window.innerWidth);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => setWidth(window.innerWidth);
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return width;
|
||||
}
|
||||
Reference in New Issue
Block a user