dashboard: make the template choose more magical

circle/dashboard/static/dashboard/dashboard.css

@@ -428,10 +428,6 @@ footer a, footer a:hover, footer a:visited {
   max-width: 600px;
 }
 
-.template-choose-list-element {
-  cursor: pointer;
-}
-
 .template-choose-list-element small {
   display: none;
   float: right;
@@ -439,7 +435,9 @@ footer a, footer a:hover, footer a:visited {
 }
 
 .template-choose-list-element {
-  padding: 15px;
+  padding: 6px 10px;
+  cursor: pointer;
+  margin-bottom: 15px; /* bootstrap panel default is 20px */
 }
 
 .template-choose-list input[type="radio"] {

circle/dashboard/static/dashboard/dashboard.js

@@ -36,6 +36,24 @@ $(function () {
     });
     return false;
   });
+
+  $('.template-choose').click(function(e) {
+    $.ajax({
+      type: 'GET',
+      url: '/dashboard/template/choose/', 
+      success: function(data) { 
+        $('body').append(data);
+        vmCreateLoaded();
+        addSliderMiscs();
+        $('#create-modal').modal('show');
+        $('#create-modal').on('hidden.bs.modal', function() {
+          $('#create-modal').remove();
+        });
+      }
+    });
+    return false;
+  });
+
   $('[href=#index-graph-view]').click(function (e) {
     var box = $(this).data('index-box');
     $("#" + box + "-list-view").hide();

circle/dashboard/templates/dashboard/index-templates.html

@@ -25,7 +25,7 @@
         <a href="{% url "dashboard.views.template-list" %}" class="btn btn-primary btn-xs">
           <i class="icon-chevron-sign-right"></i> {% trans "show all" %}
         </a>
-        <a href="{% url "dashboard.views.template-choose" %}" class="btn btn-success btn-xs">
+        <a href="{% url "dashboard.views.template-choose" %}" class="btn btn-success btn-xs template-choose">
           <i class="icon-plus-sign"></i> {% trans "new" %}
         </a>
       </p>