...
 
Commits (3)
......@@ -17,4 +17,16 @@
h1 {
font-size: 4vh;
}
@media only screen and (max-width: 1000px) {
.grid-container {
margin: 5%;
display: grid;
grid-template-areas:
'art art art art'
'category category category category';
grid-gap: 3%;
}
}
\ No newline at end of file
......@@ -165,7 +165,7 @@ class App extends React.Component {
</Tabs>
</div>
<MediaTypes mediaTypes={this.state.mediaTypes} className={"categoryPicker"}/>
<input type="button" value="Save Changes" onClick={this.handleClick}/>
<input className={"saveButton"} type="button" value="Save Changes" onClick={this.handleClick}/>
</div>
);
......
......@@ -25,20 +25,29 @@ class ArtView extends React.Component {
console.log(result);
}
).catch(error => console.log(error));
fetch(`./data/sound/scifi1.mp3`)
.then(res => res.text())
.then(
result => {
this.setState({image: result});
console.log(result);
}
).catch(error => console.log(error));
}
render() {
render() {
return (
<div className="artContainer">
<div id="image">
{this.state.image}
Hey there! I was going to write this.state.image, but that's just the svg code as a string. Due to time constraints, this was not implemented.
</div>
<div id="text">
{this.state.text}
</div>
<div id="sound">
<audio controls>
<source src={this.state.image} type={"audio/mpeg"}/>
<source src={this.state.sound} type={"audio/mpeg"}/>
</audio>
</div>
</div>
......
......@@ -14,4 +14,18 @@ ul {
.media-type-name {
font-size: 3vh;
}
@media only screen and (max-width: 1000px) {
ul {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
@media only screen and (max-width: 670px) {
ul {
width: 100%;
}
}
\ No newline at end of file