dashboard: clean up the tour js

circle/dashboard/static/dashboard/dashboard.css

@@ -443,3 +443,32 @@ footer a, footer a:hover, footer a:visited {
 .template-choose-list input[type="radio"] {
   float: right;
 }
+
+/* template create vm help */
+.alert-new-template {                                                       
+  background: #3071a9;                                                      
+  color: white;                                                             
+  font-size: 22px;                                                          
+}                                                                           
+                                                                            
+.alert-new-template ol {                                                    
+  margin-left: 25px;
+} 
+
+/* bootstrap tour */
+.tour-template {
+  max-width: 400px;
+  min-width: 270px;
+  font-size: 16px;
+}
+
+.tour-template {
+  text-align: justify;
+}
+.tour-template .popover-title {
+  font-weight: bold;
+}
+
+#vm-details-resources-form {
+  padding: 5px; /* it's nice this way in the tour */
+}

circle/dashboard/static/dashboard/vm-tour.js

 /* TODO i18n
  * https://docs.djangoproject.com/en/1.5/topics/i18n/translation/#internationalization-in-javascript-code
- * TODO new tour template
- * http://bootstraptour.com/api/
- * TODO change placeholder yos
  */
 $(function() {
   $(".vm-details-start-template-tour").click(function() {
@@ -15,15 +12,32 @@ $(function() {
 function createTemplateTour() {
   var ttour = new Tour({
       storage: false,
+      name: "template",
+      template: "<div class='popover'>" +
+                  "<div class='arrow'></div>" +
+                  "<h3 class='popover-title'></h3>" +
+                  "<div class='popover-content'></div>" +
+                  "<div class='popover-navigation'>" +
+                    "<div class='btn-group'>" +
+                      "<button class='btn btn-sm btn-default' data-role='prev'>" +
+                        '<i class="icon-chevron-left"></i> ' + "Prev" + "</button> " +
+                      "<button class='btn btn-sm btn-default' data-role='next'>" +
+                        'Next' + ' <i class="icon-chevron-right"></i></button> ' +
+                      "<button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='Pause' data-resume-text='Resume'>Pause</button> " +
+                    "</div>" +
+                    "<button class='btn btn-sm btn-default' data-role='end'>" +
+                      "End tour" + ' <i class="icon-flag-checkered"></i></button>' +
+                  "</div>" +
+                "</div>",
   });
 
   ttour.addStep({
     element: ".alert-new-template",
     title: "Template Tutorial Tour",
-    content: "Welcome to the template tutorial. In this quick tour, we gonna show you how to do the steps described above. " +
-             "For the next tour step press the Next button or the right arrow (or Back button/left arrow for the previous step). " +
-             "During the tour please don't try the functions because it may lead to graphical glitches, however " +
-             "you can end the tour any time you want with the End Tour button!",
+    content: "<p>Welcome to the template tutorial. In this quick tour, we gonna show you how to do the steps described above.</p>" +
+             '<p>For the next tour step press the "Next" button or the right arrow (or "Back" button/left arrow for the previous step).</p>' +
+             "<p>During the tour please don't try the functions because it may lead to graphical glitches, however " +
+             "you can end the tour any time you want with the End Tour button!</p>",
     placement: "bottom",
     backdrop: true,
   });
@@ -32,7 +46,7 @@ function createTemplateTour() {
     backdrop: true,
     element: 'a[href="#home"]',
     title: "Home tab", 
-    content: "yo",
+    content: "In this tab you can tag your virtual machine and modify the description.",
     placement: 'top',
     onShow: function() {
       console.log("yosag van");
@@ -53,7 +67,7 @@ function createTemplateTour() {
 
   ttour.addStep({
     element: '#vm-details-resources-form',
-    placement: 'left',
+    placement: 'top',
     backdrop: true,
     title: "Resources",
     content: '<p><strong>CPU priority:</strong> higher (or lower?) is better</p>' + 
@@ -65,11 +79,11 @@ function createTemplateTour() {
   });
 
   ttour.addStep({
-    element: '.vm-details-resources-disk',
+    element: '#vm-details-resources-disk',
     backdrop: true,
-    placement: 'left',
+    placement: 'top',
     title: "Disks",
-    content: "jo a kontent, bar lehetne hosszabb is es akkor nem nez ki ilyen butan az end tour gomb!",
+    content: "You can add empty disks, download new ones and remove existing ones here.",
     onShow: function() {
       $('a[href="#resources"]').trigger("click");
     },
@@ -90,6 +104,7 @@ function createTemplateTour() {
   ttour.addStep({
     element: "#vm-details-button-deploy",
     title: "Deploy",
+    placement: "left",
     backdrop: true,
     content: "Deploy the virtual machine",
   });
@@ -97,6 +112,7 @@ function createTemplateTour() {
   ttour.addStep({
     element: "#vm-info-pane",
     title: "Connect",
+    placement: "top",
     backdrop: true,
     content: "Use the connection string or connect with your choice of client!",
     
@@ -106,7 +122,7 @@ function createTemplateTour() {
     element: ".alert-new-template",
     placement: "bottom",
     title: "Customize the virtual machine",
-    content: "Do the modifications",
+    content: "After you have connected to the virtual do you modifications",
   });
 
   ttour.addStep({
@@ -114,16 +130,16 @@ function createTemplateTour() {
     title: "Save",
     placement: "left",
     backdrop: true,
-    content: "Press this button and wait!",
+    content: 'Press the "Save as template" button and wait until the activity finishes.',
   });
   
   
   ttour.addStep({
     element: ".alert-new-template",
-    title: "Fin",
+    title: "Finisih",
     backdrop: true,
     placement: "bottom",
-    content: "Congrats you managed to sit trough this exciting tour!",
+    content: "This is the last message, if something is not clear you can do the the tour again!",
   });
   
   return ttour;

circle/dashboard/templates/dashboard/vm-detail.html

@@ -5,17 +5,6 @@
 
 {% block content %}
 
-<style>
-.alert-new-template {
-  background: #3071a9;
-  color: white; 
-  font-size: 25px;
-}
-
-.alert-new-template ol {
-  margin-left: 25px;
-}
-</style>
 {% if instance.is_base %}
 <div class="alert alert-info alert-new-template">
   <strong>{% trans "This is the master vm of your new template" %}</strong>

circle/dashboard/templates/dashboard/vm-detail/resources.html

@@ -42,7 +42,7 @@
 
 <hr />
 
-<div class="row vm-details-resources-disk">
+<div class="row" id="vm-details-resources-disk">
   <div class="col-sm-11">
     <h3>
       {% trans "Disks" %}