Commit cb78ee60 by Oláh István Gergely

templates: create sidebar to help page

parent d0773617
......@@ -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;
}
}
......@@ -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 %}
{% 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>
......
{% 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>
{% 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>
......
{% 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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment