finish desktop layout

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 {
+.PokemonApp__header__2s_s2,
-  padding: 1em;
+.PokemonApp__footer__3q19Q {
-  position: relative;
   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;
+  margin: 0 auto; }
-  display: flex;
-  flex-flow: column wrap;
-  align-content: center; }
   .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 {
+.PokemonApp__header__2s_s2,
-  padding: 1em;
+.PokemonApp__footer__3q19Q {
-  position: relative;
   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;
+  margin: 0 auto; }
-  display: flex;
-  flex-flow: column wrap;
-  align-content: center; }
   .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;

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 isSelectingMove = combatMoveSelectorsOpen.quickMove || combatMoveSelectorsOpen.chargeMove1 || combatMoveSelectorsOpen.chargeMove2;
-      var leftNavCss = classnames_1.default(styles.leftNavigation);
+      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, {
+      })), widgets.moves && leaguePokemon !== null && react_1.default.createElement(MovesExplorer_1.MovesExplorer, {
-        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, {
         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", {
+      })))), isOverlayShown && react_1.default.createElement("div", {
-        className: styles.overlay,
+        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"};
 
 /***/ }),
 

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<IFooterProps> {
 
     public render() {
+        const footerCss = classNames(
+            'nes-container',
+            styles.footer
+        );
+
         return (
-            <footer className={ styles.footer }><div/></footer>
+            <footer className={ footerCss }><div/></footer>
         );
     }
 }

src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx

@@ -75,10 +75,14 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
             widgets,
         } = this.state;
 
-        const isOverlayShown = this.props.isOverlaid || combatMoveSelectorsOpen.quickMove || combatMoveSelectorsOpen.chargeMove1 || combatMoveSelectorsOpen.chargeMove2;
+        const isSelectingMove = combatMoveSelectorsOpen.quickMove || combatMoveSelectorsOpen.chargeMove1 || combatMoveSelectorsOpen.chargeMove2;
+        const isOverlayShown = this.props.isOverlaid || isSelectingMove;
 
-        const leftNavCss = classNames(
+        const navWrapperCss = classNames(
-            styles.leftNavigation,
+            styles.navigationWrapper,
+        );
+        const navCss = classNames(
+            styles.navigation,
         );
 
         const displayWrapperCss = classNames(
@@ -128,6 +132,13 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
             // }
         );
 
+        const overLayCss = classNames(
+            styles.overlay,
+            {
+                [styles.complete]: isSelectingMove
+            }
+        );
+
         // weaknesses are indicated by types that cause super effective damage on defense
         const pokemonTypeWeaknesses = leaguePokemon !== null ? this.getSuperEffectiveTypes(leaguePokemon.effectiveness) : [];
         // strengths are indicuated by types that do super effective damage on offense
@@ -135,6 +146,7 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
 
         return (
             <div className={ styles.body }>
+                <div className={ navWrapperCss }>
                     <div className={ displayWrapperCss }>
                         { leaguePokemon !== null &&
                             <PokemonDisplay
@@ -152,16 +164,6 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
                                 />
                             </div>
                         }
-                    { widgets.pvp && leaguePokemon !== null &&
-                        <LeagueIvExplorer
-                            activeLeague={ league }
-                            leaguePokemon={ leaguePokemon }
-                            individualValues={ individualValues }
-                            handleChangeIndividualValue={ this.handleChangeIndividualValue }
-                            handleMaximizeLevel={ this.handleMaximizeLevel }
-                            handleChangeLeague={ this.handleChangeLeague }
-                        />
-                    }
                         { widgets.moves && leaguePokemon !== null &&
                             <MovesExplorer
                                 movesById={ combatMoves }
@@ -175,14 +177,25 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
                                 handleChangeSelectedMove={ this.handleChangeSelectedMove }
                             />
                         }
+                        { widgets.pvp && leaguePokemon !== null &&
+                            <LeagueIvExplorer
+                                activeLeague={ league }
+                                leaguePokemon={ leaguePokemon }
+                                individualValues={ individualValues }
+                                handleChangeIndividualValue={ this.handleChangeIndividualValue }
+                                handleMaximizeLevel={ this.handleMaximizeLevel }
+                                handleChangeLeague={ this.handleChangeLeague }
+                            />
+                        }
                     </div>
-                <div className={ leftNavCss }>
+                    <div className={ navCss }>
                         <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>
                     </div>
+                </div>
                 { isOverlayShown &&
-                    <div className={ styles.overlay } onClick={ this.handleOverlayClick } />
+                    <div className={ overLayCss } onClick={ this.handleOverlayClick } />
                 }
             </div>
         );

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;

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;
+  height: $footer-height;
-}
+  position: fixed;
-
+  right: 0;
-.leftNavigation {
+  bottom: 0;
-  padding: 1em;
+  left: 0;
-  position: relative;
-  display: flex;
-  flex-flow: column nowrap;
 }
 
 .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');

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;