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

move search to header

Browse Source
This commit is contained in:
Jeff Colombo 2019-03-05 21:59:32 -05:00
parent 714311eeaf
commit e50ff2ce72
11 changed files with 180 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
dist/app.css vendored
View File

@ -18,6 +18,9 @@
.PokemonApp__header__2s_s2 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
margin: 0.1em; }
.PokemonApp__header__2s_s2 a {
display: inline-block; }
@ -26,20 +29,18 @@
height: 60px; }
.PokemonApp__leftNavigation__1rBU9 {
padding: 0.5em;
padding: 1em;
position: relative;
display: flex;
flex-flow: column nowrap; }
.PokemonApp__leftNavigation__1rBU9 .PokemonApp__activeNavigationButton__lZQ4L {
z-index: 1; }
.PokemonApp__leftNavigation__1rBU9 button {
.PokemonApp__header__2s_s2 button,
.PokemonApp__leftNavigation__1rBU9 button {
padding: 0;
margin-bottom: 1em;
outline: none;
border: none;
background-color: transparent; }
.PokemonApp__leftNavigation__1rBU9 button + button {
margin-bottom: 0.5em; }
.PokemonApp__overlay__2vc-r {
position: absolute;
@ -147,6 +148,9 @@
.PokemonApp__header__2s_s2 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
margin: 0.1em; }
.PokemonApp__header__2s_s2 a {
display: inline-block; }
@ -155,20 +159,18 @@
height: 60px; }
.PokemonApp__leftNavigation__1rBU9 {
padding: 0.5em;
padding: 1em;
position: relative;
display: flex;
flex-flow: column nowrap; }
.PokemonApp__leftNavigation__1rBU9 .PokemonApp__activeNavigationButton__lZQ4L {
z-index: 1; }
.PokemonApp__leftNavigation__1rBU9 button {
.PokemonApp__header__2s_s2 button,
.PokemonApp__leftNavigation__1rBU9 button {
padding: 0;
margin-bottom: 1em;
outline: none;
border: none;
background-color: transparent; }
.PokemonApp__leftNavigation__1rBU9 button + button {
margin-bottom: 0.5em; }
.PokemonApp__overlay__2vc-r {
position: absolute;
@ -375,40 +377,43 @@
align-items: start;
align-self: stretch; }
.PokemonSelectList__leftPanel__2ktnA {
.PokemonSelectList__wrapper__2LQMY {
font-size: 0.8rem;
width: 20em;
display: flex;
flex-flow: column nowrap;
margin-left: 1rem;
position: absolute;
top: 0.8em;
right: 4.5em;
bottom: 1em; }
.PokemonSelectList__leftPanel__2ktnA .PokemonSelectList__listWrapper__bBtO6 {
margin: 0 1.5em 0 auto;
position: relative; }
.PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6 {
flex: 1 1 auto;
display: flex;
padding: 0;
overflow: hidden; }
.PokemonSelectList__leftPanel__2ktnA .PokemonSelectList__listWrapper__bBtO6 > * {
overflow: hidden;
height: 340px;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 2; }
.PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6 > * {
width: 100%; }
.PokemonSelectList__leftPanel__2ktnA .PokemonSelectList__listWrapper__bBtO6.PokemonSelectList__emptyList__1vgpK .PokemonSelectList__emptyState__3sBmb {
.PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6.PokemonSelectList__emptyList__1vgpK .PokemonSelectList__emptyState__3sBmb {
align-self: center;
text-align: center;
margin-top: -100%; }
.PokemonSelectList__leftPanel__2ktnA .PokemonSelectList__listWrapper__bBtO6.PokemonSelectList__emptyList__1vgpK .PokemonSelectList__emptyState__3sBmb > *:first-child {
text-align: center; }
.PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6.PokemonSelectList__emptyList__1vgpK .PokemonSelectList__emptyState__3sBmb > *:first-child {
margin: 1em auto; }
.PokemonSelectList__leftPanel__2ktnA a {
.PokemonSelectList__wrapper__2LQMY a {
color: inherit;
text-decoration: none;
padding: 5px 1em 5px 2em;
justify-content: flex-end;
align-content: space-around;
flex-wrap: wrap; }
.PokemonSelectList__leftPanel__2ktnA a .PokemonSelectList__menuIcon__1I2_T {
flex-wrap: wrap;
display: flex; }
.PokemonSelectList__wrapper__2LQMY a .PokemonSelectList__menuIcon__1I2_T {
margin: -4px 0 0 0.5em;
opacity: 0.5; }
.PokemonSelectList__leftPanel__2ktnA a.active .PokemonSelectList__menuIcon__1I2_T {
.PokemonSelectList__wrapper__2LQMY a.active .PokemonSelectList__menuIcon__1I2_T {
opacity: 1; }
.PokemonSelectList__filterWrapper__1d1Wl {

2
dist/global.css vendored
View File

@ -1896,7 +1896,7 @@ input[type="checkbox"] {
.badge {
background: url(a7238a57c9ba2b3d82d9a408561f77ce.png) no-repeat;
background-size: 640px 40px;
background-position: 0 0;
background-position: -120px 0;
height: 40px;
width: 40px; }

67
dist/main-bundle.js vendored
View File

@ -36942,6 +36942,10 @@ function (_react_1$default$Comp) {
};
_this.handleChangeFilter = function (filterTerm) {
_this.setState({
activeNavigation: 'pokedex'
});
return _this.props.dispatch(ActionsPokemonSelectList.filterPokemonList(filterTerm));
};
@ -37066,28 +37070,42 @@ function (_react_1$default$Comp) {
var pokedexCss = classnames_1.default(iconCss, 'pokedex', {
active: activeNavigation === 'pokedex'
});
var pokedexButtonCss = classnames_1.default(_defineProperty({}, styles.activeNavigationButton, activeNavigation === 'pokedex'));
var pokedexButtonCss = classnames_1.default();
var pvpCss = classnames_1.default(iconCss, 'pvp', {
active: widgets.pvp
});
var pvpButtonCss = classnames_1.default(_defineProperty({}, styles.activeNavigationButton, widgets.pvp));
var pvpButtonCss = classnames_1.default();
var badgeCss = classnames_1.default(iconCss, 'badge', {
active: widgets.types
});
var badgeButtonCss = classnames_1.default(_defineProperty({}, styles.activeNavigationButton, widgets.types));
var badgeButtonCss = classnames_1.default();
var tmCss = classnames_1.default(iconCss, 'tm', {
active: widgets.moves
});
var tmButtonCss = classnames_1.default(_defineProperty({}, styles.activeNavigationButton, widgets.moves));
var tmButtonCss = classnames_1.default();
return react_1.default.createElement("div", {
className: wrapperCss
}, react_1.default.createElement(Header_1.Header, null), react_1.default.createElement("div", {
}, react_1.default.createElement(Header_1.Header, null, react_1.default.createElement(PokemonSelectList_1.PokemonSelectList, {
isLoading: this.props.pokemonSelectListState.isLoading,
isListOpen: activeNavigation === 'pokedex',
activePokemonId: activePokemonId,
activePokemonForm: activePokemonForm,
pokemonList: filterTerm === '' ? pokemonList : pokemonListFiltered,
filterTerm: this.props.pokemonSelectListState.filterTerm,
handleActivatePokemon: this.handleActivatePokemon,
handleChangeFilter: this.handleChangeFilter
}), react_1.default.createElement("button", {
className: pokedexButtonCss,
onClick: this.handlePokedexClick
}, react_1.default.createElement("i", {
className: pokedexCss
}))), react_1.default.createElement("div", {
className: styles.body
}, react_1.default.createElement("div", {
className: displayWrapperCss
}, leaguePokemon !== null && react_1.default.createElement(PokemonDisplay_1.PokemonDisplay, {
leaguePokemon: leaguePokemon,
temporaryNavigationIsActive: isOverlayShown
isHighlighted: isOverlayShown
}), widgets.pvp && leaguePokemon !== null && react_1.default.createElement(LeagueIvExplorer_1.LeagueIvExplorer, {
activeLeague: league,
leaguePokemon: leaguePokemon,
@ -37101,11 +37119,6 @@ function (_react_1$default$Comp) {
}), react_1.default.createElement("div", {
className: leftNavCss
}, react_1.default.createElement("button", {
className: pokedexButtonCss,
onClick: this.handlePokedexClick
}, react_1.default.createElement("i", {
className: pokedexCss
})), react_1.default.createElement("button", {
className: pvpButtonCss,
onClick: this.handlePvpClick
}, react_1.default.createElement("i", {
@ -37123,14 +37136,6 @@ function (_react_1$default$Comp) {
}))), isOverlayShown && react_1.default.createElement("div", {
className: styles.overlay,
onClick: this.handleOverlayClick
}), activeNavigation === 'pokedex' && react_1.default.createElement(PokemonSelectList_1.PokemonSelectList, {
isLoading: this.props.pokemonSelectListState.isLoading,
activePokemonId: activePokemonId,
activePokemonForm: activePokemonForm,
pokemonList: filterTerm === '' ? pokemonList : pokemonListFiltered,
filterTerm: this.props.pokemonSelectListState.filterTerm,
handleActivatePokemon: this.handleActivatePokemon,
handleChangeFilter: this.handleChangeFilter
})), react_1.default.createElement(Footer_1.Footer, null));
}
}]);
@ -37475,10 +37480,16 @@ var Header =
function (_react_1$default$Comp) {
_inherits(Header, _react_1$default$Comp);
function Header() {
function Header(props) {
var _this;
_classCallCheck(this, Header);
return _possibleConstructorReturn(this, _getPrototypeOf(Header).apply(this, arguments));
_this = _possibleConstructorReturn(this, _getPrototypeOf(Header).call(this, props));
_this.state = {
activeNavigation: null
};
return _this;
}
_createClass(Header, [{
@ -37498,7 +37509,7 @@ function (_react_1$default$Comp) {
className: headerCss
}, react_1.default.createElement(react_router_dom_1.Link, {
to: "/explorer"
}, "Explorer"));
}, "Explorer"), this.props.children);
}
}]);
@ -38439,9 +38450,9 @@ function (_react_1$default$Comp) {
value: function render() {
var _this$props = this.props,
leaguePokemon = _this$props.leaguePokemon,
temporaryNavigationIsActive = _this$props.temporaryNavigationIsActive;
isHighlighted = _this$props.isHighlighted;
var dex = formatter_1.formatDexNumber(leaguePokemon.dex);
var pokemonInfoLeftColumnCss = classnames_1.default(styles.pokemonInfoLeftColumn, _defineProperty({}, styles.highlight, temporaryNavigationIsActive));
var pokemonInfoLeftColumnCss = classnames_1.default(styles.pokemonInfoLeftColumn, _defineProperty({}, styles.highlight, isHighlighted));
var containerCss = classnames_1.default('nes-container', 'with-title');
var containerTitleCss = classnames_1.default('title');
var baseStatsCss = classnames_1.default(styles.pokemonBaseStats, containerCss);
@ -38692,7 +38703,7 @@ function (_react_1$default$Comp) {
};
var missingNoCss = classnames_1.default('icon', 'sprite', 'pokemon-missing-no');
var wrapperCss = classnames_1.default(styles.leftPanel, {
var wrapperCss = classnames_1.default(styles.wrapper, {
loading: this.props.isLoading
});
var listWrapperCss = classnames_1.default('nes-container', styles.listWrapper, _defineProperty({}, styles.emptyList, listLength === 0));
@ -38712,7 +38723,7 @@ function (_react_1$default$Comp) {
}), this.props.filterTerm !== '' && react_1.default.createElement("i", {
className: "nes-icon close is-small",
onClick: this.handleClickClearFilter
})), react_1.default.createElement("div", {
})), this.props.isListOpen && react_1.default.createElement("div", {
className: listWrapperCss
}, listLength > 0 && react_1.default.createElement(react_measure_1.default, {
bounds: true,
@ -39066,7 +39077,7 @@ exports.PokemonSelectListReducers = function () {
/***/ (function(module, exports, __webpack_require__) {
// extracted by mini-css-extract-plugin
module.exports = {"leftPanel":"PokemonSelectList__leftPanel__2ktnA","listWrapper":"PokemonSelectList__listWrapper__bBtO6","emptyList":"PokemonSelectList__emptyList__1vgpK","emptyState":"PokemonSelectList__emptyState__3sBmb","menuIcon":"PokemonSelectList__menuIcon__1I2_T","filterWrapper":"PokemonSelectList__filterWrapper__1d1Wl","filterInput":"PokemonSelectList__filterInput__1z_s2","dex":"PokemonSelectList__dex__1QHut","form":"PokemonSelectList__form__VIw8Q"};
module.exports = {"wrapper":"PokemonSelectList__wrapper__2LQMY","listWrapper":"PokemonSelectList__listWrapper__bBtO6","emptyList":"PokemonSelectList__emptyList__1vgpK","emptyState":"PokemonSelectList__emptyState__3sBmb","menuIcon":"PokemonSelectList__menuIcon__1I2_T","filterWrapper":"PokemonSelectList__filterWrapper__1d1Wl","filterInput":"PokemonSelectList__filterInput__1z_s2","dex":"PokemonSelectList__dex__1QHut","form":"PokemonSelectList__form__VIw8Q"};
/***/ }),
@ -39860,7 +39871,7 @@ module.exports = {"selectList":"LeagueStatsList__selectList__S5RTA","listItem":"
/***/ (function(module, exports, __webpack_require__) {
// extracted by mini-css-extract-plugin
module.exports = {"wrapper":"PokemonApp__wrapper__3ZEoC","overlaid":"PokemonApp__overlaid__3B_Ol","highlight":"PokemonApp__highlight__1zywH","body":"PokemonApp__body__23cv_","header":"PokemonApp__header__2s_s2","footer":"PokemonApp__footer__3q19Q","leftNavigation":"PokemonApp__leftNavigation__1rBU9","activeNavigationButton":"PokemonApp__activeNavigationButton__lZQ4L","overlay":"PokemonApp__overlay__2vc-r","displayWrapper":"PokemonApp__displayWrapper__2PiN5","container":"PokemonApp__container__MsUHy","leftColumn":"PokemonApp__leftColumn__3Lv_L","rightColumn":"PokemonApp__rightColumn__1xE25"};
module.exports = {"wrapper":"PokemonApp__wrapper__3ZEoC","overlaid":"PokemonApp__overlaid__3B_Ol","highlight":"PokemonApp__highlight__1zywH","body":"PokemonApp__body__23cv_","header":"PokemonApp__header__2s_s2","footer":"PokemonApp__footer__3q19Q","leftNavigation":"PokemonApp__leftNavigation__1rBU9","overlay":"PokemonApp__overlay__2vc-r","displayWrapper":"PokemonApp__displayWrapper__2PiN5","container":"PokemonApp__container__MsUHy","leftColumn":"PokemonApp__leftColumn__3Lv_L","rightColumn":"PokemonApp__rightColumn__1xE25"};
/***/ }),

2
src/scss/sprites.scss
View File

@ -69,7 +69,7 @@ $scale: 4;
background: url('../img/badges.png') no-repeat;
background-size: 160px * $badge-scale 10px * $badge-scale;
background-position: 0 * $badge-scale 0 * $badge-scale;
background-position: -30px * $badge-scale 0 * $badge-scale;
height: 10px * $badge-scale;
width: 10px * $badge-scale;

55
src/ts/app/PokemonApp.tsx
View File

@ -32,7 +32,7 @@ interface IConnectedPokemonAppProps extends PokemonAppProps, IPokemonAppDispatch
location : RouteComponentProps['location'];
}
type Navigation = 'pokedex';
export type Navigation = 'pokedex';
type SubNavigation = 'pvp' | 'types' | 'moves';
interface IState {
activeNavigation : Navigation | null;
@ -135,9 +135,9 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
}
);
const pokedexButtonCss = classNames(
{
[styles.activeNavigationButton]: activeNavigation === 'pokedex',
}
// {
// [styles.activeNavigationButton]: activeNavigation === 'pokedex',
// }
);
const pvpCss = classNames(
@ -148,9 +148,9 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
}
);
const pvpButtonCss = classNames(
{
[styles.activeNavigationButton]: widgets.pvp,
}
// {
// [styles.activeNavigationButton]: widgets.pvp,
// }
);
const badgeCss = classNames(
iconCss,
@ -160,9 +160,9 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
}
);
const badgeButtonCss = classNames(
{
[styles.activeNavigationButton]: widgets.types,
}
// {
// [styles.activeNavigationButton]: widgets.types,
// }
);
const tmCss = classNames(
iconCss,
@ -172,14 +172,26 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
}
);
const tmButtonCss = classNames(
{
[styles.activeNavigationButton]: widgets.moves,
}
// {
// [styles.activeNavigationButton]: widgets.moves,
// }
);
return (
<div className={ wrapperCss }>
<Header />
<Header>
<PokemonSelectList
isLoading={ this.props.pokemonSelectListState.isLoading }
isListOpen={ activeNavigation === 'pokedex' }
activePokemonId={ activePokemonId }
activePokemonForm={ activePokemonForm }
pokemonList={ filterTerm === '' ? pokemonList : pokemonListFiltered }
filterTerm={ this.props.pokemonSelectListState.filterTerm }
handleActivatePokemon={ this.handleActivatePokemon }
handleChangeFilter={ this.handleChangeFilter }
/>
<button className={ pokedexButtonCss } onClick={ this.handlePokedexClick }><i className={ pokedexCss } /></button>
</Header>
<div className={ styles.body }>
<div className={ displayWrapperCss }>
{ leaguePokemon !== null &&
@ -206,7 +218,6 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
/>
}
<div className={ leftNavCss }>
<button className={ pokedexButtonCss } onClick={ this.handlePokedexClick }><i className={ pokedexCss } /></button>
<button className={ pvpButtonCss } onClick={ this.handlePvpClick }><i className={ pvpCss } /></button>
<button className={ badgeButtonCss } onClick={ this.handleTypesClick }><i className={ badgeCss } /></button>
<button className={ tmButtonCss } onClick={ this.handleMovesClick }><i className={ tmCss } /></button>
@ -214,17 +225,6 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
{ isOverlayShown &&
<div className={ styles.overlay } onClick={ this.handleOverlayClick } />
}
{ activeNavigation === 'pokedex' &&
<PokemonSelectList
isLoading={ this.props.pokemonSelectListState.isLoading }
activePokemonId={ activePokemonId }
activePokemonForm={ activePokemonForm }
pokemonList={ filterTerm === '' ? pokemonList : pokemonListFiltered }
filterTerm={ this.props.pokemonSelectListState.filterTerm }
handleActivatePokemon={ this.handleActivatePokemon }
handleChangeFilter={ this.handleChangeFilter }
/>
}
</div>
<Footer />
</div>
@ -294,6 +294,9 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
}
private readonly handleChangeFilter = (filterTerm : string) => {
this.setState({
activeNavigation: 'pokedex',
});
return this.props.dispatch(ActionsPokemonSelectList.filterPokemonList(filterTerm));
}

12
src/ts/app/components/Header.tsx
View File

@ -3,17 +3,28 @@ import { Link } from 'react-router-dom';
import classNames from 'classnames';
import { Navigation } from 'app/PokemonApp';
import * as styles from 'app/styles/PokemonApp.scss';
interface IHeaderProps {}
export class Header extends React.Component<IHeaderProps> {
constructor(props : IHeaderProps) {
super(props);
this.state = {
activeNavigation: null,
};
}
public render() {
const headerCss = classNames(
'nes-container',
styles.header,
);
// const linkTo = {
// // pathname: '/courses',
// search: appendQueryString(location, {
@ -33,6 +44,7 @@ export class Header extends React.Component<IHeaderProps> {
>
Explorer
</Link>
{ this.props.children }
</header>
);
}

5
src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx
View File

@ -16,6 +16,7 @@ import * as styles from './styles/PokemonSelectList.scss';
export interface IPokemonSelectListProps {
isLoading : boolean;
isListOpen : boolean;
activePokemonId : POGOProtos.Enums.PokemonId | null;
activePokemonForm : POGOProtos.Enums.Form | null;
pokemonList : Array<IPokemon>;
@ -70,7 +71,7 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
'pokemon-missing-no',
);
const wrapperCss = classNames(
styles.leftPanel,
styles.wrapper,
{
loading: this.props.isLoading,
}
@ -105,6 +106,7 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
/>
}
</div>
{ this.props.isListOpen &&
<div className={ listWrapperCss }>
{ listLength > 0 &&
<Measure
@ -137,6 +139,7 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
</div>
}
</div>
}
</div>
);
}

18
src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss
View File

@ -1,22 +1,24 @@
@import '~styles/Variables.scss';
.leftPanel {
.wrapper {
font-size: 0.8rem;
width: 20em;
// flex-basis: 20em;
display: flex;
flex-flow: column nowrap;
margin-left: 1rem;
position: absolute;
top: 0.8em;
right: 4.5em;
bottom: 1em;
margin: 0 1.5em 0 auto;
position: relative;
.listWrapper {
flex: 1 1 auto;
display: flex;
padding: 0;
overflow: hidden;
height: 340px;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 2;
& > * {
width: 100%;
@ -25,7 +27,6 @@
&.emptyList .emptyState {
align-self: center;
text-align: center;
margin-top: -100%;
& > *:first-child {
margin: 1em auto;
@ -40,6 +41,7 @@
justify-content: flex-end;
align-content: space-around;
flex-wrap: wrap;
display: flex;
.menuIcon {
margin: -4px 0 0 0.5em;

2
src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts vendored
View File

@ -6,6 +6,6 @@ export const emptyState: string;
export const filterInput: string;
export const filterWrapper: string;
export const form: string;
export const leftPanel: string;
export const listWrapper: string;
export const menuIcon: string;
export const wrapper: string;

16
src/ts/app/styles/PokemonApp.scss
View File

@ -32,6 +32,9 @@ $overlay-opacity: 0.7;
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
margin: 0.1em;
a {
@ -44,25 +47,20 @@ $overlay-opacity: 0.7;
}
.leftNavigation {
padding: 0.5em;
padding: 1em;
position: relative;
display: flex;
flex-flow: column nowrap;
}
.activeNavigationButton {
z-index: 1;
}
.header,
.leftNavigation {
button {
padding: 0;
margin-bottom: 1em;
outline: none;
border: none;
background-color: transparent;
& + button {
margin-bottom: 0.5em;
}
}
}

1
src/ts/app/styles/PokemonApp.scss.d.ts vendored
View File

@ -1,6 +1,5 @@
// This file is automatically generated.
// Please do not change this file!
export const activeNavigationButton: string;
export const body: string;
export const container: string;
export const displayWrapper: string;