dashboard: make resize how-to more responsive

circle/dashboard/static/dashboard/dashboard.less

@@ -1488,3 +1488,38 @@ textarea[name="new_members"] {
 .acl-table td:first-child {
 .acl-table td:first-child {
   text-align: center;
   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%;
+}

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

@@ -66,6 +66,17 @@
   {% endfor %}
   {% endfor %}
 </div>
 </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 %}
 {% if user.is_superuser %}
 <hr/>
 <hr/>
 
 

circle/templates/info/resize.html

@@ -7,27 +7,6 @@
 {% block content %}
 {% block content %}
 <div class="row" id="resize-help">
 <div class="row" id="resize-help">
   <div class="col-lg-12">
   <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">
     <div class="page-header">
       <h1 id="disk-linux">
       <h1 id="disk-linux">
         <i class="fa fa-linux"></i>
         <i class="fa fa-linux"></i>
@@ -59,7 +38,7 @@
         <strong>/dev/mapper/cloud–x–vg-root</strong>.
         <strong>/dev/mapper/cloud–x–vg-root</strong>.
         {% endblocktrans %}
         {% endblocktrans %}
 
 
-        <div class="panel panel-default">
+        <div class="panel panel-default table-responsive">
           <table class="table">
           <table class="table">
             <thead>
             <thead>
             <tr>
             <tr>
@@ -196,7 +175,7 @@
         This will show something similar:
         This will show something similar:
         {% endblocktrans %}
         {% endblocktrans %}
 
 
-        <div class="panel panel-default">
+        <div class="panel panel-default table-responsive">
           <table class="table">
           <table class="table">
             <thead>
             <thead>
             <tr>
             <tr>
@@ -295,7 +274,7 @@
         <p>{% trans "Save and exit: Press <strong>w</strong>." %}</p>
         <p>{% trans "Save and exit: Press <strong>w</strong>." %}</p>
         <p>{% trans "If you list the partitions again, you will see the difference:" %}</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">
           <table class="table">
             <thead>
             <thead>
               <tr>
               <tr>
@@ -407,7 +386,7 @@
       {% endblocktrans %}
       {% endblocktrans %}
     </p>
     </p>
 
 
-    <div class="panel panel-default">
+    <div class="panel panel-default table-responsive">
       <table class="table">
       <table class="table">
         <thead>
         <thead>
           <tr>
           <tr>
@@ -514,25 +493,25 @@
         Click on the Start menu, and type: <code>disk management</code>.
         Click on the Start menu, and type: <code>disk management</code>.
         Click the <code>Create and format hard disk partitions</code>
         Click the <code>Create and format hard disk partitions</code>
         {% endblocktrans %}
         {% 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>
       <li>
       <li>
         {% trans "Currently you can’t see the extended size." %}
         {% 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>
       <li>
       <li>
         {% blocktrans %}
         {% blocktrans %}
         To update the disk information, click <code>Rescan Disks</code> on the <code>Action</code> menu.
         To update the disk information, click <code>Rescan Disks</code> on the <code>Action</code> menu.
         {% endblocktrans %}
         {% 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>
       <li>
       <li>
         {% trans "After scanning Unallocated space appeared." %}
         {% 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>
       <li>
       <li>
         {% trans "To extend the C drive, right click on it, and select <code>Extend Volume</code>." %}
         {% 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>
         <pre>{% trans "You can also create a new partition from the unallocated space." %}</pre>
       </li>
       </li>
       <li>
       <li>
@@ -540,14 +519,14 @@
         In the wizard you can change, how much space will you using from the unallocated space.
         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>.
         The default is to use all, so press <kbd>Next</kbd>,<kbd>Next</kbd>,<kbd>Finish</kbd>.
         {% endblocktrans %}
         {% 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>
       <li>
       <li>
         {% trans "Your partition is now bigger." %}
         {% 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>
       </li>
     </ol>
     </ol>
   </div><!-- .col-lg-12 -->
   </div><!-- .col-lg-12 -->