templates: split help page to tabs

circle/dashboard/static/dashboard/dashboard.less

@@ -1283,3 +1283,27 @@ textarea[name="new_members"] {
   width: 50%;
   width: 50%;
   text-align: center;
   text-align: center;
 }
 }
+
+#help-tab-content h1 {
+  font-weight: bold;
+}
+
+#help-tab-content h2 {
+  font-weight: bold;
+}
+
+#help-tab-content h3 {
+font-weight: bold;
+}
+
+#help-tab-content h4 {
+  font-weight: bold;
+}
+
+#help-tab-content h5 {
+  font-weight: bold;
+}
+
+#help-tab-content blockquote {
+  background-color:#dfe4e4;
+}

circle/templates/info/help.html

 {% extends "dashboard/base.html" %}
 {% extends "dashboard/base.html" %}
 {% load i18n %}
 {% load i18n %}
+{% load compressed  %}
 {% block title-page %}{% trans "Help" %}{% endblock %}
 {% block title-page %}{% trans "Help" %}{% endblock %}
-</style>
 {% block content %}
 {% block content %}
 <div class="row">
 <div class="row">
   <div class="col-lg-8 col-lg-offset-2">
   <div class="col-lg-8 col-lg-offset-2">
     <div class="page-header">
     <div class="page-header">
       <h1>{% trans "Help" %} <small>{% trans "user guide in short" %}</small></h1>
       <h1>{% trans "Help" %} <small>{% trans "user guide in short" %}</small></h1>
     </div>
     </div>
-    <ul class="help-tabs nav nav-tabs">
-      
-      <li class="active">
-        <a href="#">
-          <i class="fa fa-comments-o fa-2x"></i>
-            {% trans "FAQ" %}
-        </a>
-      </li>
- 
-      <li>
-        <a href="#">
-          <i class="fa fa-book fa-2x"></i>
-            {% trans "Overview" %}
-        </a>
-      </li>
-      
-    </ul>
-  </div>
-</div>
+    <div class="content">
+      <ul class="help-tabs nav nav-tabs">
+
+        <li class="active">
+          <a href="#" data-toggle="pill" data-target="#_faq" class="text-center" >
+            <i class="fa fa-comments-o fa-2x"></i><br>
+            {% trans "FAQ" %}</a>
+        </li>
+        <li>
+          <a href="#" data-toggle="pill" data-target="#_overview" class="text-center" >
+            <i class="fa fa-book fa-2x"></i><br>
+            {% trans "Overview" %}</a>
+        </li>
+      </ul>
+
+      <div id="help-tab-content" class="tab-content">
+          <div class="tab-pane active" id="_faq">
+            {% include "info/help/faq.html" %}
+          </div>
+          <div class="tab-pane" id="_overview">
+            {% include "info/help/overview.html" %}
+          </div>
+      </div>
+
+    </div> <!-- content -->
+  </div> <!-- col-lg -->
+</div> <!-- row -->
 {% endblock %}
 {% endblock %}

circle/templates/info/help/faq.html

+{% load i18n %}
+<h2 >{% trans "Table of contents" %}</h2>
+<br/>
+
+<p><div class="toc">
+<ul>
+<li><a href="#how-can-i-create-and-share-a-template-with-others">{% trans "How can I create and share a template with others?" %}</a></li>
+<li><a href="#how-can-i-create-a-vm-and-give-to-another-user">{% trans "How can I create a VM and give to another user?" %}</a></li>
+<li><a href="#how-can-i-portforward">{% trans "How can I portforward?" %}</a></li>
+<li><a href="#my-machines-lease-is-short-i-want-to-extend-it-how-can-i-do-it">{% trans "My machine’s lease is short. I want to extend it. How can I do it?" %}</a></li>
+<li><a href="#i-havent-got-enough-cpu-cores-andor-memory-on-my-vm-how-can-i-have-more">{% trans "I haven’t got enough CPU cores and/or memory on my VM. How can I have more?" %}</a></li>
+<li><a href="#i-want-access-to-a-specific-template-to-start-a-vm-what-can-i-do">{% trans "I want access to a specific template to start a VM. What can I do?" %} </a></li>
+</li>
+</div>
+</p>
+<br/>
+
+<h3 id="how-can-i-create-and-share-a-template-with-others">{% trans "How can I create and share a template with others?" %}</h3>
+
+<blockquote>
+  <ol>
+    <li>{% trans "Start a virtual machine." %}</li>
+  <li>{% trans "Customize this machine - install and remove softwares, etc." %}</li>
+  <li>{% trans "Click on ‘Save as Template’ icon on operations." %}</li>
+  <li>{% trans "On the dashboard, select this template to go to the ‘Edit template page’." %}</li>
+  <li>{% trans "On the ‘Manage access’ box, add the specified user or user group with ‘user’ access level." %} ({% trans "You can easily create groups if you need" %})</li>
+  </ol>
+</blockquote>
+
+<h3 id="how-can-i-create-a-vm-and-give-to-another-user">{% trans "How can I create a VM and give to another user?" %}</h3>
+
+<blockquote>
+  <ol>
+    <li>{% trans "Start a virtual machine." %}</li>
+  <li>{% trans "Customize this machine - install and remove softwares, etc." %}</li>
+  <li>{% trans "On the machine’s Access pane, you can add users and groups to this VM." %}</li>
+  </ol>
+</blockquote>
+
+
+
+<h3 id="how-can-i-portforward">{% trans "How can I portforward?" %}</h3>
+
+<blockquote>
+  <ol>
+    <li>{% trans "On the VM’s page, click on the Network pane." %}</li>
+    <li>{% trans "On the prefered interface, type the port number, select type and click ‘Add’." %}</li>
+    <li>{% trans "Of course the machines port must be opened. Opening port 80 examples: " %}<br>
+  <ul><li>Ubuntu, Debian: <code>sudo ufw allow 80</code></li>
+    <li>CentOS, RHEL:  {% trans "append to" %}<code>/etc/sysconfig/iptables</code>:<br/>
+  <code><br/>
+  iptables -A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT <br>
+  </code><br>{% trans "and restart the service:" %}<code>sudo service iptables restart</code></li></ul></li>
+  <li>{% trans "Now you can connect to the machine, with the generated port number." %}</li>
+  </ol>
+</blockquote>
+
+
+
+<h3 id="my-machines-lease-is-short-i-want-to-extend-it-how-can-i-do-it">{% trans "My machine’s lease is short. I want to extend it. How can I do it?" %}</h3>
+
+<blockquote>
+  <p>{% blocktrans %}You can send a request to the administrators. On the VM’s page - home pane, click on the ‘renew’ button and ‘send request’. Please write down, why are you need this and choose how long extension do you want.{% endblocktrans %}</p>
+</blockquote>
+
+
+
+<h3 id="i-havent-got-enough-cpu-cores-andor-memory-on-my-vm-how-can-i-have-more">{% trans "I haven’t got enough CPU cores and/or memory on my VM. How can I have more?" %}</h3>
+
+<blockquote>
+  <p>{% blocktrans %}You can send a request to the administrators. On the VM’s page - resources, modify the counters, write down, why are you need this and ‘save’.{% endblocktrans %}</p>
+</blockquote>
+
+
+
+<h3 id="i-want-access-to-a-specific-template-to-start-a-vm-what-can-i-do">{% trans "I want access to a specific template to start a VM. What can I do? " %}</h3>
+
+<blockquote>
+  <p>{% blocktrans %}When you want to create a VM, below the template list, there is an option to send a request. Select wich template do you want, why you need this and set the access rights.{% endblocktrans %}</p>
+</blockquote>