jeff/pvpokemon
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

add move title to dropdown

Browse Source
This commit is contained in:
Jeff Colombo 2019-03-09 20:24:01 -05:00
parent 0d5aa0541c
commit 6e908ab43c
7 changed files with 33 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
dist/app.css vendored
View File

@ -355,6 +355,9 @@
.MovesExplorer__wrapper__iV8WK {
font-size: 1em; }
.MovesExplorer__wrapper__iV8WK .title {
color: #fff;
margin-top: -2em; }
.MovesExplorer__legacy__ixKar {
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
@ -367,11 +370,11 @@
width: 425px;
max-height: 450px;
position: fixed;
z-index: 2;
top: 25%;
left: 50%;
margin-left: -160px;
padding-left: 0;
z-index: 2; }
padding: 0; }
.MovesDropdown__menu__2yxRm .list-item.active::before,
.MovesDropdown__menu__2yxRm .list-item:hover::before {
top: 8px; }
@ -379,6 +382,7 @@
.MovesDropdown__listItem__3fTKH {
display: flex;
justify-content: space-between;
padding-right: 2rem;
padding-left: 2rem;
white-space: nowrap;
text-transform: capitalize; }
@ -391,6 +395,9 @@
.MovesExplorer__wrapper__iV8WK {
font-size: 1em; }
.MovesExplorer__wrapper__iV8WK .title {
color: #fff;
margin-top: -2em; }
.MovesExplorer__legacy__ixKar {
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);

8
dist/main-bundle.js vendored
View File

@ -38509,6 +38509,7 @@ function (_react_1$default$Comp) {
var _this2 = this;
var _this$props = this.props,
menuLabel = _this$props.menuLabel,
movesById = _this$props.movesById,
selectedMove = _this$props.selectedMove,
options = _this$props.options;
@ -38544,7 +38545,9 @@ function (_react_1$default$Comp) {
onClick: this.toggleMenu
}, moveName), isMenuOpen && react_1.default.createElement("div", {
className: menuCss
}, react_1.default.createElement(react_measure_1.default, {
}, react_1.default.createElement("h3", {
className: "title"
}, menuLabel), react_1.default.createElement(react_measure_1.default, {
bounds: true,
onResize: onResize
}, function (_ref) {
@ -38769,6 +38772,7 @@ function (_react_1$default$Comp) {
return react_1.default.createElement("div", {
className: wrapperCss
}, react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
menuLabel: "Quick Move",
movesById: movesById,
selectedMove: quickMove,
options: quickMoves,
@ -38778,6 +38782,7 @@ function (_react_1$default$Comp) {
className: quickMoveCss,
type: quickMoveType
}), react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
menuLabel: "Charge Move 1",
movesById: movesById,
selectedMove: chargeMove1,
options: chargeMoves,
@ -38787,6 +38792,7 @@ function (_react_1$default$Comp) {
className: chargeMove1Css,
type: chargeMove1Type
}), react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
menuLabel: "Charge Move 2",
movesById: movesById,
selectedMove: chargeMove2,
options: chargeMoves,

2
index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>PVP, ok? E-Mon.</title>
<title>PVP Pokemon Explorer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

3
src/ts/app/components/MovesDropdown.tsx
View File

@ -11,6 +11,7 @@ import { TypeIndicator } from './TypeIndicator';
import * as styles from 'app/styles/MovesDropdown.scss';
export interface IMovesDropdownProps {
menuLabel : string;
movesById : CombatMoveStats;
selectedMove : IPokemonMove | null;
options : Array<IPokemonMove>;
@ -49,6 +50,7 @@ export class MovesDropdown extends React.Component<IMovesDropdownProps, IState>
public render() {
const {
menuLabel,
movesById,
selectedMove,
options,
@ -93,6 +95,7 @@ export class MovesDropdown extends React.Component<IMovesDropdownProps, IState>
</div>
{ isMenuOpen &&
<div className={ menuCss }>
<h3 className="title">{ menuLabel }</h3>
<Measure
bounds={ true }
onResize={ onResize }

3
src/ts/app/components/MovesExplorer.tsx
View File

@ -71,6 +71,7 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps, IState>
return (
<div className={ wrapperCss }>
<MovesDropdown
menuLabel="Quick Move"
movesById={ movesById }
selectedMove={ quickMove }
options={ quickMoves }
@ -81,6 +82,7 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps, IState>
<TypeIndicator className={ quickMoveCss } type={ quickMoveType } />
}
<MovesDropdown
menuLabel="Charge Move 1"
movesById={ movesById }
selectedMove={ chargeMove1 }
options={ chargeMoves }
@ -91,6 +93,7 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps, IState>
<TypeIndicator className={ chargeMove1Css } type={ chargeMove1Type } />
}
<MovesDropdown
menuLabel="Charge Move 2"
movesById={ movesById }
selectedMove={ chargeMove2 }
options={ chargeMoves }

5
src/ts/app/styles/MovesDropdown.scss
View File

@ -8,11 +8,11 @@
width: map-get($container-width, 'desktop');
max-height: 450px;
position: fixed;
z-index: 2;
top: 25%;
left: 50%;
margin-left: -160px;
padding-left: 0;
z-index: 2;
padding: 0;
:global(.list-item):global(.active)::before,
:global(.list-item):hover::before {
@ -23,6 +23,7 @@
.listItem {
display: flex;
justify-content: space-between;
padding-right: 2rem;
padding-left: 2rem;
white-space: nowrap;
text-transform: capitalize;

7
src/ts/app/styles/MovesExplorer.scss
View File

@ -1,5 +1,12 @@
@import 'styles/Variables.scss';
.wrapper {
font-size: 1em;
:global(.title) {
color: $main-active-font-color;
margin-top: -2em;
}
}
.legacy {