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

1
src/LoggedInHome.js
View File

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

9
src/css/SliderOverlay.css
View File

@@ -29,6 +29,15 @@
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) {
.slider-overlay-content {