more mobile work

dist/app.css

@@ -1,6 +1,8 @@
 /* Generated by cssConcatenator.js */
 /** Source: ./dist/main.tmp.css */
-.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:60px}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol{background-color:rgba(0,0,0,0.7)}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol .PokemonApp__highlight__1zywH{z-index:1}.PokemonApp__header__2s_s2{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;padding:0.5rem 1rem;position:sticky;top:0}.PokemonApp__header__2s_s2 a{display:inline-block;display:flex}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0}.PokemonApp__header__2s_s2,.PokemonApp__footer__3q19Q{margin:0.1em;z-index:10}.PokemonApp__navigation__26Mp5{margin-right:-72px;padding:1em;position:sticky;top:90px;display:inline-flex;flex-flow:column nowrap;align-self:flex-start}@media only screen and (max-width: 767px){.PokemonApp__navigation__26Mp5{position:absolute;top:0;right:72px}}.PokemonApp__header__2s_s2 button,.PokemonApp__navigation__26Mp5 button{padding:0;margin-bottom:1em;outline:none;border:none;background-color:transparent}.PokemonApp__overlay__2vc-r{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.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}.PokemonApp__displayWrapper__2PiN5>*{width:425px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__container__MsUHy{display:flex;justify-content:space-evenly}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L,.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{display:flex;flex-flow:column nowrap;align-items:center}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L{width:45%;text-align:center}.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{flex-grow:1;align-items:start}
+.Navigation__navigation__32sTf{margin-right:-72px;padding:1em;position:sticky;top:90px;display:inline-flex;flex-flow:column nowrap;align-self:flex-start}@media only screen and (max-width: 767px){.Navigation__navigation__32sTf{position:static;display:flex;flex-flow:row nowrap;padding:0;margin:0;width:100%;justify-content:space-evenly}.Navigation__navigation__32sTf button{margin-bottom:0}}.Navigation__navigationButton__2DGTd{padding:0;margin-bottom:1em;outline:none;border:none;background-color:transparent}
+
+.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:60px}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol{background-color:rgba(0,0,0,0.7)}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol .PokemonApp__highlight__1zywH{z-index:1}.PokemonApp__header__2s_s2{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;padding:0.5rem 1rem;position:sticky;top:0}.PokemonApp__header__2s_s2 a{display:inline-block;display:flex}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0}.PokemonApp__header__2s_s2,.PokemonApp__footer__3q19Q{margin:0.1em;z-index:10}.PokemonApp__navigationButton__2BuiE{}.PokemonApp__overlay__2vc-r{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.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}.PokemonApp__displayWrapper__2PiN5>*{width:425px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__container__MsUHy{display:flex;justify-content:space-evenly}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L,.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{display:flex;flex-flow:column nowrap;align-items:center}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L{width:45%;text-align:center}.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{flex-grow:1;align-items:start}
 
 .nes-field.is-inline .IvForm__ivInput__xR5IU{width:4.25em;padding-left:0.45em;padding-right:0.25em}.nes-field.is-inline .IvForm__ivInput__xR5IU.IvForm__levelInput__1n6We{width:6.5em}.nes-field.is-inline.IvForm__fieldRow__3HcBN{font-size:0.9em;justify-content:space-between;align-items:baseline}.nes-field.is-inline.IvForm__fieldRow__3HcBN label{flex-grow:0;margin-left:1em}.nes-field.is-inline.IvForm__fieldRow__3HcBN label:first-child{margin-left:0}
 
@@ -8,9 +10,9 @@
 
 .LeagueStatsList__selectList__1FBIL{flex-grow:1;display:flex;overflow:hidden}.LeagueStatsList__selectList__1FBIL>*{flex:1;overflow:auto}.LeagueStatsList__listItem__oCOvr{position:relative;display:flex;justify-content:space-evenly}.LeagueStatsList__listItem__oCOvr.list-item.active::before,.LeagueStatsList__listItem__oCOvr.list-item:hover::before{top:8px;left:10px}
 
-.StatDisplay__baseStatRow__1B60A{display:flex;align-items:center}.StatDisplay__baseStatRow__1B60A>*{flex-shrink:0}.StatDisplay__baseStatRow__1B60A>progress{flex-shrink:1;margin:0 0 0 1em;width:5em;height:1em;border-image-outset:1;padding:2px}@media only screen and (max-width: 767px){.StatDisplay__baseStatRow__1B60A>progress{height:1.2em}}
+.StatDisplay__baseStatRow__1B60A{display:flex;align-items:center}.StatDisplay__baseStatRow__1B60A>*{flex-shrink:0}.StatDisplay__baseStatRow__1B60A>progress{flex-shrink:1;margin:0 0 0 1em;width:5em;height:1em;border-image-outset:1;padding:2px}@media only screen and (max-width: 767px){.StatDisplay__baseStatRow__1B60A>progress{height:1.2em}}@media only screen and (max-width: 359px){.StatDisplay__baseStatRow__1B60A>progress{height:1.4em}}
 
-.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:60px}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol{background-color:rgba(0,0,0,0.7)}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol .PokemonApp__highlight__1zywH{z-index:1}.PokemonApp__header__2s_s2{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;padding:0.5rem 1rem;position:sticky;top:0}.PokemonApp__header__2s_s2 a{display:inline-block;display:flex}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0}.PokemonApp__header__2s_s2,.PokemonApp__footer__3q19Q{margin:0.1em;z-index:10}.PokemonApp__navigation__26Mp5{margin-right:-72px;padding:1em;position:sticky;top:90px;display:inline-flex;flex-flow:column nowrap;align-self:flex-start}@media only screen and (max-width: 767px){.PokemonApp__navigation__26Mp5{position:absolute;top:0;right:72px}}.PokemonApp__header__2s_s2 button,.PokemonApp__navigation__26Mp5 button{padding:0;margin-bottom:1em;outline:none;border:none;background-color:transparent}.PokemonApp__overlay__2vc-r{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.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}.PokemonApp__displayWrapper__2PiN5>*{width:425px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__container__MsUHy{display:flex;justify-content:space-evenly}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L,.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{display:flex;flex-flow:column nowrap;align-items:center}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L{width:45%;text-align:center}.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{flex-grow:1;align-items:start}
+.PokemonApp__wrapper__3ZEoC{display:flex;flex-flow:column nowrap;align-items:stretch}.PokemonApp__wrapper__3ZEoC .PokemonApp__body__23cv_{background-color:#fff;display:flex;flex-flow:row nowrap;align-items:stretch;position:relative;padding-bottom:60px}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol{background-color:rgba(0,0,0,0.7)}.PokemonApp__wrapper__3ZEoC.PokemonApp__overlaid__3B_Ol .PokemonApp__highlight__1zywH{z-index:1}.PokemonApp__header__2s_s2{display:flex;flex:0 0 auto;justify-content:space-between;align-items:center;padding:0.5rem 1rem;position:sticky;top:0}.PokemonApp__header__2s_s2 a{display:inline-block;display:flex}.PokemonApp__footer__3q19Q{height:60px;position:fixed;right:0;bottom:0;left:0}.PokemonApp__header__2s_s2,.PokemonApp__footer__3q19Q{margin:0.1em;z-index:10}.PokemonApp__navigationButton__2BuiE{}.PokemonApp__overlay__2vc-r{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.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}.PokemonApp__displayWrapper__2PiN5>*{width:425px;margin:0 1em}@media only screen and (max-width: 767px){.PokemonApp__displayWrapper__2PiN5>*{width:auto;margin:0 0.1em}}.PokemonApp__container__MsUHy{display:flex;justify-content:space-evenly}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L,.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{display:flex;flex-flow:column nowrap;align-items:center}.PokemonApp__container__MsUHy .PokemonApp__leftColumn__3Lv_L{width:45%;text-align:center}.PokemonApp__container__MsUHy .PokemonApp__rightColumn__1xE25{flex-grow:1;align-items:start}
 
 .LeagueIvExplorer__wrapper__3E7AD{display:flex;flex-flow:column nowrap}.LeagueIvExplorer__container__3GKct{margin-bottom:1rem}.LeagueIvExplorer__leftColumn__3au0L{}.LeagueIvExplorer__rightColumn__1eyvh{}.LeagueIvExplorer__leaguePokemonRank__3bjyU{justify-content:flex-start;flex-wrap:wrap}.LeagueIvExplorer__leaguePokemonRank__3bjyU .LeagueIvExplorer__pokemonInfoWrapper__3WVsh{flex:1 0 100%;display:flex}.LeagueIvExplorer__leaguePokemonRank__3bjyU .LeagueIvExplorer__leftColumn__3au0L{align-items:flex-start}.LeagueIvExplorer__leaguePokemonRank__3bjyU .LeagueIvExplorer__pokemonRankValue__3k3ih{display:inline}.LeagueIvExplorer__ivsContainer__31sfb{max-height:350px;font-size:0.95em;flex:0 999 auto;display:flex;flex-flow:column nowrap}.LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX{display:flex;justify-content:flex-end;background-color:transparent;padding:0}.LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX>*{background-color:#fff}.LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX>*:first-child{margin-right:auto;padding:0 0.5em}.LeagueIvExplorer__ivsContainer__31sfb .title.LeagueIvExplorer__ivContainerTitle__3Z3eX>*:last-child{padding-right:0.5em}.LeagueIvExplorer__ivsContainer__31sfb.LeagueIvExplorer__diplayingIvList__1Q5r8{padding:1.5rem 0 0}.LeagueIvExplorer__ivsContainer__31sfb.LeagueIvExplorer__diplayingIvList__1Q5r8 .title.LeagueIvExplorer__ivContainerTitle__3Z3eX{margin-bottom:0;margin-right:-9px;margin-left:-9px;padding:0 1.5em}
 
@@ -22,6 +24,8 @@
 
 .MovesExplorer__wrapper__2y-BK h3{font-size:1rem}.MovesExplorer__wrapper__2y-BK h4{font-size:0.8em;color:#676767}
 
+.Navigation__navigation__32sTf{margin-right:-72px;padding:1em;position:sticky;top:90px;display:inline-flex;flex-flow:column nowrap;align-self:flex-start}@media only screen and (max-width: 767px){.Navigation__navigation__32sTf{position:static;display:flex;flex-flow:row nowrap;padding:0;margin:0;width:100%;justify-content:space-evenly}.Navigation__navigation__32sTf button{margin-bottom:0}}.Navigation__navigationButton__2DGTd{padding:0;margin-bottom:1em;outline:none;border:none;background-color:transparent}
+
 .PokemonDisplay__highlight__h50BA{color:#fff;pointer-events:none}.PokemonDisplay__pokemonInfoWrapper__3AW3e{margin-bottom:1rem}.PokemonDisplay__pokemonInfoLeftColumn__1vugM{}.PokemonDisplay__pokemonInfoRightColumn__27Q49{}.PokemonDisplay__pokemonName__WBKbk{margin-bottom:0}.PokemonDisplay__dexHeader__2HVfr{margin-bottom:0.25rem}.PokemonDisplay__pokemonTypeWrapper__1rJIA{display:flex;justify-content:center;align-self:stretch}.PokemonDisplay__formHeader__1pr6M{text-transform:uppercase;margin-bottom:0}.PokemonDisplay__pokemonBaseStats__3UJvn{display:flex;flex-flow:column nowrap;align-items:start;align-self:stretch}
 
 .PokemonSelectList__wrapper__2LQMY{font-size:0.8rem;width:20em;display:flex;flex-flow:column nowrap;margin:0 1.5em 0 auto;position:relative}.PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6{flex:1 1 auto;display:flex;padding:0;overflow:hidden;height:340px;position:absolute;top:100%;left:0;right:0;z-index:2}.PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6>*{width:100%}.PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6.PokemonSelectList__emptyList__1vgpK .PokemonSelectList__emptyState__3sBmb{align-self:center;text-align:center}.PokemonSelectList__wrapper__2LQMY .PokemonSelectList__listWrapper__bBtO6.PokemonSelectList__emptyList__1vgpK .PokemonSelectList__emptyState__3sBmb>*:first-child{margin:1em auto}.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;display:flex}.PokemonSelectList__wrapper__2LQMY a .PokemonSelectList__menuIcon__1I2_T{margin:-4px 0 0 0.5em;opacity:0.5}.PokemonSelectList__wrapper__2LQMY a.active .PokemonSelectList__menuIcon__1I2_T{opacity:1}.PokemonSelectList__filterWrapper__1d1Wl{position:relative;margin:0.1em}.PokemonSelectList__filterWrapper__1d1Wl .close{position:absolute;top:1em;right:1em}.PokemonSelectList__filterInput__1z_s2{margin-left:0;margin-right:0;padding-right:3em}.PokemonSelectList__dex__1QHut,.PokemonSelectList__form__VIw8Q{font-size:0.8em;text-transform:capitalize}.PokemonSelectList__dex__1QHut{margin-left:auto}.PokemonSelectList__form__VIw8Q{flex:0 1 100%}

src/scss/Components.scss

@@ -1 +0,0 @@
-$navigation-width: 72px;

src/scss/Variables.scss

@@ -1,30 +1,6 @@
 @import '~nes.css/scss/base/color-palette';
 @import '~nes.css/scss/base/variables';
-
+@import './constants';
-// 320 x 568
-// 360 x 640
-// 375 x 667
-// 411 x 731
-// 414 x 736
-// 768 x 1024
-// 1024 x 1366
-// 1280 x 800
-// 1440 x 900
-
-$min-large-desktop-width: 1200px;
-$max-desktop-width: 1199px;
-$min-desktop-width: 993px;
-$max-tablet-width: 992px;
-$min-tablet-width: 768px;
-$max-mobile-width: 767px;
-$min-mobile-width: 360px;
-$max-small-mobile-width: 359px;
-
-$container-width: (
-  desktop: 425px,
-  tablet: 425px,
-  mobile: 320px
-);
 
 $game-boy-1: #e3eec0;
 $game-boy-2: #aeba89;

src/scss/constants.scss

@@ -0,0 +1,26 @@
+$navigation-width: 72px;
+
+// 320 x 568
+// 360 x 640
+// 375 x 667
+// 411 x 731
+// 414 x 736
+// 768 x 1024
+// 1024 x 1366
+// 1280 x 800
+// 1440 x 900
+
+$min-large-desktop-width: 1200px;
+$max-desktop-width: 1199px;
+$min-desktop-width: 993px;
+$max-tablet-width: 992px;
+$min-tablet-width: 768px;
+$max-mobile-width: 767px;
+$min-mobile-width: 360px;
+$max-small-mobile-width: 359px;
+
+$container-width: (
+  desktop: 425px,
+  tablet: 425px,
+  mobile: 320px
+);

src/scss/index.scss

@@ -44,6 +44,10 @@ body {
   color: $main-font-primary-color;
 }
 
+button:focus {
+  outline: none;
+}
+
 a.active:not([href]):not([tabindex]) {
   color: $main-active-font-color;
 }
@@ -111,6 +115,7 @@ a.list-item {
 .nes-container.with-title > .title {
   font-size: 1em;
   background-color: $main-background-color;
+  margin: -2rem 0 1rem;
 }
 
 .nes-container:not(:last-child) {

src/ts/app/PokemonApp.tsx

@@ -114,6 +114,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
             }
         );
         const pokedexButtonCss = classNames(
+            styles.navigationButton,
             // {
             //     [styles.activeNavigationButton]: activeNavigation === 'pokedex',
             // }

src/ts/app/components/Header.tsx

@@ -4,6 +4,8 @@ import { Link } from 'react-router-dom';
 
 import classNames from 'classnames';
 
+import { MIN_TABLET_WIDTH } from 'common/models/constants';
+
 import { Navigation } from 'app/PokemonApp';
 
 import * as styles from 'app/styles/PokemonApp.scss';
@@ -54,7 +56,7 @@ export class Header extends React.Component<IHeaderProps> {
                     // onClick={ this.reload }
                 >
                     <i className={ iconCss } />
-                    <Media query={ { minWidth: 768 } }>
+                    <Media query={ { minWidth: MIN_TABLET_WIDTH } }>
                         <span>PVPokémon</span>
                     </Media>
                 </Link>

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

@@ -0,0 +1,97 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import {
+    SubNavigation,
+    SubNavigationDisplay,
+} from 'app/components/PokemonExplorer/types';
+
+import * as styles from 'app/components/PokemonExplorer/styles/Navigation.scss';
+
+export interface INavigationProps {
+    widgets : SubNavigationDisplay;
+    handleNavigationClick : (widget : SubNavigation) => void;
+}
+
+export class Navigation extends React.Component<INavigationProps> {
+
+    public render() {
+        const {
+            widgets,
+        } = this.props;
+
+        const navCss = classNames(
+            styles.navigation,
+        );
+
+        const iconCss = classNames(
+            'icon',
+            'pixel',
+            'sprite',
+        );
+        const buttonCss = classNames(
+            styles.navigationButton,
+        );
+
+        const pvpCss = classNames(
+            iconCss,
+            'pvp',
+            {
+                active: widgets.pvp,
+            }
+        );
+        const pvpButtonCss = classNames(
+            buttonCss,
+            // {
+            //     [styles.activeNavigationButton]: widgets.pvp,
+            // }
+        );
+        const badgeCss = classNames(
+            iconCss,
+            'badge',
+            {
+                active: widgets.types,
+            }
+        );
+        const badgeButtonCss = classNames(
+            buttonCss,
+            // {
+            //     [styles.activeNavigationButton]: widgets.types,
+            // }
+        );
+        const tmCss = classNames(
+            iconCss,
+            'tm',
+            {
+                active: widgets.moves,
+            }
+        );
+        const tmButtonCss = classNames(
+            buttonCss,
+            // {
+            //     [styles.activeNavigationButton]: widgets.moves,
+            // }
+        );
+
+        return (
+            <div className={ navCss }>
+                <button className={ badgeButtonCss } onClick={ this.handleTypesClick }><i className={ badgeCss } /></button>
+                <button className={ tmButtonCss } onClick={ this.handleMovesClick }><i className={ tmCss } /></button>
+                <button className={ pvpButtonCss } onClick={ this.handlePvpClick }><i className={ pvpCss } /></button>
+            </div>
+        );
+    }
+
+    private handleTypesClick = () => {
+        this.props.handleNavigationClick('types');
+    }
+
+    private handleMovesClick = () => {
+        this.props.handleNavigationClick('moves');
+    }
+
+    private handlePvpClick = () => {
+        this.props.handleNavigationClick('pvp');
+    }
+}

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

@@ -21,6 +21,7 @@ export interface IPokemonDisplay {
 export class PokemonDisplay extends React.Component<IPokemonDisplay> {
     public render() {
         const {
+            children,
             leaguePokemon,
             isHighlighted
         } = this.props;
@@ -135,6 +136,7 @@ export class PokemonDisplay extends React.Component<IPokemonDisplay> {
                             statRank={ leaguePokemon.statsRank.defenseRank }
                         />
                     </section>
+                    { children }
                 </div>
             </div>
         );

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import Media from 'react-media';
 import { connect } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 
@@ -14,18 +15,21 @@ import {
     IndividualValueKey,
     IPokemonExplorerDispatch,
     IPokemonExplorerStore,
-    SelectedCombatMoves
+    SelectedCombatMoves,
+    SubNavigation,
 } from 'app/components/PokemonExplorer/types';
 import { IRouterProps } from 'app/types';
 
 import { LeagueIvExplorer } from 'app/components/PokemonExplorer/LeagueIvExplorer';
 import { MovesExplorer } from 'app/components/PokemonExplorer/MovesExplorer';
+import { Navigation } from 'app/components/PokemonExplorer/Navigation';
 import { PokemonDisplay } from 'app/components/PokemonExplorer/PokemonDisplay';
 import { EffectivenessMode, TypeEffectiveDisplay } from 'app/components/PokemonExplorer/TypeEffectiveDisplay';
 
 import { appendQueryString } from 'app/utils/navigation';
 import { calculateTypeCoverage } from 'app/utils/types';
 
+import { MAX_MOBILE_WIDTH, MIN_TABLET_WIDTH } from 'common/models/constants';
 import * as PVPogoProtos from 'common/models/PVPogoProtos';
 
 import * as styles from 'app/styles/PokemonApp.scss';
@@ -39,24 +43,7 @@ interface IPokemonExplorerProps extends IRouterProps {
 
 interface IConnectedPokemonExplorerProps extends IPokemonExplorerStore, IPokemonExplorerDispatch, IPokemonExplorerProps {}
 
-type SubNavigation = 'pvp' | 'types' | 'moves';
+class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps> {
-interface IState {
-    widgets : { [ key in SubNavigation ] : boolean };
-}
-
-class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IState> {
-
-    constructor(props : IConnectedPokemonExplorerProps) {
-        super(props);
-
-        this.state = {
-            widgets: {
-                pvp: true,
-                types: false,
-                moves: false,
-            },
-        };
-    }
 
     public render() {
         const {
@@ -66,13 +53,11 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
         const {
             league,
             individualValues,
+            widgets,
             leaguePokemon,
             selectedCombatMoves,
             combatMoveSelectorsOpen,
         } = this.props.pokemonExplorerState;
-        const {
-            widgets,
-        } = this.state;
 
         const isSelectingMove = combatMoveSelectorsOpen.quickMove || combatMoveSelectorsOpen.chargeMove1 || combatMoveSelectorsOpen.chargeMove2;
         const isOverlayShown = this.props.isOverlaid || isSelectingMove;
@@ -80,57 +65,11 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
         const navWrapperCss = classNames(
             styles.navigationWrapper,
         );
-        const navCss = classNames(
-            styles.navigation,
-        );
 
         const displayWrapperCss = classNames(
             styles.displayWrapper,
         );
 
-        const iconCss = classNames(
-            'icon',
-            'pixel',
-            'sprite',
-        );
-
-        const pvpCss = classNames(
-            iconCss,
-            'pvp',
-            {
-                active: widgets.pvp,
-            }
-        );
-        const pvpButtonCss = classNames(
-            // {
-            //     [styles.activeNavigationButton]: widgets.pvp,
-            // }
-        );
-        const badgeCss = classNames(
-            iconCss,
-            'badge',
-            {
-                active: widgets.types,
-            }
-        );
-        const badgeButtonCss = classNames(
-            // {
-            //     [styles.activeNavigationButton]: widgets.types,
-            // }
-        );
-        const tmCss = classNames(
-            iconCss,
-            'tm',
-            {
-                active: widgets.moves,
-            }
-        );
-        const tmButtonCss = classNames(
-            // {
-            //     [styles.activeNavigationButton]: widgets.moves,
-            // }
-        );
-
         const overLayCss = classNames(
             styles.overlay,
             {
@@ -151,7 +90,14 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
                             <PokemonDisplay
                                 leaguePokemon={ leaguePokemon }
                                 isHighlighted={ isOverlayShown }
-                            />
+                            >
+                                <Media query={ { maxWidth: MAX_MOBILE_WIDTH } }>
+                                    <Navigation
+                                        widgets={ widgets }
+                                        handleNavigationClick={ this.handleNavigationClick }
+                                    />
+                                </Media>
+                            </PokemonDisplay>
                         }
                         { widgets.types && leaguePokemon !== null &&
                             <div className="nes-container with-title">
@@ -187,11 +133,12 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
                             />
                         }
                     </div>
-                    <div className={ navCss }>
+                    <Media query={ { minWidth: MIN_TABLET_WIDTH } }>
-                        <button className={ badgeButtonCss } onClick={ this.handleTypesClick }><i className={ badgeCss } /></button>
+                        <Navigation
-                        <button className={ tmButtonCss } onClick={ this.handleMovesClick }><i className={ tmCss } /></button>
+                            widgets={ widgets }
-                        <button className={ pvpButtonCss } onClick={ this.handlePvpClick }><i className={ pvpCss } /></button>
+                            handleNavigationClick={ this.handleNavigationClick }
-                    </div>
+                        />
+                    </Media>
                 </div>
                 { isOverlayShown &&
                     <div className={ overLayCss } onClick={ this.handleOverlayClick } />
@@ -229,34 +176,8 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
         this.props.toggleInterruption(false);
     }
 
-    private readonly handlePvpClick = () => {
+    private readonly handleNavigationClick = (widget : SubNavigation) => {
-        const widgets = this.state.widgets;
+        this.props.dispatch(ActionsPokemonExplorer.setSubNavigationWidgetIsShown(widget, !this.props.pokemonExplorerState.widgets[widget]));
-        this.setState({
-            widgets: {
-                ...widgets,
-                pvp: !widgets.pvp
-            }
-        });
-    }
-
-    private readonly handleTypesClick = () => {
-        const widgets = this.state.widgets;
-        this.setState({
-            widgets: {
-                ...widgets,
-                types: !widgets.types
-            }
-        });
-    }
-
-    private readonly handleMovesClick = () => {
-        const widgets = this.state.widgets;
-        this.setState({
-            widgets: {
-                ...widgets,
-                moves: !widgets.moves
-            }
-        });
     }
 
     private readonly handleChangeIndividualValue = (stat : IndividualValueKey, value : number | null) => {

src/ts/app/components/PokemonExplorer/actions.ts

@@ -4,6 +4,7 @@ import {
     CombatMoveSelectorsOpen,
     PokemonExplorerActionTypes,
     SelectedCombatMoves,
+    SubNavigation,
     ThunkResult
 } from 'app/components/PokemonExplorer/types';
 
@@ -15,6 +16,8 @@ export const setIsLoading = (isLoading : boolean) => action(PokemonExplorerActio
 
 export const setLeaguePokemon = (leaguePokemon : ILeaguePokemon | null) => action(PokemonExplorerActionTypes.SET_LEAGUE_POKEMON, { leaguePokemon });
 
+export const setSubNavigationWidgetIsShown = (widget : SubNavigation, isShown : boolean) => action(PokemonExplorerActionTypes.SET_SUBNAVIGATION_WIDGET_IS_SHOWN, { widget, isShown });
+
 export const setIvLevel = (level : number | null) => action(PokemonExplorerActionTypes.SET_IV_LEVEL, { level });
 
 export const setIvHp = (ivHp : number | null) => action(PokemonExplorerActionTypes.SET_IV_HP, { ivHp });

src/ts/app/components/PokemonExplorer/reducers.ts

@@ -8,6 +8,11 @@ import { IPokemonExplorerState, PokemonExplorerActionTypes } from 'app/component
 export const initialState : IPokemonExplorerState = {
     isLoading: false,
     leaguePokemon: null,
+    widgets: {
+        types: false,
+        moves: false,
+        pvp: true,
+    },
     individualValues: {
         level: null,
         ivHp: null,
@@ -43,6 +48,17 @@ const reduceSetLeaguePokemon = (
     leaguePokemon: action.payload.leaguePokemon,
 });
 
+const reduceSetSubNavigationWidgetIsShown = (
+    state : IPokemonExplorerState,
+    action : ReturnType<typeof Actions.setSubNavigationWidgetIsShown>
+) : IPokemonExplorerState => ({
+    ...state,
+    widgets: {
+        ...state.widgets,
+        [action.payload.widget]: action.payload.isShown,
+    }
+});
+
 const reduceSetIvLevel = (
     state : IPokemonExplorerState,
     action : ReturnType<typeof Actions.setIvLevel>
@@ -124,6 +140,8 @@ export const PokemonExplorerReducers : Reducer<IPokemonExplorerState> = (
             return reduceSetIsLoading(state, action as ReturnType<typeof Actions.setIsLoading>);
         case PokemonExplorerActionTypes.SET_LEAGUE_POKEMON:
             return reduceSetLeaguePokemon(state, action as ReturnType<typeof Actions.setLeaguePokemon>);
+        case PokemonExplorerActionTypes.SET_SUBNAVIGATION_WIDGET_IS_SHOWN:
+            return reduceSetSubNavigationWidgetIsShown(state, action as ReturnType<typeof Actions.setSubNavigationWidgetIsShown>);
         case PokemonExplorerActionTypes.SET_IV_LEVEL:
             return reduceSetIvLevel(state, action as ReturnType<typeof Actions.setIvLevel>);
         case PokemonExplorerActionTypes.SET_IV_HP:

src/ts/app/components/PokemonExplorer/styles/Navigation.scss

@@ -0,0 +1,33 @@
+@import '~styles/Variables.scss';
+
+.navigation {
+  margin-right: -1 * $navigation-width; // offset so the displayWrapper is centered
+  padding: 1em;
+  position: sticky;
+  top: 90px;
+  display: inline-flex;
+  flex-flow: column nowrap;
+  align-self: flex-start;
+
+  @media only screen and (max-width: $max-mobile-width) {
+    position: static;
+    display: flex;
+    flex-flow: row nowrap;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    justify-content: space-evenly;
+
+    button {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.navigationButton {
+  padding: 0;
+  margin-bottom: 1em;
+  outline: none;
+  border: none;
+  background-color: transparent;
+}

src/ts/app/components/PokemonExplorer/styles/Navigation.scss.d.ts

@@ -0,0 +1,4 @@
+// This file is automatically generated.
+// Please do not change this file!
+export const navigation: string;
+export const navigationButton: string;

src/ts/app/components/PokemonExplorer/styles/PokemonDisplay.scss

@@ -1,5 +1,4 @@
 @import '~styles/Variables.scss';
-@import '~styles/Components.scss';
 
 .highlight {
   composes: highlight from '../../../styles/PokemonApp.scss';

src/ts/app/components/PokemonExplorer/styles/StatDisplay.scss

@@ -19,5 +19,9 @@
     @media only screen and (max-width: $max-mobile-width) {
       height: 1.2em;
     }
+
+    @media only screen and (max-width: $max-small-mobile-width) {
+      height: 1.4em;
+    }
   }
 }

src/ts/app/components/PokemonExplorer/types.ts

@@ -26,9 +26,13 @@ export type CombatMoveSelectorsOpen = {
     [ key in MoveTypes ] : boolean;
 };
 
+export type SubNavigation = 'pvp' | 'types' | 'moves';
+export type SubNavigationDisplay = { [ key in SubNavigation ] : boolean };
+
 export interface IPokemonExplorerState {
     isLoading : boolean;
     leaguePokemon : ILeaguePokemon | null;
+    widgets : SubNavigationDisplay;
     individualValues : IIndividualValues;
     league : League;
     selectedCombatMoves : SelectedCombatMoves;
@@ -38,6 +42,7 @@ export interface IPokemonExplorerState {
 export const PokemonExplorerActionTypes = {
     SET_IS_LOADING: 'POKEMON_EXPLORER/SET_IS_LOADING',
     SET_LEAGUE_POKEMON: 'POKEMON_EXPLORER/SET_LEAGUE_POKEMON',
+    SET_SUBNAVIGATION_WIDGET_IS_SHOWN: 'POKEMON_EXPLORER/SET_SUBNAVIGATION_WIDGET_IS_SHOWN',
     SET_IV_LEVEL: 'POKEMON_EXPLORER/SET_IV_LEVEL',
     SET_IV_HP: 'POKEMON_EXPLORER/SET_IV_HP',
     SET_IV_ATK: 'POKEMON_EXPLORER/SET_IV_ATK',

src/ts/app/styles/PokemonApp.scss

@@ -1,5 +1,4 @@
 @import '~styles/Variables.scss';
-@import '~styles/Components.scss';
 
 $overlay-opacity: 0.7;
 $footer-height: 60px;
@@ -57,31 +56,8 @@ $footer-height: 60px;
   z-index: 10;
 }
 
-.navigation {
+.navigationButton {
-  margin-right: -1 * $navigation-width; // offset so the displayWrapper is centered
+  composes: navigationButton from '../components/PokemonExplorer/styles/Navigation.scss';
-  padding: 1em;
-  position: sticky;
-  top: 90px;
-  display: inline-flex;
-  flex-flow: column nowrap;
-  align-self: flex-start;
-
-  @media only screen and (max-width: $max-mobile-width) {
-    position: absolute;
-    top: 0;
-    right: $navigation-width;
-  }
-}
-
-.header,
-.navigation {
-  button {
-    padding: 0;
-    margin-bottom: 1em;
-    outline: none;
-    border: none;
-    background-color: transparent;
-  }
 }
 
 .overlay {

src/ts/app/styles/PokemonApp.scss.d.ts

@@ -8,7 +8,7 @@ export const footer: string;
 export const header: string;
 export const highlight: string;
 export const leftColumn: string;
-export const navigation: string;
+export const navigationButton: string;
 export const navigationWrapper: string;
 export const overlaid: string;
 export const overlay: string;

src/ts/common/models/constants.ts

@@ -0,0 +1,10 @@
+/* Screen Sizes */
+// This should be kept equal to Screen Sizes in src/scss/constants.scss
+export const MIN_LARGE_DESKTOP_WIDTH : number = 1200;
+export const MAX_DESKTOP_WIDTH : number = 1199;
+export const MIN_DESKTOP_WIDTH : number = 993;
+export const MAX_TABLET_WIDTH : number = 992;
+export const MIN_TABLET_WIDTH : number = 768;
+export const MAX_MOBILE_WIDTH : number = 767;
+export const MIN_MOBILE_WIDTH : number = 360;
+export const MAX_SMALL_MOBILE_WIDTH : number = 359;