Bug #3956: Improve instantiate formatting for medium and small screens

src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs/html.hbs

@@ -9,17 +9,17 @@
         {{{tip (tr "Amount of RAM required for the VM, in Megabytes.")}}}
       </label>
     </div>
-    <div class="large-8 columns memory_slider_container">
+    <div class="medium-8 columns memory_slider_container">
       <div id="memory_slider" class="range-slider radius" data-slider data-options="start: 0; end: 409600; step: 12800;">
         <span class="range-slider-handle"></span>
         <span class="range-slider-active-segment"></span>
         <input type="hidden">
       </div>
     </div>
-    <div class="large-2 columns">
+    <div class="medium-2 small-6 columns">
       <input type="text" id="MEMORY_TMP" name="memory_tmp" size="4" />
     </div>
-    <div class="large-2 columns">
+    <div class="medium-2 small-6 columns">
       <select id="memory_unit" name="MEMORY_UNIT">
         <option value="MB">{{tr "MB"}}</option>
         <option value="GB">{{tr "GB"}}</option>
@@ -35,14 +35,14 @@
         {{{tip (tr "Percentage of CPU divided by 100 required for the Virtual Machine. Half a processor is written 0.5.")}}}
       </label>
     </div>
-    <div class="large-10 columns">
+    <div class="large-10 medium-10 columns">
       <div id="cpu_slider" class="range-slider radius" data-slider data-options="start: 0; end: 1600; step: 50;">
         <span class="range-slider-handle"></span>
         <span class="range-slider-active-segment"></span>
         <input type="hidden">
       </div>
     </div>
-    <div class="large-2 columns">
+    <div class="large-2 medium-2 columns">
       <input type="text" wizard_field="CPU" id="CPU" name="cpu"/>
     </div>
   </div>
@@ -57,17 +57,16 @@
         {{{tip (tr "Number of virtual cpus. This value is optional, the default hypervisor behavior is used, usually one virtual CPU.")}}}
       </label>
     </div>
-    <div class="large-10 columns">
+    <div class="large-10 medium-10 columns">
       <div id="vcpu_slider" class="range-slider radius" data-slider data-options="start: 100; end: 1600; step: 100;">
         <span class="range-slider-handle"></span>
         <span class="range-slider-active-segment"></span>
         <input type="hidden">
       </div>
     </div>
-    <div class="large-2 columns">
+    <div class="large-2 medium-2 columns">
       <input type="text" wizard_field="VCPU" id="VCPU" name="vcpu"/>
     </div>
   </div>
-  <div class="large-5 columns"></div>
 </div>
 {{/advancedSection}}

src/sunstone/public/app/tabs/templates-tab/form-panels/instantiate/html.hbs

@@ -4,7 +4,7 @@
     </div>
   </div>
   <div class="row nameContainer">
-    <div class="large-4 columns">
+    <div class="medium-4 columns">
       <label for="vm_name">
         {{tr "VM Name"}}
         <span class="tip">
@@ -13,7 +13,7 @@
       </label>
       <input type="text" name="vm_name" id="vm_name" />
     </div> 
-    <div class="large-4 columns">
+    <div class="medium-4 columns">
       <label for="vm_n_times">
         {{tr "Number of instances"}}
         <span class="tip">
@@ -22,7 +22,7 @@
       </label>
       <input type="text" name="vm_n_times" id="vm_n_times" value="1">
     </div>
-    <div class="large-4 columns">
+    <div class="medium-4 columns">
       <input type="checkbox" name="hold" id="hold"/>
       <label for="hold">
         {{tr "Hold"}}

src/sunstone/public/app/utils/nics-section.js

@@ -231,7 +231,7 @@ define(function(require) {
           '<dl class="accordion provision_nic_accordion" data-accordion="provision_accordion_' + provision_nic_accordion_id + '">' +
           '</dl>' +
           '<br>' +
-          '<a class="button large-12 medium radius secondary provision_add_network_interface" style="padding: 1rem; color: #555; ' + (hide_add_button ? 'display:none;' : '') + '">' +
+          '<a class="button radius secondary provision_add_network_interface" style="width:inherit; padding: 1rem; color: #555; ' + (hide_add_button ? 'display:none;' : '') + '">' +
             Locale.tr("Add another Network Interface") +
           '</a>' +
         '</div>' +

src/sunstone/public/app/utils/range-slider/html.hbs

@@ -4,13 +4,13 @@
     {{{tip tip}}}  
   {{/if}}
 </label>
-<div class="large-10 columns">
+<div class="medium-10 columns">
   <div id="{{name}}Slider" class="range-slider radius" data-slider data-options="start: {{start}}; end: {{end}}; step: {{step}};">
     <span class="range-slider-handle"></span>
     <span class="range-slider-active-segment"></span>
     <input type="hidden"></div>
 </div>
-<div class="large-2 columns">  
+<div class="medium-2 columns">
   {{#if unitLabel}}
     <div class="small-9 columns">
       <input type="text" id="{{name}}" name="{{name}}"/>