Some more design improvements

pull/1/head
Nishant Arora 8 years ago
parent 9f6b85b59c
commit c9c0a42036

1
.gitignore vendored

@ -38,5 +38,6 @@ jspm_packages
client/public client/public
db db
db/matterwiki.sqlite
config.js config.js

@ -20,9 +20,12 @@ const App = React.createClass({
<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul className="nav navbar-nav navbar-right"> <ul className="nav navbar-nav navbar-right">
<Link to="article/new"><button type="button" className="btn btn-default navbar-btn">New Article</button> <li><Link to="article/new" className="">New Article
</Link> </Link>
<button type="button" className="btn btn-default navbar-btn">Logout</button> </li>
<li>
<a href="" className="">Logout</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>

@ -7,11 +7,11 @@ class NewArticle extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleChange = this.handleChange.bind(this); this.handleChange = this.handleChange.bind(this);
this.state = {title: "", body: ""}; this.state = {body: ""};
} }
handleChange() { handleChange() {
this.setState({title: this.refs.title.value, body: this.refs.body.value}); this.setState({body: this.refs.body.value});
} }
getRawMarkupBody() { getRawMarkupBody() {
@ -19,10 +19,6 @@ class NewArticle extends React.Component {
return { __html: md.render(this.state.body) }; return { __html: md.render(this.state.body) };
} }
getRawMarkupTitle() {
var md = new Remarkable();
return { __html: md.render(this.state.title) };
}
componentDidMount() { componentDidMount() {
autosize(document.querySelectorAll('textarea')); autosize(document.querySelectorAll('textarea'));
@ -32,13 +28,16 @@ class NewArticle extends React.Component {
return ( return (
<div className="new-article"> <div className="new-article">
<div className="row"> <div className="row">
<div className="col-md-6 new-article-form"> <div className="col-md-12">
<textarea <textarea
ref="title" ref="title"
className="form-control input-title" className="form-control input-title"
onChange={this.handleChange}
placeholder="Enter article title..." placeholder="Enter article title..."
/> />
</div>
</div>
<div className="row">
<div className="col-md-6 new-article-form">
<textarea <textarea
onChange={this.handleChange} onChange={this.handleChange}
ref="body" ref="body"
@ -47,21 +46,21 @@ class NewArticle extends React.Component {
/> />
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<div className="article-heading">
<span className="color-text">Preview</span>
<div
className="preview-title single-article-title"
dangerouslySetInnerHTML={this.getRawMarkupTitle()}
/>
</div>
<div <div
className="preview-body single-article-body" className="preview-body single-article-body"
dangerouslySetInnerHTML={this.getRawMarkupBody()} dangerouslySetInnerHTML={this.getRawMarkupBody()}
/> />
</div> </div>
</div> </div>
<br/>
<br/>
<div className="row">
<div className="col-md-12">
<button className="btn btn-default btn-block btn-lg" >Create Article</button>
</div>
</div> </div>
</div>
); );
} }
} }

@ -3962,7 +3962,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.nav > li > a:hover, .nav > li > a:hover,
.nav > li > a:focus { .nav > li > a:focus {
text-decoration: none; text-decoration: none;
background-color: #eee; background-color: transparent;
border: 1px solid #ff0066;
} }
.nav > li.disabled > a { .nav > li.disabled > a {
color: #777; color: #777;
@ -4291,8 +4292,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
margin: 7.5px -15px; margin: 7.5px -15px;
} }
.navbar-nav > li > a { .navbar-nav > li > a {
padding-top: 20px;
padding-bottom: 20px;
line-height: 20px; line-height: 20px;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
@ -4326,9 +4325,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
.navbar-nav > li { .navbar-nav > li {
float: left; float: left;
} }
.navbar-nav > li > a { .navbar-nav > li {
padding-top: 20px; margin-top: 10px;
padding-bottom: 20px;
} }
} }
.navbar-form { .navbar-form {

@ -117,12 +117,12 @@ input:focus
.new-article .input-title { .new-article .input-title {
font-weight: 700; font-weight: 700;
font-size: 4em; font-size: 3em;
} }
.new-article .input-body { .new-article .input-body {
font-family: "Vollkorn", sans-serif; font-family: "Courier", sans-serif;
font-size: 1.5em; font-size: 1.2em;
} }
textarea { textarea {

Binary file not shown.
Loading…
Cancel
Save