mirror of
https://github.com/chaoticbackup/chaoticbackup.github.io.git
synced 2026-03-21 17:24:14 -05:00
#11 generic template for portal pages
This commit is contained in:
Daniel
parent
c0fcbd3592
commit
bfb2a5f62e
|
|
@ -1,51 +0,0 @@
|
|||
import React from 'react';
|
||||
import Interactive from 'react-interactive';
|
||||
import { Link, Route } from 'react-router-dom';
|
||||
import {observable} from 'mobx';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import s from '../../../styles/app.style';
|
||||
import API from '../../SpreadsheetData';
|
||||
import {Loading} from '../../Snippets';
|
||||
import Attack from '../Single/Attack';
|
||||
|
||||
@inject((stores, props, context) => props) @observer
|
||||
export default class Attacks extends React.Component {
|
||||
@observable loaded = false;
|
||||
|
||||
render() {
|
||||
if (this.loaded == false) {
|
||||
API.LoadDB([{'cards': 'attacks'}, {'portal': 'attacks'}])
|
||||
.then(() => {
|
||||
this.loaded = true;
|
||||
});
|
||||
return (<Loading />);
|
||||
}
|
||||
|
||||
let path = this.props.location.pathname.split("/");
|
||||
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
|
||||
|
||||
const output = API.portal.attacks.data.map((attack, i) => {
|
||||
const card_data = API.cards.attacks.findOne({'gsx$name': attack.gsx$name});
|
||||
return (
|
||||
<div key={i}>
|
||||
<Interactive as={Link} {...s.link}
|
||||
to={'/portal/Attacks/'+attack.gsx$name}
|
||||
>
|
||||
<span>{attack.gsx$name}</span><br />
|
||||
<img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
|
||||
</Interactive>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
return (<div className="entry attacks">
|
||||
<div className="left">
|
||||
<div className="title">Attacks<hr /></div>
|
||||
{output}
|
||||
</div>
|
||||
<div className="right">
|
||||
<Route path={`${this.props.match.url}/:card`} component={Attack} />
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
import React from 'react';
|
||||
import Interactive from 'react-interactive';
|
||||
import { Link, Route } from 'react-router-dom';
|
||||
import {observable} from 'mobx';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import s from '../../../styles/app.style';
|
||||
import API from '../../SpreadsheetData';
|
||||
import {Loading} from '../../Snippets';
|
||||
import SingleBattlegear from '../Single/Battlegear';
|
||||
|
||||
@inject((stores, props, context) => props) @observer
|
||||
export default class Battlegear extends React.Component {
|
||||
@observable loaded = false;
|
||||
|
||||
render() {
|
||||
if (this.loaded == false) {
|
||||
API.LoadDB([{'cards': 'battlegear'}, {'portal': 'battlegear'}])
|
||||
.then(() => {
|
||||
this.loaded = true;
|
||||
});
|
||||
return (<Loading />);
|
||||
}
|
||||
|
||||
let path = this.props.location.pathname.split("/");
|
||||
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
|
||||
|
||||
const battlegear = API.portal.battlegear.data;
|
||||
|
||||
const output = battlegear.map((single_battlegear, i) => {
|
||||
const card_data = API.cards.battlegear.findOne({'gsx$name': single_battlegear.gsx$name});
|
||||
return (
|
||||
<div key={i}>
|
||||
<Interactive as={Link} {...s.link}
|
||||
to={'/portal/Battlegear/'+single_battlegear.gsx$name}
|
||||
>
|
||||
<span>{single_battlegear.gsx$name}</span><br />
|
||||
<img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
|
||||
</Interactive>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
return (<div className="entry battlegear">
|
||||
<div className="left">
|
||||
<div className="title">Battlegear<hr /></div>
|
||||
{output}
|
||||
</div>
|
||||
<div className="right">
|
||||
<Route path={`${this.props.match.url}/:card`} component={SingleBattlegear} />
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
|
@ -6,48 +6,49 @@ import {observer, inject} from 'mobx-react';
|
|||
import s from '../../../styles/app.style';
|
||||
import API from '../../SpreadsheetData';
|
||||
import {Loading} from '../../Snippets';
|
||||
import Location from '../Single/Location';
|
||||
|
||||
@inject((stores, props, context) => props) @observer
|
||||
export default class Locations extends React.Component {
|
||||
export default class Category extends React.Component {
|
||||
@observable loaded = false;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
let path = props.location.pathname.split("/");
|
||||
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
|
||||
this.path = path;
|
||||
this.type = props.type;
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.loaded == false) {
|
||||
API.buildCollection([{'cards': 'locations'}, {'portal': 'locations'}])
|
||||
API.LoadDB([{'cards': this.type}, {'portal': this.type}])
|
||||
.then(() => {
|
||||
this.loaded = true;
|
||||
});
|
||||
return (<Loading />);
|
||||
}
|
||||
|
||||
let path = this.props.location.pathname.split("/");
|
||||
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
|
||||
|
||||
const locations = API.portal.locations.data;
|
||||
|
||||
const output = locations.map((location, i) => {
|
||||
const card_data = API.cards.locations.findOne({'gsx$name': location.gsx$name});
|
||||
const bottom_nav = API.portal[this.type].data.map((card, i) => {
|
||||
let card_data = API.cards[this.type].findOne({'gsx$name': card.gsx$name});
|
||||
return (
|
||||
<div key={i}>
|
||||
<Interactive as={Link} {...s.link}
|
||||
to={'/portal/Locations/'+location.gsx$name}
|
||||
<Interactive key={i} as={Link} {...s.link}
|
||||
to={`/portal/${this.type.charAt(0).toUpperCase()+this.type.substr(1)}/${card.gsx$name}`}
|
||||
>
|
||||
<span>{location.gsx$name}</span><br />
|
||||
<span>{card.gsx$name}</span><br />
|
||||
<img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
|
||||
</Interactive>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
return (<div className="entry locations">
|
||||
<div className="left">
|
||||
<div className="title">Locations<hr /></div>
|
||||
{output}
|
||||
</div>
|
||||
<div className="right">
|
||||
<Route path={`${this.props.match.url}/:card`} component={Location} />
|
||||
return (<div className={`entry ${this.type}`}>
|
||||
<div className="top_content">
|
||||
<Route path={`${this.props.match.url}/:card`} component={this.props.component} />
|
||||
</div>
|
||||
<div className="cat_title">{this.type.charAt(0).toUpperCase()+this.type.substr(1)}</div>
|
||||
<div className="bottom_nav">{bottom_nav}</div>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
|
@ -25,7 +25,7 @@ export default class Tribes extends React.Component {
|
|||
// -> /{Tribe}/Mugic || /{Tribe}/Creatures
|
||||
render() {
|
||||
if (this.loaded == false) {
|
||||
API.buildCollection([{'cards': 'creatures'}, {'portal': 'creatures'}, {'cards': 'mugic'}, {'portal': 'mugic'}])
|
||||
API.LoadDB([{'cards': 'creatures'}, {'portal': 'creatures'}, {'cards': 'mugic'}, {'portal': 'mugic'}])
|
||||
.then(() => {
|
||||
this.loaded = true;
|
||||
});
|
||||
|
|
@ -37,7 +37,6 @@ export default class Tribes extends React.Component {
|
|||
|
||||
let tribe = path[2];
|
||||
|
||||
|
||||
let filter = this.filter.addCollection('filter');
|
||||
var pview = filter.addDynamicView('filter');
|
||||
pview.applySimpleSort('gsx$name');
|
||||
|
|
|
|||
|
|
@ -49,15 +49,10 @@ class DBSearch extends React.Component {
|
|||
|
||||
render() {
|
||||
if (this.loaded == false) {
|
||||
if (API.urls !== null &&
|
||||
API.portal !== null &&
|
||||
API.cards !== null
|
||||
) {
|
||||
API.buildCollection([{'portal': 'attacks'}, {'portal': 'battlegear'}, {'portal': 'creatures'}, {'portal': 'locations'}, {'portal': 'mugic'}])
|
||||
.then(() => {
|
||||
this.loaded = true;
|
||||
});
|
||||
}
|
||||
API.LoadDB([{'portal': 'attacks'}, {'portal': 'battlegear'}, {'portal': 'creatures'}, {'portal': 'locations'}, {'portal': 'mugic'}])
|
||||
.then(() => {
|
||||
this.loaded = true;
|
||||
});
|
||||
return (<span>Loading...</span>);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,13 @@ import {Link, Route} from 'react-router-dom';
|
|||
import API from '../SpreadsheetData';
|
||||
import Home from './Home';
|
||||
import Search from './Search';
|
||||
import Attacks from './Category/Attacks';
|
||||
import Battlegear from './Category/Battlegear';
|
||||
import Category from './Category/Category';
|
||||
import Creatures from './Category/Creatures';
|
||||
import Locations from './Category/Locations';
|
||||
import Mugic from './Category/Mugic';
|
||||
import Tribes from './Category/Tribes';
|
||||
import Attack from './Single/Attack';
|
||||
import Battlegear from './Single/Battlegear';
|
||||
import Location from './Single/Location';
|
||||
import {SearchButton} from '../Snippets';
|
||||
|
||||
import '../../scss/portal.scss';
|
||||
|
|
@ -31,21 +32,20 @@ export default class Base extends React.Component {
|
|||
}
|
||||
|
||||
function Routing(props) {
|
||||
const match = props.match;
|
||||
const url = props.match.url;
|
||||
|
||||
const tribes = API.tribes.map((tribe, i) => (
|
||||
<Route key={i} path={`${match.url}/${tribe}`} component={Tribes} />
|
||||
));
|
||||
return (
|
||||
<div>
|
||||
<Route exact path={match.url} component={Home} />
|
||||
<Route path={`${match.url}/Attacks`} component={Attacks} />
|
||||
<Route path={`${match.url}/Battlegear`} component={Battlegear} />
|
||||
<Route path={`${match.url}/Creatures`} component={Creatures} />
|
||||
<Route path={`${match.url}/Locations`} component={Locations} />
|
||||
<Route path={`${match.url}/Mugic`} component={Mugic} />
|
||||
{tribes}
|
||||
<Route path={`${match.url}/Search`} component={Search} />
|
||||
<Route exact path={url} component={Home} />
|
||||
<Route path={`${url}/Attacks`} render={(props) => <Category {...props} type="attacks" component={Attack} />} />
|
||||
<Route path={`${url}/Battlegear`} render={(props) => <Category {...props} type="battlegear" component={Battlegear} />} />
|
||||
<Route path={`${url}/Creatures`} component={Creatures} />
|
||||
<Route path={`${url}/Locations`} render={(props) => <Category {...props} type="locations" component={Location} />} />
|
||||
<Route path={`${url}/Mugic`} component={Mugic} />
|
||||
{API.tribes.map((tribe, i) => (
|
||||
<Route key={i} path={`${url}/${tribe}`} component={Tribes} />
|
||||
))}
|
||||
<Route path={`${url}/Search`} component={Search} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,10 +72,6 @@
|
|||
width: 18px;
|
||||
}
|
||||
|
||||
.entry {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.entry .title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
|
|
@ -109,3 +105,59 @@
|
|||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.portal {
|
||||
.entry {
|
||||
font-size: 1.2em;
|
||||
|
||||
.top_content {
|
||||
min-height: 600px;
|
||||
height: calc(100vh - 200px);
|
||||
overflow-y: scroll;
|
||||
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.cat_title {
|
||||
text-align: left;
|
||||
background-color: #1a1a1a;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
padding-top: 1px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
/* height is 118px */
|
||||
.bottom_nav {
|
||||
background-color: #1a1a1a;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
> div {
|
||||
display: inline-block;
|
||||
img {
|
||||
margin-right: 3px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user