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

Merge pull request #46 from chaoticbackup/ui2

Browse Source 
Improved UI
This commit is contained in:
Daniel 2019-04-22 20:44:58 -04:00 committed by GitHub
commit 45ddb26aaa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 349 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -12,3 +12,5 @@ node_modules
*.sublime-workspace
package-lock.json
*.idea

2
build/bundle.js
View File

File diff suppressed because one or more lines are too long

2
build/main.css
View File

File diff suppressed because one or more lines are too long

1
index.html
View File

@ -7,6 +7,7 @@
<meta name="description" content="Chaotic Backup">
<link rel="stylesheet" type="text/css" href="/build/main.css">
<link rel="stylesheet" type="text/css" href="/src/css/legacy.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
html, body, div, span, a, p, ul, li, h1 {
margin: 0;

12
src/components/collection/index.js
View File

@ -50,7 +50,7 @@ export default class Home extends React.Component {
extended() {
return (
<div className="ext-button">
<button onClick={(e) => this.ext = !this.ext}
<button id="buttons" onClick={(e) => this.ext = !this.ext}
>{this.ext ? "Short Format" : "Extended Format"}</button>
</div>
);
@ -60,19 +60,19 @@ export default class Home extends React.Component {
let numpages = Math.ceil(this.content.length / this.n);
let next = () => {
if (this.p < numpages) return(<button onClick={ () => {this.p++; window.scrollTo(0, 0);} }>next</button>);
else return(<button disabled>next</button>);
if (this.p < numpages) return(<button id="buttons" onClick={ () => {this.p++; window.scrollTo(0, 0);} }>next</button>);
else return(<button id="buttons" disabled>next</button>);
}
let prev = () => {
if (this.p > 1) return(<button onClick={ () => {this.p--; window.scrollTo(0, 0);} }>prev</button>);
else return(<button disabled>prev</button>);
if (this.p > 1) return(<button id="buttons" onClick={ () => {this.p--; window.scrollTo(0, 0);} }>prev</button>);
else return(<button id="buttons" disabled>prev</button>);
}
return (
<div className="entries">
{this.content.length} results - page {this.p} of {numpages} {prev()} {next()}
<br/>Entries per page:&nbsp;
<br/>Entries per page
{/*<input type="text" style={{width: '40px'}} value={this.n}
onChange={(event) => {let x = event.target.value; if (!isNaN(x)) this.n=x;}
/>*/}

112
src/components/collection/search/index.js
View File

@ -201,7 +201,7 @@ export default class SearchCollection extends React.Component {
// });
let tribes = gen("tribes", "inline", (item) => {
return (<span><img className="icon16" src={"/src/img/icons/tribes/"+item+".png"} />&nbsp;</span>);
return (<span><img className="icon16" src={"/src/img/icons/tribes/"+item+".png"} /></span>);
});
let elements = gen("elements", "inline", (item) => {
@ -218,52 +218,98 @@ export default class SearchCollection extends React.Component {
return (
<div className="SearchForm">
<form onSubmit={this.search}>
<label className="bigger">Search</label>
<label className="searchName">Search</label>
<br />
<div className="text-entry">
<input type="text" name="name" placeholder="Card Name" value={this.input.name} onChange={this.handleChange} />
<br />
</div>
<div className="text-entry">
<input type="text" name="text" placeholder="Card Text" value={this.input.text} onChange={this.handleChange} />
<br />
<label className="mull"><input type="checkbox" name="flavor" value={!this.input.flavor} onChange={(e) => {this.input.flavor = !e.target.checked}} />Ignore Flavortext</label>
<br />
</div>
<div className="text-entry">
<input type="text" name="subtypes" placeholder="Subtypes | Initiative" value={this.input.subtypes} onChange={this.handleChange} />
</div>
<label className="mull"><input type="checkbox" name="past" checked={this.input.past} onChange={this.handleChange} />Past</label>&nbsp;
<label className="mull"><input type="checkbox" name="mirage" checked={this.input.mirage} onChange={this.handleChange} />Mirage</label>&nbsp;
<label className="mull"><input type="checkbox" name="minion" checked={this.input.minion} onChange={this.handleChange} />Minion</label>
<br /><br />
<label className="mull"><input type="checkbox" name="unique" checked={this.input.mull.unique} onChange={e => this.handleChange(e, "mull")} />Unique</label>&nbsp;
<label className="mull"><input type="checkbox" name="loyal" checked={this.input.mull.loyal} onChange={e => this.handleChange(e, "mull")} />Loyal</label>&nbsp;
<label className="mull"><input type="checkbox" name="legendary" checked={this.input.mull.legendary} onChange={e => this.handleChange(e, "mull")} />Legendary</label>
<br />
<label className="mull"><input type="checkbox" name="mixed" checked={this.input.mull.mixed} onChange={e => this.handleChange(e, "mull")} />Non-Loyal</label>
<div className="centeredCheckBox">
<label className="mull"><input type="checkbox" name="flavor" value={!this.input.flavor} onChange={(e) => {this.input.flavor = !e.target.checked}} />Ignore Flavortext</label>
</div>
<div className="centeredCheckBox">
<label className="mull"><input type="checkbox" name="past" checked={this.input.past} onChange={this.handleChange} />Past</label>
</div>
<div className="centeredCheckBox">
<label className="mull"><input type="checkbox" name="mirage" checked={this.input.mirage} onChange={this.handleChange} />Mirage</label>
</div>
<div className="centeredCheckBox">
<label className="mull"><input type="checkbox" name="minion" checked={this.input.minion} onChange={this.handleChange} />Minion</label>
</div>
<div className="centeredCheckBox">
<label className="mull"><input type="checkbox" name="unique" checked={this.input.mull.unique} onChange={e => this.handleChange(e, "mull")} />Unique</label>
</div>
<div className="centeredCheckBox">
<label className="mull"><input type="checkbox" name="loyal" checked={this.input.mull.loyal} onChange={e => this.handleChange(e, "mull")} />Loyal</label>
</div>
<div className="centeredCheckBox">
<label className="mull"><input type="checkbox" name="legendary" checked={this.input.mull.legendary} onChange={e => this.handleChange(e, "mull")} />Legendary</label>
</div>
<div className="centeredCheckBox">
<label className="mull"><input type="checkbox" name="mixed" checked={this.input.mull.mixed} onChange={e => this.handleChange(e, "mull")} />Non-Loyal</label>
</div>
<br /><hr />
{tribes}
<br /> <hr />
{elements}&nbsp;
<label className="none"><input type="checkbox" name="none" checked={this.input.elements.none} onChange={e => this.handleChange(e, "elements")} /><span>None</span></label>
<br />
<input type="button" value={this.input.elements.none ? "none" : "or"} className="and" disabled={!this.input.elements.and} onClick={(e)=>{this.input.elements.and=false;}} />
<input type="button" value={this.input.elements.none ? "only" : "and"} className="and" disabled={this.input.elements.and} onClick={(e)=>{this.input.elements.and=true;}} />
<br /> <hr />
<div className="tribes">
{tribes}
</div>
<hr />
<div className="tribes">
{elements}
<label className="none"><input type="checkbox" name="none" checked={this.input.elements.none} onChange={e => this.handleChange(e, "elements")} /><span>None</span></label>
</div>
<div className="centeredButtons">
<input type="button" value={this.input.elements.none ? "none" : "or"} className="and" disabled={!this.input.elements.and} onClick={(e)=>{this.input.elements.and=false;}} />
<input type="button" value={this.input.elements.none ? "only" : "and"} className="and" disabled={this.input.elements.and} onClick={(e)=>{this.input.elements.and=true;}} />
</div>
<hr />
<div className="disciplines">
{disciplines}
<br /> <hr />
</div>
<hr />
<Collapsible open={true} trigger="Energy">
<label className="mcbp">Min:&nbsp;<input type="text" name="min" value={this.input.energy.min} onChange={e => this.handleChange(e, "energy")} /></label>&nbsp;
<label className="mcbp">Max:&nbsp;<input type="text" name="max" value={this.input.energy.max} onChange={e => this.handleChange(e, "energy")} /></label>
<div className="minMax">
<label className="mcbp">Min <input type="text" name="min" value={this.input.energy.min} onChange={e => this.handleChange(e, "energy")} /></label>
</div>
<div className="minMax">
<label className="mcbp">Max <input type="text" name="max" value={this.input.energy.max} onChange={e => this.handleChange(e, "energy")} /></label>
</div>
</Collapsible>
<Collapsible open={true} trigger="Build Points & Mugic Counters/Cost">
<label className="mcbp">Min:&nbsp;<input type="text" name="min" value={this.input.mcbp.min} onChange={e => this.handleChange(e, "mcbp")} /></label>&nbsp;
<label className="mcbp">Max:&nbsp;<input type="text" name="max" value={this.input.mcbp.max} onChange={e => this.handleChange(e, "mcbp")} /></label>
<div className="minMax">
<label className="mcbp">Min <input type="text" name="min" value={this.input.mcbp.min} onChange={e => this.handleChange(e, "mcbp")} /></label>
</div>
<div className="minMax">
<label className="mcbp">Max <input type="text" name="max" value={this.input.mcbp.max} onChange={e => this.handleChange(e, "mcbp")} /></label>
</div>
</Collapsible>
<Collapsible open={true} trigger="Types">
<div className="centeredCheckBox">
{types}
</div>
</Collapsible>
<Collapsible trigger="Rarity">
<div className="centeredCheckBox">
{rarity}
</div>
</Collapsible>
<Collapsible trigger="Sets">
<div className="setBox">
<div className="centeredCheckBox" id="sets">
{sets}
</div>
</div>
</Collapsible>
<Collapsible open={true} trigger="Types">{types}</Collapsible>
<Collapsible trigger="Rarity">{rarity}</Collapsible>
<Collapsible trigger="Sets">{sets}</Collapsible>
{/*<Collapsible trigger="Gender (fan content)">{gender}</Collapsible>*/}
<br />
<input type="submit" value="Search" />&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="Reset" onClick={this.reset} />
<div className="centeredButtons">
<input id="search" type="submit" value="Search" />
<input id="search" type="button" value="Reset" onClick={this.reset} />
</div>
</form>
</div>
);

2
src/components/collection/types/Attack.js
View File

@ -1,7 +1,5 @@
import React from 'react';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import {Rarity, Unique, Name, Element, Ability} from '../../Snippets';

3
src/components/collection/types/Battlegear.js
View File

@ -1,8 +1,5 @@
import React from 'react';
import Interactive from 'react-interactive';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import {Rarity, Unique, Name, Ability} from '../../Snippets';

26
src/components/collection/types/Creature.js
View File

@ -1,8 +1,5 @@
import React from 'react';
import Interactive from 'react-interactive';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
@ -44,13 +41,22 @@ export default class Creature extends React.Component {
<span className="flavortext">{card.gsx$flavortext}</span>
</div>
<br />
<div className="stats">
<span>{card.gsx$courage}&nbsp;<img className="icon16" src={"/src/img/icons/disciplines/courage.png"}></img></span><br />
<span>{card.gsx$power}&nbsp;<img className="icon16" src={"/src/img/icons/disciplines/power.png"}></img></span><br />
<span>{card.gsx$wisdom}&nbsp;<img className="icon16" src={"/src/img/icons/disciplines/wisdom.png"}></img></span><br />
<span>{card.gsx$speed}&nbsp;<img className="icon16" src={"/src/img/icons/disciplines/speed.png"}></img></span><br />
<span style={{fontWeight: 'bold'}}>{card.gsx$energy}</span>
</div>
<div className="stats">
<div className="energy">
{card.gsx$courage}<img className="icon16" src={"/src/img/icons/disciplines/courage.png"}></img>
</div>
<div className="energy">
{card.gsx$power}<img className="icon16"src={"/src/img/icons/disciplines/power.png"}></img>
</div>
<div className="energy">
{card.gsx$wisdom}<img className="icon16"src={"/src/img/icons/disciplines/wisdom.png"}></img>
</div>
<div className="energy">
{card.gsx$speed}<img className="icon16"src={"/src/img/icons/disciplines/speed.png"}></img>
</div>
<div className="energy" style={{fontWeight: 'bold'}}>{card.gsx$energy}
</div>
</div>
</div>
)
else return (

3
src/components/collection/types/Location.js
View File

@ -1,8 +1,5 @@
import React from 'react';
import Interactive from 'react-interactive';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import {Rarity, Unique, Name, Ability, Initiative} from '../../Snippets';

3
src/components/collection/types/Mugic.js
View File

@ -1,8 +1,5 @@
import React from 'react';
import Interactive from 'react-interactive';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import {Rarity, Unique, Name, Mugic, Ability} from '../../Snippets';

1
src/css/legacy/Collection.css
View File

@ -1,6 +1,7 @@
/*-------------- Collection --------------*/
/*------------------------------------------------------*/
/*-------------- Save/noSave Button --------------*/
.saveBtn {
width:35px; height:35px; border:none; outline:none;
background:url(http://web.archive.org/web/20120207003733im_/http://www.chaoticgame.com/Images/save-sprite.png) 0 0 no-repeat;

379
src/scss/collection.scss
View File

@ -2,53 +2,97 @@
@media only screen and (min-width: 975px) {
.collection {
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
> .left {
float: left;
width: 30%;
}
> .right {
float: right;
width: 70%;
}
.collection {
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
> .left {
font-family: Roboto, Arial, sans-serif;
float: left;
width: 30%;
}
> .right {
font-family: Roboto, Arial, sans-serif;
float: right;
width: 70%;
}
}
}
.collection {
@media only screen and (min-width: 975px) {
@media only screen and (min-width: 975px) {
#buttons {
border-radius: 5px;
border-color: transparent;
text-align: center;
margin: 0 0 2% 1%;
outline: none;
}
input[type="button"], .button {
border-radius: 5px;
border-color: transparent;
text-align: center;
outline: none;
}
.text-entry {
input[type="text"] {
margin-bottom: 2px;
width: 200px;
margin-bottom: 2px;
width: 200px;
border-radius: 5px;
border-color: transparent;
text-align: center;
outline: none;
}
}
.card {
text-align: left;
display: flex;
border: 1px solid #AEAEAE;
.text-entry {
.left,
.right,
.stats {
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
input:focus {
outline: none;
}
}
.card {
text-align: left;
display: flex;
border: 1px solid #AEAEAE;
.left,
.right,
.stats {
padding-top: 2px;
}
}
.left {
.stats {
padding-top: 2%;
}
.bigger {
text-align: center;
font-weight: bold;
}
.energy {
display: flex;
width: 20px !important;
}
.left {
vertical-align: text-top;
float: left;
width: 210px;
padding-left: 4px;
}
}
.right {
.right {
float: left;
width: calc(100% - (100px + 4px + 4px + 4px + 210px));
border-left: 2px solid #AEAEAE;
@ -56,187 +100,248 @@
padding-right: 4px;
padding-bottom: 6px;
white-space: pre-line;
}
}
}
.creature .right {
width: calc(100% - (100px + 4px + 4px + 4px + 210px + 40px + 4px));
}
.creature .right {
width: calc(100% - (100px + 4px + 4px + 4px + 210px + 40px + 4px));
}
.creature .stats {
vertical-align: text-top;
float: left;
text-align: right;
width: 40px;
padding-right: 4px;
}
.creature .stats {
vertical-align: text-top;
float: left;
text-align: right;
width: 40px;
padding-right: 4px;
}
.SearchForm {
text-align: left;
padding-top: 3px;
}
.SearchForm {
padding-top: 3px;
font-family: Roboto, Arial, sans-serif;
}
.brainwashed {
background-color: #dcdddf;
color: black !important;
}
.searchName {
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
padding: 2%;
font-size: 16pt;
}
.flavortext,
.chieftain {
font-style: italic;
}
.centeredCheckBox {
margin: 0 auto;
width: 43%;
}
.disciplines input {
width: 30px;
height: 14px;
text-align: center;
margin-top: 2px;
}
.setBox {
width: 80%;
float: right;
}
.mull input,
.Collapsible__contentInner input {
#sets {
width: 80%;
}
.centeredButtons {
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
#search {
width: 25%;
margin: 2%;
border-radius: 5px;
border-color: transparent;
text-align: center;
}
.minMax {
margin: 0 auto;
width: 25%;
text-align: right;
}
.brainwashed {
border-radius: 3px;
background-color: #dcdddf;
color: black !important;
}
.flavortext,
.chieftain {
font-style: italic;
}
.disciplines input {
width: 30px;
height: 14px;
text-align: center;
margin-top: 2px;
}
.mull input,
.Collapsible__contentInner input {
vertical-align: middle;
}
.mcbp input {
width: 24px;
height: 14px;
padding: unset;
text-align: center;
margin-top: 2px;
}
.tribes {
width: 96%;
text-align: center;
}
.disciplines {
text-align: center;
}
.and {
text-align: center;
vertical-align: text-bottom;
width: 15%;
border-radius: 5px;
border-color: transparent;
margin: 2%;
}
}
/* desktop */
.card .icon14, .card .icon16,
.card .icon20, .card .icon24 {
vertical-align: middle;
}
}
.mcbp input {
width: 24px;
height: 14px;
padding: unset;
text-align: center;
margin-top: 2px;
}
.and {
vertical-align: text-bottom;
padding: 0 4px;
}
} /* desktop */
.card .icon14, .card .icon16,
.card .icon20, .card .icon24 {
vertical-align: middle;
}
.thumb {
.thumb {
width: 100px;
height: 98px;
}
}
.card .thumb {
.card .thumb {
float: left;
}
}
.Collapsible {
.Collapsible {
margin-bottom: 10px;
width: 250px;
}
}
.Collapsible__trigger {
.Collapsible__trigger {
background-color: #333;
display: block;
position: relative;
padding-top: 5px;
padding-bottom: 5px;
text-indent: 5px;
}
}
.Collapsible__trigger:hover {
.Collapsible__trigger:hover {
background-color: red;
}
}
.Collapsible__trigger:after {
.Collapsible__trigger:after {
content: '^';
position: absolute;
right: 10px;
top: 10px;
display: block;
transition: transform 400ms;
}
}
.Collapsible__trigger.is-open:after {
.Collapsible__trigger.is-open:after {
transform: rotateZ(180deg);
right: 5px;
top: 5px;
}
}
.Collapsible__trigger.is-disabled {
.Collapsible__trigger.is-disabled {
opacity: 0.5;
background-color: grey;
}
}
.Collapsible__contentOuter {
margin-top: 4px;
}
.Collapsible__contentOuter {
width: 96%;
}
.Collapsible__contentInner {
margin-left: 2px;
}
.Collapsible__contentInner {
width: 96%;
}
.left {
.left {
position: relative;
}
}
.card_img {
.card_img {
position: absolute;
width: 100%;
z-index: 2;
left: -11px;
}
}
.card_img .hidden {
.card_img .hidden {
display: none;
max-height: 0;
}
}
.card_img img {
max-width: 250px;
max-height: 350px;
}
.card_img img {
max-width: 250px;
max-height: 350px;
}
.entries {
input[type="button"] {
margin: 0 0 2% 1%;
}
.entries {
text-align: left;
}
width: 100%;
}
.list-nav-top {
.list-nav-top {
display: flex;
}
.ext-button {
float: right;
margin: auto 0 0 auto;
}
}
.extended {
.extended {
.fullcard {
max-width: 250px;
max-height: 350px;
max-width: 250px;
max-height: 350px;
}
}
}
hr {
width: 250px;
hr {
width: 96%;
margin-inline-start: 0;
}
}
.none {
display:inline;
.none {
display: inline;
> span {
top: -3px;
position: relative;
top: -3px;
position: relative;
}
}
}
label {
label {
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-touch-callout: none;
-o-user-select: none;
-moz-user-select: none;
}
}
} // Collection Specific Styling
// Collection Specific Styling