mobile fixes

package.json

@@ -10,7 +10,7 @@
     "lint": "tslint --project tslint.json",
     "package": "yarn build --config webpack.config.prod.js --bail --display-used-exports -p",
     "package-for-test": "yarn build --config webpack.config.test.js --bail --display-used-exports",
-    "start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.config.js --progress --colors --debug --output-pathinfo --port 8000 --env.WARN_ON_LINT",
+    "start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.config.js --progress --colors --debug --output-pathinfo --port 8000 --host 0.0.0.0 --env.WARN_ON_LINT",
     "build": "node ./node_modules/webpack/bin/webpack.js --cache=true --display-error-details --profile",
     "clean": "rm -rf ./dist/*",
     "tsnode": "node -r ts-node/register -r tsconfig-paths/register",
@@ -78,6 +78,8 @@
     "webpack-shell-plugin": "^0.5.0"
   },
   "dependencies": {
+    "@types/body-scroll-lock": "^2.6.0",
+    "body-scroll-lock": "^2.6.1",
     "classnames": "^2.2.6",
     "history": "^4.9.0",
     "nes.css": "^2.0.0",
@@ -87,6 +89,7 @@
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-measure": "^2.2.2",
+    "react-media": "^1.9.2",
     "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
     "react-window": "^1.5.0",

src/scss/Components.scss

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

src/scss/Variables.scss

@@ -1,10 +1,29 @@
 @import '~nes.css/scss/base/color-palette';
 @import '~nes.css/scss/base/variables';
 
+// 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: 425px
+  mobile: 320px
 );
 
 $game-boy-1: #e3eec0;

src/scss/index.scss

@@ -4,8 +4,15 @@
 
 html,
 body {
-  height: 100vh;
   margin: 0;
+
+  @media only screen and (max-width: $max-mobile-width) {
+    font-size: 13px;
+  }
+
+  @media only screen and (max-width: $max-small-mobile-width) {
+    font-size: 10px;
+  }
 }
 
 a {
@@ -102,6 +109,7 @@ a.list-item {
 }
 
 .nes-container.with-title > .title {
+  font-size: 1em;
   background-color: $main-background-color;
 }
 

src/scss/sprites.scss

@@ -141,6 +141,13 @@ $scale: 4;
   width: 16px * $pokeball-scale;
   transform-origin: 50% 75%;
 
+  &.icon-large {
+    background-size: 32px * $pokeball-scale * 1.5 80px * $pokeball-scale * 1.5;
+    background-position: 0 * $pokeball-scale * 1.5 0 * $pokeball-scale * 1.5;
+    height: 16px * $pokeball-scale * 1.5;
+    width: 16px * $pokeball-scale * 1.5;
+  }
+
   &:hover {
     animation: shake 1.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite;
   }
@@ -159,6 +166,10 @@ $scale: 4;
 
   &.premier-ball {
     background-position: 0 * $pokeball-scale -64px * $pokeball-scale;
+
+    &.icon-large {
+      background-position: 0 * $pokeball-scale * 1.5 -64px * $pokeball-scale * 1.5;
+    }
   }
 
   &.ball-open {

src/ts/app/PokemonApp.tsx

@@ -11,7 +11,7 @@ import * as ActionsPokemonExplorer from 'app/components/PokemonExplorer/actions'
 import * as ActionsPokemonSelectList from 'app/components/PokemonSelectList/actions';
 import { IPokemonAppDispatch, IRouterProps } from 'app/types';
 
-import { convertFormParamToPokemonForm, convertIdParamToPokemonId } from 'app/utils/navigation';
+import { convertFormParamToPokemonForm, convertIdParamToPokemonId, convertLeagueParamToLeague } from 'app/utils/navigation';
 
 import { Footer } from 'app/components/Footer';
 import { Header } from 'app/components/Header';
@@ -50,6 +50,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
         const {
             id,
             form,
+            league,
         } = match.params;
 
         await Promise.all([
@@ -64,6 +65,11 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps, IState> {
         if (pokemonId !== null && pokemonForm !== null) {
             this.handleActivatePokemon(pokemonId, pokemonForm);
         }
+
+        const activeLeague = convertLeagueParamToLeague(league);
+        if (activeLeague !== null) {
+            dispatch(ActionsPokemonExplorer.setActiveLeague(activeLeague));
+        }
     }
 
     public render() {

src/ts/app/components/Header.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Media from 'react-media';
 import { Link } from 'react-router-dom';
 
 import classNames from 'classnames';
@@ -25,6 +26,16 @@ export class Header extends React.Component<IHeaderProps> {
             styles.header,
         );
 
+        const iconCss = classNames(
+            'icon',
+            'icon-large',
+            'pixel',
+            'sprite',
+            'pokeball',
+            'premier-ball',
+            ''
+        );
+
         // const linkTo = {
         //     // pathname: '/courses',
         //     search: appendQueryString(location, {
@@ -37,12 +48,15 @@ export class Header extends React.Component<IHeaderProps> {
         return (
             <header className={ headerCss }>
                 <Link
-                    to="/explorer/1/0"
+                    to="/explorer"
                     // style={ style }
                     // className={ anchorCss }
                     // onClick={ this.reload }
                 >
-                    PVPokemon
+                    <i className={ iconCss } />
+                    <Media query={ { minWidth: 768 } }>
+                        <span>PVPokémon</span>
+                    </Media>
                 </Link>
                 { /* <Link
                     to="/explorer"

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { ContentRect, default as Measure } from 'react-measure';
 import { FixedSizeList } from 'react-window';
 
+import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import classNames from 'classnames';
 
 import { CombatMoveStats, IPokemonMove } from 'app/models/Pokemon';
@@ -27,6 +28,8 @@ export interface IMovesDropdownProps {
 
 interface IState {
     listRef : React.RefObject<FixedSizeList>;
+    overlayRef : React.RefObject<HTMLDivElement>;
+    isBodyScrollDisabled : boolean;
     dimensions : {
         width : number;
         height : number;
@@ -41,16 +44,30 @@ interface IRowFactory {
 export class MovesDropdown extends React.Component<IMovesDropdownProps, IState> {
 
     public static getDerivedStateFromProps(nextProps : IMovesDropdownProps, previousState : IState) {
-        if (!nextProps.isMenuOpen) {
+        let isBodyScrollDisabled = previousState.isBodyScrollDisabled;
-            return {
+        let dimensions = previousState.dimensions;
-                ...previousState,
+
-                dimensions: {
+        if (nextProps.isMenuOpen) {
+            if (!previousState.isBodyScrollDisabled && previousState.overlayRef.current) {
+                disableBodyScroll(previousState.overlayRef.current);
+                isBodyScrollDisabled = true;
+            }
+        } else {
+            if (previousState.isBodyScrollDisabled && previousState.overlayRef.current) {
+                enableBodyScroll(previousState.overlayRef.current);
+                isBodyScrollDisabled = false;
+            }
+            dimensions = {
                 width: -1,
                 height: -1,
-                }
             };
         }
-        return null;
+
+        return {
+            ...previousState,
+            isBodyScrollDisabled,
+            dimensions,
+        };
     }
 
     constructor(props : IMovesDropdownProps) {
@@ -58,6 +75,8 @@ export class MovesDropdown extends React.Component<IMovesDropdownProps, IState>
 
         this.state = {
             listRef: React.createRef(),
+            overlayRef: React.createRef(),
+            isBodyScrollDisabled: false,
             dimensions: {
                 width: -1,
                 height: -1,
@@ -124,7 +143,7 @@ export class MovesDropdown extends React.Component<IMovesDropdownProps, IState>
                     { moveName }
                 </div>
                 { isMenuOpen &&
-                    <div className={ menuCss }>
+                    <div ref={ this.state.overlayRef } className={ menuCss }>
                         <h3 className="title">{ menuLabel }</h3>
                         <Measure
                             bounds={ true }

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

@@ -9,7 +9,9 @@
 }
 
 :global(.nes-field.is-inline).fieldRow {
+  font-size: 0.9em;
   justify-content: space-between;
+  align-items: baseline;
 
   label {
     flex-grow: 0;

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

@@ -73,9 +73,9 @@
 
     :global(.title).ivContainerTitle {
       margin-bottom: 0;
-      margin-right: -$border-offset;
+      margin-right: -$border-offset - 1;
-      margin-left: -$border-offset;
+      margin-left: -$border-offset - 1;
-      padding: 0 2.5rem;
+      padding: 0 1.5em;
     }
   }
 }

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

@@ -28,6 +28,14 @@
   margin-left: -1 * map-get($container-width, 'desktop') / 2;
   padding: 0;
 
+  @media only screen and (max-width: $max-mobile-width) {
+    // font-size:
+    width: auto;
+    margin: 0 1em;
+    left: 0;
+    right: 0;
+  }
+
   :global(.list-item):global(.active)::before,
   :global(.list-item):hover::before {
     top: 8px;
@@ -50,6 +58,11 @@
   white-space: nowrap;
   text-transform: capitalize;
 
+  @media only screen and (max-width: $max-mobile-width) {
+    padding-right: 0;
+    font-size: 0.9em;
+  }
+
   & > * {
     flex: 0 1 auto;
   }

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

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

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

@@ -1,3 +1,5 @@
+@import '~styles/Variables.scss';
+
 .baseStatRow {
   display: flex;
   align-items: center;
@@ -13,5 +15,9 @@
     height: 1em;
     border-image-outset: 1;
     padding: 2px;
+
+    @media only screen and (max-width: $max-mobile-width) {
+      height: 1.2em;
+    }
   }
 }

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

@@ -75,7 +75,7 @@
 
   .indicatorWrapper {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(7em, auto));
+    grid-template-columns: repeat(auto-fill, minmax(33%, auto)); // was 7em
     justify-content: space-between;
 
     & > * {

src/ts/app/models/League.ts

@@ -16,9 +16,9 @@ export const LeagueLabels : Array<{ id : League, label : string }> = [{
 }, {
     id: League.MASTER,
     label: 'Master'
-}, {
+// }, {
-    id: League.CUSTOM,
+//     id: League.CUSTOM,
-    label: 'Custom'
+//     label: 'Custom'
 }];
 
 export interface IMaxCpByLeague {

src/ts/app/styles/PokemonApp.scss

@@ -1,4 +1,5 @@
 @import '~styles/Variables.scss';
+@import '~styles/Components.scss';
 
 $overlay-opacity: 0.7;
 $footer-height: 60px;
@@ -7,7 +8,7 @@ $footer-height: 60px;
   display: flex;
   flex-flow: column nowrap;
   align-items: stretch;
-  height: 100vh;
+  // height: 100vh;
 
   .body {
     background-color: $main-background-color;
@@ -28,6 +29,7 @@ $footer-height: 60px;
 }
 
 .header {
+  display: flex;
   flex: 0 0 auto;
   justify-content: space-between;
   align-items: center;
@@ -37,6 +39,7 @@ $footer-height: 60px;
 
   a {
     display: inline-block;
+    display: flex;
   }
 }
 
@@ -50,19 +53,24 @@ $footer-height: 60px;
 
 .header,
 .footer {
-  display: flex;
   margin: 0.1em;
   z-index: 10;
 }
 
 .navigation {
-  margin-right: -72px; // offset so the displayWrapper is centered
+  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: absolute;
+    top: 0;
+    right: $navigation-width;
+  }
 }
 
 .header,
@@ -101,6 +109,11 @@ $footer-height: 60px;
   & > * {
     width: map-get($container-width, 'desktop');
     margin: 0 1em;
+
+    @media only screen and (max-width: $max-mobile-width) {
+      width: auto;
+      margin: 0 0.1em;
+    }
   }
 }
 

yarn.lock

@@ -789,6 +789,11 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=
 
+"@types/body-scroll-lock@^2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@types/body-scroll-lock/-/body-scroll-lock-2.6.0.tgz#f5b3e9acffc646793633e88aa571999cda8adc5b"
+  integrity sha512-T6ZmLK1CBXURdwsi256hLYSU6SOWQWs2p7X9TL9d95q30SyZrv1FPwUMtS5YE3H4FulCyFLPfNjhsIeSkUb9Hg==
+
 "@types/classnames@^2.2.7":
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.7.tgz#fb68cc9be8487e6ea5b13700e759bfbab7e0fefd"
@@ -1536,6 +1541,11 @@ body-parser@1.18.3:
     raw-body "2.3.3"
     type-is "~1.6.16"
 
+body-scroll-lock@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.6.1.tgz#3782ff37404886faaee366968ceee40c3964d8f2"
+  integrity sha512-fsDsq10+BJrk/+eGADqxspyZpGiKSh3dK8ByE6KuDK0REmPB99U05p1t9xVTAM9J6j9PJGm6W/W+HsCPnOFj+Q==
+
 bonjour@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
@@ -4106,6 +4116,13 @@ json-stringify-safe@~5.0.1:
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
 
+json2mq@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
+  integrity sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=
+  dependencies:
+    string-convert "^0.2.0"
+
 json3@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
@@ -5593,7 +5610,7 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
-prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -5791,6 +5808,16 @@ react-measure@^2.2.2:
     prop-types "^15.6.2"
     resize-observer-polyfill "^1.5.0"
 
+react-media@^1.9.2:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/react-media/-/react-media-1.9.2.tgz#423ee12f952e1d69f1b994a58d3cbed21a92b370"
+  integrity sha512-JUYECMcJIm0V61LSVKd1e+II4ZTYO0GuR7xtlvKETlmThZ416BqZjZdJ1uGqgmMAGFeJ3TG4TX/3Kg4qbR3EJw==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    invariant "^2.2.2"
+    json2mq "^0.2.0"
+    prop-types "^15.5.10"
+
 react-redux@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.1.tgz#0d423e2c1cb10ada87293d47e7de7c329623ba4d"
@@ -6700,6 +6727,11 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
   integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
 
+string-convert@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
+  integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=
+
 string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"