jeff/pvpokemon
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

mobile fixes

Browse Source
This commit is contained in:
Jeff Colombo 2019-03-24 18:27:52 -04:00
parent ed723f4354
commit c7bd19a32a
21 changed files with 190 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
dist/app.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/global-bundle.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/global.css vendored
View File

File diff suppressed because one or more lines are too long

14
dist/main-bundle.js vendored
View File

File diff suppressed because one or more lines are too long

5
package.json
View File

@ -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",

1
src/scss/Components.scss Normal file
View File

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

21
src/scss/Variables.scss
View File

@ -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;

10
src/scss/index.scss
View File

@ -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;
}

11
src/scss/sprites.scss
View File

@ -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 {

8
src/ts/app/PokemonApp.tsx
View File

@ -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() {

18
src/ts/app/components/Header.tsx
View File

@ -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"

33
src/ts/app/components/PokemonExplorer/MovesDropdown.tsx
View File

@ -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) {
return {
...previousState,
dimensions: {
let isBodyScrollDisabled = previousState.isBodyScrollDisabled;
let 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 }

2
src/ts/app/components/PokemonExplorer/styles/IvForm.scss
View File

@ -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;

6
src/ts/app/components/PokemonExplorer/styles/LeagueIvExplorer.scss
View File

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

13
src/ts/app/components/PokemonExplorer/styles/MovesDropdown.scss
View File

@ -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;
}

1
src/ts/app/components/PokemonExplorer/styles/PokemonDisplay.scss
View File

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

6
src/ts/app/components/PokemonExplorer/styles/StatDisplay.scss
View File

@ -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;
}
}
}

2
src/ts/app/components/PokemonExplorer/styles/TypeEffectiveDisplay.scss
View File

@ -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;
& > * {

6
src/ts/app/models/League.ts
View File

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

19
src/ts/app/styles/PokemonApp.scss
View File

@ -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;
}
}
}

34
yarn.lock
View File

@ -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"