improve ios usabilty

andrico1234 · Nov 11, 2019 · c550a2a · c550a2a
1 parent fd7dd57
commit c550a2a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/example/mockData.tsx b/example/mockData.tsx
@@ -144,7 +144,7 @@ export const legsPushData: SkillType[] = [
     title: 'Something Else',
     children: [
       {
-        id: 'shrimp-squat',
+        id: 'shrimp-squat-1',
         icon: SquatIcon,
         title: 'Shrimp Squat',
         tooltip: {

diff --git a/src/components/ui/Node.tsx b/src/components/ui/Node.tsx
@@ -3,9 +3,12 @@ import styled, { BaseThemedCssFunction } from 'styled-components';
 import { SELECTED_STATE, UNLOCKED_STATE, LOCKED_STATE } from '../constants';
 import { Skill } from '../../models';
 import Icon from './Icon';
+import isIOSDevice from '../../helpers/isIOS';
+import { SkillThemeType } from '../../';
 
 const keyframes = require('styled-components').keyframes;
-const css: BaseThemedCssFunction<any> = require('styled-components').css;
+const css: BaseThemedCssFunction<SkillThemeType> = require('styled-components')
+  .css;
 
 interface Props {
   handleClick: VoidFunction;
@@ -19,6 +22,7 @@ interface StyledNodeProps {
   selected: boolean;
   unlocked: boolean;
   locked: boolean;
+  isIOS: boolean;
 }
 
 const Node = React.forwardRef(
@@ -28,6 +32,7 @@ const Node = React.forwardRef(
         handleClick();
       }
     }
+
     const { handleClick, id, currentState, skill } = props;
 
     return (
@@ -37,6 +42,7 @@ const Node = React.forwardRef(
         ref={ref}
         data-testid={id}
         optional={skill.optional || false}
+        isIOS={isIOSDevice()}
         selected={currentState === SELECTED_STATE}
         unlocked={currentState === UNLOCKED_STATE}
         locked={currentState === LOCKED_STATE}
@@ -155,8 +161,8 @@ const StyledNode = styled.div<StyledNodeProps>`
         &:before {
           opacity: 1;
           height: 85%;
-          width: 95%;
           transition: width 0.6s, height 0.6s;
+          width: ${(props: StyledNodeProps) => (props.isIOS ? 0 : '95%')};
         }
       }
     `}

diff --git a/src/helpers/isIOS.ts b/src/helpers/isIOS.ts
@@ -0,0 +1,22 @@
+function isIOSDevice() {
+  var iDevices = [
+    'iPad Simulator',
+    'iPhone Simulator',
+    'iPod Simulator',
+    'iPad',
+    'iPhone',
+    'iPod',
+  ];
+
+  if (!!navigator.platform) {
+    while (iDevices.length) {
+      if (navigator.platform === iDevices.pop()) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+export default isIOSDevice;