diff --git a/dist/app.css b/dist/app.css index 62ca780..d462181 100644 --- a/dist/app.css +++ b/dist/app.css @@ -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 { - padding: 0; - margin-bottom: 1em; - outline: none; - border: none; - background-color: transparent; } - .PokemonApp__leftNavigation__1rBU9 button + button { - margin-bottom: 0.5em; } + +.PokemonApp__header__2s_s2 button, +.PokemonApp__leftNavigation__1rBU9 button { + padding: 0; + margin-bottom: 1em; + outline: none; + border: none; + background-color: transparent; } .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 { - padding: 0; - margin-bottom: 1em; - outline: none; - border: none; - background-color: transparent; } - .PokemonApp__leftNavigation__1rBU9 button + button { - margin-bottom: 0.5em; } + +.PokemonApp__header__2s_s2 button, +.PokemonApp__leftNavigation__1rBU9 button { + padding: 0; + margin-bottom: 1em; + outline: none; + border: none; + background-color: transparent; } .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 { diff --git a/dist/global.css b/dist/global.css index 9a986f1..06dd230 100644 --- a/dist/global.css +++ b/dist/global.css @@ -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; } diff --git a/dist/main-bundle.js b/dist/main-bundle.js index a104260..678827f 100644 --- a/dist/main-bundle.js +++ b/dist/main-bundle.js @@ -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"}; /***/ }), diff --git a/src/scss/sprites.scss b/src/scss/sprites.scss index 32fc522..e905793 100644 --- a/src/scss/sprites.scss +++ b/src/scss/sprites.scss @@ -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; diff --git a/src/ts/app/PokemonApp.tsx b/src/ts/app/PokemonApp.tsx index 099f4b8..d6cef2d 100644 --- a/src/ts/app/PokemonApp.tsx +++ b/src/ts/app/PokemonApp.tsx @@ -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 { } ); const pokedexButtonCss = classNames( - { - [styles.activeNavigationButton]: activeNavigation === 'pokedex', - } + // { + // [styles.activeNavigationButton]: activeNavigation === 'pokedex', + // } ); const pvpCss = classNames( @@ -148,9 +148,9 @@ class PokemonApp extends React.Component { } ); const pvpButtonCss = classNames( - { - [styles.activeNavigationButton]: widgets.pvp, - } + // { + // [styles.activeNavigationButton]: widgets.pvp, + // } ); const badgeCss = classNames( iconCss, @@ -160,9 +160,9 @@ class PokemonApp extends React.Component { } ); const badgeButtonCss = classNames( - { - [styles.activeNavigationButton]: widgets.types, - } + // { + // [styles.activeNavigationButton]: widgets.types, + // } ); const tmCss = classNames( iconCss, @@ -172,14 +172,26 @@ class PokemonApp extends React.Component { } ); const tmButtonCss = classNames( - { - [styles.activeNavigationButton]: widgets.moves, - } + // { + // [styles.activeNavigationButton]: widgets.moves, + // } ); return (
-
+
+ + +
{ leaguePokemon !== null && @@ -206,7 +218,6 @@ class PokemonApp extends React.Component { /> }
- @@ -214,17 +225,6 @@ class PokemonApp extends React.Component { { isOverlayShown &&
} - { activeNavigation === 'pokedex' && - - }
@@ -294,6 +294,9 @@ class PokemonApp extends React.Component { } private readonly handleChangeFilter = (filterTerm : string) => { + this.setState({ + activeNavigation: 'pokedex', + }); return this.props.dispatch(ActionsPokemonSelectList.filterPokemonList(filterTerm)); } diff --git a/src/ts/app/components/Header.tsx b/src/ts/app/components/Header.tsx index db1408d..e8b4b47 100644 --- a/src/ts/app/components/Header.tsx +++ b/src/ts/app/components/Header.tsx @@ -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 { + 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 { > Explorer + { this.props.children }
); } diff --git a/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx b/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx index be356bf..40d018a 100644 --- a/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx +++ b/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx @@ -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; @@ -70,7 +71,7 @@ export class PokemonSelectList extends React.Component }
-
- { listLength > 0 && - - { - ({ measureRef }) => ( -
- - { this.rowFactory.bind(this) } - -
- ) - } - - } - { listLength === 0 && this.props.filterTerm !== '' && -
- -

{ DEFAULT_POKEMON_NAME }

-
- } -
+ { this.props.isListOpen && +
+ { listLength > 0 && + + { + ({ measureRef }) => ( +
+ + { this.rowFactory.bind(this) } + +
+ ) + } + + } + { listLength === 0 && this.props.filterTerm !== '' && +
+ +

{ DEFAULT_POKEMON_NAME }

+
+ } +
+ } ); } diff --git a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss index cb7f20a..75b5fb0 100644 --- a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss +++ b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss @@ -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; diff --git a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts index f921586..10d8b7f 100644 --- a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts +++ b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss.d.ts @@ -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; diff --git a/src/ts/app/styles/PokemonApp.scss b/src/ts/app/styles/PokemonApp.scss index 4650d9d..dd84170 100644 --- a/src/ts/app/styles/PokemonApp.scss +++ b/src/ts/app/styles/PokemonApp.scss @@ -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; - } } } diff --git a/src/ts/app/styles/PokemonApp.scss.d.ts b/src/ts/app/styles/PokemonApp.scss.d.ts index ddbb181..f17ff32 100644 --- a/src/ts/app/styles/PokemonApp.scss.d.ts +++ b/src/ts/app/styles/PokemonApp.scss.d.ts @@ -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;