Leahnaya/chaoticbackup.github.io
1
0
Fork 0
mirror of https://github.com/chaoticbackup/chaoticbackup.github.io.git synced 2026-03-21 17:24:14 -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",
"sass-loader": "^7.0.x",
"style-loader": "^0.23.1",
"webpack": "^3.11",
"webpack-cli": "^2.0.x",
"webpack-dev-server": "^2.11.1"
"webpack": "^3.12.0",
"webpack-dev-server": "^2.11.3"
}
}

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

@ -73,7 +73,6 @@ export default class Category extends React.Component {
:
this.props.type
);
console.log(this.props.match);
top_content = ((tribe) ?
(<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;
top_content = (<Route path={`${this.props.match.url}/:card`} component={this.props.component} />);
}
console.log(top_content);
return (<div className={`entry ${this.type}`}>
<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 {observer, inject} from 'mobx-react';
import {PageNotFound} from '../../Snippets';
import Single from './_base';
@inject((stores, props, context) => props) @observer
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});
return (
<div>
<img className="splash" src={API.base_image + card_data.gsx$splash} />
<div className="title">{attack.gsx$name}</div>
<hr />
<div>
<strong>Attributes:</strong><br />
{attack.gsx$attributes}
</div>
<hr />
<div>
<strong>Background:</strong><br />
{attack.gsx$background}
</div>
<hr />
<div>
<strong>Details:</strong><br />
{attack.gsx$details}
</div>
<hr />
<div>
<strong>Card ID: </strong>
{card_data.gsx$id}
</div>
<hr />
<div>
<strong>Set: </strong>
{card_data.gsx$set}
</div>
<hr />
<div>
<strong>Rarity: </strong>
{card_data.gsx$rarity}
</div>
</div>
return (<Single
image={card_data.gsx$splash}
text={<div>
<div className="title">{attack.gsx$name}</div>
<hr />
<div>
<strong>Attributes:</strong><br />
{attack.gsx$attributes}
</div>
<hr />
<div>
<strong>Background:</strong><br />
{attack.gsx$background}
</div>
<hr />
<div>
<strong>Details:</strong><br />
{attack.gsx$details}
</div>
<hr />
<div>
<strong>Card ID: </strong>
{card_data.gsx$id}
</div>
<hr />
<div>
<strong>Set: </strong>
{card_data.gsx$set}
</div>
<hr />
<div>
<strong>Rarity: </strong>
{card_data.gsx$rarity}
</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});
return (
<div>
<img className="splash" src={API.base_image + card_data.gsx$splash} />
<div className="title">{battlegear.gsx$name}</div>
return (<Single
image={card_data.gsx$splash}
text={<div>
<hr />
<div>
<strong>Attributes:</strong><br />
@ -68,7 +67,7 @@ export default class SingleBattlegear extends React.Component {
<strong>Ability:</strong><br />
<Ability ability={card_data.gsx$ability} />
</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 s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react';
import Single from './_base';
import {PageNotFound, Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
@inject((stores, props, context) => props) @observer
@ -46,11 +47,9 @@ export default class SingleCreature extends React.Component {
mugic.push(<Mugic key={i} tribe={tribe} />);
}
return (
<div>
{card_data.gsx$splash &&
<img className="splash" src={API.base_image + card_data.gsx$splash} />
}
return (<Single
image={card_data.gsx$splash}
text={<div>
<div className="title">{creature.gsx$name}</div>
<hr />
<div>
@ -166,7 +165,7 @@ export default class SingleCreature extends React.Component {
<strong>Mugic Ability: </strong>
{mugic}
</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 s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react';
import {PageNotFound} from '../../Snippets';
import {Rarity, Unique, Name, Ability, Initiative} from '../../Snippets';
import Single from './_base';
import {PageNotFound, Rarity, Unique, Name, Ability, Initiative} from '../../Snippets';
@inject((stores, props, context) => props) @observer
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});
return (
<div>
<img className="splash" src={API.base_image + card_data.gsx$splash} />
return (<Single
image={card_data.gsx$splash}
text={<div>
<div className="title">{location.gsx$name}</div>
<hr />
<div>
@ -78,7 +78,7 @@ export default class SingleLocation extends React.Component {
<strong>Ability:</strong><br />
<Ability ability={card_data.gsx$ability} />
</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 s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react';
import Single from './_base';
import {PageNotFound, Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
@inject((stores, props, context) => props) @observer
@ -46,9 +47,9 @@ export default class SingleMugic extends React.Component {
}
}
return (
<div>
<img className="splash" src={API.base_image + card_data.gsx$splash} />
return (<Single
image={card_data.gsx$splash}
text={<div>
<div className="title">{mugic.gsx$name}</div>
<hr />
<div>
@ -95,7 +96,7 @@ export default class SingleMugic extends React.Component {
<strong>Flavortext:</strong><br />
{card_data.gsx$flavortext}
</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();
this.filter.removeCollection('filter');
const output = results.map((card, i) => {
const bottom_nav = results.map((card, i) => {
let card_data, url;
if (card.gsx$type == "Mugic") {
@ -75,15 +75,13 @@ export default class Tribes extends React.Component {
</div>);
});
return (<div className="entry creatures">
<div className="left">
<div className="title">{path[2]}<hr /></div>
{output}
</div>
<div className="right">
return (<div className="entry tribe">
<div className="top_content">
<Route path={`${this.props.match.url}/Creatures/:card`} component={Creature} />
<Route path={`${this.props.match.url}/Mugic/:card`} component={Mugic} />
</div>
<div className="cat_title">{path[2]}</div>
<div className="bottom_nav">{bottom_nav}</div>
</div>);
}
}

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

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

50
src/scss/portal.scss
View File

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