From 673b9f37c697903e433fe9b4b5a74c246efd03dd Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Tue, 24 Mar 2020 17:35:19 -0500 Subject: [PATCH 01/55] commiting to merge --- src/components/App/App.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/App/App.js b/src/components/App/App.js index 3e12d15..f961f46 100755 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -3,6 +3,7 @@ import "./App.scss"; import { withFirebase } from "utils/Firebase"; import { compose } from "recompose"; import CreateAssignment from "../../pages/CreateAssignment/CreateAssignment"; +import SectionSelector from "../SectionSelector/SectionSelector"; function App() { return ( From c82cbeb63659dfd751d4f8e43deabf892654b034 Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Mon, 27 Apr 2020 15:53:57 -0500 Subject: [PATCH 02/55] added drop down for different deployments --- .../StudentSelector/StudentSelector.js | 25 ++++++++++++++ .../StudentSelector/StudentSelector.scss | 34 +++++++++++++++++++ .../CreateAssignment/CreateAssignment.js | 12 +++++-- 3 files changed, 69 insertions(+), 2 deletions(-) create mode 100644 src/components/StudentSelector/StudentSelector.js create mode 100644 src/components/StudentSelector/StudentSelector.scss diff --git a/src/components/StudentSelector/StudentSelector.js b/src/components/StudentSelector/StudentSelector.js new file mode 100644 index 0000000..a37a21b --- /dev/null +++ b/src/components/StudentSelector/StudentSelector.js @@ -0,0 +1,25 @@ +import React, { useState, useEffect } from "react"; +import { DropdownButton, Dropdown } from "react-bootstrap"; +import { withFirebase } from "utils/Firebase"; +import "./StudentSelector.scss" + +function StudentSelector(props) { + const [currentDeployment, setCurrentDeployment] = useState() + let deployments = props.deployments; +return ( +
+ {console.log(currentDeployment)} + + {deployments.map((deployment) => ( + setCurrentDeployment(deployment)} + > + {deployment.deploymentId} + + ))} + + +
+) +} +export default withFirebase(StudentSelector); \ No newline at end of file diff --git a/src/components/StudentSelector/StudentSelector.scss b/src/components/StudentSelector/StudentSelector.scss new file mode 100644 index 0000000..407e156 --- /dev/null +++ b/src/components/StudentSelector/StudentSelector.scss @@ -0,0 +1,34 @@ +@import "../../pages/Index/index.scss"; + +.student-selector { + height: 28vw; + width: 32vw; + background-color: white; + border-radius: 1em; +} + +#depoyment-ddown { + height: 2em; + width:32vw; + border-top-left-radius: 1em; + border-top-right-radius: 1em; + background-color: $assignments-font-color; + color: white; + font-family: $assignments-roboto-font; + font-weight: bold; + font-size: 1.5em; + transition-duration: 0.3s; + &:hover { + background-color: white; + color: $assignments-font-color; + } +} +.option-ddown { + height: 2em; + width:32vw; + font-family: $assignments-roboto-font; + font-size: 1.5em; + &:hover { + background-color: #f5f5f5; + } +} \ No newline at end of file diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index 088c71b..44827c9 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -9,6 +9,7 @@ import { getDeploymentAccountIdsFromLesson } from "utils/Lesson"; import { ADMIN_ACCOUNT } from "utils/constants.js"; import { withFirebase } from "utils/Firebase"; import StudentList from "components/StudentList/StudentList"; +import StudentSelector from "components/StudentSelector/StudentSelector"; import DatePicker from "components/DatePicker/DatePicker.js"; import WordGroupSelector from "../../components/WordGroupSelector/WordGroupSelector"; import SectionSelector from "../../components/SectionSelector/SectionSelector"; @@ -301,13 +302,20 @@ function CreateAssignment(props) { - + /> */} + From eb6fad265b58c12955e02fbc836c2f6c11e3a040 Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Mon, 27 Apr 2020 18:46:21 -0500 Subject: [PATCH 03/55] added select all button, no functionality yet --- .../StudentSelector/StudentSelector.js | 16 ++++++++++++++++ .../StudentSelector/StudentSelector.scss | 14 ++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/src/components/StudentSelector/StudentSelector.js b/src/components/StudentSelector/StudentSelector.js index a37a21b..9d5f7d7 100644 --- a/src/components/StudentSelector/StudentSelector.js +++ b/src/components/StudentSelector/StudentSelector.js @@ -1,10 +1,12 @@ import React, { useState, useEffect } from "react"; import { DropdownButton, Dropdown } from "react-bootstrap"; +import { Button, Row, Col } from "react-bootstrap"; import { withFirebase } from "utils/Firebase"; import "./StudentSelector.scss" function StudentSelector(props) { const [currentDeployment, setCurrentDeployment] = useState() + const [studentsChecked, setStudentsChecked] = useState([]); let deployments = props.deployments; return (
@@ -18,6 +20,20 @@ return ( ))} +
+ +
+ +
+
+ +
+ +
) diff --git a/src/components/StudentSelector/StudentSelector.scss b/src/components/StudentSelector/StudentSelector.scss index 407e156..a2435c5 100644 --- a/src/components/StudentSelector/StudentSelector.scss +++ b/src/components/StudentSelector/StudentSelector.scss @@ -31,4 +31,18 @@ &:hover { background-color: #f5f5f5; } +} +.select-all-checkbox { + margin-top: 3%; +} +.select-all-label { + color: $assignments-font-color; + font-size: 1em; + font-weight: bold; + margin-top: 0%; +} +.select-all-margins { + margin:auto; + margin-left: 10%; + margin-right: 10px; } \ No newline at end of file From 9006d7934e4869c61f4c3d0eedec9a1502120836 Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Mon, 27 Apr 2020 19:29:26 -0500 Subject: [PATCH 04/55] WIP adding in student name checkboxes --- .../StudentSelector/StudentSelector.js | 23 +++++++++++++++++++ .../StudentSelector/StudentSelector.scss | 9 ++++++-- .../CustomLessonsDisplay.scss | 2 +- 3 files changed, 31 insertions(+), 3 deletions(-) diff --git a/src/components/StudentSelector/StudentSelector.js b/src/components/StudentSelector/StudentSelector.js index 9d5f7d7..3d4d79b 100644 --- a/src/components/StudentSelector/StudentSelector.js +++ b/src/components/StudentSelector/StudentSelector.js @@ -8,6 +8,26 @@ function StudentSelector(props) { const [currentDeployment, setCurrentDeployment] = useState() const [studentsChecked, setStudentsChecked] = useState([]); let deployments = props.deployments; + +function nameSelector(deploymentAccountId) { + return ( +
+ {/* {currentDeployment.deploymentAccounts[deploymentAccountId].username} */} + +
+ +
+
+ +
+ +
+ ) +} return (
{console.log(currentDeployment)} @@ -34,6 +54,9 @@ return (
+ {currentDeployment &&
+ {Object.keys(currentDeployment.deploymentAccounts).map(deploymentAccountId => (nameSelector(deploymentAccountId)))} +
} ) diff --git a/src/components/StudentSelector/StudentSelector.scss b/src/components/StudentSelector/StudentSelector.scss index a2435c5..56c7056 100644 --- a/src/components/StudentSelector/StudentSelector.scss +++ b/src/components/StudentSelector/StudentSelector.scss @@ -29,7 +29,7 @@ font-family: $assignments-roboto-font; font-size: 1.5em; &:hover { - background-color: #f5f5f5; + background-color: #f5f5f5; } } .select-all-checkbox { @@ -42,7 +42,12 @@ margin-top: 0%; } .select-all-margins { - margin:auto; + margin: auto; margin-left: 10%; margin-right: 10px; +} +.accounts-list { + min-height: 24vm; + background-color: wheat; + margin: auto; } \ No newline at end of file diff --git a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.scss b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.scss index 693bb19..77015f4 100644 --- a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.scss +++ b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.scss @@ -50,7 +50,7 @@ text-transform: lowercase; font-family: $assignments-roboto-font; font-size: 1em; - &hover { + &:hover { background-color: #f5f5f5; } &:focus { From 9ef2a5566d2353404a06fb3fbbec1de694a58e52 Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Tue, 28 Apr 2020 18:16:26 -0500 Subject: [PATCH 05/55] put the select button on the other side --- .../StudentSelector/StudentSelector.js | 8 ++++---- .../StudentSelector/StudentSelector.scss | 17 +++++++++++++---- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/StudentSelector/StudentSelector.js b/src/components/StudentSelector/StudentSelector.js index 3d4d79b..ad68f1d 100644 --- a/src/components/StudentSelector/StudentSelector.js +++ b/src/components/StudentSelector/StudentSelector.js @@ -11,12 +11,9 @@ function StudentSelector(props) { function nameSelector(deploymentAccountId) { return ( -
+
{/* {currentDeployment.deploymentAccounts[deploymentAccountId].username} */} -
- -
+
+ +
) diff --git a/src/components/StudentSelector/StudentSelector.scss b/src/components/StudentSelector/StudentSelector.scss index 56c7056..5ef52c1 100644 --- a/src/components/StudentSelector/StudentSelector.scss +++ b/src/components/StudentSelector/StudentSelector.scss @@ -34,20 +34,29 @@ } .select-all-checkbox { margin-top: 3%; + margin-left: 70%; } .select-all-label { color: $assignments-font-color; font-size: 1em; font-weight: bold; - margin-top: 0%; + margin-top: 3%; } + .select-all-margins { margin: auto; margin-left: 10%; - margin-right: 10px; + margin-right: 10%; } .accounts-list { - min-height: 24vm; - background-color: wheat; + max-height: 20vw; margin: auto; + overflow-y: auto; + overflow-x: hidden; +} +.student-name-label { + margin-left: 1em; + margin-top: 2%; + font-weight: bold; + color: $assignments-font-color; } \ No newline at end of file From 93bb63a179180d777a4677f1128d20a8b827be7b Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Tue, 28 Apr 2020 19:54:05 -0500 Subject: [PATCH 06/55] WIP functionality of everything --- .../StudentSelector/StudentSelector.js | 57 +++++++++++++++++-- .../StudentSelector/StudentSelector.scss | 7 ++- 2 files changed, 57 insertions(+), 7 deletions(-) diff --git a/src/components/StudentSelector/StudentSelector.js b/src/components/StudentSelector/StudentSelector.js index ad68f1d..3209acf 100644 --- a/src/components/StudentSelector/StudentSelector.js +++ b/src/components/StudentSelector/StudentSelector.js @@ -12,13 +12,14 @@ function StudentSelector(props) { function nameSelector(deploymentAccountId) { return (
- {/* {currentDeployment.deploymentAccounts[deploymentAccountId].username} */}
handleClickStudent(deploymentAccountId)} />
@@ -28,9 +29,52 @@ function nameSelector(deploymentAccountId) {
) } +function handleClickStudent(deploymentAccountId) { + const currentIndex = studentsChecked.indexOf(deploymentAccountId); + const newChecked = [...studentsChecked]; + + if (currentIndex === -1) { + newChecked.push(deploymentAccountId); + } else { + newChecked.splice(currentIndex, 1); + } + const setChecked = Array.from(new Set(newChecked)); + setStudentsChecked(setChecked); + props.handleChange(setChecked); + console.log(setChecked) +} + +function handleClickSelectAll(deployment) { + let deploymentAccounts = []; + let selectAll = false; + const newChecked = [...studentsChecked]; + const indexes = []; + Object.keys(deployment.deploymentAccounts).map(deploymentAccountId => { + deploymentAccounts.push(deploymentAccountId) + if (studentsChecked.indexOf(deploymentAccountId) === -1) { + selectAll = true; + } else { + indexes.push(studentsChecked.indexOf(deploymentAccountId)) + } + }) + //Right now its not removing the students from the list correctly + //also need to reset the Select Checkbox for when its colored?? + if (selectAll) { + newChecked.push.apply(newChecked, deploymentAccounts) + console.log(newChecked); + } else { + indexes.forEach(value =>{ + newChecked.splice(value, 1) + } ) + } + const setChecked = Array.from(new Set(newChecked)); + setStudentsChecked(setChecked); + props.handleChange(setChecked); + console.log(setChecked) +} + return (
- {console.log(currentDeployment)} {deployments.map((deployment) => ( ))} + {currentDeployment && +
@@ -50,13 +96,16 @@ return ( class = "move-down" id = "cbox" type = "checkbox" + onClick={() => handleClickSelectAll(currentDeployment)} />
- {currentDeployment &&
+
{Object.keys(currentDeployment.deploymentAccounts).map(deploymentAccountId => (nameSelector(deploymentAccountId)))} -
} +
+
+ }
) diff --git a/src/components/StudentSelector/StudentSelector.scss b/src/components/StudentSelector/StudentSelector.scss index 5ef52c1..bedb21d 100644 --- a/src/components/StudentSelector/StudentSelector.scss +++ b/src/components/StudentSelector/StudentSelector.scss @@ -24,17 +24,18 @@ } } .option-ddown { - height: 2em; + height: 1.5em; width:32vw; font-family: $assignments-roboto-font; - font-size: 1.5em; + font-weight: bold; + font-size: 1em; &:hover { background-color: #f5f5f5; } } .select-all-checkbox { margin-top: 3%; - margin-left: 70%; + margin-left: 65%; } .select-all-label { color: $assignments-font-color; From bd62455d895eeb98a41dfc349e84312adb363203 Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Wed, 29 Apr 2020 01:28:31 -0500 Subject: [PATCH 07/55] functionality of select all button is good now --- .../StudentSelector/StudentSelector.js | 37 +++++++++++-------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/src/components/StudentSelector/StudentSelector.js b/src/components/StudentSelector/StudentSelector.js index 3209acf..8d3a735 100644 --- a/src/components/StudentSelector/StudentSelector.js +++ b/src/components/StudentSelector/StudentSelector.js @@ -7,6 +7,11 @@ import "./StudentSelector.scss" function StudentSelector(props) { const [currentDeployment, setCurrentDeployment] = useState() const [studentsChecked, setStudentsChecked] = useState([]); + const [chooseAll, setChooseAll] = useState( + Array(props.deployments.length) + .fill() + .map((_, i) => false) + ); let deployments = props.deployments; function nameSelector(deploymentAccountId) { @@ -45,32 +50,31 @@ function handleClickStudent(deploymentAccountId) { } function handleClickSelectAll(deployment) { + let index = deployments.indexOf(currentDeployment); let deploymentAccounts = []; let selectAll = false; - const newChecked = [...studentsChecked]; - const indexes = []; + let newChecked = [...studentsChecked]; + let indexes = []; Object.keys(deployment.deploymentAccounts).map(deploymentAccountId => { - deploymentAccounts.push(deploymentAccountId) - if (studentsChecked.indexOf(deploymentAccountId) === -1) { - selectAll = true; + if (!chooseAll[index]) { + newChecked.push(deploymentAccountId) } else { - indexes.push(studentsChecked.indexOf(deploymentAccountId)) + let removeIndex = newChecked.indexOf(deploymentAccountId); + newChecked.splice(removeIndex, 1) } }) - //Right now its not removing the students from the list correctly - //also need to reset the Select Checkbox for when its colored?? - if (selectAll) { - newChecked.push.apply(newChecked, deploymentAccounts) - console.log(newChecked); - } else { - indexes.forEach(value =>{ - newChecked.splice(value, 1) - } ) - } + //So for optimization, the select button works differently here than it does for the word group select all + //if we want to make it be the same, for each render, it will need to check if all the students in that deployment has been selected + const setChecked = Array.from(new Set(newChecked)); setStudentsChecked(setChecked); props.handleChange(setChecked); console.log(setChecked) + + let newChooseAll = [...chooseAll]; + newChooseAll[index] = !newChooseAll[index] + setChooseAll(newChooseAll) + } return ( @@ -96,6 +100,7 @@ return ( class = "move-down" id = "cbox" type = "checkbox" + checked = {chooseAll[deployments.indexOf(currentDeployment)]} onClick={() => handleClickSelectAll(currentDeployment)} />
From 06679de873a33c148840427a400ec08477337e71 Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Wed, 29 Apr 2020 02:08:24 -0500 Subject: [PATCH 08/55] Fixed the class names --- .../StudentSelector/StudentSelector.js | 170 ++++++++++-------- .../CreateAssignment/CreateAssignment.js | 10 +- 2 files changed, 97 insertions(+), 83 deletions(-) diff --git a/src/components/StudentSelector/StudentSelector.js b/src/components/StudentSelector/StudentSelector.js index 8d3a735..4204f8c 100644 --- a/src/components/StudentSelector/StudentSelector.js +++ b/src/components/StudentSelector/StudentSelector.js @@ -2,39 +2,44 @@ import React, { useState, useEffect } from "react"; import { DropdownButton, Dropdown } from "react-bootstrap"; import { Button, Row, Col } from "react-bootstrap"; import { withFirebase } from "utils/Firebase"; -import "./StudentSelector.scss" +import "./StudentSelector.scss"; function StudentSelector(props) { - const [currentDeployment, setCurrentDeployment] = useState() - const [studentsChecked, setStudentsChecked] = useState([]); - const [chooseAll, setChooseAll] = useState( - Array(props.deployments.length) - .fill() - .map((_, i) => false) - ); - let deployments = props.deployments; + const [currentDeployment, setCurrentDeployment] = useState(); + const [studentsChecked, setStudentsChecked] = useState([]); + const [chooseAll, setChooseAll] = useState( + Array(props.deployments.length) + .fill() + .map((_, i) => false) + ); + let deployments = props.deployments; -function nameSelector(deploymentAccountId) { + function nameSelector(deploymentAccountId) { return ( -
- -
+
+ +
handleClickStudent(deploymentAccountId)} + class="move-down" + id="cbox" + type="checkbox" + checked={studentsChecked.indexOf(deploymentAccountId) !== -1} + onClick={() => handleClickStudent(deploymentAccountId)} /> -
-
- -
- -
- ) -} -function handleClickStudent(deploymentAccountId) { +
+
+ +
+ +
+ ); + } + function handleClickStudent(deploymentAccountId) { const currentIndex = studentsChecked.indexOf(deploymentAccountId); const newChecked = [...studentsChecked]; @@ -46,73 +51,82 @@ function handleClickStudent(deploymentAccountId) { const setChecked = Array.from(new Set(newChecked)); setStudentsChecked(setChecked); props.handleChange(setChecked); - console.log(setChecked) -} + console.log(setChecked); + } -function handleClickSelectAll(deployment) { + function handleClickSelectAll(deployment) { let index = deployments.indexOf(currentDeployment); let deploymentAccounts = []; let selectAll = false; let newChecked = [...studentsChecked]; let indexes = []; Object.keys(deployment.deploymentAccounts).map(deploymentAccountId => { - if (!chooseAll[index]) { - newChecked.push(deploymentAccountId) - } else { - let removeIndex = newChecked.indexOf(deploymentAccountId); - newChecked.splice(removeIndex, 1) - } - }) + if (!chooseAll[index]) { + newChecked.push(deploymentAccountId); + } else { + let removeIndex = newChecked.indexOf(deploymentAccountId); + newChecked.splice(removeIndex, 1); + } + }); //So for optimization, the select button works differently here than it does for the word group select all //if we want to make it be the same, for each render, it will need to check if all the students in that deployment has been selected const setChecked = Array.from(new Set(newChecked)); setStudentsChecked(setChecked); props.handleChange(setChecked); - console.log(setChecked) + console.log(setChecked); let newChooseAll = [...chooseAll]; - newChooseAll[index] = !newChooseAll[index] - setChooseAll(newChooseAll) - -} - -return ( -
- - {deployments.map((deployment) => ( - setCurrentDeployment(deployment)} - > - {deployment.deploymentId} - - ))} - - {currentDeployment && -
-
+ newChooseAll[index] = !newChooseAll[index]; + setChooseAll(newChooseAll); + } + //the key in the DropdownButton is hacky fix to the issue that the dropdown menu doesnt close upon selection + return ( +
+ + {deployments.map((deployment, index) => ( + setCurrentDeployment(deployment)} + > + {"Class " + (index + 1)} + + ))} + + {currentDeployment && ( +
+
-
- -
-
- handleClickSelectAll(currentDeployment)} - /> -
- +
+ +
+
+ handleClickSelectAll(currentDeployment)} + /> +
+ +
+
+ {Object.keys(currentDeployment.deploymentAccounts).map( + deploymentAccountId => nameSelector(deploymentAccountId) + )} +
-
- {Object.keys(currentDeployment.deploymentAccounts).map(deploymentAccountId => (nameSelector(deploymentAccountId)))} -
-
- } - + )}
-) + ); } -export default withFirebase(StudentSelector); \ No newline at end of file +export default withFirebase(StudentSelector); diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index 44827c9..260f7d4 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -310,11 +310,11 @@ function CreateAssignment(props) { } /> */} From 77d605fdbece9c88a1172683809b843cb1255fcb Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Wed, 29 Apr 2020 02:21:00 -0500 Subject: [PATCH 09/55] delete old component --- src/components/StudentList/StudentList.js | 93 ------------------- .../StudentList/StudentListStyles.js | 30 ------ .../CreateAssignment/CreateAssignment.js | 8 -- 3 files changed, 131 deletions(-) delete mode 100644 src/components/StudentList/StudentList.js delete mode 100644 src/components/StudentList/StudentListStyles.js diff --git a/src/components/StudentList/StudentList.js b/src/components/StudentList/StudentList.js deleted file mode 100644 index 5109db3..0000000 --- a/src/components/StudentList/StudentList.js +++ /dev/null @@ -1,93 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { withFirebase } from "utils/Firebase"; -import { - Checkbox, - ListItemIcon, - Collapse, - List, - ListItem, - ListItemText -} from "@material-ui/core"; -import ExpandLess from "@material-ui/icons/ExpandLess"; -import ExpandMore from "@material-ui/icons/ExpandMore"; -import useStyles from "StudentList/StudentListStyles.js"; - -function StudentList(props) { - const classes = useStyles(); - const [checked, setChecked] = useState([]); - const [open, setOpen] = useState( - Array(props.deployments.length) - .fill() - .map((_, i) => false) - ); - let deployments = props.deployments; - - const handleClick = index => { - let openCopy = [...open]; - openCopy[index] = !openCopy[index]; - setOpen(openCopy); - }; - - const handleToggle = value => () => { - const currentIndex = checked.indexOf(value); - const newChecked = [...checked]; - - if (currentIndex === -1) { - newChecked.push(value); - } else { - newChecked.splice(currentIndex, 1); - } - - setChecked(newChecked); - props.handleChange(newChecked); - }; - return ( -
- - {Array.isArray(deployments) && - deployments.map((deployment, index) => ( -
- handleClick(index)} - className={classes.listSection} - > - {`Deployment: ${index + 1}`} - {open[index] ? : } - - - - {Object.keys(deployment.deploymentAccounts).map( - deploymentAccountId => ( - - - - - - - ) - )} - -
- ))} - -
- ); -} -export default withFirebase(StudentList); diff --git a/src/components/StudentList/StudentListStyles.js b/src/components/StudentList/StudentListStyles.js deleted file mode 100644 index a62795b..0000000 --- a/src/components/StudentList/StudentListStyles.js +++ /dev/null @@ -1,30 +0,0 @@ -import { makeStyles } from "@material-ui/core/styles"; -/** - * Use JS instead of CSS because material-ui overrides the CSS - */ -const useStyles = makeStyles(theme => ({ - root: { - color: "#4D4C4C", - "&$checked": { - color: "#b1b0ffs" - } - }, - checked: { - color: "#b1b0ff" - }, - listSection: { - backgroundColor: "#e7e4e4", - color: "#4D4C4C", - fontSize: "14pt" - }, - nested: { - backgroundColor: "#ffffff", - color: "#4D4C4C", - fontSize: "14pt", - paddingLeft: theme.spacing(4), - "&:hover": { - backgroundColor: "#efefef" - } - } -})); -export default useStyles; diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index 260f7d4..e2cd073 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -8,7 +8,6 @@ import { Button } from "reactstrap"; import { getDeploymentAccountIdsFromLesson } from "utils/Lesson"; import { ADMIN_ACCOUNT } from "utils/constants.js"; import { withFirebase } from "utils/Firebase"; -import StudentList from "components/StudentList/StudentList"; import StudentSelector from "components/StudentSelector/StudentSelector"; import DatePicker from "components/DatePicker/DatePicker.js"; import WordGroupSelector from "../../components/WordGroupSelector/WordGroupSelector"; @@ -302,13 +301,6 @@ function CreateAssignment(props) { - {/* */} Date: Thu, 30 Apr 2020 19:37:02 -0500 Subject: [PATCH 10/55] fixed positioning of lesson info display in the custom lesson page --- src/components/LessonInfoDisplay/LessonInfoDisplay.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/LessonInfoDisplay/LessonInfoDisplay.scss b/src/components/LessonInfoDisplay/LessonInfoDisplay.scss index a07a483..86d3957 100644 --- a/src/components/LessonInfoDisplay/LessonInfoDisplay.scss +++ b/src/components/LessonInfoDisplay/LessonInfoDisplay.scss @@ -7,7 +7,9 @@ height: 25vw; border: 1px solid #4d4d4c; border-radius: 2em; - position: relative; + position: fixed; + left: 15%; + top: 10%; margin: auto; margin-top: 8em; z-index: 1; From 6f0869d6e61a9ca3767523634b27a0cc0f4d37b4 Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Thu, 30 Apr 2020 20:20:22 -0500 Subject: [PATCH 11/55] WIP calendar stuff --- src/components/DatePicker/DatePicker.scss | 10 ++++++---- src/pages/CreateAssignment/CreateAssignment.js | 3 +-- src/pages/CreateAssignment/CreateAssignment.scss | 7 ++++++- src/pages/Index/index.scss | 1 + 4 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/components/DatePicker/DatePicker.scss b/src/components/DatePicker/DatePicker.scss index b21fcca..5e0b9d7 100644 --- a/src/components/DatePicker/DatePicker.scss +++ b/src/components/DatePicker/DatePicker.scss @@ -4,10 +4,12 @@ color: white; } .react-calendar { - width: 110%; - max-width: 150%; - height: 150%; - max-height: 150%; + // width: 110%; + // max-width: 150%; + // height: 150%; + // max-height: 150%; + height: 28vw; + width: 32vw; background: $assignments-light-purple; border: 1px solid #e6e6e6; border-radius: 10px; diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index e2cd073..bf882e6 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -297,7 +297,7 @@ function CreateAssignment(props) {
)} -
+
@@ -309,7 +309,6 @@ function CreateAssignment(props) { } > - Date: Thu, 30 Apr 2020 20:29:30 -0500 Subject: [PATCH 12/55] changes 4 kelley my daddy --- src/components/StudentSelector/StudentSelector.js | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/components/StudentSelector/StudentSelector.js b/src/components/StudentSelector/StudentSelector.js index 4204f8c..0fe9cec 100644 --- a/src/components/StudentSelector/StudentSelector.js +++ b/src/components/StudentSelector/StudentSelector.js @@ -14,13 +14,12 @@ function StudentSelector(props) { ); let deployments = props.deployments; - function nameSelector(deploymentAccountId) { + function NameSelector(deploymentAccountId) { return (
{ if (!chooseAll[index]) { newChecked.push(deploymentAccountId); @@ -74,7 +69,6 @@ function StudentSelector(props) { const setChecked = Array.from(new Set(newChecked)); setStudentsChecked(setChecked); props.handleChange(setChecked); - console.log(setChecked); let newChooseAll = [...chooseAll]; newChooseAll[index] = !newChooseAll[index]; @@ -89,7 +83,7 @@ function StudentSelector(props) { title={ (currentDeployment && "Class " + (deployments.indexOf(currentDeployment) + 1)) || - "Class:" + "Select a Class" } > {deployments.map((deployment, index) => ( @@ -110,7 +104,6 @@ function StudentSelector(props) {
{Object.keys(currentDeployment.deploymentAccounts).map( - deploymentAccountId => nameSelector(deploymentAccountId) + deploymentAccountId => NameSelector(deploymentAccountId) )}
From 19a1a33b28b5c28dd1ba4fd21ecd4c30285e8f71 Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Thu, 30 Apr 2020 21:29:23 -0500 Subject: [PATCH 13/55] changed the date thing so it doesn't show a day selected when its not --- src/components/DatePicker/DatePicker.js | 1 - src/components/DatePicker/DatePicker.scss | 11 +++-------- src/pages/CreateAssignment/CreateAssignment.scss | 2 +- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/src/components/DatePicker/DatePicker.js b/src/components/DatePicker/DatePicker.js index 98c9caa..81f06e4 100644 --- a/src/components/DatePicker/DatePicker.js +++ b/src/components/DatePicker/DatePicker.js @@ -16,7 +16,6 @@ function DatePicker(props) { onClickDay={event => { onChange(event); }} - value={date} className="calendar" calendarType="US" minDetail="month" diff --git a/src/components/DatePicker/DatePicker.scss b/src/components/DatePicker/DatePicker.scss index 5e0b9d7..765cd19 100644 --- a/src/components/DatePicker/DatePicker.scss +++ b/src/components/DatePicker/DatePicker.scss @@ -4,12 +4,8 @@ color: white; } .react-calendar { - // width: 110%; - // max-width: 150%; - // height: 150%; - // max-height: 150%; - height: 28vw; - width: 32vw; + width: 110%; + height: 110%; background: $assignments-light-purple; border: 1px solid #e6e6e6; border-radius: 10px; @@ -34,8 +30,7 @@ .react-calendar__navigation { height: 2em; font-size: 200%; - color: #00d8a4; - background-color: $assignments-darker-color; + background-color:#e6e6e6; border-radius: 10px 10px 0px 0px; button { diff --git a/src/pages/CreateAssignment/CreateAssignment.scss b/src/pages/CreateAssignment/CreateAssignment.scss index 06ee707..ba6b6b7 100644 --- a/src/pages/CreateAssignment/CreateAssignment.scss +++ b/src/pages/CreateAssignment/CreateAssignment.scss @@ -15,7 +15,7 @@ position: relative; } .student-date-container { - height: 35vw; + min-height: 35vw; // width: 70vw; background-color: $assignments-lighter-gray; } From ce13418a2932326b2e2caf1a3208ba85b1bb36cb Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Thu, 30 Apr 2020 21:53:48 -0500 Subject: [PATCH 14/55] WIP --- .../WordGroupSelector/WordGroupSelector.scss | 3 +- .../CreateAssignment/CreateAssignment.js | 33 ++++++++++--------- .../CreateAssignment/CreateAssignment.scss | 4 +++ 3 files changed, 24 insertions(+), 16 deletions(-) diff --git a/src/components/WordGroupSelector/WordGroupSelector.scss b/src/components/WordGroupSelector/WordGroupSelector.scss index 1c3206a..badd2c3 100644 --- a/src/components/WordGroupSelector/WordGroupSelector.scss +++ b/src/components/WordGroupSelector/WordGroupSelector.scss @@ -1,7 +1,7 @@ @import "../../pages/Index/index.scss"; .Background { - height: 120vh; + height: 75vh; max-width: 150vh; background-image: url("wordgroupbg.svg"); background-position: 10%; @@ -9,6 +9,7 @@ background-color: #f5f5f5; overflow: auto; margin: auto; + margin-bottom: 10%; } .WordGroups { diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index bf882e6..fe48ebe 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -258,21 +258,9 @@ function CreateAssignment(props) { handleWriting={handleWriting} /> {(showWriting || showVocab || showPhonics) && ( -
- - - - Lesson Name - - - handleLessonNameChange(e.target.value)} - /> - +

+
{showPhonics && (

Phonics

@@ -296,7 +284,22 @@ function CreateAssignment(props) { />
)} - +
+
+ + + + Lesson Name + + + handleLessonNameChange(e.target.value)} + /> + +
diff --git a/src/pages/CreateAssignment/CreateAssignment.scss b/src/pages/CreateAssignment/CreateAssignment.scss index ba6b6b7..2ef6d02 100644 --- a/src/pages/CreateAssignment/CreateAssignment.scss +++ b/src/pages/CreateAssignment/CreateAssignment.scss @@ -64,3 +64,7 @@ .spacing { padding: 3em; } + +.lesson-name { + margin-bottom:5%; +} From fbf6bbc6e6c8b5814079f69c9df6d6c477fecc9e Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Mon, 4 May 2020 19:34:23 -0500 Subject: [PATCH 15/55] made small CSS tweaks --- .../PhonicSelector/PhonicSelector.js | 2 +- .../PhonicWordSelector/PhonicWordSelector.js | 2 +- .../WordGroupIcon/WordGroupIcon.scss | 2 +- .../WordGroupSelector/WordGroupSelector.js | 9 ++++++--- .../WordGroupSelector/WordGroupSelector.scss | 19 +++---------------- src/components/WordSelector/WordSelector.scss | 4 +++- .../CreateAssignment/CreateAssignment.scss | 7 ------- 7 files changed, 15 insertions(+), 30 deletions(-) diff --git a/src/components/PhonicSelector/PhonicSelector.js b/src/components/PhonicSelector/PhonicSelector.js index 976a3f4..2d9a524 100644 --- a/src/components/PhonicSelector/PhonicSelector.js +++ b/src/components/PhonicSelector/PhonicSelector.js @@ -48,7 +48,7 @@ function PhonicSelector(props) { return (
-
+
{Object.keys(phonicGroups).map((key, index) => (
diff --git a/src/components/PhonicWordSelector/PhonicWordSelector.js b/src/components/PhonicWordSelector/PhonicWordSelector.js index b140bb5..1b88eb9 100644 --- a/src/components/PhonicWordSelector/PhonicWordSelector.js +++ b/src/components/PhonicWordSelector/PhonicWordSelector.js @@ -13,7 +13,7 @@ function PhonicWordSelector(props) {
{props.name}
{props.data.words.map(word => ( -
{word}
+
{word}
))}
diff --git a/src/components/WordGroupIcon/WordGroupIcon.scss b/src/components/WordGroupIcon/WordGroupIcon.scss index a9c02a0..2770411 100644 --- a/src/components/WordGroupIcon/WordGroupIcon.scss +++ b/src/components/WordGroupIcon/WordGroupIcon.scss @@ -9,7 +9,7 @@ border-radius: 2em; box-shadow: 0em 0.2em #e6e6e6; display: block; - overflow-y: hidden; + overflow: hidden; } .PurpleWordGroupIcon { background-color: $assignments-light-purple; diff --git a/src/components/WordGroupSelector/WordGroupSelector.js b/src/components/WordGroupSelector/WordGroupSelector.js index c2587a6..7187c0f 100644 --- a/src/components/WordGroupSelector/WordGroupSelector.js +++ b/src/components/WordGroupSelector/WordGroupSelector.js @@ -1,6 +1,7 @@ import React, { useState, useEffect, useRef } from "react"; import { collectedWordGroupsService } from "util/GWUtil/resource"; import "./WordGroupSelector.scss"; +import { Button, Row, Col } from "react-bootstrap"; import WordGroupIcon from "../WordGroupIcon/WordGroupIcon"; import WordSelector from "../WordSelector/WordSelector"; @@ -133,9 +134,10 @@ function WordGroupSelector(props) { } return ( -
-
+
+
{Object.keys(wordGroups).map((key, index) => ( +
handleClick(wordGroups[key][0], key, index)}>
+ ))}
-
+
{selectMode && ( Date: Mon, 4 May 2020 21:49:24 -0500 Subject: [PATCH 16/55] restyle lesson cards --- src/components/LessonCards/LessonCard.js | 19 +++-- src/components/LessonCards/LessonCard.scss | 95 +++++++++++++--------- 2 files changed, 71 insertions(+), 43 deletions(-) diff --git a/src/components/LessonCards/LessonCard.js b/src/components/LessonCards/LessonCard.js index c924edf..e03d092 100644 --- a/src/components/LessonCards/LessonCard.js +++ b/src/components/LessonCards/LessonCard.js @@ -1,4 +1,5 @@ import React, { useState, useEffect } from "react"; +import { Col, Row, Container } from "reactstrap"; import "./LessonCard.scss"; function LessonCard(props) { @@ -9,21 +10,27 @@ function LessonCard(props) { let dateString = dateComponents[1] + " " + dateComponents[2]; setCardDate(dateString); }); - + /** + * Still can't see the delete button for some reason + * Also why are the words not bolded?? + */ return ( -
-
-
{cardDate}
+
+
+ +
{cardDate} +
props.deleteCard(props.lessonDate)} className="DeleteLessonCard" > Close
+
-
+
{props.lessonStudents.map((student, index) => ( -
+
{student}
))} diff --git a/src/components/LessonCards/LessonCard.scss b/src/components/LessonCards/LessonCard.scss index 19aa3ed..a7e3f96 100644 --- a/src/components/LessonCards/LessonCard.scss +++ b/src/components/LessonCards/LessonCard.scss @@ -1,49 +1,70 @@ @import "../../pages/Index/index.scss"; +@import "../LessonInfoDisplay/LessonInfoDisplay.scss"; -.LessonCard { - display: flex; - flex-wrap: wrap; - flex-direction: row; - overflow: scroll; - height: 15vw; - width: 12vw; - border-radius: 20px; - margin: 2vw; - margin-bottom: 0vw; - background-color: $assignments-background-color; - color: $assignments-font-color; - font-family: $assignments-roboto-font; - font-size: 1.2em; -} +// .LessonCard { +// display: flex; +// flex-wrap: wrap; +// flex-direction: row; +// overflow: scroll; +// height: 15vw; +// width: 12vw; +// border-radius: 20px; +// margin: 2vw; +// margin-bottom: 0vw; +// background-color: $assignments-background-color; +// color: $assignments-font-color; +// font-family: $assignments-roboto-font; +// font-size: 1.2em; +// } -.LessonCardHeading { - display: flex; - flex-wrap: wrap; - height: 4vw; - width: 12vw; - top: 1vw; - background-color: $assignments-light-purple; - font-family: $assignments-roboto-font; -} +// .LessonCardHeading { +// display: flex; +// flex-wrap: wrap; +// height: 4vw; +// width: 12vw; +// top: 1vw; +// background-color: $assignments-light-purple; +// font-family: $assignments-roboto-font; +// } .DeleteLessonCard { - margin-top: 0.5vw; - margin-right: 0.75vw; + margin-top: .5vw; + margin-right: 0vw; + margin-left: 2em; } -.LessonCardDate { - margin: auto; -} +// .LessonCardDate { +// margin: auto; +// } -.LessonCardContent { - display: flex; - flex-direction: column; - overflow: scroll; - height: 11vw; - width: 12vw; -} +// .LessonCardContent { +// display: flex; +// flex-direction: column; +// overflow: scroll; +// height: 11vw; +// width: 12vw; +// } + +// .LessonCardStudent { +// font-family: $assignments-roboto-font; +// color: $assignments-font-color; +// } -.LessonCardStudent { +.date-delete-header { + justify-content: center; +} +.date{ + font-family: $assignments-roboto-font; + font-weight: bold; + font-size: 1.5em; + color: $assignments-font-color; + margin-top: 2%; +} +.name { font-family: $assignments-roboto-font; + font-weight: bold; + font-size: 1.5em; color: $assignments-font-color; + height: 1.5em; + overflow: hidden; } From 27a06f33d980e10d0b664c2b6e9f4880b4af7ae3 Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Mon, 4 May 2020 23:24:58 -0500 Subject: [PATCH 17/55] WIP of fixing the lesson cards display --- .../LessonCardsDisplay/LessonCardsDisplay.js | 7 ++++ .../LessonCardsDisplay.scss | 39 ++++++++++++------- 2 files changed, 32 insertions(+), 14 deletions(-) diff --git a/src/components/LessonCardsDisplay/LessonCardsDisplay.js b/src/components/LessonCardsDisplay/LessonCardsDisplay.js index de5f146..7656325 100644 --- a/src/components/LessonCardsDisplay/LessonCardsDisplay.js +++ b/src/components/LessonCardsDisplay/LessonCardsDisplay.js @@ -1,28 +1,35 @@ import React from "react"; import "./LessonCardsDisplay.scss"; +import { Col, Row, Container } from "reactstrap"; import LessonCard from "../LessonCards/LessonCard"; function LessonCardsDisplay(props) { return (
+ +
Click to assign students to a selected date!
+ {Object.keys(props.cards).length > 0 && Object.keys(props.cards) .reverse() .map(date => { const dateTemp = date; return ( + + ); })} +
); } diff --git a/src/components/LessonCardsDisplay/LessonCardsDisplay.scss b/src/components/LessonCardsDisplay/LessonCardsDisplay.scss index 44180e0..ffbf7c9 100644 --- a/src/components/LessonCardsDisplay/LessonCardsDisplay.scss +++ b/src/components/LessonCardsDisplay/LessonCardsDisplay.scss @@ -4,28 +4,39 @@ display: flex; flex-direction: row; flex-wrap: wrap; - overflow: scroll; - width: 80vw; - height: 20vw; + width: 90vw; + height: 22vw; border-radius: 20px; margin: auto; margin-top: 2vw; margin-bottom: 2vw; padding-bottom: 1vw; background-color: $assignments-darker-color; + overflow-y: scroll; + overflow-x: hidden; } .DefaultCard { - display: flex; - flex-wrap: wrap; - overflow: scroll; - height: 15vw; - width: 10vw; - border-radius: 20px; - margin: 2vw; +// display: flex; +// flex-wrap: wrap; +// overflow: scroll; +// height: 15vw; +// width: 10vw; +// border-radius: 20px; +// margin: 2vw; +// margin-right: auto; +// background-color: $assignments-background-color; +// color: $assignments-font-color; +// font-family: $assignments-roboto-font; +// font-size: 1.2em; + height: 19vw; + width: 14vw; + border-radius: 1em; + background-color: $assignments-light-purple; + display:inline-block; + margin-left:0em; + margin-top: 1em; + overflow: hidden; + margin-right: auto; - background-color: $assignments-background-color; - color: $assignments-font-color; - font-family: $assignments-roboto-font; - font-size: 1.2em; } From 1e1a8a38f202eedfd05ec0faf084a3b0cfe50d11 Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Tue, 5 May 2020 18:08:21 -0500 Subject: [PATCH 18/55] finally fixed the lesson cards stuff --- public/images/icons/plus-icon.svg | 4 +++ .../LessonCardsDisplay/LessonCardsDisplay.js | 17 +++++---- .../LessonCardsDisplay.scss | 36 +++++++++++-------- 3 files changed, 33 insertions(+), 24 deletions(-) create mode 100644 public/images/icons/plus-icon.svg diff --git a/public/images/icons/plus-icon.svg b/public/images/icons/plus-icon.svg new file mode 100644 index 0000000..ced21fd --- /dev/null +++ b/public/images/icons/plus-icon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/components/LessonCardsDisplay/LessonCardsDisplay.js b/src/components/LessonCardsDisplay/LessonCardsDisplay.js index 7656325..2424540 100644 --- a/src/components/LessonCardsDisplay/LessonCardsDisplay.js +++ b/src/components/LessonCardsDisplay/LessonCardsDisplay.js @@ -5,31 +5,30 @@ import LessonCard from "../LessonCards/LessonCard"; function LessonCardsDisplay(props) { return ( -
- - +
+ {/* */}
-
- Click to assign students to a selected date! +
+ {/* Click to assign students to a selected date! */} + Close
- + {/* */} {Object.keys(props.cards).length > 0 && Object.keys(props.cards) .reverse() .map(date => { const dateTemp = date; return ( - +
- +
); })} -
); } diff --git a/src/components/LessonCardsDisplay/LessonCardsDisplay.scss b/src/components/LessonCardsDisplay/LessonCardsDisplay.scss index ffbf7c9..16a9254 100644 --- a/src/components/LessonCardsDisplay/LessonCardsDisplay.scss +++ b/src/components/LessonCardsDisplay/LessonCardsDisplay.scss @@ -1,6 +1,6 @@ @import "../../pages/Index/index.scss"; -.LessonCardsDisplay { +.lesson-cards-display { display: flex; flex-direction: row; flex-wrap: wrap; @@ -14,21 +14,10 @@ background-color: $assignments-darker-color; overflow-y: scroll; overflow-x: hidden; + justify-content: flex-start; } -.DefaultCard { -// display: flex; -// flex-wrap: wrap; -// overflow: scroll; -// height: 15vw; -// width: 10vw; -// border-radius: 20px; -// margin: 2vw; -// margin-right: auto; -// background-color: $assignments-background-color; -// color: $assignments-font-color; -// font-family: $assignments-roboto-font; -// font-size: 1.2em; +.default-card { height: 19vw; width: 14vw; border-radius: 1em; @@ -37,6 +26,23 @@ margin-left:0em; margin-top: 1em; overflow: hidden; - margin-right: auto; + position: relative; +} + +.plus-icon { + max-height: 100%; + max-width: 100%; + width: auto; + height: auto; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.card-margins, .default-card{ + margin-left: 3em; } From b0cda0ef91bf4a362a522fdd7a7531be229691fd Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Tue, 5 May 2020 19:19:19 -0500 Subject: [PATCH 19/55] fixed some more suspicious CSS with phonics and stuff --- public/images/word-group/animals-2.svg | 83 +++++++++---------- src/components/PhonicIcon/PhonicIcon.scss | 10 +-- .../PhonicWordSelector/PhonicWordSelector.js | 6 +- .../PhonicWordSelector.scss | 20 +++++ .../SectionSelector/SectionSelectorStyle.js | 8 +- src/components/WordSelector/WordSelector.js | 6 +- src/components/WordSelector/WordSelector.scss | 17 ++-- .../CreateAssignment/CreateAssignment.js | 6 +- 8 files changed, 82 insertions(+), 74 deletions(-) create mode 100644 src/components/PhonicWordSelector/PhonicWordSelector.scss diff --git a/public/images/word-group/animals-2.svg b/public/images/word-group/animals-2.svg index 5a07117..a218f74 100644 --- a/public/images/word-group/animals-2.svg +++ b/public/images/word-group/animals-2.svg @@ -1,42 +1,41 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/PhonicIcon/PhonicIcon.scss b/src/components/PhonicIcon/PhonicIcon.scss index 1c1a399..1ec3bb7 100644 --- a/src/components/PhonicIcon/PhonicIcon.scss +++ b/src/components/PhonicIcon/PhonicIcon.scss @@ -29,15 +29,6 @@ color: $assignments-font-color; } -.PhonicGroupTitle { - font-family: $assignments-roboto-font; - font-weight: bold; - font-size: 20pt; - color: #b1b0ff; - padding-bottom: 0; - text-transform: uppercase; -} - .SelectButton { color: $assignments-font-color; background-color: $assignments-background-color; @@ -51,4 +42,5 @@ bottom: 0.5em; border-radius: 1em; } + \ No newline at end of file diff --git a/src/components/PhonicWordSelector/PhonicWordSelector.js b/src/components/PhonicWordSelector/PhonicWordSelector.js index 1b88eb9..83ee29c 100644 --- a/src/components/PhonicWordSelector/PhonicWordSelector.js +++ b/src/components/PhonicWordSelector/PhonicWordSelector.js @@ -1,6 +1,6 @@ import React, { useState } from "react"; import { Button } from "reactstrap"; -import "../WordSelector/WordSelector.scss"; +import "../PhonicWordSelector/PhonicWordSelector.scss" import "../PhonicIcon/PhonicIcon.scss"; function PhonicWordSelector(props) { function handleSelect() { @@ -11,9 +11,9 @@ function PhonicWordSelector(props) {
{props.name}
-
+
{props.data.words.map(word => ( -
{word}
+
{word}
))}
diff --git a/src/components/PhonicWordSelector/PhonicWordSelector.scss b/src/components/PhonicWordSelector/PhonicWordSelector.scss new file mode 100644 index 0000000..ac06d94 --- /dev/null +++ b/src/components/PhonicWordSelector/PhonicWordSelector.scss @@ -0,0 +1,20 @@ +@import "../../pages/Index/index.scss"; + +.words-list { + justify-content: center; + overflow: hidden; +} +.phonics-words { + font-size: 1.2em; + font-weight: bold; + font-family: $assignments-roboto-font; + text-transform: uppercase; +} +.PhonicGroupTitle { + font-family: $assignments-roboto-font; + font-weight: bold; + font-size: 2.5em; + color: #b1b0ff; + padding-bottom: 0; + text-transform: uppercase; + } \ No newline at end of file diff --git a/src/components/SectionSelector/SectionSelectorStyle.js b/src/components/SectionSelector/SectionSelectorStyle.js index 79b9cbd..9693224 100644 --- a/src/components/SectionSelector/SectionSelectorStyle.js +++ b/src/components/SectionSelector/SectionSelectorStyle.js @@ -16,12 +16,12 @@ const useStyles = makeStyles(theme => ({ width: "300px", height: "300px", top: "28px", - background: "#b1b0ff", + backgroundColor: "#FFFFFF", boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)", borderRadius: "15%", borderColor: "#FFFFFF", "&:hover": { - backgroundColor: "#b1b0ff", + backgroundColor: "#FFFFFF", borderColor: "#FFFFFF" }, "&:focus": { @@ -38,12 +38,12 @@ const useStyles = makeStyles(theme => ({ width: "300px", height: "300px", top: "28px", - background: "#f5f5f5", + background: "#b1b0ff", boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)", borderRadius: "15%", borderColor: "#000000", "&:hover": { - backgroundColor: "#f5f5f5", + backgroundColor: "#b1b0ff", borderColor: "#FFFFFF" }, "&:focus": { diff --git a/src/components/WordSelector/WordSelector.js b/src/components/WordSelector/WordSelector.js index d4dd1bf..77f6e55 100644 --- a/src/components/WordSelector/WordSelector.js +++ b/src/components/WordSelector/WordSelector.js @@ -70,7 +70,6 @@ function WordSelector(props) { } function wordSelection(word, index) { return ( -
- ); } @@ -94,7 +92,7 @@ function WordSelector(props) {
{props.name}
- +
-
+
-
); diff --git a/src/components/SectionSelector/SectionSelector.js b/src/components/SectionSelector/SectionSelector.js index 95e9bcb..09cd5e4 100644 --- a/src/components/SectionSelector/SectionSelector.js +++ b/src/components/SectionSelector/SectionSelector.js @@ -23,10 +23,8 @@ function SectionSelector(props) { propFunctions[index](); }; return ( -
- + -

LESSON TYPE

); } export default withFirebase(SectionSelector); diff --git a/src/components/StudentSelector/StudentSelector.scss b/src/components/StudentSelector/StudentSelector.scss index c7a4beb..bccfe79 100644 --- a/src/components/StudentSelector/StudentSelector.scss +++ b/src/components/StudentSelector/StudentSelector.scss @@ -1,7 +1,7 @@ @import "../../pages/Index/index.scss"; .student-selector { - height: 33vw; + height: 32vw; width: 33vw; background-color: white; border-radius: 1em; @@ -50,7 +50,7 @@ margin-right: 10%; } .accounts-list { - max-height: 25vw; + max-height: 24vw; margin: auto; overflow-y: auto; overflow-x: hidden; diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index abae67b..9390ea5 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -251,12 +251,14 @@ function CreateAssignment(props) { return ( <>
+

LESSON TYPE

+
{(showWriting || showVocab || showPhonics) && (

diff --git a/src/pages/CreateAssignment/CreateAssignment.scss b/src/pages/CreateAssignment/CreateAssignment.scss index 5083ac6..f805798 100644 --- a/src/pages/CreateAssignment/CreateAssignment.scss +++ b/src/pages/CreateAssignment/CreateAssignment.scss @@ -14,9 +14,6 @@ transform: "translate(-50%, -50%)"; position: relative; } -.container { - flex-direction: column-reverse; -} .assign { color: $assignments-font-color; background-color: $assignments-background-color; From d56ff8ea043745c0a863a540ec4797546baf1452 Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Thu, 7 May 2020 19:10:14 -0500 Subject: [PATCH 22/55] commit before i ruin everything lMAO --- src/components/LessonInfoDisplay/LessonInfoDisplay.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/LessonInfoDisplay/LessonInfoDisplay.scss b/src/components/LessonInfoDisplay/LessonInfoDisplay.scss index 86d3957..afc525d 100644 --- a/src/components/LessonInfoDisplay/LessonInfoDisplay.scss +++ b/src/components/LessonInfoDisplay/LessonInfoDisplay.scss @@ -95,6 +95,8 @@ text-transform: capitalize; height: 1.5em; overflow:hidden; + text-align: center; + margin-left:10%; } .student-date-card { height: 19vw; From 56fdef946b41c5708dd39c99441fa740da239f24 Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Thu, 7 May 2020 20:11:55 -0500 Subject: [PATCH 23/55] fixed janky stuff with the custom lessons page --- .../CreateAssignment/CreateAssignment.js | 2 +- .../CustomLessonsDisplay.js | 26 +++++++---------- .../CustomLessonsDisplay.scss | 29 +++++++++++++++---- 3 files changed, 36 insertions(+), 21 deletions(-) diff --git a/src/pages/CreateAssignment/CreateAssignment.js b/src/pages/CreateAssignment/CreateAssignment.js index 9390ea5..8c5dee0 100644 --- a/src/pages/CreateAssignment/CreateAssignment.js +++ b/src/pages/CreateAssignment/CreateAssignment.js @@ -296,7 +296,7 @@ function CreateAssignment(props) { handleLessonNameChange(e.target.value)} diff --git a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js index 52c5083..fc8548c 100644 --- a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js +++ b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js @@ -73,11 +73,8 @@ function CustomLessonsDisplay(props) { return (
- -
Lesson Plans
- - +
- - +
+
{filterType != "C" && ( )} - - +
- -
{allLessons && ( - +
{allLessons .filter( lesson => @@ -146,11 +140,13 @@ function CustomLessonsDisplay(props) { lesson.wordGroup == TEMPLATE_WORD_GROUPS[filterGroup]) ) .map(lesson => ( - handleClick(lesson)}> - - +
+
handleClick(lesson)}> + +
+
))} - +
)}
diff --git a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.scss b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.scss index 77015f4..3c154fc 100644 --- a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.scss +++ b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.scss @@ -6,24 +6,28 @@ font-size: 3em; color: white; margin: auto; + margin-left: 2%; } .cards-display { font-family: $assignments-roboto-font; min-height: 30vw; flex-wrap: wrap; flex-direction: row; - position: absolute; + justify-content: start; background-color: $assignments-app-background-color; } .button-bar { background-color: $assignments-font-color; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: start; } #ddown, .button { height: 2em; width: 11em; border-color: $assignments-font-color; border-radius: 2em; - margin-top: 3%; background-color: white; color: black; font-family: $assignments-roboto-font; @@ -35,12 +39,20 @@ color: white; } } + +.dropdown { + margin-left: 5%; + margin-top: .3em; +} .button { background-color: $assignments-light-green; &:hover { background-color: white; color: black; } + margin-left: 5%; + margin-right: 5%; + margin-top: .4em; } .drop-down-bar { width: 16.5em; @@ -58,7 +70,14 @@ } } -.col-padding { - padding: 0px !important; - margin: 0px !important; +.icon-margins { + margin-left: 1%; + margin-right: 1%; +} + +.icon-display { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: start; } From 61d0c1050ae61515eccbef9b3e49d792367d2c66 Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Thu, 7 May 2020 20:28:04 -0500 Subject: [PATCH 24/55] vertically aligned names in create assignments --- .../LessonNameDisplay/LessonNameDisplay.js | 5 ++--- .../LessonNameDisplay/LessonNameDisplay.scss | 22 +++++++------------ .../CustomLessonsDisplay.scss | 5 +++-- 3 files changed, 13 insertions(+), 19 deletions(-) diff --git a/src/components/LessonNameDisplay/LessonNameDisplay.js b/src/components/LessonNameDisplay/LessonNameDisplay.js index edae472..7a80a78 100644 --- a/src/components/LessonNameDisplay/LessonNameDisplay.js +++ b/src/components/LessonNameDisplay/LessonNameDisplay.js @@ -4,10 +4,9 @@ import "./LessonNameDisplay.scss"; function LessonNameDisplay(props) { return (
-
); } diff --git a/src/components/LessonNameDisplay/LessonNameDisplay.scss b/src/components/LessonNameDisplay/LessonNameDisplay.scss index e5ae792..668c821 100644 --- a/src/components/LessonNameDisplay/LessonNameDisplay.scss +++ b/src/components/LessonNameDisplay/LessonNameDisplay.scss @@ -1,23 +1,18 @@ @import "../../pages/Index/index.scss"; .NameIcon { - width: 18vw; - height: 9vw; + width: 17vw; + height: 8vw; background-color: white; + border: 4px solid $assignments-light-purple; border-radius: 1em; box-shadow: "5px 10px #888888"; - display: block; margin: auto; margin-top: 1vw; -} -.InnerBorder { - width: 17vw; - height: 8vw; - border: 4px solid $assignments-light-purple; - padding-top: 5px; - border-radius: 1em; - margin-top: 8px; overflow: hidden; + display: table-cell; + vertical-align: middle; + text-align: center; } .Name { @@ -26,7 +21,6 @@ font-size: 1.2em; color: #4d4d4c; margin:1%; - display: flex; - justify-content: center; - align-items: center; + width: 16vw; + overflow: hidden; } diff --git a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.scss b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.scss index 3c154fc..bab1b8a 100644 --- a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.scss +++ b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.scss @@ -71,8 +71,9 @@ } .icon-margins { - margin-left: 1%; - margin-right: 1%; + // margin-left: 1%; + // margin-right: 1%; + margin: 1%; } .icon-display { From 6f12d73a152cacc0518bbec08ffa2de29eabdce0 Mon Sep 17 00:00:00 2001 From: Angela Luo Date: Thu, 7 May 2020 20:40:34 -0500 Subject: [PATCH 25/55] fixed some overlapping CSS issues --- .../LessonNameDisplay/LessonNameDisplay.js | 2 -- .../CustomLessonsDisplay/CustomLessonsDisplay.js | 4 ---- .../CustomLessonsDisplay/CustomLessonsDisplay.scss | 13 ++++--------- 3 files changed, 4 insertions(+), 15 deletions(-) diff --git a/src/components/LessonNameDisplay/LessonNameDisplay.js b/src/components/LessonNameDisplay/LessonNameDisplay.js index 7a80a78..abd7203 100644 --- a/src/components/LessonNameDisplay/LessonNameDisplay.js +++ b/src/components/LessonNameDisplay/LessonNameDisplay.js @@ -4,9 +4,7 @@ import "./LessonNameDisplay.scss"; function LessonNameDisplay(props) { return (
- {/*
*/}

{props.lessonName}

- {/*
*/}
); } diff --git a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js index fc8548c..b072e66 100644 --- a/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js +++ b/src/pages/CustomLessonsDisplay/CustomLessonsDisplay.js @@ -74,7 +74,6 @@ function CustomLessonsDisplay(props) {
Lesson Plans
-
-
-
{filterType != "C" && ( )} -
-
); } diff --git a/src/components/PhonicWordSelector/PhonicWordSelector.scss b/src/components/PhonicWordSelector/PhonicWordSelector.scss index 9895669..89e2e48 100644 --- a/src/components/PhonicWordSelector/PhonicWordSelector.scss +++ b/src/components/PhonicWordSelector/PhonicWordSelector.scss @@ -10,7 +10,7 @@ font-family: $assignments-roboto-font; text-transform: uppercase; } -.PhonicGroupTitle { +.phonic-group-title { font-family: $assignments-roboto-font; font-weight: bold; font-size: 2.5vw; @@ -18,7 +18,7 @@ text-transform: uppercase; } -.SelectButton { +.select-button { color: $assignments-font-color; background-color: $assignments-background-color; font-family: $assignments-roboto-font; diff --git a/src/components/WordGroupIcon/WordGroupIcon.js b/src/components/WordGroupIcon/WordGroupIcon.js index 0a2ffc1..bd26f7d 100644 --- a/src/components/WordGroupIcon/WordGroupIcon.js +++ b/src/components/WordGroupIcon/WordGroupIcon.js @@ -3,9 +3,9 @@ import "./WordGroupIcon.scss"; function WordGroupIcon(props) { return ( -
+
-
{props.name}
+
{props.name}
); } diff --git a/src/components/WordGroupIcon/WordGroupIcon.scss b/src/components/WordGroupIcon/WordGroupIcon.scss index 0ff9a88..416ff5c 100644 --- a/src/components/WordGroupIcon/WordGroupIcon.scss +++ b/src/components/WordGroupIcon/WordGroupIcon.scss @@ -1,16 +1,16 @@ @import "../../pages/Index/index.scss"; -.WordGroupIcon, .PurpleWordGroupIcon { - width: 14vw; - min-height: 14vw; - padding: 2vw; +.word-group-icon, .purple-word-group-icon { + width: 15vw; + min-height: 15vw; + padding: 1vw; background-color: white; border-radius: 2em; box-shadow: 0em 0.2em #e6e6e6; display: block; overflow: hidden; } -.PurpleWordGroupIcon { +.purple-word-group-icon { background-color: $assignments-light-purple; } img { @@ -18,11 +18,10 @@ img { height:auto; } - -.WordGroupName { +.word-icon-name { font-family: $assignments-roboto-font; text-align: center; - margin-top: 1vw; + margin-top: 2vw; font-size: 2vw; font-weight: bold; } diff --git a/src/components/WordSelector/WordSelector.js b/src/components/WordSelector/WordSelector.js index 1b62803..2d0669c 100644 --- a/src/components/WordSelector/WordSelector.js +++ b/src/components/WordSelector/WordSelector.js @@ -86,14 +86,14 @@ function WordSelector(props) { } return ( -
+
-
{props.name}
+
{props.name}
-
+