Leahnaya/chaoticbackup.github.io
1
0
Fork 0
mirror of https://github.com/chaoticbackup/chaoticbackup.github.io.git synced 2026-04-26 01:02:54 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

[change] uniform layout

Browse Source
This commit is contained in:
Daniel 2019-01-03 21:06:13 -05:00
parent 5719e423c8
commit e7e5a7b597
11 changed files with 120 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -49,8 +49,7 @@
"node-sass": "^4.10.0", "node-sass": "^4.10.0",
"sass-loader": "^7.0.x", "sass-loader": "^7.0.x",
"style-loader": "^0.23.1", "style-loader": "^0.23.1",
"webpack": "^3.11", "webpack": "^3.12.0",
"webpack-cli": "^2.0.x", "webpack-dev-server": "^2.11.3"
"webpack-dev-server": "^2.11.1"
} }
} }

2
src/components/portal/Category.js
View File

@ -73,7 +73,6 @@ export default class Category extends React.Component {
: :
this.props.type this.props.type
); );
console.log(this.props.match);
top_content = ((tribe) ? top_content = ((tribe) ?
(<Route path={`${this.props.match.url}/${tribe}/:card`} component={this.props.component} />) (<Route path={`${this.props.match.url}/${tribe}/:card`} component={this.props.component} />)
: :
@ -88,7 +87,6 @@ export default class Category extends React.Component {
cat_title = this.props.type; cat_title = this.props.type;
top_content = (<Route path={`${this.props.match.url}/:card`} component={this.props.component} />); top_content = (<Route path={`${this.props.match.url}/:card`} component={this.props.component} />);
} }
console.log(top_content);
return (<div className={`entry ${this.type}`}> return (<div className={`entry ${this.type}`}>
<div className="top_content">{top_content}</div> <div className="top_content">{top_content}</div>

72
src/components/portal/Single/Attack.js
View File

@ -5,6 +5,7 @@ import API from '../../SpreadsheetData';
import s from '../../../styles/app.style'; import s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react'; import {observer, inject} from 'mobx-react';
import {PageNotFound} from '../../Snippets'; import {PageNotFound} from '../../Snippets';
import Single from './_base';
@inject((stores, props, context) => props) @observer @inject((stores, props, context) => props) @observer
export default class SingleAttack extends React.Component { export default class SingleAttack extends React.Component {
@ -28,41 +29,42 @@ export default class SingleAttack extends React.Component {
const card_data = API.cards.attacks.findOne({'gsx$name': name}); const card_data = API.cards.attacks.findOne({'gsx$name': name});
return ( return (<Single
<div> image={card_data.gsx$splash}
<img className="splash" src={API.base_image + card_data.gsx$splash} /> text={<div>
<div className="title">{attack.gsx$name}</div> <div className="title">{attack.gsx$name}</div>
<hr /> <hr />
<div> <div>
<strong>Attributes:</strong><br /> <strong>Attributes:</strong><br />
{attack.gsx$attributes} {attack.gsx$attributes}
</div> </div>
<hr /> <hr />
<div> <div>
<strong>Background:</strong><br /> <strong>Background:</strong><br />
{attack.gsx$background} {attack.gsx$background}
</div> </div>
<hr /> <hr />
<div> <div>
<strong>Details:</strong><br /> <strong>Details:</strong><br />
{attack.gsx$details} {attack.gsx$details}
</div> </div>
<hr /> <hr />
<div> <div>
<strong>Card ID: </strong> <strong>Card ID: </strong>
{card_data.gsx$id} {card_data.gsx$id}
</div> </div>
<hr /> <hr />
<div> <div>
<strong>Set: </strong> <strong>Set: </strong>
{card_data.gsx$set} {card_data.gsx$set}
</div> </div>
<hr /> <hr />
<div> <div>
<strong>Rarity: </strong> <strong>Rarity: </strong>
{card_data.gsx$rarity} {card_data.gsx$rarity}
</div> </div>
</div> </div>}
/>
); );
} }
} }

11
src/components/portal/Single/Battlegear.js
View File

@ -29,10 +29,9 @@ export default class SingleBattlegear extends React.Component {
const card_data = API.cards.battlegear.findOne({'gsx$name': name}); const card_data = API.cards.battlegear.findOne({'gsx$name': name});
return ( return (<Single
<div> image={card_data.gsx$splash}
<img className="splash" src={API.base_image + card_data.gsx$splash} /> text={<div>
<div className="title">{battlegear.gsx$name}</div>
<hr /> <hr />
<div> <div>
<strong>Attributes:</strong><br /> <strong>Attributes:</strong><br />
@ -68,7 +67,7 @@ export default class SingleBattlegear extends React.Component {
<strong>Ability:</strong><br /> <strong>Ability:</strong><br />
<Ability ability={card_data.gsx$ability} /> <Ability ability={card_data.gsx$ability} />
</div> </div>
</div> </div>}
); />);
} }
} }

13
src/components/portal/Single/Creature.js
View File

@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
import API from '../../SpreadsheetData'; import API from '../../SpreadsheetData';
import s from '../../../styles/app.style'; import s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react'; import {observer, inject} from 'mobx-react';
import Single from './_base';
import {PageNotFound, Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets'; import {PageNotFound, Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
@inject((stores, props, context) => props) @observer @inject((stores, props, context) => props) @observer
@ -46,11 +47,9 @@ export default class SingleCreature extends React.Component {
mugic.push(<Mugic key={i} tribe={tribe} />); mugic.push(<Mugic key={i} tribe={tribe} />);
} }
return ( return (<Single
<div> image={card_data.gsx$splash}
{card_data.gsx$splash && text={<div>
<img className="splash" src={API.base_image + card_data.gsx$splash} />
}
<div className="title">{creature.gsx$name}</div> <div className="title">{creature.gsx$name}</div>
<hr /> <hr />
<div> <div>
@ -166,7 +165,7 @@ export default class SingleCreature extends React.Component {
<strong>Mugic Ability: </strong> <strong>Mugic Ability: </strong>
{mugic} {mugic}
</div> </div>
</div> </div>}
); />);
} }
} }

14
src/components/portal/Single/Location.js
View File

@ -4,8 +4,8 @@ import { Link } from 'react-router-dom';
import API from '../../SpreadsheetData'; import API from '../../SpreadsheetData';
import s from '../../../styles/app.style'; import s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react'; import {observer, inject} from 'mobx-react';
import {PageNotFound} from '../../Snippets'; import Single from './_base';
import {Rarity, Unique, Name, Ability, Initiative} from '../../Snippets'; import {PageNotFound, Rarity, Unique, Name, Ability, Initiative} from '../../Snippets';
@inject((stores, props, context) => props) @observer @inject((stores, props, context) => props) @observer
export default class SingleLocation extends React.Component { export default class SingleLocation extends React.Component {
@ -29,9 +29,9 @@ export default class SingleLocation extends React.Component {
const card_data = API.cards.locations.findOne({'gsx$name': name}); const card_data = API.cards.locations.findOne({'gsx$name': name});
return ( return (<Single
<div> image={card_data.gsx$splash}
<img className="splash" src={API.base_image + card_data.gsx$splash} /> text={<div>
<div className="title">{location.gsx$name}</div> <div className="title">{location.gsx$name}</div>
<hr /> <hr />
<div> <div>
@ -78,7 +78,7 @@ export default class SingleLocation extends React.Component {
<strong>Ability:</strong><br /> <strong>Ability:</strong><br />
<Ability ability={card_data.gsx$ability} /> <Ability ability={card_data.gsx$ability} />
</div> </div>
</div> </div>}
); />);
} }
} }

11
src/components/portal/Single/Mugic.js
View File

@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
import API from '../../SpreadsheetData'; import API from '../../SpreadsheetData';
import s from '../../../styles/app.style'; import s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react'; import {observer, inject} from 'mobx-react';
import Single from './_base';
import {PageNotFound, Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets'; import {PageNotFound, Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
@inject((stores, props, context) => props) @observer @inject((stores, props, context) => props) @observer
@ -46,9 +47,9 @@ export default class SingleMugic extends React.Component {
} }
} }
return ( return (<Single
<div> image={card_data.gsx$splash}
<img className="splash" src={API.base_image + card_data.gsx$splash} /> text={<div>
<div className="title">{mugic.gsx$name}</div> <div className="title">{mugic.gsx$name}</div>
<hr /> <hr />
<div> <div>
@ -95,7 +96,7 @@ export default class SingleMugic extends React.Component {
<strong>Flavortext:</strong><br /> <strong>Flavortext:</strong><br />
{card_data.gsx$flavortext} {card_data.gsx$flavortext}
</div> </div>
</div> </div>}
); />);
} }
} }

21
src/components/portal/Single/_base.js Normal file
View File

@ -0,0 +1,21 @@
import React from 'react';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import API from '../../SpreadsheetData';
@inject((stores, props, context) => props) @observer
export default class Single extends React.Component {
render() {
return (<div>
<div className="splash">
{this.props.image &&
<img src={API.base_image + this.props.image} />
}
</div>
<div className="entry_text">
{this.props.text}
</div>
</div>);
}
}

12
src/components/portal/Tribes.js
View File

@ -54,7 +54,7 @@ export default class Tribes extends React.Component {
let results = pview.data(); let results = pview.data();
this.filter.removeCollection('filter'); this.filter.removeCollection('filter');
const output = results.map((card, i) => { const bottom_nav = results.map((card, i) => {
let card_data, url; let card_data, url;
if (card.gsx$type == "Mugic") { if (card.gsx$type == "Mugic") {
@ -75,15 +75,13 @@ export default class Tribes extends React.Component {
</div>); </div>);
}); });
return (<div className="entry creatures"> return (<div className="entry tribe">
<div className="left"> <div className="top_content">
<div className="title">{path[2]}<hr /></div>
{output}
</div>
<div className="right">
<Route path={`${this.props.match.url}/Creatures/:card`} component={Creature} /> <Route path={`${this.props.match.url}/Creatures/:card`} component={Creature} />
<Route path={`${this.props.match.url}/Mugic/:card`} component={Mugic} /> <Route path={`${this.props.match.url}/Mugic/:card`} component={Mugic} />
</div> </div>
<div className="cat_title">{path[2]}</div>
<div className="bottom_nav">{bottom_nav}</div>
</div>); </div>);
} }
} }

1
src/components/portal/index.js
View File

@ -26,7 +26,6 @@ export default class Base extends React.Component {
return ( return (
<div className="portal"> <div className="portal">
<Header /> <Header />
<br />
<Routing {...this.props} /> <Routing {...this.props} />
</div> </div>
); );

50
src/scss/portal.scss
View File

@ -1,8 +1,3 @@
.splash {
max-width: 100%;
padding-bottom: 10px;
}
.navbar h1 { .navbar h1 {
font-size: 16px; font-size: 16px;
} }
@ -114,26 +109,43 @@
min-height: 600px; min-height: 600px;
height: calc(100vh - 200px); height: calc(100vh - 200px);
overflow-y: scroll; overflow-y: scroll;
width: 100%;
// position: absolute;
// width: 100%;
/* width */ .splash {
::-webkit-scrollbar { padding-bottom: 4px;
width: 10px; img {
max-width: 100%;
}
// position: relative;
// z-index: -1;
} }
/* Track */ .entry_text {
::-webkit-scrollbar-track { position: relative;
background: #f1f1f1; max-width: 100%;
} }
/* Handle */ // /* width */
::-webkit-scrollbar-thumb { // ::-webkit-scrollbar {
background: #888; // width: 10px;
} // }
/* Handle on hover */ // /* Track */
::-webkit-scrollbar-thumb:hover { // ::-webkit-scrollbar-track {
background: #555; // background: #f1f1f1;
} // }
// /* Handle */
// ::-webkit-scrollbar-thumb {
// background: #888;
// }
// /* Handle on hover */
// ::-webkit-scrollbar-thumb:hover {
// background: #555;
// }
} }
.cat_title { .cat_title {