mobile UX tweaks, fix blink animation

dist/app.css

@@ -12,7 +12,7 @@
 
 .LeagueSelector__wrapper__fxmRz{font-size:0.8em;display:flex;justify-content:space-around;margin:0 0 0.5rem 0}.LeagueSelector__leagueRadioLabel__3aPV9{display:flex;align-items:center}.LeagueSelector__leagueRadio__3hY7B{display:none}
 
-.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}
+.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}@media only screen and (max-width: 767px){.LeagueStatsList__listItem__oCOvr.list-item.active::before,.LeagueStatsList__listItem__oCOvr.list-item:hover::before{left:3px}}
 
 .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.3em}}
 

src/scss/index.scss

@@ -2,6 +2,17 @@
 @import './sprites.scss';
 @import '~nes.css/scss/utilities/icon-mixin';
 
+@mixin hover-arrow {
+  position: absolute;
+  top: 3px;
+  left: 4px;
+  content: "";
+
+  @media only screen and (max-width: $max-mobile-width) {
+    left: 0;
+  }
+}
+
 html,
 body {
   margin: 0;
@@ -94,20 +105,19 @@ a.list-item {
   );
   $colors: ($main-font-primary-color, $main-active-font-color);
 
-  &.active,
-  &:hover {
-    &::before {
-      position: absolute;
-      top: 3px;
-      left: 4px;
-      content: "";
-
+  // prevent iOS bug needing to click twice on hovered links
+  @media (hover) {
+    &:hover::before {
+      @include hover-arrow;
       @include pixelize(2px, $radio, $colors);
-
-      @media only screen and (max-width: $max-mobile-width) {
-        left: 0;
     }
   }
+
+  &.active {
+    &::before {
+      @include hover-arrow;
+      @include pixelize(2px, $radio-checked-focus, $colors);
+    }
   }
 
   &:focus,
@@ -116,10 +126,6 @@ a.list-item {
       animation: blink 1s infinite steps(1);
     }
   }
-
-  &.active::before {
-    @include pixelize(2px, $radio-checked-focus, $colors);
-  }
 }
 
 .nes-container {

src/scss/sprites.scss

@@ -22,7 +22,7 @@ $small-scale: 2;
 .pokedex {
   $pokedex-scale: $scale;
 
-  @keyframes blink {
+  @keyframes led-blink {
     from { background-position-x: -6px * $pokedex-scale; }
     to { background-position-x: -18px * $pokedex-scale; }
   }
@@ -36,7 +36,7 @@ $small-scale: 2;
   &:hover,
   &.active {
     background-position-x: -6px * $pokedex-scale;
-    animation: blink 500ms steps(2) infinite;
+    animation: led-blink 500ms steps(2) infinite;
   }
 }
 

src/ts/app/PokemonApp.tsx

@@ -147,6 +147,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
                         filterTerm={ this.props.pokemonSelectListState.filterTerm }
                         handleActivatePokemon={ this.handleActivatePokemon }
                         handleChangeFilter={ this.handleChangeFilter }
+                        handleOpenList={ this.handlePokedexClick }
                     />
                     <Media query={ { minWidth: MIN_TABLET_WIDTH } }>
                         <button className={ pokedexButtonCss } onClick={ this.handlePokedexClick }><i className={ pokedexCss } /></button>
@@ -224,6 +225,7 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
         const { dispatch } = this.props;
 
         dispatch(ActionsPokemonExplorer.setIsLoading(true));
+        this.handleInterruption(false, 'pokedex');
         try {
             const leaguePokemon = await dispatch(ActionsPokemonApp.fetchPokemonLeagueStats(pokemonId, form));
             dispatch(ActionsPokemonExplorer.reset(leaguePokemon));
@@ -233,7 +235,6 @@ class PokemonApp extends React.Component<IConnectedPokemonAppProps> {
             dispatch(ActionsPokemonExplorer.setLeaguePokemon(null));
         }
         dispatch(ActionsPokemonExplorer.setIsLoading(false));
-        this.handleInterruption(false, 'pokedex');
     }
 
     private readonly handleChangeFilter = (filterTerm : string) => {

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

@@ -26,7 +26,12 @@
     &:hover {
       &::before {
         top: 8px;
-        left: 10px;
+      }
+
+      @media only screen and (max-width: $max-mobile-width) {
+        &::before {
+          left: 3px;
+        }
       }
     }
   }

src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx

@@ -24,6 +24,7 @@ export interface IPokemonSelectListProps {
 
     handleActivatePokemon : (pokemonId : PVPogoProtos.PokemonId, form : PVPogoProtos.PokemonForm) => void;
     handleChangeFilter : (filterTerm : string) => Promise<void>;
+    handleOpenList : () => void;
 }
 
 interface IState {
@@ -124,6 +125,7 @@ export class PokemonSelectList extends React.Component<IPokemonSelectListProps,
                         name="filter"
                         type="text"
                         className={ inputTextCss }
+                        onFocus={ this.props.handleOpenList }
                         onChange={ this.handleChangeFilter }
                         value={ this.props.filterTerm }
                         placeholder="Search"