Use a dialog to send new stories.

4 files changed, 58 insertions, 20 deletions

diff --git a/scrumli.lisp b/scrumli.lisp
index 1cf3deb..22ce5d7 100644
--- a/scrumli.lisp
+++ b/scrumli.lisp
@@ -59,8 +59,8 @@
          :csss ,(list *scrumli-bootstrap-css-location*
                       *scrumli-font-awesome-css-location*
                       (genurl 'scrumli-css))
-         :jss ,(list *scrumli-bootstrap-js-location*
-                     *scrumli-jquery-js-location*
+         :jss ,(list *scrumli-jquery-js-location*
+                     *scrumli-bootstrap-js-location*
                      *scrumli-react-js-location*
                      *scrumli-jsxtransformer-js-location*)
          :username ,(hunchentoot:session-value :username)
diff --git a/static/css/scrumli.css b/static/css/scrumli.css
index 97ada10..7399c15 100644
--- a/static/css/scrumli.css
+++ b/static/css/scrumli.css
@@ -1,3 +1,8 @@
 .clickable {
     cursor: pointer;
 }
+
+button.nothing {
+    background-color: inherit;
+    border: none;
+}
diff --git a/static/js/main.js b/static/js/main.js
index e8991ad..b6c36f9 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -229,6 +229,7 @@ var StoryForm = React.createClass({
         var headline = this.refs.headline.getDOMNode().value.trim();
         var content = this.refs.content.getDOMNode().value.trim();
 
+        $(".myModal").modal('hide');
         this.props.onStorySubmit({role: role,
                                   necessity: necessity,
                                   headline: headline,
@@ -243,27 +244,51 @@ var StoryForm = React.createClass({
     }),
     render: function() {
         return (
-            <form onSubmit={this.handleSubmit}>
-              <fieldset>
-                <legend class="toggle">New story</legend>
+          <div class="myModal modal fade hide">
+            <form onSubmit={this.handleSubmit} class="form-horizontal">
+              <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">
+                  &times;
+                </button>
+                <h3 id="myModalLabel">New story</h3>
+              </div>
+              <div class="modal-body">
                 <div id="new-story">
-                  <div class="input-prepend input-append">
-                    <span class="add-on">As a </span>
-                    <input type="text" class="input-medium" ref="role"
-                           placeholder="person" />
-                    <span class="add-on"> I </span>
-                    <input type="text" class="input-small"
-                           ref="necessity" placeholder="would like" />
-                    <span class="add-on"> to </span>
-                    <input type="text" class="input-xxlarge"
-                           ref="headline" placeholder="fill in this form..." />
-                    <button class="btn btn-primary" type="submit">!</button>
-                    <br />
-                    <textarea ref="content"></textarea>
+                  <div class="control-group">
+                    <label class="control-label">As a</label>
+                    <div class="controls">
+                      <input type="text" ref="role" placeholder="person" />
+                    </div>
+                  </div>
+                  <div class="control-group">
+                    <label class="control-label">I</label>
+                    <div class="controls">
+                      <input type="text" ref="necessity"
+                             placeholder="would like" />
+                    </div>
+                  </div>
+                  <div class="control-group">
+                    <label class="control-label">to</label>
+                    <div class="controls">
+                      <input type="text" ref="headline"
+                             placeholder="fill in this form..." />
+                    </div>
+                  </div>
+                  <div class="control-group">
+                    <div class="controls">
+                      <textarea ref="content"></textarea>
+                    </div>
                   </div>
                 </div>
-              </fieldset>
+              </div>
+              <div class="modal-footer">
+                <button class="btn" data-dismiss="modal" aria-hidden="true">
+                  Close
+                </button>
+                <button class="btn btn-primary" type="submit">Save</button>
+              </div>
             </form>
+          </div>
         );
     }
 });
diff --git a/templates/scrumli.tmpl b/templates/scrumli.tmpl
index 03832e2..1deb32c 100644
--- a/templates/scrumli.tmpl
+++ b/templates/scrumli.tmpl
@@ -34,7 +34,15 @@
       </div>
 
       <div class="container">
-        <h1>Backlog</h1>
+        <h1>
+          <button data-target=".myModal" role="button"
+                  data-toggle="modal" class="nothing">
+            <i class="icon-plus-sign icon-2x"></i>
+          </button>
+          Backlog
+        </h1>
+
+
         <div id="content"></div>
         <script src="{$umainjs}" type="text/jsx"></script>
       </div>