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}