From c598694eb444f8c81d93527c1fd461292f6ae1eb Mon Sep 17 00:00:00 2001
From: Jan Bader <jan.bader@ub-software.de>
Date: Thu, 19 Jan 2017 22:55:02 +0100
Subject: [PATCH] Improve modal

---
 templates/budget-new.html | 54 ++++++++++++++++++++++++---------------
 1 file changed, 34 insertions(+), 20 deletions(-)

diff --git a/templates/budget-new.html b/templates/budget-new.html
index f388560..71d68a0 100644
--- a/templates/budget-new.html
+++ b/templates/budget-new.html
@@ -1,26 +1,40 @@
 {{define "budget-new"}}
-    <div id="newbudgetmodal" class="modal">
-        <script>        
-            $(document).ready(function () {
-                $('#newbudgetform').ajaxForm({
-                    error: function() {
-                        $('#errorcreatingbudget').show();
-                    }
+    <div id="newbudgetmodal" class="modal fade">
+        <div class="modal-dialog" role="document">
+            <script>        
+                $(document).ready(function () {
+                    $('#errorcreatingbudget').hide();
+                    $('#newbudgetform').ajaxForm({
+                        error: function() {
+                            $('#errorcreatingbudget').show();
+                        }
+                    }); 
                 }); 
-            }); 
-        </script>
-        <h3>New Budget</h3>
-        <form id="newbudgetform" action="/api/v1/budget/new" method="POST">
-            <div class="form-group">
-                <label for="name">Name</label>
-                <input type="text" name="name" class="form-control" placeholder="Name" />
-            </div>
+            </script>
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">New Budget</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <form id="newbudgetform" action="/api/v1/budget/new" method="POST">
+                    <div class="modal-body">
+                        <div class="form-group">
+                            <label for="name">Name</label>
+                            <input type="text" name="name" class="form-control" placeholder="Name" />
+                        </div>
 
-            <div id="errorcreatingbudget">
-                Error creating budget.
+                        <div id="errorcreatingbudget">
+                            Error creating budget.
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                        <input type="submit" class="btn btn-primary" value="Create" class="form-control" />
+                    </div>
+                </form>
             </div>
-
-            <input type="submit" value="Create" class="form-control" />
-        </form>
+        </div>
     </div>
 {{end}}
\ No newline at end of file