M #~: Fix memory input size (#119)

(cherry picked from commit 111d20ae0a0e85d48834e4d67baa8759d33f8dee)

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

@@ -223,9 +223,9 @@ define(function(require) {
     if (attr.type != "range"){
       $("div.memory_input_wrapper", context).addClass("large-6").addClass("medium-8");
     }
-
-    attr.visor = true;
-    UserInputs.insertAttributeInputMB(attr, $("div.memory_input", context));
+    
+    attr.visor = attr.type === "number";
+    UserInputs.insertAttributeInputMB(attr, $("div.memory_input", context), false);
 
     if (Config.isFeatureEnabled("instantiate_hide_cpu")){
       $(".vcpu_input input", context).prop("required", true);

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

@@ -24,12 +24,12 @@
 </h6>
 <div class="template-row" element-id="{{element.ID}}">
   <div class="row">
-    <div class="medium-2 small-12 columns">
+    <div class="large-2 small-12 columns">
       <span>
         <img src="{{element.TEMPLATE.LOGO}}">
       </span>
     </div>
-    <div class="medium-5 small-12 columns capacityContext{{element.ID}}" style="padding-top: 15px; padding-left: 35px">
+    <div class="large-5 medium-6 small-12 columns capacityContext{{element.ID}}" style="padding-top: 15px; padding-left: 35px">
       <fieldset>
         <legend>
           <i class="fas fa-laptop"></i> {{tr "Capacity"}}
@@ -43,7 +43,7 @@
         </div>
       </fieldset>
     </div>
-    <div class="medium-5 small-12 columns disksContext{{element.ID}}" style="padding-top: 15px"></div>
+    <div class="large-5 medium-6 small-12 columns disksContext{{element.ID}}" style="padding-top: 15px"></div>
   </div>
   <div class="row">
     <div class="medium-5 small-12 columns template_user_inputs{{element.ID}}"></div>

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

@@ -21,7 +21,7 @@
     <label for="input-{{sliderId}}">{{label}}</label>
   </div>
   {{/if}}
-  <div class="large-8 small-6 columns">
+  <div class="medium-6 small-7 columns">
     <input id="input-{{sliderId}}" type="range" class="uinput-slider"
       min="{{min}}" max="{{max}}" step="{{step}}"
       value="{{initial}}"
@@ -33,7 +33,7 @@
     {{/each}}
     </datalist>
   </div>
-  <div class="large-4 small-6 columns">
+  <div class="medium-6 small-5 columns">
     <input type="number" class="uinput-slider-val hide"
       min="{{min}}" max="{{max_value}}"
       value="{{initial}}"

src/sunstone/public/app/utils/user-inputs.js

@@ -712,28 +712,32 @@ define(function(require) {
    * @param  {object} attr structure as returned by parse
    * @param  {jQuery} div jQuery selector for the div to attach the html to
    */
-  function _insertAttributeInputMB(attr, div) {
+  function _insertAttributeInputMB(attr, div, inputUnit = true) {
     // Modified input for GB
     var attr_gb = $.extend({}, attr);
     if (attr.type == "range"){
       attr.tick_size = 1024;
     }
+
+    var selectInput = inputUnit
+      ? "<div class=\"input-group-button\">"+
+        "<select class=\"mb_input_unit\">" +
+          "<option value=\"MB\">"+Locale.tr("MB")+"</option>" +
+          "<option value=\"GB\">"+Locale.tr("GB")+"</option>" +
+          "<option value=\"TB\">"+Locale.tr("TB")+"</option>" +
+        "</select>" +
+      "</div>" : "<span style='margin-left:0.5rem'>MB</span>";
+
     div.html(
-      "<div class=\"input-group mb_input_wrapper\">"+
+      "<div class=\"input-group mb_input_wrapper\"" +
+        (!inputUnit && " style='display:flex;align-items:center;'") + ">"+
         "<div class=\"mb_input input-group-field\">" +
           _attributeInput(attr) +
-        "</div><div class=\"input-group-button\">"+
-          "<select class=\"mb_input_unit\">" +
-            "<option value=\"MB\">"+Locale.tr("MB")+"</option>" +
-            "<option value=\"GB\">"+Locale.tr("GB")+"</option>" +
-            "<option value=\"TB\">"+Locale.tr("TB")+"</option>" +
-          "</select>" +
-        "</div>"+
-      "</div>");
-    _setupAttributeInputMB(div);
+        "</div>" + selectInput + "</div>");
+    _setupAttributeInputMB(div, inputUnit);
   }
 
-  function _setupAttributeInputMB(context) {
+  function _setupAttributeInputMB(context, inputUnit) {
     var base = 1024;
     var baseCal = 1;
     var unit = "MB";
@@ -765,7 +769,7 @@ define(function(require) {
         $("input, select", contextElement).val(valueInMB);
         valueInUnit = valueInMB / baseCal;
       }
-      $("input.visor", contextElement).val(valueInUnit);
+      $("input.visor", contextElement).val(inputUnit ? valueInUnit : valueInMB);
       var contextUnit = contextElement.siblings(".input-group-button");
       $(".mb_input_unit", contextUnit).val(unit).trigger("change");
     }

src/sunstone/public/scss/app.scss

@@ -234,10 +234,24 @@ meter {
   color: $alert-color;
 }
 
+.memory_input .mb_input_wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.mb_input {
+  width: 100%;
+}
+
 .mb_input_unit {
   width: 4em;
 }
 
+span.mb_input_unit {
+  width: auto;
+  margin-left: 0.5em;
+}
+
 .superHide{
   display: none !important;
 }