diff --git a/dist/app.css b/dist/app.css index 1c31b0d..a36a733 100644 --- a/dist/app.css +++ b/dist/app.css @@ -14,28 +14,42 @@ display: flex; flex-flow: row nowrap; align-items: stretch; - position: relative; } + position: relative; + padding-bottom: 60px; } .PokemonApp__header__2s_s2 { - display: flex; + flex: 0 0 auto; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; - margin: 0.1em; } + position: sticky; + top: 0; } .PokemonApp__header__2s_s2 a { display: inline-block; } .PokemonApp__footer__3q19Q { - height: 60px; } + height: 60px; + position: fixed; + right: 0; + bottom: 0; + left: 0; } -.PokemonApp__leftNavigation__1rBU9 { - padding: 1em; - position: relative; +.PokemonApp__header__2s_s2, +.PokemonApp__footer__3q19Q { display: flex; - flex-flow: column nowrap; } + margin: 0.1em; + z-index: 10; } + +.PokemonApp__navigation__26Mp5 { + padding: 1em; + position: sticky; + top: 90px; + display: inline-flex; + flex-flow: column nowrap; + align-self: flex-start; } .PokemonApp__header__2s_s2 button, -.PokemonApp__leftNavigation__1rBU9 button { +.PokemonApp__navigation__26Mp5 button { padding: 0; margin-bottom: 1em; outline: none; @@ -50,12 +64,15 @@ left: 0; background-color: #000; opacity: 0.7; } + .PokemonApp__overlay__2vc-r.PokemonApp__complete__h3L_s { + z-index: 1; } + +.PokemonApp__navigationWrapper__3oyCI { + display: flex; + margin: 0 auto; } .PokemonApp__displayWrapper__2PiN5 { - margin: 0 auto; - display: flex; - flex-flow: column wrap; - align-content: center; } + margin: 0 auto; } .PokemonApp__displayWrapper__2PiN5 > * { width: 425px; margin: 0 1em; } @@ -147,28 +164,42 @@ display: flex; flex-flow: row nowrap; align-items: stretch; - position: relative; } + position: relative; + padding-bottom: 60px; } .PokemonApp__header__2s_s2 { - display: flex; + flex: 0 0 auto; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; - margin: 0.1em; } + position: sticky; + top: 0; } .PokemonApp__header__2s_s2 a { display: inline-block; } .PokemonApp__footer__3q19Q { - height: 60px; } + height: 60px; + position: fixed; + right: 0; + bottom: 0; + left: 0; } -.PokemonApp__leftNavigation__1rBU9 { - padding: 1em; - position: relative; +.PokemonApp__header__2s_s2, +.PokemonApp__footer__3q19Q { display: flex; - flex-flow: column nowrap; } + margin: 0.1em; + z-index: 10; } + +.PokemonApp__navigation__26Mp5 { + padding: 1em; + position: sticky; + top: 90px; + display: inline-flex; + flex-flow: column nowrap; + align-self: flex-start; } .PokemonApp__header__2s_s2 button, -.PokemonApp__leftNavigation__1rBU9 button { +.PokemonApp__navigation__26Mp5 button { padding: 0; margin-bottom: 1em; outline: none; @@ -183,12 +214,15 @@ left: 0; background-color: #000; opacity: 0.7; } + .PokemonApp__overlay__2vc-r.PokemonApp__complete__h3L_s { + z-index: 1; } + +.PokemonApp__navigationWrapper__3oyCI { + display: flex; + margin: 0 auto; } .PokemonApp__displayWrapper__2PiN5 { - margin: 0 auto; - display: flex; - flex-flow: column wrap; - align-content: center; } + margin: 0 auto; } .PokemonApp__displayWrapper__2PiN5 > * { width: 425px; margin: 0 1em; } @@ -231,6 +265,7 @@ display: inline; } .LeagueIvExplorer__ivsContainer__31sfb { + max-height: 350px; font-size: 0.95em; flex: 0 999 auto; display: flex; diff --git a/dist/main-bundle.js b/dist/main-bundle.js index 68db4b8..ef8c2df 100644 --- a/dist/main-bundle.js +++ b/dist/main-bundle.js @@ -29619,7 +29619,7 @@ function pathToRegexp (path, keys, options) { /*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js because of ./node_modules/react-redux/es/index.js */ /*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/extends.js because of ./node_modules/react-redux/es/index.js */ /*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js because of ./node_modules/react-redux/es/index.js */ -/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js because of ./node_modules/react-measure/dist/index.esm.js */ +/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js because of ./node_modules/react-redux/es/index.js */ /*! ModuleConcatenation bailout: Cannot concat with ./node_modules/react/index.js (<- Module is not an ECMAScript module) */ /***/ (function(module, __webpack_exports__, __webpack_require__) { @@ -37226,6 +37226,8 @@ Object.defineProperty(exports, "__esModule", { var react_1 = __importDefault(__webpack_require__(/*! react */ "./node_modules/react/index.js")); +var classnames_1 = __importDefault(__webpack_require__(/*! classnames */ "./node_modules/classnames/index.js")); + var styles = __importStar(__webpack_require__(/*! app/styles/PokemonApp.scss */ "./src/ts/app/styles/PokemonApp.scss")); var Footer = @@ -37242,8 +37244,9 @@ function (_react_1$default$Comp) { _createClass(Footer, [{ key: "render", value: function render() { + var footerCss = classnames_1.default('nes-container', styles.footer); return react_1.default.createElement("footer", { - className: styles.footer + className: footerCss }, react_1.default.createElement("div", null)); } }]); @@ -39003,8 +39006,10 @@ function (_react_1$default$Comp) { selectedCombatMoves = _this$props$pokemonEx.selectedCombatMoves, combatMoveSelectorsOpen = _this$props$pokemonEx.combatMoveSelectorsOpen; var widgets = this.state.widgets; - var isOverlayShown = this.props.isOverlaid || combatMoveSelectorsOpen.quickMove || combatMoveSelectorsOpen.chargeMove1 || combatMoveSelectorsOpen.chargeMove2; - var leftNavCss = classnames_1.default(styles.leftNavigation); + var isSelectingMove = combatMoveSelectorsOpen.quickMove || combatMoveSelectorsOpen.chargeMove1 || combatMoveSelectorsOpen.chargeMove2; + var isOverlayShown = this.props.isOverlaid || isSelectingMove; + var navWrapperCss = classnames_1.default(styles.navigationWrapper); + var navCss = classnames_1.default(styles.navigation); var displayWrapperCss = classnames_1.default(styles.displayWrapper); var iconCss = classnames_1.default('icon', 'pixel', 'sprite'); var pvpCss = classnames_1.default(iconCss, 'pvp', { @@ -39018,13 +39023,16 @@ function (_react_1$default$Comp) { var tmCss = classnames_1.default(iconCss, 'tm', { active: widgets.moves }); - var tmButtonCss = classnames_1.default(); // weaknesses are indicated by types that cause super effective damage on defense + var tmButtonCss = classnames_1.default(); + var overLayCss = classnames_1.default(styles.overlay, _defineProperty({}, styles.complete, isSelectingMove)); // weaknesses are indicated by types that cause super effective damage on defense var pokemonTypeWeaknesses = leaguePokemon !== null ? this.getSuperEffectiveTypes(leaguePokemon.effectiveness) : []; // strengths are indicuated by types that do super effective damage on offense var moveTypeStrengths = this.getSuperEffectiveTypes(types_1.calculateTypeCoverage(selectedCombatMoves, combatMoves, attackTypeEffectiveness)); return react_1.default.createElement("div", { className: styles.body + }, react_1.default.createElement("div", { + className: navWrapperCss }, react_1.default.createElement("div", { className: displayWrapperCss }, leaguePokemon !== null && react_1.default.createElement(PokemonDisplay_1.PokemonDisplay, { @@ -39038,14 +39046,7 @@ function (_react_1$default$Comp) { mode: TypeEffectiveDisplay_1.EffectivenessMode.DEFENSE, effectiveness: leaguePokemon.effectiveness, coverage: moveTypeStrengths - })), widgets.pvp && leaguePokemon !== null && react_1.default.createElement(LeagueIvExplorer_1.LeagueIvExplorer, { - activeLeague: league, - leaguePokemon: leaguePokemon, - individualValues: individualValues, - handleChangeIndividualValue: this.handleChangeIndividualValue, - handleMaximizeLevel: this.handleMaximizeLevel, - handleChangeLeague: this.handleChangeLeague - }), widgets.moves && leaguePokemon !== null && react_1.default.createElement(MovesExplorer_1.MovesExplorer, { + })), widgets.moves && leaguePokemon !== null && react_1.default.createElement(MovesExplorer_1.MovesExplorer, { movesById: combatMoves, quickMoves: leaguePokemon.moves.quick, chargeMoves: leaguePokemon.moves.cinematic, @@ -39055,8 +39056,15 @@ function (_react_1$default$Comp) { combatMoveSelectorsOpen: combatMoveSelectorsOpen, handleToggleDropdownOpen: this.handleToggleDropdownOpen, handleChangeSelectedMove: this.handleChangeSelectedMove + }), widgets.pvp && leaguePokemon !== null && react_1.default.createElement(LeagueIvExplorer_1.LeagueIvExplorer, { + activeLeague: league, + leaguePokemon: leaguePokemon, + individualValues: individualValues, + handleChangeIndividualValue: this.handleChangeIndividualValue, + handleMaximizeLevel: this.handleMaximizeLevel, + handleChangeLeague: this.handleChangeLeague })), react_1.default.createElement("div", { - className: leftNavCss + className: navCss }, react_1.default.createElement("button", { className: pvpButtonCss, onClick: this.handlePvpClick @@ -39072,8 +39080,8 @@ function (_react_1$default$Comp) { onClick: this.handleMovesClick }, react_1.default.createElement("i", { className: tmCss - }))), isOverlayShown && react_1.default.createElement("div", { - className: styles.overlay, + })))), isOverlayShown && react_1.default.createElement("div", { + className: overLayCss, onClick: this.handleOverlayClick })); } @@ -40875,7 +40883,7 @@ exports.PokemonAppReducers = function () { /***/ (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","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","navigation":"PokemonApp__navigation__26Mp5","overlay":"PokemonApp__overlay__2vc-r","complete":"PokemonApp__complete__h3L_s","navigationWrapper":"PokemonApp__navigationWrapper__3oyCI","displayWrapper":"PokemonApp__displayWrapper__2PiN5","container":"PokemonApp__container__MsUHy","leftColumn":"PokemonApp__leftColumn__3Lv_L","rightColumn":"PokemonApp__rightColumn__1xE25"}; /***/ }), diff --git a/src/ts/app/components/Footer.tsx b/src/ts/app/components/Footer.tsx index 24bf88a..20d3f71 100644 --- a/src/ts/app/components/Footer.tsx +++ b/src/ts/app/components/Footer.tsx @@ -1,5 +1,7 @@ import React from 'react'; +import classNames from 'classnames'; + import * as styles from 'app/styles/PokemonApp.scss'; interface IFooterProps {} @@ -7,8 +9,13 @@ interface IFooterProps {} export class Footer extends React.Component { public render() { + const footerCss = classNames( + 'nes-container', + styles.footer + ); + return ( - + ); } } diff --git a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx index b6d6cd9..9d80348 100644 --- a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx +++ b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx @@ -75,10 +75,14 @@ class PokemonExplorer extends React.Component -
- { leaguePokemon !== null && - - } - { widgets.types && leaguePokemon !== null && -
-

Type Effectivess

- +
+ { leaguePokemon !== null && + -
- } - { widgets.pvp && leaguePokemon !== null && - - } - { widgets.moves && leaguePokemon !== null && - - } -
-
- - - + } + { widgets.types && leaguePokemon !== null && +
+

Type Effectivess

+ +
+ } + { widgets.moves && leaguePokemon !== null && + + } + { widgets.pvp && leaguePokemon !== null && + + } +
+
+ + + +
{ isOverlayShown && -
+
}
); diff --git a/src/ts/app/components/PokemonExplorer/styles/LeagueIvExplorer.scss b/src/ts/app/components/PokemonExplorer/styles/LeagueIvExplorer.scss index 46fc0d0..9372996 100644 --- a/src/ts/app/components/PokemonExplorer/styles/LeagueIvExplorer.scss +++ b/src/ts/app/components/PokemonExplorer/styles/LeagueIvExplorer.scss @@ -37,6 +37,7 @@ } .ivsContainer { + max-height: 350px; font-size: 0.95em; flex: 0 999 auto; display: flex; diff --git a/src/ts/app/styles/PokemonApp.scss b/src/ts/app/styles/PokemonApp.scss index 549018e..f7a292d 100644 --- a/src/ts/app/styles/PokemonApp.scss +++ b/src/ts/app/styles/PokemonApp.scss @@ -1,6 +1,7 @@ @import '~styles/Variables.scss'; $overlay-opacity: 0.7; +$footer-height: 60px; .wrapper { display: flex; @@ -22,20 +23,17 @@ $overlay-opacity: 0.7; flex-flow: row nowrap; align-items: stretch; position: relative; + padding-bottom: $footer-height; } - - // & > * { - // flex-grow: 0; - // flex-shrink: 0; - // } } .header { - display: flex; + flex: 0 0 auto; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; - margin: 0.1em; + position: sticky; + top: 0; a { display: inline-block; @@ -43,18 +41,31 @@ $overlay-opacity: 0.7; } .footer { - height: 60px; -} - -.leftNavigation { - padding: 1em; - position: relative; - display: flex; - flex-flow: column nowrap; + height: $footer-height; + position: fixed; + right: 0; + bottom: 0; + left: 0; } .header, -.leftNavigation { +.footer { + display: flex; + margin: 0.1em; + z-index: 10; +} + +.navigation { + padding: 1em; + position: sticky; + top: 90px; + display: inline-flex; + flex-flow: column nowrap; + align-self: flex-start; +} + +.header, +.navigation { button { padding: 0; margin-bottom: 1em; @@ -72,15 +83,19 @@ $overlay-opacity: 0.7; left: 0; background-color: $main-overlay-color; opacity: $overlay-opacity; + + &.complete { + z-index: 1; + } +} + +.navigationWrapper { + display: flex; + margin: 0 auto; } .displayWrapper { margin: 0 auto; - // flex-basis: 30rem; - // width: 30rem; - display: flex; - flex-flow: column wrap; - align-content: center; & > * { width: map-get($container-width, 'desktop'); diff --git a/src/ts/app/styles/PokemonApp.scss.d.ts b/src/ts/app/styles/PokemonApp.scss.d.ts index f17ff32..da457a8 100644 --- a/src/ts/app/styles/PokemonApp.scss.d.ts +++ b/src/ts/app/styles/PokemonApp.scss.d.ts @@ -1,13 +1,15 @@ // This file is automatically generated. // Please do not change this file! export const body: string; +export const complete: string; export const container: string; export const displayWrapper: string; export const footer: string; export const header: string; export const highlight: string; export const leftColumn: string; -export const leftNavigation: string; +export const navigation: string; +export const navigationWrapper: string; export const overlaid: string; export const overlay: string; export const rightColumn: string;