From d36bdd737a844df3c7b3ff80b7bcaf6a53433bca Mon Sep 17 00:00:00 2001
From: Ken <kchau@microsoft.com>
Date: Wed, 27 Feb 2019 11:20:46 -0800
Subject: [PATCH] styling improvments

---
 assets/step.css                             |  6 +++--
 markdownReadme/src/index.ts                 | 25 ++++++++++++++++++---
 step2-08/demo/src/components/TodoHeader.tsx |  2 +-
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/assets/step.css b/assets/step.css
index c71b651..3036130 100644
--- a/assets/step.css
+++ b/assets/step.css
@@ -3,17 +3,19 @@
 
 body {
   display: flex;
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
 
 #app {
-  flex: 1;
+  flex: 1 1 40%;
   padding: 50px;
 }
 
 #markdownReadme {
-  flex: 1;
+  box-sizing: border-box;
+  flex: 1 1 60%;
   background: #efefef;
   padding: 50px;
   margin: 0 auto;
diff --git a/markdownReadme/src/index.ts b/markdownReadme/src/index.ts
index 73f9286..8679add 100644
--- a/markdownReadme/src/index.ts
+++ b/markdownReadme/src/index.ts
@@ -32,13 +32,32 @@ async function run() {
     });
   }
 
-  // Set the renderer to marked.
-  // marked.setOptions({ renderer });
-
   if (div) {
     const response = await fetch('../README.md');
     const markdownText = await response.text();
     div.innerHTML = marked(markdownText, { baseUrl: '../' });
+    restoreScroll(div);
+  }
+
+  div.addEventListener('scroll', evt => {
+    saveScroll(div);
+  });
+
+  window.addEventListener('resize', evt => {
+    saveScroll(div);
+  });
+}
+
+const scrollKey = `${window.location.pathname}_scrolltop`;
+
+function saveScroll(div: HTMLElement) {
+  window.localStorage.setItem(scrollKey, String(div.scrollTop));
+}
+
+function restoreScroll(div: HTMLElement) {
+  const scrollTop = window.localStorage.getItem(scrollKey);
+  if (scrollTop) {
+    div.scrollTop = parseInt(scrollTop);
   }
 }
 
diff --git a/step2-08/demo/src/components/TodoHeader.tsx b/step2-08/demo/src/components/TodoHeader.tsx
index 280baff..35f0623 100644
--- a/step2-08/demo/src/components/TodoHeader.tsx
+++ b/step2-08/demo/src/components/TodoHeader.tsx
@@ -29,7 +29,7 @@ class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
 
         <Stack horizontal gap={10}>
           <Stack.Item grow>
-            <TextField placeholder="What needs to be done?" value={this.state.labelInput} onChange={this.onChange} />
+            <TextField placeholder="What needs toasdf be done?" value={this.state.labelInput} onChange={this.onChange} />
           </Stack.Item>
           <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>
         </Stack>