Added create button and added success modal

client/app/static/new.jsx

@@ -7,6 +7,7 @@ class NewArticle extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
     this.state = {body: ""};
   }
 
@@ -14,6 +15,11 @@ class NewArticle extends React.Component {
     this.setState({body: this.refs.body.value});
   }
 
+  handleSubmit(e) {
+    e.preventDefault();
+    $('#myModal').modal('show')
+  }
+
   getRawMarkupBody() {
     var md = new Remarkable();
     return { __html: md.render(this.state.body) };
@@ -57,7 +63,30 @@ class NewArticle extends React.Component {
         <br/>
       <div className="row">
         <div className="col-md-12">
-          <button className="btn btn-default btn-block btn-lg" >Create Article</button>
+          <button className="btn btn-default btn-block btn-lg" onClick={this.handleSubmit}>Create Article</button>
+        </div>
+      </div>
+      <div className="modal modal-fullscreen fade" id="myModal" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel">
+        <div className="modal-dialog" role="document">
+          <div className="modal-content">
+            <div className="modal-header">
+              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            </div>
+            <div className="modal-body">
+              <center>
+              <div className="row">
+
+                <div className="col-md-6 col-sd-12">
+                  <h1><b>Yayyyy!</b></h1><h3>Your article has been published</h3>
+                  <br/>
+                  <br/>
+                  <button type="button" className="btn btn-default btn-block btn-lg" data-dismiss="modal">That's great</button>
+                </div>
+              </div>
+            </center>
+            </div>
+
+          </div>
         </div>
       </div>
     </div>

client/assets/bootstrap.css

@@ -5795,7 +5795,7 @@ button.list-group-item-danger.active:focus {
 }
 .close {
   float: right;
-  font-size: 21px;
+  font-size: 5em;
   font-weight: bold;
   line-height: 1;
   color: #000;
@@ -5888,7 +5888,6 @@ button.close {
 }
 .modal-header {
   padding: 15px;
-  border-bottom: 1px solid #e5e5e5;
 }
 .modal-header .close {
   margin-top: -2px;

client/assets/custom.js

@@ -0,0 +1,9 @@
+
+$(".modal-fullscreen").on('show.bs.modal', function () {
+  setTimeout( function() {
+    $(".modal-backdrop").addClass("modal-backdrop-fullscreen");
+  }, 0);
+});
+$(".modal-fullscreen").on('hidden.bs.modal', function () {
+  $(".modal-backdrop").addClass("modal-backdrop-fullscreen");
+});

client/assets/style.css

@@ -136,3 +136,52 @@ textarea {
 .color-text {
   color: #ff0066;
 }
+
+
+/* .modal-fullscreen */
+
+.modal-fullscreen {
+  background: #fff;
+  text-align: center;
+}
+.modal-fullscreen .modal-content {
+  background: transparent;
+  border: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.modal-backdrop.modal-backdrop-fullscreen {
+  background: #ffffff;
+}
+.modal-backdrop.modal-backdrop-fullscreen.in {
+  opacity: .97;
+  filter: alpha(opacity=97);
+}
+
+/* .modal-fullscreen size: we use Bootstrap media query breakpoints */
+
+.modal-fullscreen .modal-dialog {
+  margin: 0;
+  margin-right: auto;
+  margin-left: auto;
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .modal-fullscreen .modal-dialog {
+    width: 750px;
+  }
+}
+@media (min-width: 992px) {
+  .modal-fullscreen .modal-dialog {
+    width: 970px;
+  }
+}
+@media (min-width: 1200px) {
+  .modal-fullscreen .modal-dialog {
+     width: 1170px;
+  }
+}
+
+.modal-fullscreen .col-md-6 {
+  float: none;
+}

client/index.html

@@ -4,6 +4,9 @@
     <title>Matterwiki</title>
     <link rel="stylesheet" href="./assets/bootstrap.css" />
     <link rel="stylesheet" href="./assets/style.css" />
+    <script src="./assets/jquery.js" type="text/javascript"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+    <script src="./assets/custom.js" type="text/javascript"></script>
   </head>
   <body>
     <!--
@@ -12,5 +15,6 @@
     -->
     <div id="app" class="container" />
     <script src="public/bundle.js" type="text/javascript"></script>
+
   </body>
 </html>