From c5f614b43c2331532ce206c14970b4a7af8bb100 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Mart=C3=ADn?= <cmartin@opennebula.org>
Date: Thu, 3 Sep 2015 11:27:42 +0200
Subject: [PATCH] Feature #3748: Better style for medium screens

---
 .../groups-tab/form-panels/create/wizard.hbs  |  4 +-
 .../app/tabs/groups-tab/panels/users/html.hbs |  2 +-
 .../create/wizard-tabs/context/html.hbs       |  6 +-
 .../create/wizard-tabs/general/html.hbs       | 22 +++----
 .../create/wizard-tabs/io/html.hbs            | 14 ++--
 .../create/wizard-tabs/network/html.hbs       |  2 +-
 .../wizard-tabs/network/nic-tab/html.hbs      | 30 ++++-----
 .../create/wizard-tabs/os/html.hbs            | 28 ++++----
 .../create/wizard-tabs/other/html.hbs         | 10 +--
 .../wizard-tabs/storage/disk-tab/html.hbs     | 66 +++++++++----------
 .../vdcs-tab/form-panels/create/wizard.hbs    |  4 +-
 .../app/tabs/vms-tab/panels/capacity/html.hbs |  4 +-
 .../public/app/tabs/vms-tab/panels/network.js |  8 +--
 src/sunstone/public/app/utils/accounting.js   | 10 +--
 .../app/utils/custom-tags-table/html.hbs      |  2 +-
 .../public/app/utils/showback/html.hbs        |  6 +-
 16 files changed, 109 insertions(+), 109 deletions(-)

diff --git a/src/sunstone/public/app/tabs/groups-tab/form-panels/create/wizard.hbs b/src/sunstone/public/app/tabs/groups-tab/form-panels/create/wizard.hbs
index 66056029d4..17c28c4964 100644
--- a/src/sunstone/public/app/tabs/groups-tab/form-panels/create/wizard.hbs
+++ b/src/sunstone/public/app/tabs/groups-tab/form-panels/create/wizard.hbs
@@ -26,13 +26,13 @@
     <div class="row">
       <div class="large-12 columns">
         <div class="row">
-          <div class="large-6 columns">
+          <div class="medium-6 columns">
             <label for="user_view_default">{{tr "Default Users View"}}
             </label>
             <select id="user_view_default">
             </select>
           </div>
-          <div class="large-6 columns">
+          <div class="medium-6 columns">
             <label for="admin_view_default">{{tr "Default Admin View"}}
             </label>
             <select id="admin_view_default">
diff --git a/src/sunstone/public/app/tabs/groups-tab/panels/users/html.hbs b/src/sunstone/public/app/tabs/groups-tab/panels/users/html.hbs
index 895ddcf15f..a29ec51811 100644
--- a/src/sunstone/public/app/tabs/groups-tab/panels/users/html.hbs
+++ b/src/sunstone/public/app/tabs/groups-tab/panels/users/html.hbs
@@ -1,6 +1,6 @@
 {{#isTabActionEnabled "groups-tab" "Group.edit_admins"}}
   <div class="row">
-    <div class="large-4 columns right">
+    <div class="large-4 small-10 columns right">
       <span>
         <button class="button secondary small radius" id="edit_admins_button" style="width: 100%;">
           <span class="fa fa-pencil-square-o"></span>{{tr "Edit administrators"}}
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/context/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/context/html.hbs
index b96f6c3d6c..291acc72ef 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/context/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/context/html.hbs
@@ -12,7 +12,7 @@
 <div class="tabs-content vertical">
   <div class="wizard_internal_tab active content" id="netsshTab">
     <div class="row">
-      <div class="columns large-6">
+      <div class="columns medium-6">
         <div class="row">
           <div class="columns large-12">
             <input type="checkbox" name="ssh_context" id="ssh_context" checked>
@@ -29,7 +29,7 @@
           </div>
         </div>
       </div>
-      <div class="columns large-6">
+      <div class="columns medium-6">
         <div class="row">
           <div class="columns large-12">
             <input type="checkbox" name="network_context" id="network_context" checked>
@@ -85,7 +85,7 @@
           <tfoot>
             <tr>
               <td colspan="4">
-                <a href="#" class="add_service_custom_attr button small large-12 secondary radius">
+                <a href="#" class="add_service_custom_attr button small small-12 secondary radius">
                   <i class="fa fa-plus"></i>
                   {{tr "Add another attribute"}}
                 </a>
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/html.hbs
index 85a4912236..a5fec54960 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/html.hbs
@@ -1,12 +1,12 @@
 <div class="row">
-  <div id="template_name_form"  class="large-6 columns">
+  <div id="template_name_form"  class="medium-6 columns">
     <label  for="NAME">
       {{tr "Name"}}
       {{{tip (tr "Name that the VM will get for description purposes.")}}}
       <input type="text" wizard_field="NAME" id="NAME" name="name" required/>
     </label>
   </div>
-  <div  id="template_hypervisor_form" class="large-6 columns">
+  <div  id="template_hypervisor_form" class="medium-6 columns">
     <label>{{tr "Hypervisor"}}</label>
     <input type="radio" wizard_field="HYPERVISOR" name="hypervisor" value="kvm" id="kvmRadio">
     <label for="kvmRadio">{{tr "KVM"}}</label>
@@ -19,16 +19,16 @@
   </div>
 </div>
 <div class="row">
-  <div class="large-6 columns">
+  <div class="medium-6 columns">
     <label  for="DESCRIPTION">
       {{tr "Description"}}
       {{{tip (tr "Description of the template")}}}
     </label>
     <textarea type="text" wizard_field="DESCRIPTION" id="DESCRIPTION" name="DESCRIPTION" style="height: 70px;"/>
   </div>
-  <div class="large-6 columns">
+  <div class="medium-6 columns">
     <div class="row">
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label  for="LOGO">
           {{tr "Logo"}}
           {{{tip (tr "Logo for the template.")}}}
@@ -40,19 +40,19 @@
           {{/each}}
         </select>
       </div>
-      <div id="template_create_logo" class="text-center large-6 columns" style="margin-bottom: 15px"></div>
+      <div id="template_create_logo" class="text-center medium-6 columns" style="margin-bottom: 15px"></div>
       <br></div>
   </div>
 </div>
 <div class="row hypervisor only_vcenter" style="display: none;">
-  <div class="large-6 columns">
+  <div class="medium-6 columns">
     <label  for="vcenter_template_uuid">
       {{tr "vCenter Template UUID"}}
       <span class="tip"></span>
     </label>
     <input type="text" id="vcenter_template_uuid" name="name"/>
   </div>
-  <div class="large-6 columns">
+  <div class="medium-6 columns">
     <div class="row">
       <div class="large-6 columns">
         <input type="checkbox" id="KEEP_DISKS" name="KEEP_DISKS"/>
@@ -72,21 +72,21 @@
     {{#isFeatureEnabled "showback"}}
     <fieldset>
       <legend>{{tr "Cost"}}</legend>
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <label  for="MEMORY_COST">
             {{tr "Memory"}}
             {{{tip (tr "Cost of each MB per hour")}}}
           </label>
           <input type="text" wizard_field="MEMORY_COST" id="MEMORY_COST" name="name"/>
         </div>
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <label  for="CPU_COST">
             {{tr "CPU"}}
             {{{tip (tr "Cost of each CPU per hour")}}}
           </label>
           <input type="text" wizard_field="CPU_COST" id="CPU_COST" name="name"/>
         </div>
-        <div class="large-6 columns left">
+        <div class="medium-6 columns left">
           <label  for="DISK_COST">
             {{tr "Disk"}}
             {{{tip (tr "Cost of each MB per hour")}}}
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/io/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/io/html.hbs
index 64871c128b..f37d53f6ed 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/io/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/io/html.hbs
@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="large-6 columns graphics">
+  <div class="medium-6 columns graphics">
     <fieldset>
       <legend>{{tr "Graphics"}}</legend>
       <div class="row">
@@ -24,14 +24,14 @@
         </div>
       </div>
       <div class="row">
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <label for="PORT">
             {{tr "Port"}}
             {{{tip (tr "Port for the VNC/SPICE server")}}}
           </label>
           <input type="text" wizard_field="PORT" id="PORT" name="port" />
         </div>
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <label for="KEYMAP">
             {{tr "Keymap"}}
             {{{tip (tr "Keyboard configuration locale to use in the VNC/SPICE display")}}}
@@ -59,18 +59,18 @@
       </div>
     </fieldset>
   </div>
-  <div class="large-6 columns inputs hypervisor only_kvm only_vmware only_xen">
+  <div class="medium-6 columns inputs hypervisor only_kvm only_vmware only_xen">
     <fieldset>
       <legend>{{tr "Inputs"}}</legend>
       <div class="row">
-        <div class="large-5 columns">
+        <div class="medium-5 columns">
           <select id="INPUT_TYPE" name="input_type">
             <option id="no_type" name="no_type" value=""></option>
             <option value="mouse">{{tr "Mouse"}}</option>
             <option value="tablet">{{tr "Tablet"}}</option>
           </select>
         </div>
-        <div class="large-4 columns">
+        <div class="medium-4 columns">
           <select id="INPUT_BUS" name="input_bus">
             <option id="no_input" name="no_input" value=""></option>
             <option value="usb">{{tr "USB"}}</option>
@@ -78,7 +78,7 @@
             <option value="xen">{{tr "XEN"}}</option>
           </select>
         </div>
-        <div class="large-3 columns">
+        <div class="medium-3 columns">
           <a href="#" class="button small radius secondary" id="add_input">{{tr "Add"}}</a>
         </div>
       </div>
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/html.hbs
index eda770cab5..3c1f1ad689 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/html.hbs
@@ -8,7 +8,7 @@
 </dl>
 <div class="tabs-content vertical" id="{{contentsContainerId}}"></div>
 <div class="row">
-  <div class="large-6 columns">
+  <div class="medium-6 columns">
     <label for="DEFAULT_MODEL">
       {{tr "Default model"}}
       {{{tip (tr "Default value for all NICs. Hardware that will emulate the network interface. With Xen this is the type attribute of the vif.")}}}
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/nic-tab/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/nic-tab/html.hbs
index db8d8c0df9..e365b70d3c 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/nic-tab/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/nic-tab/html.hbs
@@ -5,14 +5,14 @@
   <fieldset>
     <legend>{{tr "Choose Network"}}</legend>
     <div class="row">
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="NETWORK_ID">
           {{tr "ID"}}
           {{{tip (tr "Identifier of the virtual network from which to lease an IP and MAC address to this Virtual Machine network interface.")}}}
         </label>
         <input type="text" wizard_field="NETWORK_ID" id="NETWORK_ID" name="NETWORK_ID"/>
       </div>
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="NETWORK">
           {{tr "Name"}}
           {{{tip (tr "Name of the virtual network from which to lease an IP and MAC address to this Virtual Machine network interface.")}}}
@@ -21,14 +21,14 @@
       </div>
     </div>
     <div class="row">
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="NETWORK_UID">
           {{tr "User ID"}}
           {{{tip (tr "Identifier of the user owner of the virtual network from which to lease an IP and MAC address to this Virtual Machine network interface.")}}}
         </label>
         <input type="text" wizard_field="NETWORK_UID" id="NETWORK_UID" name="NETWORK_UID"/>
       </div>
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="NETWORK_UNAME">
           {{tr "User Name"}}
           {{{tip (tr "Name of the user owner of the virtual network from which to lease an IP and MAC address to this Virtual Machine network interface.")}}}
@@ -40,14 +40,14 @@
   <fieldset>
     <legend>{{tr "Override Network Values IPv4"}}</legend>
     <div class="row">
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="IP">
           {{tr "IP"}}
           {{{tip (tr "Request an specific IP from the Network")}}}
         </label>
         <input type="text" wizard_field="IP" id="IP" name="IP" size="3" />
       </div>
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="MAC">
           {{tr "MAC"}}
           {{{tip (tr "Set a specific MAC to the NIC")}}}
@@ -56,14 +56,14 @@
       </div>
     </div>
     <div class="row">
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="NETWORK_MASK">
           {{tr "Network Mask"}}
           {{{tip (tr "Override the network mask of the network. For example, 255.255.255.0")}}}
         </label>
         <input type="text" wizard_field="NETWORK_MASK" id="NETWORK_MASK" name="NETWORK_MASK"/>
       </div>
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="NETWORK_ADDRESS">
           {{tr "Network Address"}}
           {{{tip (tr "Override the base network address. For example, 192.168.1.0")}}}
@@ -72,14 +72,14 @@
       </div>
     </div>
     <div class="row">
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="GATEWAY">
           {{tr "Gateway"}}
           {{{tip (tr "Override the Router of the network.")}}}
         </label>
         <input type="text" wizard_field="GATEWAY" id="GATEWAY" name="GATEWAY"/>
       </div>
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="DNS">
           {{tr "DNS"}}
           {{{tip (tr "Override the specific DNS for this network")}}}
@@ -88,7 +88,7 @@
       </div>
     </div>
     <div class="row">
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="SEARCH_DOMAIN">
           {{tr "Search Domain"}}
           {{{tip (tr "Override the Search Domain for this network.")}}}
@@ -100,14 +100,14 @@
   <fieldset>
     <legend>{{tr "Override Network Values IPv6"}}</legend>
     <div class="row">
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="IP6_GLOBAL">
           {{tr "IP6 Global"}}
           {{{tip (tr "Request an specific IP from the IPv6 Network")}}}
         </label>
         <input type="text" wizard_field="IP6_GLOBAL" id="IP6_GLOBAL" name="IP6_GLOBAL" size="3" />
       </div>
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="GATEWAY6">
           {{tr "GATEWAY6"}}
           {{{tip (tr "Override the Router of the IPv6 network.")}}}
@@ -116,7 +116,7 @@
       </div>
     </div>
     <div class="row">
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="CONTEXT_FORCE_IPV4">
           {{tr "Network Mask"}}
           {{{tip (tr "Override force IPv4 for this IPv6 network. Values: Yes or No.")}}}
@@ -128,7 +128,7 @@
   <fieldset>
     <legend>{{tr "Harware"}}</legend>
     <div class="row">
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="MODEL">
           {{tr "Model"}}
           {{{tip (tr "Hardware that will emulate this network interface. With Xen this is the type attribute of the vif.")}}}
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/os/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/os/html.hbs
index b5575f81c1..11582badd5 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/os/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/os/html.hbs
@@ -16,7 +16,7 @@
   <div class="tabs-content vertical">
     <div class="wizard_internal_tab active content" id="bootTab">
       <div class="row">
-        <div class="large-4 columns">
+        <div class="medium-4 columns">
           <label for="ARCH">
             {{tr "Arch"}}
             {{{tip (tr "CPU architecture to virtualization")}}}
@@ -27,7 +27,7 @@
             <option value="x86_64">x86_64</option>
           </select>
         </div>
-        <div class="large-8 columns hypervisor only_kvm">
+        <div class="medium-8 columns hypervisor only_kvm">
           <label for="MACHINE">
             {{tr "Machine type"}}
             {{{tip (tr "libvirt machine type, only for KVM")}}}
@@ -36,14 +36,14 @@
         </div>
       </div>
       <div class="row">
-        <div class="large-4 columns">
+        <div class="medium-4 columns">
           <label for="ROOT">
             {{tr "Root"}}
             {{{tip (tr "Device to be mounted as root")}}}
           </label>
           <input type="text" wizard_field="ROOT" id="ROOT" name="root"/>
         </div>
-        <div class="large-8 columns hypervisor only_vmware">
+        <div class="medium-8 columns hypervisor only_vmware">
           <label for="GUESTOS">
             {{tr "Guest OS"}}
             {{{tip (tr "Set the OS of the VM, only for VMware")}}}
@@ -58,7 +58,7 @@
       </div>
       <br>
       <div class="row">
-        <div class="large-4 columns">
+        <div class="medium-4 columns">
           <label for="BOOT_0">
             {{tr "1st Boot"}}
             {{{tip (tr "1st Boot device type")}}}
@@ -71,7 +71,7 @@
             <option value="network">{{tr "NETWORK"}}</option>
           </select>
         </div>
-        <div class="large-4 columns">
+        <div class="medium-4 columns">
           <label for="BOOT_1">
             {{tr "2nd Boot"}}
             {{{tip (tr "2nd Boot device type")}}}
@@ -84,7 +84,7 @@
             <option value="network">{{tr "NETWORK"}}</option>
           </select>
         </div>
-        <div class="large-4 columns">
+        <div class="medium-4 columns">
           <label for="BOOT_2">
             {{tr "3rd Boot"}}
             {{{tip (tr "3rd Boot device type")}}}
@@ -179,7 +179,7 @@
     </div>
     <div class="wizard_internal_tab content" id="featuresTab">
       <div class="row">
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <label for="ACPI">
             {{tr "ACPI"}}
             {{{tip (tr "Add support in the VM for Advanced Configuration and Power Interface (ACPI)")}}}
@@ -190,7 +190,7 @@
             <option value="no">{{tr "No"}}</option>
           </select>
         </div>
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <label for="PAE">
             {{tr "PAE"}}
             {{{tip (tr "Add support in the VM for Physical Address Extension (PAE)")}}}
@@ -203,7 +203,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <label for="APIC">
             {{tr "APIC"}}
             {{{tip (tr "Enables the advanced programmable IRQ management.")}}}
@@ -214,7 +214,7 @@
             <option value="no">{{tr "No"}}</option>
           </select>
         </div>
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <label for="HYPERV">
             {{tr "HYPERV"}}
             {{{tip (tr "Add support in the VM for hyper-v features (HYPERV)")}}}
@@ -227,7 +227,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="large-6 columns">
+        <div class="medium-6 columns">
           <label for="LOCALTIME">
             {{tr "Localtime"}}
             {{{tip (tr "The guest clock will be synchronized to the hosts configured timezone when booted.")}}}
@@ -238,7 +238,7 @@
             <option value="no">{{tr "No"}}</option>
           </select>
         </div>
-        <div class="large-6 columns hypervisor only_xen">
+        <div class="medium-6 columns hypervisor only_xen">
           <label for="DEVICE_MODEL">
             {{tr "Device model"}}
             {{{tip (tr "Used to change the IO emulator in Xen HVM. Only XEN.")}}}
@@ -247,7 +247,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="large-6 columns hypervisor only_vmware">
+        <div class="medium-6 columns hypervisor only_vmware">
           <label for="PCIBRIDGE">
             {{tr "PCI BRIDGE"}}
             {{{tip (tr " Adds a PCI Controller that provides bridge-to-bridge capability, only for VMware.")}}}
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/other/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/other/html.hbs
index 35d6cdfd59..9b17897feb 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/other/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/other/html.hbs
@@ -3,7 +3,7 @@
     <fieldset class="hypervisor only_xen only_kvm only_vmware">
       <legend>{{tr "RAW data"}}</legend>
       <div class="row">
-        <div class="large-4 columns">
+        <div class="medium-4 columns">
           <label for="raw_type">{{tr "TYPE"}}</label>
           <select id="raw_type" name="raw_type">
             <option value=""></option>
@@ -12,7 +12,7 @@
             <option value="vmware">{{tr "vmware"}}</option>
           </select>
         </div>
-        <div class="large-8 columns">
+        <div class="medium-8 columns">
           <label class="" for="raw_data">
             {{tr "DATA"}}
             {{{tip (tr "Raw data to be passed directly to the hypervisor")}}}
@@ -21,8 +21,8 @@
         </div>
       </div>
       <div id="data_vmx_div" class="row hidden">
-        <div class="large-4 columns"></div>
-        <div class="large-8 columns">
+        <div class="medium-4 columns"></div>
+        <div class="medium-8 columns">
           <label class="" for="raw_data_vmx">
             {{tr "DATA_VMX"}}
             {{{tip (tr "Raw data to be added directly to the .vmx file.")}}}
@@ -49,7 +49,7 @@
             <tfoot>
               <tr>
                 <td colspan="4">
-                  <a type="button" class="add_pci button small large-12 secondary radius">
+                  <a type="button" class="add_pci button small small-12 secondary radius">
                     <i class="fa fa-plus"></i> {{tr "Add PCI device"}}
                   </a>
                 </td>
diff --git a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/storage/disk-tab/html.hbs b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/storage/disk-tab/html.hbs
index 5cf047df68..571b6990a0 100644
--- a/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/storage/disk-tab/html.hbs
+++ b/src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/storage/disk-tab/html.hbs
@@ -13,14 +13,14 @@
   <fieldset>
     <legend>{{tr "Image"}}</legend>
     <div class="row">
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="IMAGE_ID">
           {{tr "ID"}}
           {{{tip (tr "Image ID to be used in the Virtual Image disk.")}}}
         </label>
         <input type="text" wizard_field="IMAGE_ID" id="IMAGE_ID" name="IMAGE_ID"/>
       </div>
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="IMAGE">
           {{tr "Name"}}
           {{{tip (tr "Name of the image to be used in the Virtual Image disk.")}}}
@@ -29,14 +29,14 @@
       </div>
     </div>
     <div class="row">
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="IMAGE_UID">
           {{tr "User ID"}}
           {{{tip (tr "Identifier of the user owner of the image to reduce ambiguity.")}}}
         </label>
         <input type="text" wizard_field="IMAGE_UID" id="IMAGE_UID" name="IMAGE_UID"/>
       </div>
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <label for="IMAGE_UNAME">
           {{tr "User Name"}}
           {{{tip (tr "Name of the user owner of the image to reduce ambiguity.")}}}
@@ -46,14 +46,14 @@
     </div>
   </fieldset>
   <div class="row">
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="TARGET">
         {{tr "Target"}}
         {{{tip (tr "Device to map image disk. If set, it will overwrite the default device mapping. Xen: Optional. KVM: Optional. VMWare: Optional")}}}
       </label>
       <input type="text" wizard_field="TARGET" id="TARGET" name="target"/>
     </div>
-    <div class="large-6 columns hypervisor only_xen only_kvm">
+    <div class="medium-6 columns hypervisor only_xen only_kvm">
       <label for="DRIVER">
         {{tr "Driver"}}
         {{{tip (tr "Specific image mapping driver. Xen: Optional (tap:aio:, file:). KVM: Optional (raw, qcow2). VMWare: Not supported")}}}
@@ -62,14 +62,14 @@
     </div>
   </div>
   <div class="row">
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="DEV_PREFIX">
         {{tr "Device Prefix"}}
         {{{tip (tr "Prefix for the emulated device this image will be mounted at. For instance, hd, sd, or vd for KVM virtio. If omitted, the dev_prefix attribute of the Image will be used. Xen: Optional. KVM: Optional. VMWare: Optional")}}}
       </label>
       <input type="text" wizard_field="DEV_PREFIX" id="DEV_PREFIX" name="DEV_PREFIX"/>
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="READONLY">
         {{tr "Read Only"}}
         {{{tip (tr "Set how the image is exposed by the hypervisor. Xen: Optional. KVM: Optional. VMWare: Optional")}}}
@@ -82,7 +82,7 @@
     </div>
   </div>
   <div class="row vm_param">
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="CACHE">
         {{tr "Cache"}}
         {{{tip (tr "Selects the cache mechanism for the disk.")}}}
@@ -97,7 +97,7 @@
         <option value="unsafe">{{tr "unsafe"}}</option>
       </select>
     </div>
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="IO">
         {{tr "IO"}}
         {{{tip (tr "Set IO policy.")}}}
@@ -108,7 +108,7 @@
         <option value="native">{{tr "native"}}</option>
       </select>
     </div>
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="DISCARD">
         {{tr "Discard"}}
         {{{tip (tr "Set DISCARD feature.")}}}
@@ -119,49 +119,49 @@
         <option value="unmap">{{tr "unmap"}}</option>
       </select>
     </div>
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="SIZE">
         {{tr "Size (MB)"}}
         {{{tip (tr "The size of the disk will be modified to match this size when the template is instantiated")}}}
       </label>
       <input wizard_field="SIZE" type="text" id="SIZE" name="SIZE" />
     </div>
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="TOTAL_BYTES_SEC">
         {{tr "Total Bytes Sec"}}
         {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="TOTAL_BYTES_SEC" type="text" id="TOTAL_BYTES_SEC" name="TOTAL_BYTES_SEC" />
     </div>
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="READ_BYTES_SEC">
         {{tr "Read Bytes Sec"}}
         {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="READ_BYTES_SEC" type="text" id="READ_BYTES_SEC" name="READ_BYTES_SEC" />
     </div>
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="WRITE_BYTES_SEC">
         {{tr "Write Bytes Sec"}}
         {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="WRITE_BYTES_SEC" type="text" id="WRITE_BYTES_SEC" name="WRITE_BYTES_SEC" />
     </div>
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="TOTAL_IOPS_SEC">
         {{tr "Total IOPS Sec"}}
         {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="TOTAL_IOPS_SEC" type="text" id="TOTAL_IOPS_SEC" name="TOTAL_IOPS_SEC" />
     </div>
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="READ_IOPS_SEC">
         {{tr "Read IOPS Sec"}}
         {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="READ_IOPS_SEC" type="text" id="READ_IOPS_SEC" name="READ_IOPS_SEC" />
     </div>
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="WRITE_IOPS_SEC">
         {{tr "Write IOPS Sec"}}
         {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
@@ -173,7 +173,7 @@
 </div>
 <div id="disk_type" class="volatile" style="display: none;">
   <div class="row">
-    <div class="large-6 columns left">
+    <div class="medium-6 columns left">
       <label for="SIZE">
         {{tr "Size"}}
         {{{tip (tr "Size of the new disk in MB")}}}
@@ -182,7 +182,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="TYPE">
         {{tr "Type"}}
         {{{tip (tr "Disk type")}}}
@@ -192,7 +192,7 @@
         <option value="swap">{{tr "Swap"}}</option>
       </select>
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="FORMAT">
         {{tr "Format"}}
         {{{tip (tr "Filesystem type for the fs images")}}}
@@ -203,14 +203,14 @@
   <br>
   {{#advancedSection (tr "Advanced Options") }}
   <div class="row">
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="TARGET">
         {{tr "Target"}}
         {{{tip (tr "Device to map image disk. If set, it will overwrite the default device mapping. Xen: Optional. KVM: Optional. VMWare: Optional")}}}
       </label>
       <input wizard_field="TARGET" type="text"  id="TARGET" name="target"/>
     </div>
-    <div class="large-6 columns hypervisor only_xen only_kvm">
+    <div class="medium-6 columns hypervisor only_xen only_kvm">
       <label for="DRIVER">
         {{tr "Driver"}}
         {{{tip (tr "Specific image mapping driver. Xen: Optional (tap:aio:, file:). KVM: Optional (raw, qcow2). VMWare: Not supported")}}}
@@ -219,14 +219,14 @@
     </div>
   </div>
   <div class="row">
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="DEV_PREFIX">
         {{tr "Device Prefix"}}
         {{{tip (tr "Prefix for the emulated device this image will be mounted at. For instance, hd, sd, or vd for KVM virtio. If omitted, the dev_prefix attribute of the Image will be used. Xen: Optional. KVM: Optional. VMWare: Optional")}}}
       </label>
       <input wizard_field="DEV_PREFIX" type="text" id="DEV_PREFIX" name="DEV_PREFIX"/>
     </div>
-    <div class="large-6 columns">
+    <div class="medium-6 columns">
       <label for="READONLY">
         {{tr "Read Only"}}
         {{{tip (tr "Set how the image is exposed by the hypervisor. Xen: Optional. KVM: Optional. VMWare: Optional")}}}
@@ -239,7 +239,7 @@
     </div>
   </div>
   <div class="row  vm_param">
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="CACHE">
         {{tr "Cache"}}
         {{{tip (tr "Selects the cache mechanism for the disk.")}}}
@@ -254,7 +254,7 @@
         <option value="unsafe">{{tr "unsafe"}}</option>
       </select>
     </div>
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="IO">
         {{tr "IO"}}
         {{{tip (tr "Set IO policy.")}}}
@@ -265,42 +265,42 @@
         <option value="native">{{tr "native"}}</option>
       </select>
     </div>
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="TOTAL_BYTES_SEC">
         {{tr "Total Bytes Sec"}}
         {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="TOTAL_BYTES_SEC" type="text" id="TOTAL_BYTES_SEC" name="TOTAL_BYTES_SEC" />
     </div>
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="READ_BYTES_SEC">
         {{tr "Read Bytes Sec"}}
         {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="READ_BYTES_SEC" type="text" id="READ_BYTES_SEC" name="READ_BYTES_SEC" />
     </div>
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="WRITE_BYTES_SEC">
         {{tr "Write Bytes Sec"}}
         {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="WRITE_BYTES_SEC" type="text" id="WRITE_BYTES_SEC" name="WRITE_BYTES_SEC" />
     </div>
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="TOTAL_IOPS_SEC">
         {{tr "Total IOPS Sec"}}
         {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="TOTAL_IOPS_SEC" type="text" id="TOTAL_IOPS_SEC" name="TOTAL_IOPS_SEC" />
     </div>
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="READ_IOPS_SEC">
         {{tr "Read IOPS Sec"}}
         {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
       </label>
       <input wizard_field="READ_IOPS_SEC" type="text" id="READ_IOPS_SEC" name="READ_IOPS_SEC" />
     </div>
-    <div class="large-6 columns hypervisor only_kvm">
+    <div class="medium-6 columns hypervisor only_kvm">
       <label for="WRITE_IOPS_SEC">
         {{tr "Write IOPS Sec"}}
         {{{tip (tr "IO throttling attributes for the disk. They are specified in bytes or IOPS (IO Operations) and can be specified for the total (read+write) or specific for read or write. Total and read or write can not be used at the same time. By default these parameters are only allowed to be used by oneadmin.")}}}
diff --git a/src/sunstone/public/app/tabs/vdcs-tab/form-panels/create/wizard.hbs b/src/sunstone/public/app/tabs/vdcs-tab/form-panels/create/wizard.hbs
index 78ebb56cb4..2dcabe44e5 100644
--- a/src/sunstone/public/app/tabs/vdcs-tab/form-panels/create/wizard.hbs
+++ b/src/sunstone/public/app/tabs/vdcs-tab/form-panels/create/wizard.hbs
@@ -8,7 +8,7 @@
     <div id="vdc_create_tabs_content" class="tabs-content">
       <div class="content active" id="vdcCreateGeneralTab">
         <div class="row">
-          <div class="large-6 columns">
+          <div class="large-6 medium-8 columns">
             <label for="name" >{{tr "Name"}}:
               <span class="tip">{{tr "Name that the VDC will get for description purposes."}}</span>
             </label>
@@ -16,7 +16,7 @@
           </div>
         </div>
         <div class="row">
-          <div class="large-6 columns">
+          <div class="large-6 medium-8 columns">
             <label for="DESCRIPTION" >{{tr "Description"}}:
               <span class="tip">{{tr "Description of the VDC"}}</span>
             </label>
diff --git a/src/sunstone/public/app/tabs/vms-tab/panels/capacity/html.hbs b/src/sunstone/public/app/tabs/vms-tab/panels/capacity/html.hbs
index 99e759e7b1..1400dffd53 100644
--- a/src/sunstone/public/app/tabs/vms-tab/panels/capacity/html.hbs
+++ b/src/sunstone/public/app/tabs/vms-tab/panels/capacity/html.hbs
@@ -33,7 +33,7 @@
   </div>
 </div>
 <div class="row">
-  <div class="large-6 columns">
+  <div class="medium-6 columns">
     <div class="row text-center">
       <div class="large-12 columns">
         <h3 class="subheader">
@@ -51,7 +51,7 @@
       </div>
     </div>
   </div>
-  <div class="large-6 columns">
+  <div class="medium-6 columns">
     <div class="row text-center">
       <h3 class="subheader">
         <small>{{tr "REAL MEMORY"}}</small>
diff --git a/src/sunstone/public/app/tabs/vms-tab/panels/network.js b/src/sunstone/public/app/tabs/vms-tab/panels/network.js
index 10bb61b43e..c80001b4d3 100644
--- a/src/sunstone/public/app/tabs/vms-tab/panels/network.js
+++ b/src/sunstone/public/app/tabs/vms-tab/panels/network.js
@@ -120,7 +120,7 @@ define(function(require) {
     if (OpenNebulaVM.isNICGraphsSupported(that.element)) {
       html += '\
           <div class="row">\
-              <div class="large-6 columns">\
+              <div class="medium-6 columns">\
                 <div class="row text-center">\
                   <h3 class="subheader"><small>' + Locale.tr("NET RX") + '</small></h3>\
                 </div>\
@@ -136,7 +136,7 @@ define(function(require) {
                   </div>\
                 </div>\
               </div>\
-              <div class="large-6 columns">\
+              <div class="medium-6 columns">\
                 <div class="row text-center">\
                   <h3 class="subheader"><small>' + Locale.tr("NET TX") + '</small></h3>\
                 </div>\
@@ -152,7 +152,7 @@ define(function(require) {
                   </div>\
                 </div>\
               </div>\
-              <div class="large-6 columns">\
+              <div class="medium-6 columns">\
                 <div class="row text-center">\
                   <h3 class="subheader"><small>' + Locale.tr("NET DOWNLOAD SPEED") + '</small></h3>\
                 </div>\
@@ -168,7 +168,7 @@ define(function(require) {
                   </div>\
                 </div>\
               </div>\
-              <div class="large-6 columns">\
+              <div class="medium-6 columns">\
                 <div class="row text-center">\
                   <h3 class="subheader"><small>' + Locale.tr("NET UPLOAD SPEED") + '</small></h3>\
                 </div>\
diff --git a/src/sunstone/public/app/utils/accounting.js b/src/sunstone/public/app/utils/accounting.js
index 29235a85d5..d6e325269d 100644
--- a/src/sunstone/public/app/utils/accounting.js
+++ b/src/sunstone/public/app/utils/accounting.js
@@ -52,11 +52,11 @@ define(function(require) {
 
     var width = parseInt(12 / n_columns);
 
-    $("#acct_start_time_container", context).addClass("large-"+width);
-    $("#acct_end_time_container",   context).addClass("large-"+width);
-    $("#acct_group_by_container",   context).addClass("large-"+width);
-    $("#acct_owner_container",      context).addClass("large-"+width);
-    $("#acct_button_container",     context).addClass("large-"+width);
+    $("#acct_start_time_container", context).addClass("medium-"+width*2).addClass("large-"+width);
+    $("#acct_end_time_container",   context).addClass("medium-"+width*2).addClass("large-"+width);
+    $("#acct_group_by_container",   context).addClass("medium-"+width*2).addClass("large-"+width);
+    $("#acct_owner_container",      context).addClass("medium-"+width*2).addClass("large-"+width);
+    $("#acct_button_container",     context).addClass("medium-"+width*2).addClass("large-"+width);
 
     //--------------------------------------------------------------------------
     // Init start time to 1st of last month
diff --git a/src/sunstone/public/app/utils/custom-tags-table/html.hbs b/src/sunstone/public/app/utils/custom-tags-table/html.hbs
index b594662fae..8cffb3970a 100644
--- a/src/sunstone/public/app/utils/custom-tags-table/html.hbs
+++ b/src/sunstone/public/app/utils/custom-tags-table/html.hbs
@@ -13,7 +13,7 @@
       <tfoot>
         <tr>
           <td colspan="3">
-            <a type="button" class="add_custom_tag button small large-12 secondary radius">
+            <a type="button" class="add_custom_tag button small small-12 secondary radius">
               <i class="fa fa-plus"></i> {{tr "Add another attribute"}}
             </a>
           </td>
diff --git a/src/sunstone/public/app/utils/showback/html.hbs b/src/sunstone/public/app/utils/showback/html.hbs
index ad157afaf5..0b4f90cd7c 100644
--- a/src/sunstone/public/app/utils/showback/html.hbs
+++ b/src/sunstone/public/app/utils/showback/html.hbs
@@ -7,7 +7,7 @@
     <label for="showback_group_select">{{tr "Filter by group"}}</label>
     <div id="showback_group_select"/>
   </div>
-  <div id="showback_button_container" class="right medium-3 columns">
+  <div id="showback_button_container" class="right medium-4 columns">
     <button class="button radius success right large-12" id="showback_submit" type="button">
       {{tr "Get Showback"}}
     </button>
@@ -36,7 +36,7 @@
       <div class="large-12 columns graph_legend">
         <h3 class="subheader">{{tr "Showback"}}</h3>
       </div>
-      <div class="large-6 columns" style="overflow:auto">
+      <div class="medium-6 columns" style="overflow:auto">
         <table id="showback_datatable" class="datatable twelve">
           <thead>
             <tr>
@@ -54,7 +54,7 @@
           {{tr "Select a row to get detailed information of the month"}}
         </span>
       </div>
-      <div class="large-6 columns">
+      <div class="medium-6 columns">
         <div class="large-12 columns centered graph" id="showback_graph" style="height: 200px;">
         </div>
       </div>