Commit 1eec7f0e authored by Karl Petter Aubert's avatar Karl Petter Aubert

Merge branch 'refactor-display-chooser' into responsive

parents b6570dce e801fa0a
import React from 'react';
import MediaContainer from "./MediaContainer";
import '../style/DisplayChooserComponent.css';
import '../style/DisplayChooser.css';
export default class DisplayChooser extends React.Component {
......@@ -15,9 +15,9 @@ export default class DisplayChooser extends React.Component {
};
render() {
const categoryNames = ["Category 1", "Category 2", "Category 3"];
const categoryNames = ["City", "Jungle", "Seaside"];
return (
<div className="Display-chooser-component">
<div className="Display-chooser">
<MediaContainer checkedIndex={this.props.categorySelections.textCat} categoryNames={categoryNames}
media="Text" handler={this}/>
<MediaContainer checkedIndex={this.props.categorySelections.imageCat} categoryNames={categoryNames}
......
import React from 'react';
import MediaComponent from "./MediaComponent";
import '../style/DisplayChooserComponent.css';
export default class DisplayChooserComponent extends React.Component {
constructor(props) {
super(props);
this.combineMediaCategories = this.combineMediaCategories.bind(this);
this.state = {
text: this.props.categorySelections.textCat,
image: this.props.categorySelections.imageCat,
audio: this.props.categorySelections.audioCat,
}
}
combineMediaCategories = event => {
this.props.handler.handleCategoryChange(event.target.name, event.target.value);
// eslint-disable-next-line default-case
localStorage.setItem(event.target.name, event.target.value);
};
render() {
const categoryNames = ["Category 1", "Category 2", "Category 3"];
return (
<div className="Display-chooser-component">
<MediaComponent preChecked={this.state.text} categoryNames={categoryNames} media="text"
receiveRadios={this.combineMediaCategories}/>
<MediaComponent preChecked={this.state.image} categoryNames={categoryNames} media="image"
receiveRadios={this.combineMediaCategories}/>
<MediaComponent preChecked={this.state.audio} categoryNames={categoryNames} media="audio"
receiveRadios={this.combineMediaCategories}/>
</div>
);
}
}
.Display-chooser-component {
.Display-chooser {
display: inline-flex;
flex-direction: column;
font-family: sans-serif;
}
@media screen and (max-width: 480px){
.Display-chooser {
flex-direction: row;
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment