Commit 747fd41c by Kálmán Viktor

dashboard: make resize how-to more responsive

parent c8b6d787
......@@ -1488,3 +1488,38 @@ textarea[name="new_members"] {
.acl-table td:first-child {
text-align: center;
}
#resize-help {
table {
background-color: #f5f5f5;
}
.panel {
padding: 2px 20px;
background-color: #f5f5f5;
margin: 20px 0px;
}
ol li {
margin-top: 15px;
}
img {
display: block;
margin: 15px 0 5px 0;
}
pre {
margin-top: 5px;
}
hr {
margin: 50px 0;
}
}
#vm-details-resize-how-to {
font-size: 1.5em;
text-align: center;
width: 100%;
}
......@@ -66,6 +66,17 @@
{% endfor %}
</div>
<hr />
{% if instance.disks.all %}
<div id="vm-details-resize-how-to">
<i class="fa fa-question"></i>
{% url "info.resize" as resize_url %}
{% blocktrans with url=resize_url %}
If you need help resizing the disks check out our <a href="{{ url }}">resize how-to.</a>
{% endblocktrans %}
</div>
{% endif %}
{% if user.is_superuser %}
<hr/>
......
......@@ -7,27 +7,6 @@
{% block content %}
<div class="row" id="resize-help">
<div class="col-lg-12">
<style>
#resize-help table {
background-color: #f5f5f5;
}
#resize-help .panel {
padding: 2px 20px;
background-color: #f5f5f5;
margin: 20px 0px;
}
#resize-help ol li {
margin-top: 15px;
}
#resize-help img {
display: block;
margin: 15px 0 5px 0;
}
#resize-help pre {
margin-top: 5px;
}
</style>
<div class="page-header">
<h1 id="disk-linux">
<i class="fa fa-linux"></i>
......@@ -59,7 +38,7 @@
<strong>/dev/mapper/cloud–x–vg-root</strong>.
{% endblocktrans %}
<div class="panel panel-default">
<div class="panel panel-default table-responsive">
<table class="table">
<thead>
<tr>
......@@ -196,7 +175,7 @@
This will show something similar:
{% endblocktrans %}
<div class="panel panel-default">
<div class="panel panel-default table-responsive">
<table class="table">
<thead>
<tr>
......@@ -295,7 +274,7 @@
<p>{% trans "Save and exit: Press <strong>w</strong>." %}</p>
<p>{% trans "If you list the partitions again, you will see the difference:" %}</p>
<div class="panel panel-default">
<div class="panel panel-default table-responsive">
<table class="table">
<thead>
<tr>
......@@ -407,7 +386,7 @@
{% endblocktrans %}
</p>
<div class="panel panel-default">
<div class="panel panel-default table-responsive">
<table class="table">
<thead>
<tr>
......@@ -514,25 +493,25 @@
Click on the Start menu, and type: <code>disk management</code>.
Click the <code>Create and format hard disk partitions</code>
{% endblocktrans %}
<img src="{% static "dashboard/img/resize/2.png" %}" alt="alt " title="">
<img src="{% static "dashboard/img/resize/2.png" %}" alt="{% trans "Start menu" %}" class="img-responsive">
</li>
<li>
{% trans "Currently you can’t see the extended size." %}
<img src="{% static "dashboard/img/resize/3.png" %}" alt="alt " title="">
<img src="{% static "dashboard/img/resize/3.png" %}" alt="{% trans "Disk Management" %}" class="img-responsive">
</li>
<li>
{% blocktrans %}
To update the disk information, click <code>Rescan Disks</code> on the <code>Action</code> menu.
{% endblocktrans %}
<img src="{% static "dashboard/img/resize/4.png" %}" alt="alt " title="">
<img src="{% static "dashboard/img/resize/4.png" %}" alt="{% trans "Rescan Disks" %}" class="img-responsive">
</li>
<li>
{% trans "After scanning Unallocated space appeared." %}
<img src="{% static "dashboard/img/resize/5.png" %}" alt="alt " title="">
<img src="{% static "dashboard/img/resize/5.png" %}" alt="{% trans "New unallocated space" %}" class="img-responsive">
</li>
<li>
{% trans "To extend the C drive, right click on it, and select <code>Extend Volume</code>." %}
<img src="{% static "dashboard/img/resize/6.png" %}" alt="alt " title="">
<img src="{% static "dashboard/img/resize/6.png" %}" alt="{% trans "Extend Volume..." %}" class="img-responsive">
<pre>{% trans "You can also create a new partition from the unallocated space." %}</pre>
</li>
<li>
......@@ -540,14 +519,14 @@
In the wizard you can change, how much space will you using from the unallocated space.
The default is to use all, so press <kbd>Next</kbd>,<kbd>Next</kbd>,<kbd>Finish</kbd>.
{% endblocktrans %}
<img src="{% static "dashboard/img/resize/7_1.png" %}" alt="" title="">
<img src="{% static "dashboard/img/resize/7_2.png" %}" alt="" title="">
<img src="{% static "dashboard/img/resize/7_3.png" %}" alt="" title="">
<img src="{% static "dashboard/img/resize/7_1.png" %}" alt="{% trans "Extend Volume Wizard" %}" class="img-responsive">
<img src="{% static "dashboard/img/resize/7_2.png" %}" alt="{% trans "Next" %}" class="img-responsive">
<img src="{% static "dashboard/img/resize/7_3.png" %}" alt="{% trans "Finish" %}" class="img-responsive">
</li>
<li>
{% trans "Your partition is now bigger." %}
<img src="{% static "dashboard/img/resize/8_1.png" %}" alt="alt " title="">
<img src="{% static "dashboard/img/resize/8_2.png" %}" alt="alt " title="">
<img src="{% static "dashboard/img/resize/8_1.png" %}" alt="{% trans "Bigger partition" %}" class="img-responsive">
<img src="{% static "dashboard/img/resize/8_2.png" %}" alt="{% trans "More free space" %}" class="img-responsive">
</li>
</ol>
</div><!-- .col-lg-12 -->
......
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