Add buttons to modify quest. Add respective scss

This commit is contained in:
Ceda EI 2019-04-05 10:04:27 +05:30
parent 5f515fb0ad
commit 096db2e8de
2 changed files with 45 additions and 9 deletions

View File

@ -64,7 +64,16 @@ export default (quest, sideQuest) => {
);
}
else {
return (
return (<>
<div className="back_only">
<button
className="back"
onClick={() => props.setDisplay(
{
type: props.display.type + "s"
})
}>&lt;</button>
</div>
<div className="quest nes-container with-title is-dark">
<p className="title">{type}</p>
<div className="quest_element">
@ -102,8 +111,13 @@ export default (quest, sideQuest) => {
/>)}
</div>
</div>
<div className="quest_element">
<button className="nes-btn is-primary">Update</button>
<button className="nes-btn is-success">Mark as done</button>
<button className="nes-btn is-error">Delete</button>
</div>
</div>
);
</>);
}
}

View File

@ -28,8 +28,24 @@ body {
}
}
.back_only {
width: 100%;
display: flex;
justify-content: flex-end;
.back {
border: none;
color: #FFF;
background-color: rgba(0,0,0,0);
text-align: right;
width: 30px;
margin: 0;
padding: 0;
}
}
.main {
margin: 0 5%;
margin: 0 auto;
max-width: 1000px;
header {
width: 100%;
margin-top: 1em;
@ -39,14 +55,14 @@ body {
}
.body {
padding: 0 1em;
button {
width: 48%;
margin: 0 1%;
box-sizing: border-box;
}
.stats {
margin: 1em 0;
box-sizing: border-box;
button {
width: 48%;
margin: 0 1%;
box-sizing: border-box;
}
}
.quest {
width: 100%;
@ -68,6 +84,9 @@ body {
flex-direction: row;
justify-content: space-between;
}
button {
width: 30%;
}
}
}
@ -118,7 +137,7 @@ body {
height: 100vh;
}
@media (max-width: 600px) {
@media (max-width: 900px) {
.main {
header {
padding: 1em 1em;
@ -146,6 +165,9 @@ body {
flex-direction: column;
justify-content: flex-start;
}
button {
width: 100%;
}
}
}
.quests {