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 {
|
||||
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">
|
||||
<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>
|
||||
</>);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
.stats {
|
||||
margin: 1em 0;
|
||||
box-sizing: border-box;
|
||||
button {
|
||||
width: 48%;
|
||||
margin: 0 1%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.stats {
|
||||
margin: 1em 0;
|
||||
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 {
|
||||
|
|
Loading…
Reference in New Issue