Add buttons to modify quest. Add respective scss
This commit is contained in:
parent
5f515fb0ad
commit
096db2e8de
|
@ -64,7 +64,16 @@ export default (quest, sideQuest) => {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
return (
|
return (<>
|
||||||
|
<div className="back_only">
|
||||||
|
<button
|
||||||
|
className="back"
|
||||||
|
onClick={() => props.setDisplay(
|
||||||
|
{
|
||||||
|
type: props.display.type + "s"
|
||||||
|
})
|
||||||
|
}><</button>
|
||||||
|
</div>
|
||||||
<div className="quest nes-container with-title is-dark">
|
<div className="quest nes-container with-title is-dark">
|
||||||
<p className="title">{type}</p>
|
<p className="title">{type}</p>
|
||||||
<div className="quest_element">
|
<div className="quest_element">
|
||||||
|
@ -102,8 +111,13 @@ export default (quest, sideQuest) => {
|
||||||
/>)}
|
/>)}
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
);
|
</div>
|
||||||
|
</>);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
.main {
|
||||||
margin: 0 5%;
|
margin: 0 auto;
|
||||||
|
max-width: 1000px;
|
||||||
header {
|
header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
|
@ -39,14 +55,14 @@ body {
|
||||||
}
|
}
|
||||||
.body {
|
.body {
|
||||||
padding: 0 1em;
|
padding: 0 1em;
|
||||||
.stats {
|
|
||||||
margin: 1em 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
button {
|
button {
|
||||||
width: 48%;
|
width: 48%;
|
||||||
margin: 0 1%;
|
margin: 0 1%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
.stats {
|
||||||
|
margin: 1em 0;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.quest {
|
.quest {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -68,6 +84,9 @@ body {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
button {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -118,7 +137,7 @@ body {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 900px) {
|
||||||
.main {
|
.main {
|
||||||
header {
|
header {
|
||||||
padding: 1em 1em;
|
padding: 1em 1em;
|
||||||
|
@ -146,6 +165,9 @@ body {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.quests {
|
.quests {
|
||||||
|
|
Loading…
Reference in New Issue