From 9b85d2f487d5ca6a55f23c3776a77a0230e229c8 Mon Sep 17 00:00:00 2001
From: sg00dwin <sgoodwin@redhat.com>
Date: Mon, 30 Oct 2017 16:04:21 -0400
Subject: [PATCH] Follow-on updates from @jennyhaines
 https://github.com/openshift/origin-web-console/issues/2362#issuecomment-339710253

---
 app/styles/_kve.less                          | 25 +++++++++-
 app/styles/_tooltip.less                      |  5 ++
 .../directives/edit-environment-from.html     | 44 +++++++++---------
 .../edit-environment-variables.html           |  4 +-
 app/views/directives/key-value-editor.html    | 12 ++---
 dist/scripts/templates.js                     | 46 +++++++++----------
 dist/styles/main.css                          |  9 +++-
 7 files changed, 86 insertions(+), 59 deletions(-)

diff --git a/app/styles/_kve.less b/app/styles/_kve.less
index 37e168b314..0215cd05d3 100644
--- a/app/styles/_kve.less
+++ b/app/styles/_kve.less
@@ -125,11 +125,13 @@
     position: relative;
     table-layout: fixed;
     width: 100%;
-    @media(min-width: @screen-xs-min)  {
-      .environment-from-editor-button {
+    .environment-from-editor-button {
+      top: 26px; // position to align with config-map ui-select when stacked
+      @media(min-width: @screen-xs-min)  {
         float: left;
         padding: 0 5px;
         position: relative;
+        top: 0; // position when not stacked
         width: auto;
       }
     }
@@ -185,6 +187,25 @@
   }
 }
 
+.environment-from-editor-header {
+  &.config-map-header,
+  &.prefix-header {
+    @media(max-width: @screen-xxs-max) {
+      display: none;
+      width: 100%;
+    }
+    &.config-map-header-mobile,
+    &.prefix-header-mobile {
+      display: block;
+      margin-bottom: 0;
+      margin-top: 5px;
+      @media(min-width: @screen-xs-min) {
+        display: none;
+      }
+    }
+  }
+}
+
 .key-value-editor .key-value-editor-input,
 .key-value-editor-header,
 .environment-from-editor-header {
diff --git a/app/styles/_tooltip.less b/app/styles/_tooltip.less
index 025338c449..e24cca0445 100644
--- a/app/styles/_tooltip.less
+++ b/app/styles/_tooltip.less
@@ -2,6 +2,11 @@
 // Tooltips
 // --------------------------------------------------
 
+// TODO Go thru and apply consistantly across pages
+.tooltip-default-icon {
+  cursor: help;
+  font-size: @font-size-base - 1;
+}
 .tooltip-inner {
   .word-break(); // so that long, unbroken strings don't overflow
 }
diff --git a/app/views/directives/edit-environment-from.html b/app/views/directives/edit-environment-from.html
index df60bf26eb..de5616a01f 100644
--- a/app/views/directives/edit-environment-from.html
+++ b/app/views/directives/edit-environment-from.html
@@ -2,20 +2,17 @@
   <div
     ng-if="$ctrl.showHeader"
     class="environment-from-entry environment-from-editor-entry-header">
-    <div class="form-group environment-from-editor-header value-header">
-      <div class="input-group">
+    <div class="environment-from-editor-header config-map-header">
         Config Map/Secret
-      </div>
     </div>
-    <div class="form-group environment-from-editor-header value-header">
-      <div class="input-group"
-           ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
+    <div
+      class="environment-from-editor-header prefix-header"
+      ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
         Prefix
-        <small class="pficon pficon-help"
+        <small class="pficon pficon-help tooltip-default-icon"
                aria-hidden="true"
                data-toggle="tooltip"
-               data-original-title="Optional prefix added to each environment variable name."></small>
-      </div>
+               data-original-title="Optional prefix added to each environment variable name. A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."></small>
     </div>
   </div>
 
@@ -27,7 +24,12 @@
       ng-repeat="entry in $ctrl.envFromEntries"
       as-sortable-item>
 
-      <div class="form-group environment-from-input">
+      <div class="environment-from-input">
+        <div class="environment-from-editor-entry-header">
+          <div class="environment-from-editor-header config-map-header config-map-header-mobile">
+            Config Map/Secret
+          </div>
+        </div>
         <div ng-if="$ctrl.isEnvFromReadonly(entry) || !$ctrl.hasOptions()" class="faux-input-group">
           <div ng-if="!entry.configMapRef.name && !entry.secretRef.name">
             No config maps or secrets have been added as Environment From.
@@ -62,7 +64,16 @@
         </div>
       </div>
 
-      <div class="form-group environment-from-input prefix">
+      <div class="environment-from-input prefix">
+        <div
+          class="environment-from-editor-header prefix-header prefix-header-mobile"
+          ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
+            Prefix
+            <small class="pficon pficon-help tooltip-default-icon"
+                   aria-hidden="true"
+                   data-toggle="tooltip"
+                   data-original-title="Optional prefix added to each environment variable name. A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores."></small>
+        </div>
         <div class="environment-from-input"
              ng-if="!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()"
              ng-class="{ 'has-error': ($ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$invalid && $ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched) }">
@@ -79,15 +90,6 @@
             <span class="help-block key-validation-error"
                   ng-show="$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern">
               <span class="validation-text">Please enter a valid prefix.</span>
-              <span class="help action-inline">
-                <a
-                  aria-hidden="true"
-                  data-toggle="tooltip"
-                  data-placement="top"
-                  data-original-title="A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.">
-                  <span class="pficon pficon-help"></span>
-                </a>
-              </span>
             </span>
           </span>
         </div>
@@ -118,7 +120,7 @@
       </div>
     </div>
 
-    <div class="environment-from-entry form-group" ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
+    <div class="environment-from-entry" ng-if="!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()">
       <a
         href=""
         class="add-row-link"
diff --git a/app/views/directives/edit-environment-variables.html b/app/views/directives/edit-environment-variables.html
index d21923353a..73f9bb056e 100644
--- a/app/views/directives/edit-environment-variables.html
+++ b/app/views/directives/edit-environment-variables.html
@@ -34,9 +34,9 @@ <h3>Container {{container.name}}</h3>
       show-header>
     </key-value-editor>
 
-    <h4 class="section-label">
+    <h4>
       Environment From
-      <span class="pficon pficon-help"
+      <span class="pficon pficon-help tooltip-default-icon"
             aria-hidden="true"
             data-toggle="tooltip"
             data-original-title="Environment From lets you add all key-value pairs from a config map or secret as environment variables."></span>
diff --git a/app/views/directives/key-value-editor.html b/app/views/directives/key-value-editor.html
index 57a0464b4a..4396379f31 100644
--- a/app/views/directives/key-value-editor.html
+++ b/app/views/directives/key-value-editor.html
@@ -3,15 +3,11 @@
   <div
     ng-if="showHeader"
     class="key-value-editor-entry key-value-editor-entry-header">
-    <div class="form-group key-value-editor-header key-header">
-      <div class="input-group">
-        <span class="help-block">{{keyPlaceholder}}</span>
-      </div>
+    <div class="key-value-editor-header key-header">
+      {{keyPlaceholder}}
     </div>
-    <div class="form-group key-value-editor-header value-header">
-      <div class="input-group">
-        <span class="help-block">{{valuePlaceholder}}</span>
-      </div>
+    <div class="key-value-editor-header value-header">
+      {{valuePlaceholder}}
     </div>
   </div>
 
diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
index 5485a88953..1b4e586fb3 100644
--- a/dist/scripts/templates.js
+++ b/dist/scripts/templates.js
@@ -6696,21 +6696,22 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
   $templateCache.put('views/directives/edit-environment-from.html',
     "<ng-form name=\"$ctrl.editEnvironmentFromForm\" novalidate>\n" +
     "<div ng-if=\"$ctrl.showHeader\" class=\"environment-from-entry environment-from-editor-entry-header\">\n" +
-    "<div class=\"form-group environment-from-editor-header value-header\">\n" +
-    "<div class=\"input-group\">\n" +
+    "<div class=\"environment-from-editor-header config-map-header\">\n" +
     "Config Map/Secret\n" +
     "</div>\n" +
-    "</div>\n" +
-    "<div class=\"form-group environment-from-editor-header value-header\">\n" +
-    "<div class=\"input-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
+    "<div class=\"environment-from-editor-header prefix-header\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
     "Prefix\n" +
-    "<small class=\"pficon pficon-help\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Optional prefix added to each environment variable name.\"></small>\n" +
-    "</div>\n" +
+    "<small class=\"pficon pficon-help tooltip-default-icon\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Optional prefix added to each environment variable name. A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.\"></small>\n" +
     "</div>\n" +
     "</div>\n" +
     "<div ng-model=\"$ctrl.entries\" class=\"environment-from-editor\" as-sortable=\"$ctrl.dragControlListeners\">\n" +
     "<div class=\"environment-from-entry\" ng-class-odd=\"'odd'\" ng-class-even=\"'even'\" ng-repeat=\"entry in $ctrl.envFromEntries\" as-sortable-item>\n" +
-    "<div class=\"form-group environment-from-input\">\n" +
+    "<div class=\"environment-from-input\">\n" +
+    "<div class=\"environment-from-editor-entry-header\">\n" +
+    "<div class=\"environment-from-editor-header config-map-header config-map-header-mobile\">\n" +
+    "Config Map/Secret\n" +
+    "</div>\n" +
+    "</div>\n" +
     "<div ng-if=\"$ctrl.isEnvFromReadonly(entry) || !$ctrl.hasOptions()\" class=\"faux-input-group\">\n" +
     "<div ng-if=\"!entry.configMapRef.name && !entry.secretRef.name\">\n" +
     "No config maps or secrets have been added as Environment From.\n" +
@@ -6738,18 +6739,17 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "</div>\n" +
-    "<div class=\"form-group environment-from-input prefix\">\n" +
+    "<div class=\"environment-from-input prefix\">\n" +
+    "<div class=\"environment-from-editor-header prefix-header prefix-header-mobile\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
+    "Prefix\n" +
+    "<small class=\"pficon pficon-help tooltip-default-icon\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Optional prefix added to each environment variable name. A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.\"></small>\n" +
+    "</div>\n" +
     "<div class=\"environment-from-input\" ng-if=\"!$ctrl.isEnvFromReadonly(entry) && $ctrl.hasOptions()\" ng-class=\"{ 'has-error': ($ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$invalid && $ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched) }\">\n" +
     "<label for=\"envfrom-prefix-{{$index}}\" class=\"sr-only\">Prefix</label>\n" +
     "<input type=\"text\" class=\"form-control\" placeholder=\"Add prefix\" id=\"envfrom-prefix-{{$index}}\" name=\"envfrom-prefix-{{$index}}\" ng-model=\"entry.prefix\" ng-pattern=\"/^[a-zA-Z0-9_]+$/\">\n" +
     "<span ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$touched\">\n" +
     "<span class=\"help-block key-validation-error\" ng-show=\"$ctrl.editEnvironmentFromForm['envfrom-prefix-'+$index].$error.pattern\">\n" +
     "<span class=\"validation-text\">Please enter a valid prefix.</span>\n" +
-    "<span class=\"help action-inline\">\n" +
-    "<a aria-hidden=\"true\" data-toggle=\"tooltip\" data-placement=\"top\" data-original-title=\"A valid prefix is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.\">\n" +
-    "<span class=\"pficon pficon-help\"></span>\n" +
-    "</a>\n" +
-    "</span>\n" +
     "</span>\n" +
     "</span>\n" +
     "</div>\n" +
@@ -6762,7 +6762,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "</div>\n" +
-    "<div class=\"environment-from-entry form-group\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
+    "<div class=\"environment-from-entry\" ng-if=\"!$ctrl.isEnvFromReadonly() && $ctrl.hasOptions()\">\n" +
     "<a href=\"\" class=\"add-row-link\" role=\"button\" ng-click=\"$ctrl.onAddRow()\">Add ALL Values from Config Map or Secret</a>\n" +
     "</div>\n" +
     "</div>\n" +
@@ -6823,9 +6823,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "<key-value-editor ng-if=\"$ctrl.canIUpdate && !$ctrl.ngReadonly\" entries=\"container.env\" key-placeholder=\"Name\" value-placeholder=\"Value\" value-from-selector-options=\"$ctrl.valueFromObjects\" key-validator=\"[A-Za-z_][A-Za-z0-9_]*\" key-validator-error=\"Please enter a valid key.\" key-validator-error-tooltip=\"A valid environment variable name is an alphanumeric (a-z and 0-9) string beginning with a letter that may contain underscores.\" add-row-link=\"Add Value\" add-row-with-selectors-link=\"Add Value from Config Map or Secret\" show-header>\n" +
     "</key-value-editor>\n" +
-    "<h4 class=\"section-label\">\n" +
+    "<h4>\n" +
     "Environment From\n" +
-    "<span class=\"pficon pficon-help\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Environment From lets you add all key-value pairs from a config map or secret as environment variables.\"></span>\n" +
+    "<span class=\"pficon pficon-help tooltip-default-icon\" aria-hidden=\"true\" data-toggle=\"tooltip\" data-original-title=\"Environment From lets you add all key-value pairs from a config map or secret as environment variables.\"></span>\n" +
     "</h4>\n" +
     "<edit-environment-from entries=\"container.envFrom\" env-from-selector-options=\"$ctrl.valueFromObjects\" is-readonly=\"$ctrl.ngReadonly\" show-header>\n" +
     "</edit-environment-from>\n" +
@@ -7430,15 +7430,11 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
   $templateCache.put('views/directives/key-value-editor.html',
     "<ng-form name=\"forms.keyValueEditor\" novalidate ng-if=\"entries\">\n" +
     "<div ng-if=\"showHeader\" class=\"key-value-editor-entry key-value-editor-entry-header\">\n" +
-    "<div class=\"form-group key-value-editor-header key-header\">\n" +
-    "<div class=\"input-group\">\n" +
-    "<span class=\"help-block\">{{keyPlaceholder}}</span>\n" +
-    "</div>\n" +
-    "</div>\n" +
-    "<div class=\"form-group key-value-editor-header value-header\">\n" +
-    "<div class=\"input-group\">\n" +
-    "<span class=\"help-block\">{{valuePlaceholder}}</span>\n" +
+    "<div class=\"key-value-editor-header key-header\">\n" +
+    "{{keyPlaceholder}}\n" +
     "</div>\n" +
+    "<div class=\"key-value-editor-header value-header\">\n" +
+    "{{valuePlaceholder}}\n" +
     "</div>\n" +
     "</div>\n" +
     "<div ng-model=\"entries\" class=\"key-value-editor\" as-sortable=\"dragControlListeners\">\n" +
diff --git a/dist/styles/main.css b/dist/styles/main.css
index 28e1bb910e..b67657af78 100644
--- a/dist/styles/main.css
+++ b/dist/styles/main.css
@@ -5570,6 +5570,7 @@ td[role=presentation].arrow:after{content:"\2192"}
 .chromeless,.log-view{background-color:#101214}
 .tile-row .tile-title{text-align:center}
 .tile-row .tile-title h3{margin:0 20px}
+.tooltip-default-icon{cursor:help;font-size:12px}
 .console-os .page-header{border-color:#e4e4e4;padding:18px 20px 19px;margin:0 -20px}
 .console-os .page-header .actions{margin-top:0}
 .console-os .page-header h1{margin:0}
@@ -5907,7 +5908,8 @@ kubernetes-container-terminal .terminal-actions .spinner{top:5px}
 .environment-from-editor .environment-from-entry,.key-value-editor .environment-from-entry{display:table;margin-bottom:15px;padding-right:0;position:relative;table-layout:fixed;width:100%}
 @media (max-width:479px){.environment-from-editor .environment-from-entry,.key-value-editor .environment-from-entry{padding-right:52px}
 }
-@media (min-width:480px){.environment-from-editor .environment-from-entry .environment-from-editor-button,.key-value-editor .environment-from-entry .environment-from-editor-button{float:left;padding:0 5px;position:relative;width:auto}
+.environment-from-editor .environment-from-entry .environment-from-editor-button,.key-value-editor .environment-from-entry .environment-from-editor-button{top:26px}
+@media (min-width:480px){.environment-from-editor .environment-from-entry .environment-from-editor-button,.key-value-editor .environment-from-entry .environment-from-editor-button{float:left;padding:0 5px;position:relative;top:0;width:auto}
 }
 .environment-from-editor .environment-from-entry .environment-from-input,.key-value-editor .environment-from-entry .environment-from-input{float:left;margin-bottom:0;padding-right:5px;width:100%}
 @media (min-width:480px){.environment-from-editor .environment-from-entry .environment-from-input,.key-value-editor .environment-from-entry .environment-from-input{width:calc(50% - 26px)}
@@ -5922,6 +5924,11 @@ kubernetes-container-terminal .terminal-actions .spinner{top:5px}
 @media (min-width:992px){.environment-from-editor .key-value-editor-input .ui-select,.key-value-editor .key-value-editor-input .ui-select{float:left;width:50%}
 .environment-from-editor .key-value-editor-input .ui-select+.ui-select,.key-value-editor .key-value-editor-input .ui-select+.ui-select{padding-top:0;padding-left:5px}
 }
+@media (max-width:479px){.environment-from-editor-header.config-map-header,.environment-from-editor-header.prefix-header{display:none;width:100%}
+}
+.environment-from-editor-header.config-map-header.config-map-header-mobile,.environment-from-editor-header.config-map-header.prefix-header-mobile,.environment-from-editor-header.prefix-header.config-map-header-mobile,.environment-from-editor-header.prefix-header.prefix-header-mobile{display:block;margin-bottom:0;margin-top:5px}
+@media (min-width:480px){.environment-from-editor-header.config-map-header.config-map-header-mobile,.environment-from-editor-header.config-map-header.prefix-header-mobile,.environment-from-editor-header.prefix-header.config-map-header-mobile,.environment-from-editor-header.prefix-header.prefix-header-mobile{display:none}
+}
 .environment-from-editor-header,.key-value-editor .key-value-editor-input,.key-value-editor-header{float:left;margin-bottom:0;padding-right:5px;width:50%}
 .membership .content-pane,.membership .content-pane .col-add-role{width:100%}
 .environment-from-editor-entry-header,.key-value-editor-entry-header{padding-right:52px}