diff --git a/circle/dashboard/static/dashboard/dashboard.less b/circle/dashboard/static/dashboard/dashboard.less
index f7dc090..1148c41 100644
--- a/circle/dashboard/static/dashboard/dashboard.less
+++ b/circle/dashboard/static/dashboard/dashboard.less
@@ -1284,26 +1284,152 @@ textarea[name="new_members"] {
text-align: center;
}
+// note: padding-margin hack to skip banner on anchor
#help-tab-content h1 {
font-weight: bold;
+ padding-top: 55px; margin-top: -55px;
}
#help-tab-content h2 {
font-weight: bold;
+ padding-top: 55px; margin-top: -55px;
}
#help-tab-content h3 {
-font-weight: bold;
+ font-weight: bold;
+ padding-top: 55px; margin-top: -55px;
}
#help-tab-content h4 {
font-weight: bold;
+ padding-top: 55px; margin-top: -55px;
}
#help-tab-content h5 {
font-weight: bold;
+ padding-top: 55px; margin-top: -55px;
}
#help-tab-content blockquote {
background-color:#dfe4e4;
}
+
+.row{
+ margin-left:0px;
+ margin-right:0px;
+}
+
+
+#wrapper {
+ padding-left: 0px;
+ transition: all .4s ease 0s;
+/* Firefox */
+height: -moz-calc(100% - 130px);
+/* WebKit */
+height: -webkit-calc(100% - 120px);
+/* Opera */
+height: -o-calc(100% - 110px);
+/* Standard */
+height: calc(100% - 130px);
+}
+
+#sidebar-wrapper {
+ margin-left: 0px;
+ left: 0px;
+ top: 46px;
+ width: 210px;
+ background: #222;
+ position: fixed;
+ height: 100%;
+ z-index: 10000;
+ transition: all .4s ease 0s;
+ overflow: auto;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+
+#sidebar-wrapper ul {
+ display: block;
+ float: left;
+ list-style: none;
+ margin: 0;
+ padding: 0px;
+}
+
+#sidebar-wrapper a {
+ font-family: "proxima-nova", 'Helvetica Neue', 'Helvetica', 'sans-serif';
+ color: #ddd;
+ display: block;
+ float: left;
+ width: 200px;
+ text-decoration: none;
+ background: #252525;
+ border-top: 1px solid #333;
+ border-bottom: 1px solid #222;
+ -webkit-transition: background .5s;
+ -moz-transition: background .5s;
+ -o-transition: background .5s;
+ -ms-transition: background .5s;
+ transition: background .5s;
+}
+
+#sidebar-wrapper ul a{
+ padding-top: 10px;
+ padding-bottom: 10px;
+ padding-left: 10px;
+ font-size: larger;
+}
+
+#sidebar-wrapper li a{
+ padding-top: 6px;
+ padding-bottom: 6px;
+ padding-left: 20px;
+ padding-right: 6px;
+ font-size: smaller;
+}
+
+#sidebar-wrapper ul ul a{
+ padding-top: 10px;
+ padding-bottom: 10px;
+ padding-left: 16px;
+ font-size: larger;
+}
+
+#sidebar-wrapper li li a{
+ padding-top: 6px;
+ padding-bottom: 6px;
+ padding-left: 24px;
+ padding-right: 6px;
+ font-size: smaller;
+}
+
+#sidebar-wrapper li a:hover, #sidebar-wrapper ul a:hover{
+ color: #fff;
+ background: rgba(200,200,255,0.15);
+ text-decoration: none;
+
+}
+
+#page-content {
+ margin-left: 200px;
+}
+
+@media only screen and (max-width: 600px) {
+ #sidebar-wrapper {
+ -webkit-transform: translateX(-250px);
+ -moz-transform: translateX(-250px);
+ -o-transform: translateX(-250px);
+ -ms-transform: translateX(-250px);
+ transform: translateX(-250px);
+ }
+
+ #page-content {
+ margin-left: 0px;
+ -webkit-transition: background .5s;
+ -moz-transition: background .5s;
+ -o-transition: background .5s;
+ -ms-transition: background .5s;
+ transition: background .5s;
+ }
+}
+
diff --git a/circle/templates/info/help.html b/circle/templates/info/help.html
index 24436d4..2929c53 100644
--- a/circle/templates/info/help.html
+++ b/circle/templates/info/help.html
@@ -4,7 +4,19 @@
{% block title-page %}{% trans "Help" %}{% endblock %}
{% block content %}
<div class="row">
- <div class="col-lg-8 col-lg-offset-2">
+ <div id="wrapper">
+ <div id="sidebar-wrapper">
+ <div id="help-tab-content" class="tab-content">
+ <div class="tab-pane active _faq">
+ {% include "info/help/faq_toc.html" %}
+ </div>
+ <div class="tab-pane _overview">
+ {% include "info/help/overview_toc.html" %}
+ </div>
+ </div>
+ </div>
+ </div>
+<div id="page-content" class="col-lg-6">
<div class="page-header">
<h1>{% trans "Help" %} <small>{% trans "user guide in short" %}</small></h1>
</div>
@@ -12,27 +24,27 @@
<ul class="help-tabs nav nav-tabs">
<li class="active">
- <a href="#" data-toggle="pill" data-target="#_faq" class="text-center" >
+ <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" >
+ <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">
+ <div class="tab-pane active _faq">
{% include "info/help/faq.html" %}
</div>
- <div class="tab-pane" id="_overview">
+ <div class="tab-pane _overview">
{% include "info/help/overview.html" %}
</div>
</div>
</div> <!-- content -->
- </div> <!-- col-lg -->
-</div> <!-- row -->
+</div> <!-- col-lg -->
+</div>
{% endblock %}
diff --git a/circle/templates/info/help/faq.html b/circle/templates/info/help/faq.html
index a827494..c7a7861 100644
--- a/circle/templates/info/help/faq.html
+++ b/circle/templates/info/help/faq.html
@@ -1,21 +1,9 @@
{% 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>
+<h2 id="faq" >{% trans "FAQ" %}</h2>
<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>
+<h3 id="how-can-i-create-and-share-a-template">{% trans "How can I create and share a template?" %}</h3>
<blockquote>
<ol>
@@ -57,7 +45,7 @@
-<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>
+<h3 id="my-machines-lease-is-short-how-can-i-extend-it">{% trans "My machine’s lease is short. How can I extend 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>
@@ -65,7 +53,7 @@
-<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>
+<h3 id="how-can-i-have-more-cpumemory">{% trans "How can I have more CPU/memory?" %}</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>
@@ -73,7 +61,7 @@
-<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>
+<h3 id="how-can-i-get-access-to-a-template">{% trans "How can I get access to a template?" %}</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>
diff --git a/circle/templates/info/help/faq_toc.html b/circle/templates/info/help/faq_toc.html
new file mode 100644
index 0000000..597f3b0
--- /dev/null
+++ b/circle/templates/info/help/faq_toc.html
@@ -0,0 +1,14 @@
+{% load i18n %}
+ <ul><a href="#faq">{% trans "FAQ" %}</a>
+ <li><a href="#how-can-i-create-and-share-a-template">{% trans "How can I create and share a template?" %}</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-how-can-i-extend-it">{% trans "My machine’s lease is short. How can I extend it?" %}</a></li>
+
+ <li><a href="#how-can-i-have-more-cpumemory">{% trans "How can I have more CPU/memory?" %}</a></li>
+
+ <li><a href="#how-can-i-get-access-to-a-template">{% trans "How can I get acces to a template?" %}</a></li>
+</li>
+</ul>
diff --git a/circle/templates/info/help/overview.html b/circle/templates/info/help/overview.html
index bc13028..d9d8d46 100644
--- a/circle/templates/info/help/overview.html
+++ b/circle/templates/info/help/overview.html
@@ -1,94 +1,7 @@
{% load i18n %}
-<h2>{% trans "Table of contents" %}</h2>
<br/>
-<p><div class="toc">
-<ul>
-<li><a href="#introduction">{% trans "Introduction" %}</a></li>
-<li><a href="#dashboard">{% trans "Dashboard" %}</a><ul>
-<li><a href="#virtual-machines-box">{% trans "Virtual Machines box" %}</a><ul>
-<li><a href="#how-can-i-create-a-vm">{% trans "How can I create a VM?" %}</a></li>
-<li><a href="#how-can-i-mark-frequently-used-vms">{% trans "How can I mark frequently used VMs?" %}</a></li>
-<li><a href="#how-can-i-search-for-vms">{% trans "How can I search for VMs?" %}</a></li>
-</ul>
-</li>
-<li><a href="#templates-box">{% trans "Templates box" %}</a></li>
-</ul>
-</li>
-<li><a href="#virtual-machines">{% trans "Virtual Machines" %}</a><ul>
-<li><a href="#details">{% trans "Details" %}</a><ul>
-<li><a href="#how-can-i-connect-to-the-virtual-machine">{% trans "How can I connect to the virtual machine?" %}</a></li>
-<li><a href="#how-can-i-change-the-vms-password">{% trans "How can I change the VM’s password?" %}</a></li>
-</ul>
-</li>
-<li><a href="#operations">{% trans "Operations" %}</a><ul>
-<li><a href="#what-kind-of-operations-are-allowed-to-do-with-my-vm">{% trans "What kind of operations are allowed to do with my VM?" %}</a></li>
-</ul>
-</li>
-<li><a href="#home">{% trans "Home" %}</a><ul>
-<li><a href="#expiration">{% trans "Expiration" %}</a></li>
-<li><a href="#how-can-i-expand-the-vms-expiration-date">{% trans "How can I expand the VM’s expiration date?" %}</a></li>
-<li><a href="#file-management">{% trans "File management" %}</a></li>
-<li><a href="#how-can-i-share-previously-uploaded-files-with-the-vm">{% trans "How can I share previously uploaded files with the VM?" %}</a></li>
-</ul>
-</li>
-<li><a href="#resources">{% trans "Resources" %}</a></li>
-<li><a href="#console">{% trans "Console" %}</a></li>
-<li><a href="#access">{% trans "Access" %}</a><ul>
-<li><a href="#how-can-i-give-access-to-others">{% trans "How can I give access to others?" %}</a></li>
-<li><a href="#what-kind-of-permissions-are-available">{% trans "What kind of permissions are available?" %}</a></li>
-</ul>
-</li>
-<li><a href="#network">{% trans "Network" %}</a><ul>
-<li><a href="#how-can-i-add-a-network-interface">{% trans "How can I add a network interface?" %}</a></li>
-</ul>
-</li>
-<li><a href="#activity">{% trans "Activity" %}</a></li>
-<li><a href="#multiple-vm-operations">{% trans "Multiple VM operations" %}</a><ul>
-<li><a href="#how-can-i-show-shared-or-destroyed-vms">{% trans "How can I show shared or destroyed VMs?" %}</a></li>
-</ul>
-</li>
-</ul>
-</li>
-<li><a href="#templates">{% trans "Templates" %}</a><ul>
-<li><ul>
-<li><a href="#how-can-i-create-templates">{% trans "How can I create templates?" %}</a></li>
-<li><a href="#what-kind-of-options-are-customizable-in-the-template">{% trans "What kind of options are customizable in the template?" %}</a></li>
-<li><a href="#how-can-i-change-the-expiration-of-the-templates-vms">{% trans "How can I change the expiration of the template’s VMs?" %}</a></li>
-<li><a href="#how-can-i-give-the-template-to-other-user">{% trans "How can I give the template to other user?" %}</a></li>
-<li><a href="#how-can-i-give-access-to-users-or-groups-to-the-template">{% trans "How can I give access to users or groups to the template?" %}</a></li>
-</ul>
-</li>
-</ul>
-</li>
-<li><a href="#groups">{% trans "Groups" %}</a><ul>
-<li><ul>
-<li><a href="#how-can-i-create-groups">{% trans "How can I create groups?" %}</a></li>
-<li><a href="#how-can-i-manage-the-users-in-a-group">{% trans "How can I manage the users in a group?" %}</a></li>
-<li><a href="#how-can-i-manage-privileges-with-the-group">{% trans "How can I manage privileges with the group?" %}</a></li>
-</ul>
-</li>
-</ul>
-</li>
-<li><a href="#files">{% trans "Files" %}</a><ul>
-<li><ul>
-<li><a href="#how-can-i-share-my-files-with-a-vm">{% trans "How can I share my files with a VM?" %}</a></li>
-</ul>
-</li>
-</ul>
-</li>
-<li><a href="#profile">{% trans "Profile" %}</a><ul>
-<li><a href="#how-can-i-change-my-password">{% trans "How can I change my password?" %}</a></li>
-<li><a href="#how-can-i-store-public-keys-on-the-vms">{% trans "How can I store public keys on the VMs?" %}</a></li>
-<li><a href="#how-can-i-change-connection-template">{% trans "How can I change connection template?" %}</a></li>
-</ul>
-</li>
-</ul>
-</li>
-</ul>
-</li>
-</div>
-</p>
-
+<h2 id="overview" >{% trans "Overview" %}</h2>
+<br/>
<h3 id="introduction">{% trans "Introduction" %}</h3>
diff --git a/circle/templates/info/help/overview_toc.html b/circle/templates/info/help/overview_toc.html
new file mode 100644
index 0000000..1ed54a2
--- /dev/null
+++ b/circle/templates/info/help/overview_toc.html
@@ -0,0 +1,91 @@
+{% load i18n %}
+<ul>
+ <a href="#overview">{% trans "Overview" %}</a>
+
+ <li><ul><a href="#introduction">{% trans "Introduction" %}</a></ul></li>
+
+ <li>
+ <ul><a href="#dashboard">{% trans "Dashboard" %}</a>
+ <li><a href="#virtual-machines-box">{% trans "Virtual Machines box" %}</a>
+ <ul>
+ <li><a href="#how-can-i-create-a-vm">{% trans "How can I create a VM?" %}</a></li>
+ <li><a href="#how-can-i-mark-frequently-used-vms">{% trans "How can I mark frequently used VMs?" %}</a></li>
+ <li><a href="#how-can-i-search-for-vms">{% trans "How can I search for VMs?" %}</a></li>
+ </ul>
+ </li>
+ <li><a href="#templates-box">{% trans "Templates box" %}</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <ul><a href="#virtual-machines">{% trans "Virtual Machines" %}</a>
+
+ <li>
+ <ul><a href="#details">{% trans "Details" %}</a>
+ <li><a href="#how-can-i-connect-to-the-virtual-machine">{% trans "How can I connect to the virtual machine?" %}</a></li>
+ <li><a href="#how-can-i-change-the-vms-password">{% trans "How can I change the VM’s password?" %}</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <ul><a href="#operations">{% trans "Operations" %}</a>
+ <li><a href="#what-kind-of-operations-are-allowed-to-do-with-my-vm">{% trans "What kind of operations are allowed to do with my VM?" %}</a></li>
+ <li>
+ </ul>
+ </li>
+
+ <li>
+ <ul><a href="#home">{% trans "Home" %}</a>
+ <li><a href="#expiration">{% trans "Expiration" %}</a></li>
+ <li><a href="#how-can-i-expand-the-vms-expiration-date">{% trans "How can I expand the VM’s expiration date?" %}</a></li>
+ <li><a href="#file-management">{% trans "File management" %}</a></li>
+ <li><a href="#how-can-i-share-previously-uploaded-files-with-the-vm">{% trans "How can I share previously uploaded files with the VM?" %}</a></li>
+ </ul>
+ </li>
+
+ <li><ul><a href="#resources">{% trans "Resources" %}</a></ul></li>
+ <li><a href="#console">{% trans "Console" %}</a></li>
+ <li><a href="#access">{% trans "Access" %}</a><ul>
+ <li><a href="#how-can-i-give-access-to-others">{% trans "How can I give access to others?" %}</a></li>
+ <li><a href="#what-kind-of-permissions-are-available">{% trans "What kind of permissions are available?" %}</a></li>
+
+ <li>
+ <ul><a href="#network">{% trans "Network" %}</a>
+ <li><a href="#how-can-i-add-a-network-interface">{% trans "How can I add a network interface?" %}</a></li>
+ </ul>
+ </li>
+
+ <li><a href="#activity">{% trans "Activity" %}</a></li>
+ <li><a href="#multiple-vm-operations">{% trans "Multiple VM operations" %}</a>
+ <li><a href="#how-can-i-show-shared-or-destroyed-vms">{% trans "How can I show shared or destroyed VMs?" %}</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+
+
+ <li>
+ <ul><a href="#templates">{% trans "Templates" %}</a>
+ <li><a href="#how-can-i-create-templates">{% trans "How can I create templates?" %}</a></li>
+ <li><a href="#what-kind-of-options-are-customizable-in-the-template">{% trans "What kind of options are customizable in the template?" %}</a></li>
+ <li><a href="#how-can-i-change-the-expiration-of-the-templates-vms">{% trans "How can I change the expiration of the tempalte's VMs" %}</a></li>
+ <li><a href="#how-can-i-give-the-template-to-other-user">{% trans "How can I give the template to other user" %}</a></li>
+ <li><a href="#how-can-i-give-access-to-users-or-groups-to-the-template">{% trans "How can I give access to users or groups to the template?"%}</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <ul><a href="#files">{% trans "Files" %}</a>
+ <li><a href="#how-can-i-share-my-files-with-a-vm">{% trans "How can I share my files with a VM?" %}</a></li>
+ </ul>
+ </li>
+
+ <li>
+ <ul><a href="#profile">{% trans "Profile" %}</a>
+ <li><a href="#how-can-i-change-my-password">{% trans "How can I change my password?" %}</a></li>
+ <li><a href="#how-can-i-store-public-keys-on-the-vms">{% trans "How can I store public keys on the VMs?" %}</a></li>
+ <li><a href="#how-can-i-change-connection-template">{% trans "How can I change connection template" %}</a></li>
+ </ul>
+ </li>
+
+</ul>