Merge pull request #17 from ShMcK/fix/size

Fix/size

Author: ShMcK

tslint.json

@@ -1,15 +1,17 @@
 {
 "extends": ["tslint:latest", "tslint-config-prettier"],
 "rules": {
+"class-name": true,
+"curly": true,
+"interface-name": [true, "never-prefix"],
 "no-string-throw": true,
-"no-unused-expression": true,
 "no-duplicate-variable": true,
-"curly": true,
-"class-name": true,
+"no-implicit-dependencies": false,
+"no-unused-expression": true,
+"object-literal-sort-keys": false,
+"ordered-imports": false,
 "semicolon": [true, "never"],
-"triple-equals": true,
-"interface-name": [true, "never-prefix"],
-"object-literal-sort-keys": false
+"triple-equals": true
  },
 "defaultSeverity": "warning",
 "no-submodule-imports": false

web-app/.storybook/config.ts

@@ -1,4 +1,4 @@
-// import '@alifd/next/dist/next.css'
+import'@alifd/next/dist/next.css'
 import{configure}from'@storybook/react'
 import'../src/styles/index.css'
 

web-app/src/Routes.tsx

@@ -12,16 +12,34 @@ interface Props {
 
 conststyles={
 page: {
-width: window.innerWidth,
-height: window.innerHeight,
+margin: 0,
 backgroundColor: 'white',
 },
 }
 
 constRoutes=({ state }: Props)=>{
+const[dimensions,setDimensions]=React.useState({
+width: window.innerWidth-20,
+height: window.innerHeight-20,
+})
+
+// solution for windows getting off size
+// without adding multiple listeners
+React.useEffect(()=>{
+constdimensionsInterval=setInterval(()=>{
+setDimensions({
+width: window.innerWidth-20,
+height: window.innerHeight-20,
+})
+},5000)
+return()=>{
+clearInterval(dimensionsInterval)
+}
+})
+
 // TODO: refactor cond to user <Router><Route> and accept first route as if/else if
 return(
-<divstyle={styles.page}>
+<divstyle={{ ...styles.page, ...dimensions}}>
 <Condstate={state}path="SelectTutorial.Startup">
 <Loading/>
 </Cond>

web-app/src/components/Stage/index.tsx

@@ -38,8 +38,6 @@ const Stage = ({ stage, steps, onNextStage, complete }: Props) => {
 constactiveIndex=stepList.findIndex((stepId: string)=>{
 returnsteps[stepId].status.active
 })
-// only display up until the active step
-constfilteredStepList=stepList.slice(0,activeIndex+1)
 return(
 <divstyle={styles.card}>
 <divstyle={styles.content}>
@@ -48,7 +46,7 @@ const Stage = ({ stage, steps, onNextStage, complete }: Props) => {
 </div>
 <divstyle={styles.steps}>
 <Stepcurrent={activeIndex}direction="ver"shape="dot"animationreadOnly>
-{filteredStepList.map((stepId: string,index: number)=>{
+{stepList.map((stepId: string,index: number)=>{
 conststep=steps[stepId]
 return(
 <Step.Item

web-app/src/index.tsx

@@ -3,6 +3,9 @@ import ReactDOM from 'react-dom'
 importAppfrom'./App'
 
 // base styles
+// TODO: must be a better way to load @alifd styles
+// currently these are loaded in src/editor/ReactWebView.ts as well
+import'@alifd/next/dist/next.css'
 import'./styles/index.css'
 
 ReactDOM.render(<App/>,document.getElementById('root')asHTMLElement)