Commit 58e43b08 authored by Svein Olav Styve's avatar Svein Olav Styve

Refine favorite styling

parent 746e315b
......@@ -220,6 +220,7 @@ class App extends React.Component {
<div className="cluster">
<div className="chooser">
<DisplayChooser categorySelections={categorySelections} handler={this}/>
<FavoriteSection save={this.saveAsFavorite} open={this.openFavorite}/>
</div>
<div className="artworkArea">
<Artwork artwork={this.state.artwork}
......@@ -227,7 +228,6 @@ class App extends React.Component {
categorySelections={categorySelections}/>
</div>
</div>
<FavoriteSection save={this.saveAsFavorite} open={this.openFavorite}/>
<SessionElement sessionHistory={sessionHistory}
sessionClicked={this.sessionClicked}
sessionIndex={this.state.sessionCounter}
......
......@@ -15,11 +15,12 @@ export default class FavoriteSection extends React.Component {
this.setState({
showSaveFeedback: true
});
this.timerID = setInterval(
this.timerID = setTimeout (
() => {
this.setState({
showSaveFeedback: false
});
clearInterval(this.timerID);
},
3500
);
......@@ -29,10 +30,8 @@ export default class FavoriteSection extends React.Component {
return (
<div className="Button-container">
<button onClick={this.save}>Save as favorite</button>
<button onClick={this.props.open}>Open favourite</button>
<button onClick={this.props.open}>Open favorite</button>
<p> { (this.state.showSaveFeedback) && "Favorite saved!" } </p>
</div>
);
}
......
.Button-container {
margin: 5px auto;
margin: auto;
padding-top: 5px;
border: 2px solid #222;
}
.Button-container button {
margin: 10px;
margin: 10px auto;
display: block;
padding: 5px;
font-size: 1rem;
background: #A20C25;
......@@ -16,4 +19,17 @@
.Button-container button:hover {
cursor: pointer;
}
.Button-container p {
min-height: 25px;
color: white;
text-align: center;
}
@media screen and (max-width: 960px) {
.Button-container button {
display: inline-block;
margin: 10px;
}
}
\ 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