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

[update] portal information layout

Browse Source
This commit is contained in:
Daniel 2019-01-04 21:03:37 -05:00
parent 16caf27c95
commit 62269e4c72
14 changed files with 491 additions and 456 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

614
build/bundle.js
View File

File diff suppressed because one or more lines are too long

41
build/style.css
View File

@ -104,6 +104,9 @@
padding-bottom: 4px;
display: inherit; }
#player {
text-align: center; }
@media only screen and (min-width: 975px) {
.collection > .left {
float: left;
@ -324,20 +327,48 @@
overflow-y: auto;
width: 100%;
position: relative; }
.portal .entry .entry_content .splash {
.portal .entry .entry_content .entry_splash {
padding-bottom: 4px; }
.portal .entry .entry_content .splash img {
.portal .entry .entry_content .entry_splash img {
max-width: 100%; }
.portal .entry .entry_content .splash .arrow {
.portal .entry .entry_content .entry_splash .arrow {
position: absolute;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
width: 100%;
top: 95%; }
.portal .entry .entry_content .entry_text {
.portal .entry .entry_content .entry_body {
position: relative;
max-width: 100%; }
max-width: 100%;
padding-bottom: 4px;
display: flex;
flex-wrap: wrap; }
.portal .entry .entry_content .entry_body hr {
margin: 0px; }
.portal .entry .entry_content .entry_body .title {
min-width: 100%; }
.portal .entry .entry_content .entry_body .title hr {
margin-top: 8px; }
.portal .entry .entry_content .entry_body .column > div,
.portal .entry .entry_content .entry_body .nocolumn > div {
padding-left: 8px;
padding-right: 8px;
padding-top: 8px;
padding-bottom: 8px; }
.portal .entry .entry_content .entry_body .column:nth-child(2) {
flex-grow: 1;
text-align: left;
min-width: 0;
width: 30%; }
.portal .entry .entry_content .entry_body .column:last-child {
flex-grow: 2;
min-width: 0;
flex: 60%;
border-left: 1px solid white; }
.portal .entry .entry_content .entry_body .ability {
white-space: pre-line;
word-wrap: break-all; }
.portal .entry .entry_content::-webkit-scrollbar {
width: 1px; }
.portal .entry .cat_title {

5
package.json
View File

@ -4,8 +4,7 @@
"description": "Chaotic Backup",
"scripts": {
"start": "webpack-dev-server -d --inline --host 0.0.0.0 --history-api-fallback",
"build": "webpack -d",
"v": "webpack -v"
"build": "webpack -d"
},
"repository": {
"type": "git",
@ -50,7 +49,7 @@
"node-sass": "^4.10.0",
"sass-loader": "^7.0.x",
"style-loader": "^0.23.1",
"webpack": "^3.11.0",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.11.3"
}
}

6
src/components/Snippets.js
View File

@ -27,7 +27,9 @@ export function Rarity(props) {
return (
<span>
<img className={props.size||"icon16"} style={{verticalAlign: 'middle'}} src={("/src/img/icons/set/"+props.set+"/"+props.rarity+".png").toLowerCase()} />
{API.sets[props.set]}&nbsp;|&nbsp;{props.rarity}
{!props.notext &&
<React.Fragment>{API.sets[props.set]}&nbsp;|&nbsp;{props.rarity}</React.Fragment>
}
</span>
);
}
@ -139,7 +141,7 @@ export function Initiative(props) {
else if (initiative.toLowerCase() == "mugic counter") {
image = <img className="icon16" style={{verticalAlign: 'middle'}} src={("/src/img/icons/mugic/generic.png").toLowerCase()} />
}
return (<span>Initiative: {image} {initiative}</span>);
return (<span>{!props.notitle && ("Initiative: ")}{image}&nbsp;{initiative}</span>);
}
export function Splash(props) {

10
src/components/index.js
View File

@ -24,14 +24,14 @@ render(
function Routing(props) {
return (
<div>
<React.Fragment>
<Route exact path="/" component={Home} />
<Route path="/PageNotFound" component={PageNotFound} />
<Route path="/UnderConstruction" component={UnderConstruction} />
<Route path="/EnterTheCode" component={EnterTheCode} />
<Route path="/collection" component={Collection} />
<Route path="/portal" component={Portal} />
</div>
</React.Fragment>
);
}
@ -44,7 +44,7 @@ function Base(props) {
const children = <Routing {...props} />;
return (
<div>
<React.Fragment>
<div className="fix-pgBkgrnd-repeat-x">
<div className={"fix-img-bkgrnd fix-img-bkgrnd_"+bkgrnd}></div>
</div>
@ -97,7 +97,7 @@ function Base(props) {
<div className="content-area-left-repeat-y">
<div className="content-area-right-repeat-y">
<div style={{margin: "0 8px 0 10px"}}>
<div id="player" style={{textAlign: "center"}}>
<div id="player">
{children}
</div>
</div>
@ -156,6 +156,6 @@ function Base(props) {
</div>
</div>
</div>
</div>
</React.Fragment>
);
}

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

@ -30,10 +30,8 @@ export default class SingleAttack extends React.Component {
const card_data = API.cards.attacks.findOne({'gsx$name': name});
return (<Single
image={card_data.gsx$splash}
name={card_data.gsx$name}
text={<div>
<hr />
card={card_data}
col2={<React.Fragment>
<div>
<strong>Attributes:</strong><br />
{attack.gsx$attributes}
@ -48,22 +46,7 @@ export default class SingleAttack extends React.Component {
<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>}
</React.Fragment>}
/>
);
}

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

@ -5,7 +5,7 @@ import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react';
import {PageNotFound} from '../../Snippets';
import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
import Single from './_base';
@inject((stores, props, context) => props) @observer
export default class SingleBattlegear extends React.Component {
@ -30,10 +30,8 @@ export default class SingleBattlegear extends React.Component {
const card_data = API.cards.battlegear.findOne({'gsx$name': name});
return (<Single
image={card_data.gsx$splash}
name={card_data.gsx$name}
text={<div>
<hr />
card={card_data}
col2={<React.Fragment>
<div>
<strong>Attributes:</strong><br />
{battlegear.gsx$attributes}
@ -48,27 +46,7 @@ export default class SingleBattlegear extends React.Component {
<strong>Details:</strong><br />
{battlegear.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>
<hr />
<div>
<strong>Ability:</strong><br />
<Ability ability={card_data.gsx$ability} />
</div>
</div>}
</React.Fragment>}
/>);
}
}

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

@ -48,9 +48,8 @@ export default class SingleCreature extends React.Component {
}
return (<Single
image={card_data.gsx$splash}
name={card_data.gsx$name}
text={<div>
card={card_data}
text={<React.Fragment>
<hr />
<div>
<strong>Appearance:</strong><br />
@ -165,7 +164,7 @@ export default class SingleCreature extends React.Component {
<strong>Mugic Ability: </strong>
{mugic}
</div>
</div>}
</React.Fragment>}
/>);
}
}

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

@ -5,7 +5,7 @@ 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, Ability, Initiative} from '../../Snippets';
import {PageNotFound, Initiative} from '../../Snippets';
@inject((stores, props, context) => props) @observer
export default class SingleLocation extends React.Component {
@ -30,10 +30,12 @@ export default class SingleLocation extends React.Component {
const card_data = API.cards.locations.findOne({'gsx$name': name});
return (<Single
image={card_data.gsx$splash}
name={card_data.gsx$name}
text={<div>
<hr />
card={card_data}
col0={<React.Fragment>
<strong>Initiative: </strong>
<Initiative initiative={card_data.gsx$initiative} notitle="true"/>
</React.Fragment>}
col2={<React.Fragment>
<div>
<strong>Local Features:</strong><br />
{location.gsx$localfeatures}
@ -44,41 +46,11 @@ export default class SingleLocation extends React.Component {
{location.gsx$background}
</div>
<hr />
<div>
<strong>Card Flavor:</strong><br />
{card_data.gsx$flavortext}
</div>
<hr />
<div>
<strong>Details:</strong><br />
{location.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>
<hr />
<div>
<strong>Location Initiative: </strong>
<Initiative initiative={card_data.gsx$initiative} />
</div>
<hr />
<div>
<strong>Ability:</strong><br />
<Ability ability={card_data.gsx$ability} />
</div>
</div>}
</React.Fragment>}
/>);
}
}

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

@ -48,35 +48,8 @@ export default class SingleMugic extends React.Component {
}
return (<Single
image={card_data.gsx$splash}
name={card_data.gsx$name}
text={<div>
<hr />
<div>
<strong>Background:</strong><br />
{mugic.gsx$background}
</div>
<hr />
<div>
<strong>Details:</strong><br />
{mugic.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>
<hr />
card={card_data}
col0={<React.Fragment>
<div>
<strong>Tribe: </strong>
<Tribe tribe={tribe} />
@ -86,17 +59,18 @@ export default class SingleMugic extends React.Component {
<strong>Cost: </strong>
{cost}
</div>
<hr />
</React.Fragment>}
col2={<React.Fragment>
<div>
<strong>Ability:</strong><br />
<Ability ability={card_data.gsx$ability} tribe={card_data.gsx$tribe} />
<strong>Background:</strong><br />
{mugic.gsx$background}
</div>
<hr />
<div>
<strong>Flavortext:</strong><br />
{card_data.gsx$flavortext}
<strong>Details:</strong><br />
{mugic.gsx$details}
</div>
</div>}
</React.Fragment>}
/>);
}
}

69
src/components/portal/Single/_base.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import API from '../../SpreadsheetData';
import {Rarity, Unique, Name, Ability} from '../../Snippets';
@inject((stores, props, context) => props) @observer
export default class Single extends React.Component {
@ -16,23 +17,73 @@ export default class Single extends React.Component {
}
render() {
return (<div>
let card = this.props.card;
return (<React.Fragment>
<div className={"modal" + (this.fullscreen?"":" hidden")}>
<span className="close" onClick={this.close.bind(this)}>&times;</span>
<img className="modal-content" src={API.base_image + this.props.image} />
<img className="modal-content" src={API.base_image + card.gsx$splash} />
</div>
{this.props.image && (
<div className="splash">
{card.gsx$splash && (
<div className="entry_splash">
{/*<span className="arrow">&#8681;</span>*/}
<img onClick={this.expand.bind(this)} src={API.base_image + this.props.image} />
<img onClick={this.expand.bind(this)} src={API.base_image + card.gsx$splash} />
</div>
)}
<div className="entry_text">
<span className="title">{this.props.name}</span>
<div className="entry_body">
<div className="title">
<Name name={card.gsx$name} />
<hr />
</div>
{this.props.text &&
this.props.text
<div className="nocolumn">{this.props.text}</div>
}
{!this.props.text &&
<div className="column">
<div>
<strong>Set: </strong>
{`${API.sets[card.gsx$set]} (${card.gsx$set})`}
</div>
<hr />
<div>
<strong>Rarity: </strong>
<Rarity set={card.gsx$set} rarity={card.gsx$rarity} notext="true" />
&nbsp;{card.gsx$rarity}
</div>
<hr />
<div>
<strong>Card ID: </strong>
{card.gsx$id}
</div>
{this.props.col0 && <React.Fragment>
<hr />
{this.props.col0}
</React.Fragment>}
{card.gsx$ability && <React.Fragment>
<hr />
<div>
<strong>Ability:</strong>
<Ability ability={card.gsx$ability} />
</div>
</React.Fragment>}
{card.gsx$flavortext && <React.Fragment>
<hr />
<div>
<strong>Card Flavor:</strong><br />
{card.gsx$flavortext}
</div>
</React.Fragment>}
{this.props.col1 && <React.Fragment>
<hr />
this.props.col1
</React.Fragment>}
</div>
}
{!this.props.text &&
<div className="column">
{this.props.col2}
</div>
}
</div>
</div>);
</React.Fragment>);
}
}

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

@ -44,7 +44,7 @@ function Routing(props) {
const url = props.match.url;
return (
<div>
<React.Fragment>
<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} />} />
@ -55,7 +55,7 @@ function Routing(props) {
<Route key={i} path={`${url}/${tribe}`} component={Tribes} />
))}
<Route path={`${url}/Search`} component={Search} />
</div>
</React.Fragment>
);
}

4
src/scss/base.scss
View File

@ -36,3 +36,7 @@
padding-bottom: 4px;
display: inherit;
}
#player {
text-align: center;
}

46
src/scss/portal.scss
View File

@ -114,7 +114,7 @@
position: relative;
// width: 100%;
.splash {
.entry_splash {
padding-bottom: 4px;
img {
max-width: 100%;
@ -132,9 +132,51 @@
}
}
.entry_text {
.entry_body {
position: relative;
max-width: 100%;
padding-bottom: 4px;
display: flex;
flex-wrap: wrap;
hr {
margin: 0px;
}
.title {
min-width: 100%;
}
.title hr {
margin-top: 8px;
}
.column > div,
.nocolumn > div {
padding-left: 8px;
padding-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
}
.column:nth-child(2) {
flex-grow: 1;
text-align: left;
min-width: 0;
width: 30%;
}
.column:last-child {
flex-grow: 2;
min-width: 0;
flex: 60%;
border-left: 1px solid white;
}
.ability {
white-space: pre-line;
word-wrap: break-all;
}
}
// /* width */