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

[FIX] test options styling

Browse Source
This commit is contained in:
Matthew Grove
2022-01-30 16:56:37 +00:00
parent 1e9b5a88df
commit 98491163fa
4 changed files with 47 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/ClassicTestStart.js
View File

@@ -5,6 +5,7 @@ import Checkbox from '@material-ui/core/Checkbox';
import Slider from "rc-slider"; import Slider from "rc-slider";
import "rc-slider/assets/index.css"; import "rc-slider/assets/index.css";
import "./css/SliderOverlay.css";
export default function ClassicTestStart(props) { export default function ClassicTestStart(props) {
return ( return (
@@ -52,23 +53,24 @@ export default function ClassicTestStart(props) {
/> />
</div> </div>
<label> <div className="test-options-container">
<Checkbox <label>
checked={props.switchLanguage} <Checkbox
onChange={props.handleSwitchLanguageChange} checked={props.switchLanguage}
inputProps={{ 'aria-label': 'checkbox' }} onChange={props.handleSwitchLanguageChange}
/> inputProps={{ 'aria-label': 'checkbox' }}
<span>Switch language</span> />
</label> <span>Switch language</span>
</label>
<label> <label>
<Checkbox <Checkbox
checked={props.ignoreCaps} checked={props.ignoreCaps}
onChange={props.handleIgnoreCapsChange} onChange={props.handleIgnoreCapsChange}
inputProps={{ 'aria-label': 'checkbox' }} inputProps={{ 'aria-label': 'checkbox' }}
/> />
<span>Ignore capitals</span> <span>Ignore capitals</span>
</label> </label>
</div>
<Button <Button
onClick={() => props.startTest("questions")} onClick={() => props.startTest("questions")}

36
src/LivesTestStart.js
View File

@@ -5,6 +5,7 @@ import Checkbox from '@material-ui/core/Checkbox';
import Slider from "rc-slider"; import Slider from "rc-slider";
import "rc-slider/assets/index.css"; import "rc-slider/assets/index.css";
import "./css/SliderOverlay.css";
export default function LivesTestStart(props) { export default function LivesTestStart(props) {
return ( return (
@@ -52,23 +53,24 @@ export default function LivesTestStart(props) {
/> />
</div> </div>
<label> <div className="test-options-container">
<Checkbox <label>
checked={props.switchLanguage} <Checkbox
onChange={props.handleSwitchLanguageChange} checked={props.switchLanguage}
inputProps={{ 'aria-label': 'checkbox' }} onChange={props.handleSwitchLanguageChange}
/> inputProps={{ 'aria-label': 'checkbox' }}
<span>Switch language</span> />
</label> <span>Switch language</span>
</label>
<label> <label>
<Checkbox <Checkbox
checked={props.ignoreCaps} checked={props.ignoreCaps}
onChange={props.handleIgnoreCapsChange} onChange={props.handleIgnoreCapsChange}
inputProps={{ 'aria-label': 'checkbox' }} inputProps={{ 'aria-label': 'checkbox' }}
/> />
<span>Ignore capitals</span> <span>Ignore capitals</span>
</label> </label>
</div>
<Button <Button
onClick={() => props.startTest("lives")} onClick={() => props.startTest("lives")}

1
src/LoggedInHome.js
View File

@@ -21,7 +21,6 @@ import "./css/History.css";
import "./css/LoggedInHome.css"; import "./css/LoggedInHome.css";
import "./css/PopUp.css"; import "./css/PopUp.css";
import "./css/OptionsListOverlay.css"; import "./css/OptionsListOverlay.css";
import "./css/SliderOverlay.css";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";

9
src/css/SliderOverlay.css
View File

@@ -29,6 +29,15 @@
width: 26px; width: 26px;
} }
.test-options-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
column-gap: 32px;
flex-wrap: wrap;
}
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
.slider-overlay-content { .slider-overlay-content {