me/parandum
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Put mistakes in drop downs

Browse Source
This commit is contained in:
Matthew Grove
2021-10-09 11:48:17 +01:00
parent bc48f5b5c5
commit a432633b90
5 changed files with 107 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
package-lock.json generated
View File

@@ -1,6 +1,6 @@
{ {
"name": "parandum", "name": "parandum",
"version": "0.4.0", "version": "1.1.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@@ -17218,6 +17218,11 @@
} }
} }
}, },
"react-collapsible": {
"version": "2.8.4",
"resolved": "https://registry.npmjs.org/react-collapsible/-/react-collapsible-2.8.4.tgz",
"integrity": "sha512-oG4yOk6AGKswe0OD/8t3/nf4Rgj4UhlZUUvqL5jop0/ez02B3dBDmNvs3sQz0PcTpJvt0ai8zF7Atd1SzN/UNw=="
},
"react-dev-utils": { "react-dev-utils": {
"version": "11.0.4", "version": "11.0.4",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",

1
package.json
View File

@@ -18,6 +18,7 @@
"rc-slider": "^9.7.2", "rc-slider": "^9.7.2",
"react": "^17.0.2", "react": "^17.0.2",
"react-apexcharts": "^1.3.9", "react-apexcharts": "^1.3.9",
"react-collapsible": "^2.8.4",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-firebaseui": "^5.0.2", "react-firebaseui": "^5.0.2",
"react-router-dom": "^5.3.0", "react-router-dom": "^5.3.0",

22
src/GroupStats.js
View File

@@ -1,5 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { GroupRounded as GroupRoundedIcon, HomeRounded as HomeRoundedIcon } from "@material-ui/icons"; import { ArrowDropDownRounded as ArrowDropDownRoundedIcon, GroupRounded as GroupRoundedIcon, HomeRounded as HomeRoundedIcon } from "@material-ui/icons";
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import NavBar from "./NavBar"; import NavBar from "./NavBar";
import Footer from "./Footer"; import Footer from "./Footer";
@@ -7,6 +7,8 @@ import Error404 from "./Error404";
import "./css/History.css"; import "./css/History.css";
import "./css/MistakesHistory.css"; import "./css/MistakesHistory.css";
import Collapsible from "react-collapsible";
export default withRouter(class GroupStats extends Component { export default withRouter(class GroupStats extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@@ -178,7 +180,10 @@ export default withRouter(class GroupStats extends Component {
<React.Fragment key={index}> <React.Fragment key={index}>
<div> <div>
<h2>{vocabItem.term}</h2> <h2>{vocabItem.term}</h2>
<p><b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}{vocabItem.switchedCount > 0 && ":"}</b></p> {
vocabItem.switchedCount > 0
?
<Collapsible transitionTime={300} trigger={<><b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
{ {
vocabItem.switchedCount > 0 && vocabItem.switchedCount > 0 &&
<div> <div>
@@ -197,10 +202,17 @@ export default withRouter(class GroupStats extends Component {
} }
</div> </div>
} }
</Collapsible>
:
<b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b>
}
</div> </div>
<div> <div>
<h2>{vocabItem.definition}</h2> <h2>{vocabItem.definition}</h2>
<p><b>{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}{vocabItem.count > 0 && ":"}</b></p> {
vocabItem.count > 0
?
<Collapsible transitionTime={300} trigger={<><b>{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
{ {
vocabItem.count > 0 && vocabItem.count > 0 &&
<div> <div>
@@ -219,6 +231,10 @@ export default withRouter(class GroupStats extends Component {
} }
</div> </div>
} }
</Collapsible>
:
<b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b>
}
</div> </div>
</React.Fragment> </React.Fragment>
)) ))

22
src/MistakesHistory.js
View File

@@ -1,10 +1,12 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { HistoryRounded as HistoryRoundedIcon, HomeRounded as HomeRoundedIcon } from "@material-ui/icons"; import { ArrowDropDownRounded as ArrowDropDownRoundedIcon, HistoryRounded as HistoryRoundedIcon, HomeRounded as HomeRoundedIcon } from "@material-ui/icons";
import NavBar from "./NavBar"; import NavBar from "./NavBar";
import Footer from "./Footer"; import Footer from "./Footer";
import "./css/History.css"; import "./css/History.css";
import "./css/MistakesHistory.css"; import "./css/MistakesHistory.css";
import Collapsible from "react-collapsible";
export default class IncorrectHistory extends Component { export default class IncorrectHistory extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@@ -148,7 +150,10 @@ export default class IncorrectHistory extends Component {
<React.Fragment key={index}> <React.Fragment key={index}>
<div> <div>
<h2>{vocabItem.term}</h2> <h2>{vocabItem.term}</h2>
<p><b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}{vocabItem.switchedCount > 0 && ":"}</b></p> {
vocabItem.switchedCount > 0
?
<Collapsible transitionTime={300} trigger={<><b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
{ {
vocabItem.switchedCount > 0 && vocabItem.switchedCount > 0 &&
<div> <div>
@@ -167,10 +172,17 @@ export default class IncorrectHistory extends Component {
} }
</div> </div>
} }
</Collapsible>
:
<b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b>
}
</div> </div>
<div> <div>
<h2>{vocabItem.definition}</h2> <h2>{vocabItem.definition}</h2>
<p><b>{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}{vocabItem.count > 0 && ":"}</b></p> {
vocabItem.count > 0
?
<Collapsible transitionTime={300} trigger={<><b>{vocabItem.count} mistake{vocabItem.count !== 1 && "s"}</b><ArrowDropDownRoundedIcon /></>}>
{ {
vocabItem.count > 0 && vocabItem.count > 0 &&
<div> <div>
@@ -189,6 +201,10 @@ export default class IncorrectHistory extends Component {
} }
</div> </div>
} }
</Collapsible>
:
<b>{vocabItem.switchedCount} mistake{vocabItem.switchedCount !== 1 && "s"}</b>
}
</div> </div>
</React.Fragment> </React.Fragment>
)) ))

10
src/css/MistakesHistory.css
View File

@@ -15,3 +15,13 @@
.mistakes-history-container > div:last-child { .mistakes-history-container > div:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.mistakes-history-container .Collapsible__trigger {
cursor: pointer;
display: flex;
margin: 0;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}