frontend: improve "New issue" form
This commit is contained in:
parent
eb17444397
commit
df120bac9e
3 changed files with 37 additions and 30 deletions
|
@ -7,12 +7,11 @@ html, html body, .form {
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: "Dhurjati Regular";
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
header, .body {
|
||||
header, #reactapp {
|
||||
margin: 0 auto;
|
||||
color: $black;
|
||||
width: 75%;
|
||||
|
@ -26,26 +25,22 @@ header {
|
|||
line-height: 1;
|
||||
font-weight: normal;
|
||||
}
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.body {
|
||||
height: 100%;
|
||||
font-size: larger;
|
||||
ul.connections {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.form {
|
||||
.row {
|
||||
form.new-issue {
|
||||
.pure-u-1-1 {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
textarea, input {
|
||||
width: 100%;
|
||||
margin: 0 0 15px 0;
|
||||
|
||||
.left {
|
||||
width: 20%;
|
||||
select { width: 100%; }
|
||||
margin: 0 1% 0 0;
|
||||
}
|
||||
}
|
||||
.row.content {
|
||||
height: 55%;
|
||||
.right {
|
||||
width: 75%;
|
||||
input, textarea { width: 100%; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,2 +1,4 @@
|
|||
<section class='body' id='reactapp'></section>
|
||||
<div class="pure-g">
|
||||
<form class="new-issue pure-form" id="reactapp"></form>
|
||||
<script src="/js/entry-point/new-issue.js"></script>
|
||||
</div>
|
||||
|
|
|
@ -3,17 +3,27 @@ import { ConnectionSelect } from "/components/forms/ConnectionSelect";
|
|||
|
||||
export function NewIssueForm() {
|
||||
return (
|
||||
<form className="form">
|
||||
<div className="row">
|
||||
<>
|
||||
<div className="pure-u-1-1">
|
||||
<div className="left">
|
||||
<ConnectionSelect/>
|
||||
<input name="title" type="text" placeholder="The title of the issue" />
|
||||
</div>
|
||||
<div className="row content">
|
||||
<textarea name="content"/>
|
||||
<div className="right">
|
||||
<input name="title" type="text" placeholder="Title" />
|
||||
</div>
|
||||
<div className="row">
|
||||
<button type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="pure-u-1-1">
|
||||
<div className="left"></div>
|
||||
<div className="right">
|
||||
<textarea name="content" placeholder="Add your description here"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pure-u-1-1">
|
||||
<div className="left"></div>
|
||||
<div className="right">
|
||||
<button className="pure-button pure-button-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue