testing without autoscroll (#97)

* fix bug where clicking topic buttons or panel buttons doesn't work on iPhone X in PAL3 * smooth animation of auto scroll for Chrome and Firefox
ICTLearningSciences · Aug 16, 2019 · 66f4096 · 66f4096
1 parent a1c6343
commit 66f4096
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 40 deletions.
diff --git a/client/src/components/input.jsx b/client/src/components/input.jsx
@@ -33,6 +33,7 @@ const Input = ({ height, ...props }) => {
     }
     dispatch(sendQuestion(text));
     setText("");
+    window.focus();
   };
 
   // Input field key was entered (check if user hit enter)

diff --git a/client/src/components/questions.jsx b/client/src/components/questions.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { useSelector } from "react-redux";
-import { List } from "@material-ui/core";
 import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
 
 import ScrollingQuestions from "components/scrolling-questions";
@@ -42,14 +41,13 @@ const Questions = ({ height, onSelected }) => {
 
   return (
     <MuiThemeProvider theme={theme}>
-      <List disablePadding style={{ maxHeight: height, overflow: "auto" }}>
-        <ScrollingQuestions
-          questions={questions}
-          questions_asked={questions_asked}
-          recommended={recommended}
-          onQuestionSelected={onSelected}
-        />
-      </List>
+      <ScrollingQuestions
+        height={height}
+        questions={questions}
+        questions_asked={questions_asked}
+        recommended={recommended}
+        onQuestionSelected={onSelected}
+      />
     </MuiThemeProvider>
   );
 };

diff --git a/client/src/components/scrolling-questions.jsx b/client/src/components/scrolling-questions.jsx
@@ -1,10 +1,11 @@
 import React, { useEffect } from "react";
-import { ListItem, ListItemText } from "@material-ui/core";
+import { List, ListItem, ListItemText } from "@material-ui/core";
 import { Whatshot } from "@material-ui/icons";
 
 import { normalizeString } from "funcs/funcs";
 
 const ScrollingQuestions = ({
+  height,
   questions,
   questions_asked,
   recommended,
@@ -14,41 +15,50 @@ const ScrollingQuestions = ({
     const top_question = questions.find(q => {
       return !questions_asked.includes(normalizeString(q));
     });
-
+    const parent = document.getElementById("scrolling-questions-list");
     const node = document.getElementById(top_question);
-    if (!(top_question && node)) {
+    if (!(parent && node)) {
       return;
     }
-
-    node.scrollIntoView({
+    parent.scrollTo({
       behavior: "smooth",
-      block: "start",
+      top: node.offsetTop,
+      left: 0,
     });
-  });
+  }, [questions, questions_asked]);
 
-  return questions.map((question, i) => (
-    <ListItem
-      key={i}
-      id={question}
-      onClick={() => onQuestionSelected(question)}
+  return (
+    <List
+      id="scrolling-questions-list"
+      className="scroll"
+      style={{ maxHeight: height }}
+      disablePadding
     >
-      <ListItemText
-        style={{
-          paddingLeft: 0,
-          color: questions_asked.includes(normalizeString(question))
-            ? "gray"
-            : "black",
-        }}
-      >
-        {recommended.includes(question) ? (
-          <Whatshot style={{ marginRight: "5px" }} fontSize="small" />
-        ) : (
-          undefined
-        )}
-        {question}
-      </ListItemText>
-    </ListItem>
-  ));
+      {questions.map((question, i) => (
+        <ListItem
+          key={i}
+          id={question}
+          onClick={() => onQuestionSelected(question)}
+        >
+          <ListItemText
+            style={{
+              paddingLeft: 0,
+              color: questions_asked.includes(normalizeString(question))
+                ? "gray"
+                : "black",
+            }}
+          >
+            {recommended.includes(question) ? (
+              <Whatshot style={{ marginRight: "5px" }} fontSize="small" />
+            ) : (
+              undefined
+            )}
+            {question}
+          </ListItemText>
+        </ListItem>
+      ))}
+    </List>
+  );
 };
 
 export default ScrollingQuestions;
diff --git a/client/src/styles/layout.css b/client/src/styles/layout.css
@@ -2,6 +2,7 @@ body {
   height: 100%;
   margin: 0;
   text-align: center;
+  -webkit-overflow-scrolling: touch;
 }
 #video-container {
   position: relative;
@@ -24,15 +25,18 @@ body {
 }
 .expand {
   flex: 1 1;
-  -webkit-overflow-scrolling: touch;
+}
+.scroll {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;    
 }
 
 .carousel {
   width: 100%;
   overflow-x: visible;
   overflow-y: hidden;
-  white-space: nowrap;
   -webkit-overflow-scrolling: touch;
+  white-space: nowrap;
 }
 .carousel .slide {
   position: relative;