new-template workflow updated

one/static/style.css

@@ -77,6 +77,33 @@ a:link,a:visited{
 #new-template-button .name{
   background-image: url(icons/document--plus.png) !important
 }
+#modal-container ul{
+  list-style: none;
+}
+#modal-container .wizard li{
+  border-bottom: 1px dotted #999;
+}
+#modal-container .wizard label{
+  float: left;
+  padding: 5px;
+  margin: 10px 5px;
+}
+.wizard .progress .bar{
+  background-color: green;
+  height: 15px;
+  position: absolute;
+  z-index: -1;
+}
+.wizard .progress{
+  text-align: center;
+}
+#modal-container .wizard input, #modal-container .wizard select{
+  display: block;
+  float: right;
+  padding: 5px;
+  margin: 10px 5px;
+  width: 200px;
+}
 .wm .summary{
     padding: 15px 5px;
     border-top: 1px solid #888;

one/templates/base.html

@@ -22,7 +22,6 @@ $(function(){
                 .css('padding','0px 5px')
                 .animate({height:this.originalHeight,paddingTop:15,paddingBottom:15},700);
             $(this).parent('.wm').addClass('opened');
-
         } else {
             var that=this;
             $(this).next('.details')
@@ -52,6 +51,10 @@ $(function(){
       })
       $('#modal-container .wm .summary').click(toggleDetails);
     });
+    $('#new-template-button').click(function(){
+      $('#modal').show();
+      $('#modal-container').html($('#new-template').html());
+    });
     $('#shadow').click(function(){
       $('#modal').hide();
     })

one/templates/home.html

@@ -98,33 +98,7 @@
                 </div>
             </li>
             <li id="new-template" style="display: none">
-                <h2>Rendelkezésre álló sablonok</h2>
-                <ul class="wm-list modal">
-                    {% for m in templates %}
-                    <li class="wm">
-                        <form method="POST" action="/vm/new/{{m.pk}}/">{% csrf_token %}
-                            <div class="summary">
-                                <div class="name wm-on">{{m.name}}</div>
-                                <div class="status">
-                                    <input type="submit" value="Indítás"/>
-                                </div>
-                                <div class="clear"></div>
-                            </div>
-                            <div class="details">
-                                <h3>
-                                    Részletek
-                                </h3>
-                                <ul>
-                                    <li class="name">Rendszer: <span class="value">{{m.disk.name}}</span></li>
-                                    <li class="type">Instance típus: <span class="value">{{m.instance_type.name}}</span></li>
-                                    <li class="memory">Memória: <span class="value">{{m.instance_type.RAM}} MiB</span></li>
-                                    <li class="cpu">CPU magok: <span class="value">{{m.instance_type.CPU}}</span></li>
-                                </ul>
-                            </div>
-                        </form>
-                    </li>
-                    {% endfor %}
-                </ul>
+                {% include "new-template-flow.html" %}
             </li>
         </ul>
     </div>