Merge pull request #211 from rhamilto/results-styling

Improving display of binding status message

dist/less/_bind-service.less

@@ -52,23 +52,52 @@
 }
 
 .results-message {
-  line-height: 1.4;
-  margin-top: 0;
+  flex: 1 1 0%; // IE
   padding-left: 10px;
-  strong {
-    .word-break();
+  @media(min-width: @screen-sm-min) {
+    padding-left: 15px;
   }
+  h3,
+  .h3 {
+    font-size: 15px;
+    line-height: 1.4;
+    margin-bottom: 0;
+    margin-top: 0;
+    @media(min-width: @screen-sm-min) {
+      font-size: 20px;
+      font-weight: 300;
+    }
+    strong {
+      font-weight: 600;
+      .word-break();
+    }
+  }
+  .results-status-unknown & {
+    padding-left: 0;
+  }
+}
+
+.results-message-details {
+  font-style: italic;
+  margin-bottom: 0;
 }
 
 .results-status {
+  align-items: center;
   display: flex;
-  font-size: 16px;
+  margin-bottom: 15px;
+  .fa,
   .pficon {
-    margin-top: 3px;
+    font-size: 24px;
+    @media(min-width: @screen-sm-min) {
+      font-size: 32px;
+    }
   }
-  .spinner.spinner-sm {
-    height: 16px;
-    margin: 3px 0 0;
-    width: 16px;
+  // make fa-clock-o slightly bigger so it matches pficon-ok, pficon-error-circle-o
+  .fa-clock-o {
+    font-size: 30px;
+    @media(min-width: @screen-sm-min) {
+      font-size: 36px;
+    }
   }
 }

dist/origin-web-common-ui.js

@@ -93,32 +93,37 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
   $templateCache.put('src/components/binding/bindResults.html',
     "<div ng-if=\"!ctrl.error && !(ctrl.binding | isBindingFailed)\">\n" +
     "  <div ng-if=\"ctrl.binding && !(ctrl.binding | isBindingReady)\" class=\"results-status\">\n" +
-    "    <span class=\"spinner spinner-sm\" aria-hidden=\"true\"></span>\n" +
+    "    <span class=\"fa fa-clock-o text-muted\" aria-hidden=\"true\"></span>\n" +
     "    <span class=\"sr-only\">Pending</span>\n" +
-    "    <h3 class=\"results-message\">\n" +
-    "      The binding is being created.\n" +
-    "    </h3>\n" +
+    "    <div class=\"results-message\">\n" +
+    "      <h3>\n" +
+    "        The binding is being created.\n" +
+    "      </h3>\n" +
+    "      <p class=\"results-message-details\">This may take several minutes.</p>\n" +
+    "    </div>\n" +
     "  </div>\n" +
     "  <div ng-if=\"(ctrl.binding | isBindingReady)\">\n" +
     "    <div class=\"results-status\">\n" +
     "      <span class=\"pficon pficon-ok\" aria-hidden=\"true\"></span>\n" +
     "      <span class=\"sr-only\">Success</span>\n" +
-    "      <h3 class=\"results-message\">\n" +
-    "        <span ng-if=\"ctrl.bindType === 'application'\">\n" +
-    "          <strong>{{ctrl.serviceToBind}}</strong> has been bound to\n" +
-    "          <strong>{{ctrl.applicationToBind}}</strong> successfully.\n" +
-    "        </span>\n" +
-    "        <span ng-if=\"ctrl.bindType !== 'application'\">\n" +
-    "          <strong>{{ctrl.serviceToBind}}</strong> binding created successfully.\n" +
-    "        </span>\n" +
-    "      </h3>\n" +
-    "    </div>\n" +
-    "    <div class=\"sub-title\">\n" +
-    "      The binding operation created the secret\n" +
-    "      <a ng-if=\"ctrl.secretHref\" ng-href=\"{{ctrl.secretHref}}\">{{ctrl.binding.spec.secretName}}</a>\n" +
-    "      <span ng-if=\"!ctrl.secretHref\">{{ctrl.binding.spec.secretName}}</span>\n" +
-    "      that you may need to reference in your application.\n" +
-    "      <span ng-if=\"ctrl.showPodPresets\">Its data will be available to your application as environment variables.</span>\n" +
+    "      <div class=\"results-message\">\n" +
+    "        <h3>\n" +
+    "          <span ng-if=\"ctrl.bindType === 'application'\">\n" +
+    "            <strong>{{ctrl.serviceToBind}}</strong> has been bound to\n" +
+    "            <strong>{{ctrl.applicationToBind}}</strong> successfully.\n" +
+    "          </span>\n" +
+    "          <span ng-if=\"ctrl.bindType !== 'application'\">\n" +
+    "            The binding <strong>{{ctrl.serviceToBind}}</strong> has been created successfully.\n" +
+    "          </span>\n" +
+    "        </h3>\n" +
+    "        <p class=\"results-message-details\">\n" +
+    "          The binding operation created the secret\n" +
+    "          <a ng-if=\"ctrl.secretHref\" ng-href=\"{{ctrl.secretHref}}\">{{ctrl.binding.spec.secretName}}</a>\n" +
+    "          <span ng-if=\"!ctrl.secretHref\">{{ctrl.binding.spec.secretName}}</span>\n" +
+    "          that you may need to reference in your application.\n" +
+    "          <span ng-if=\"ctrl.showPodPresets\">Its data will be available to your application as environment variables.</span>\n" +
+    "        </p>\n" +
+    "      </div>\n" +
     "    </div>\n" +
     "    <div class=\"alert alert-info results-info\" ng-if=\"ctrl.bindType === 'application'\">\n" +
     "      <span class=\"pficon pficon-info\" aria-hidden=\"true\"></span>\n" +
@@ -131,9 +136,11 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
     "  <div class=\"results-status\">\n" +
     "    <span class=\"pficon pficon-error-circle-o text-danger\" aria-hidden=\"true\"></span>\n" +
     "    <span class=\"sr-only\">Error</span>\n" +
-    "    <h3 class=\"results-message\">\n" +
-    "      The binding could not be created.\n" +
-    "    </h3>\n" +
+    "    <div class=\"results-message\">\n" +
+    "      <h3>\n" +
+    "        The binding could not be created.\n" +
+    "      </h3>\n" +
+    "    </div>\n" +
     "  </div>\n" +
     "  <div ng-if=\"ctrl.error\" class=\"sub-title\">\n" +
     "    <span ng-if=\"ctrl.error.data.message\">\n" +

dist/origin-web-common.css

@@ -63,27 +63,65 @@
   margin-top: 30px;
 }
 .results-message {
+  flex: 1 1 0%;
+  padding-left: 10px;
+}
+@media (min-width: 768px) {
+  .results-message {
+    padding-left: 15px;
+  }
+}
+.results-message h3,
+.results-message .h3 {
+  font-size: 15px;
   line-height: 1.4;
+  margin-bottom: 0;
   margin-top: 0;
-  padding-left: 10px;
 }
-.results-message strong {
+@media (min-width: 768px) {
+  .results-message h3,
+  .results-message .h3 {
+    font-size: 20px;
+    font-weight: 300;
+  }
+}
+.results-message h3 strong,
+.results-message .h3 strong {
+  font-weight: 600;
   word-wrap: break-word;
   word-break: break-word;
   overflow-wrap: break-word;
   min-width: 0;
 }
+.results-status-unknown .results-message {
+  padding-left: 0;
+}
+.results-message-details {
+  font-style: italic;
+  margin-bottom: 0;
+}
 .results-status {
+  align-items: center;
   display: flex;
-  font-size: 16px;
+  margin-bottom: 15px;
 }
+.results-status .fa,
 .results-status .pficon {
-  margin-top: 3px;
+  font-size: 24px;
 }
-.results-status .spinner.spinner-sm {
-  height: 16px;
-  margin: 3px 0 0;
-  width: 16px;
+@media (min-width: 768px) {
+  .results-status .fa,
+  .results-status .pficon {
+    font-size: 32px;
+  }
+}
+.results-status .fa-clock-o {
+  font-size: 30px;
+}
+@media (min-width: 768px) {
+  .results-status .fa-clock-o {
+    font-size: 36px;
+  }
 }
 .delete-resource-modal {
   background-color: #f1f1f1;

dist/origin-web-common.js

@@ -264,32 +264,37 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
   $templateCache.put('src/components/binding/bindResults.html',
     "<div ng-if=\"!ctrl.error && !(ctrl.binding | isBindingFailed)\">\n" +
     "  <div ng-if=\"ctrl.binding && !(ctrl.binding | isBindingReady)\" class=\"results-status\">\n" +
-    "    <span class=\"spinner spinner-sm\" aria-hidden=\"true\"></span>\n" +
+    "    <span class=\"fa fa-clock-o text-muted\" aria-hidden=\"true\"></span>\n" +
     "    <span class=\"sr-only\">Pending</span>\n" +
-    "    <h3 class=\"results-message\">\n" +
-    "      The binding is being created.\n" +
-    "    </h3>\n" +
+    "    <div class=\"results-message\">\n" +
+    "      <h3>\n" +
+    "        The binding is being created.\n" +
+    "      </h3>\n" +
+    "      <p class=\"results-message-details\">This may take several minutes.</p>\n" +
+    "    </div>\n" +
     "  </div>\n" +
     "  <div ng-if=\"(ctrl.binding | isBindingReady)\">\n" +
     "    <div class=\"results-status\">\n" +
     "      <span class=\"pficon pficon-ok\" aria-hidden=\"true\"></span>\n" +
     "      <span class=\"sr-only\">Success</span>\n" +
-    "      <h3 class=\"results-message\">\n" +
-    "        <span ng-if=\"ctrl.bindType === 'application'\">\n" +
-    "          <strong>{{ctrl.serviceToBind}}</strong> has been bound to\n" +
-    "          <strong>{{ctrl.applicationToBind}}</strong> successfully.\n" +
-    "        </span>\n" +
-    "        <span ng-if=\"ctrl.bindType !== 'application'\">\n" +
-    "          <strong>{{ctrl.serviceToBind}}</strong> binding created successfully.\n" +
-    "        </span>\n" +
-    "      </h3>\n" +
-    "    </div>\n" +
-    "    <div class=\"sub-title\">\n" +
-    "      The binding operation created the secret\n" +
-    "      <a ng-if=\"ctrl.secretHref\" ng-href=\"{{ctrl.secretHref}}\">{{ctrl.binding.spec.secretName}}</a>\n" +
-    "      <span ng-if=\"!ctrl.secretHref\">{{ctrl.binding.spec.secretName}}</span>\n" +
-    "      that you may need to reference in your application.\n" +
-    "      <span ng-if=\"ctrl.showPodPresets\">Its data will be available to your application as environment variables.</span>\n" +
+    "      <div class=\"results-message\">\n" +
+    "        <h3>\n" +
+    "          <span ng-if=\"ctrl.bindType === 'application'\">\n" +
+    "            <strong>{{ctrl.serviceToBind}}</strong> has been bound to\n" +
+    "            <strong>{{ctrl.applicationToBind}}</strong> successfully.\n" +
+    "          </span>\n" +
+    "          <span ng-if=\"ctrl.bindType !== 'application'\">\n" +
+    "            The binding <strong>{{ctrl.serviceToBind}}</strong> has been created successfully.\n" +
+    "          </span>\n" +
+    "        </h3>\n" +
+    "        <p class=\"results-message-details\">\n" +
+    "          The binding operation created the secret\n" +
+    "          <a ng-if=\"ctrl.secretHref\" ng-href=\"{{ctrl.secretHref}}\">{{ctrl.binding.spec.secretName}}</a>\n" +
+    "          <span ng-if=\"!ctrl.secretHref\">{{ctrl.binding.spec.secretName}}</span>\n" +
+    "          that you may need to reference in your application.\n" +
+    "          <span ng-if=\"ctrl.showPodPresets\">Its data will be available to your application as environment variables.</span>\n" +
+    "        </p>\n" +
+    "      </div>\n" +
     "    </div>\n" +
     "    <div class=\"alert alert-info results-info\" ng-if=\"ctrl.bindType === 'application'\">\n" +
     "      <span class=\"pficon pficon-info\" aria-hidden=\"true\"></span>\n" +
@@ -302,9 +307,11 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
     "  <div class=\"results-status\">\n" +
     "    <span class=\"pficon pficon-error-circle-o text-danger\" aria-hidden=\"true\"></span>\n" +
     "    <span class=\"sr-only\">Error</span>\n" +
-    "    <h3 class=\"results-message\">\n" +
-    "      The binding could not be created.\n" +
-    "    </h3>\n" +
+    "    <div class=\"results-message\">\n" +
+    "      <h3>\n" +
+    "        The binding could not be created.\n" +
+    "      </h3>\n" +
+    "    </div>\n" +
     "  </div>\n" +
     "  <div ng-if=\"ctrl.error\" class=\"sub-title\">\n" +
     "    <span ng-if=\"ctrl.error.data.message\">\n" +

dist/scripts/templates.js

@@ -64,32 +64,37 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
   $templateCache.put('src/components/binding/bindResults.html',
     "<div ng-if=\"!ctrl.error && !(ctrl.binding | isBindingFailed)\">\n" +
     "  <div ng-if=\"ctrl.binding && !(ctrl.binding | isBindingReady)\" class=\"results-status\">\n" +
-    "    <span class=\"spinner spinner-sm\" aria-hidden=\"true\"></span>\n" +
+    "    <span class=\"fa fa-clock-o text-muted\" aria-hidden=\"true\"></span>\n" +
     "    <span class=\"sr-only\">Pending</span>\n" +
-    "    <h3 class=\"results-message\">\n" +
-    "      The binding is being created.\n" +
-    "    </h3>\n" +
+    "    <div class=\"results-message\">\n" +
+    "      <h3>\n" +
+    "        The binding is being created.\n" +
+    "      </h3>\n" +
+    "      <p class=\"results-message-details\">This may take several minutes.</p>\n" +
+    "    </div>\n" +
     "  </div>\n" +
     "  <div ng-if=\"(ctrl.binding | isBindingReady)\">\n" +
     "    <div class=\"results-status\">\n" +
     "      <span class=\"pficon pficon-ok\" aria-hidden=\"true\"></span>\n" +
     "      <span class=\"sr-only\">Success</span>\n" +
-    "      <h3 class=\"results-message\">\n" +
-    "        <span ng-if=\"ctrl.bindType === 'application'\">\n" +
-    "          <strong>{{ctrl.serviceToBind}}</strong> has been bound to\n" +
-    "          <strong>{{ctrl.applicationToBind}}</strong> successfully.\n" +
-    "        </span>\n" +
-    "        <span ng-if=\"ctrl.bindType !== 'application'\">\n" +
-    "          <strong>{{ctrl.serviceToBind}}</strong> binding created successfully.\n" +
-    "        </span>\n" +
-    "      </h3>\n" +
-    "    </div>\n" +
-    "    <div class=\"sub-title\">\n" +
-    "      The binding operation created the secret\n" +
-    "      <a ng-if=\"ctrl.secretHref\" ng-href=\"{{ctrl.secretHref}}\">{{ctrl.binding.spec.secretName}}</a>\n" +
-    "      <span ng-if=\"!ctrl.secretHref\">{{ctrl.binding.spec.secretName}}</span>\n" +
-    "      that you may need to reference in your application.\n" +
-    "      <span ng-if=\"ctrl.showPodPresets\">Its data will be available to your application as environment variables.</span>\n" +
+    "      <div class=\"results-message\">\n" +
+    "        <h3>\n" +
+    "          <span ng-if=\"ctrl.bindType === 'application'\">\n" +
+    "            <strong>{{ctrl.serviceToBind}}</strong> has been bound to\n" +
+    "            <strong>{{ctrl.applicationToBind}}</strong> successfully.\n" +
+    "          </span>\n" +
+    "          <span ng-if=\"ctrl.bindType !== 'application'\">\n" +
+    "            The binding <strong>{{ctrl.serviceToBind}}</strong> has been created successfully.\n" +
+    "          </span>\n" +
+    "        </h3>\n" +
+    "        <p class=\"results-message-details\">\n" +
+    "          The binding operation created the secret\n" +
+    "          <a ng-if=\"ctrl.secretHref\" ng-href=\"{{ctrl.secretHref}}\">{{ctrl.binding.spec.secretName}}</a>\n" +
+    "          <span ng-if=\"!ctrl.secretHref\">{{ctrl.binding.spec.secretName}}</span>\n" +
+    "          that you may need to reference in your application.\n" +
+    "          <span ng-if=\"ctrl.showPodPresets\">Its data will be available to your application as environment variables.</span>\n" +
+    "        </p>\n" +
+    "      </div>\n" +
     "    </div>\n" +
     "    <div class=\"alert alert-info results-info\" ng-if=\"ctrl.bindType === 'application'\">\n" +
     "      <span class=\"pficon pficon-info\" aria-hidden=\"true\"></span>\n" +
@@ -102,9 +107,11 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
     "  <div class=\"results-status\">\n" +
     "    <span class=\"pficon pficon-error-circle-o text-danger\" aria-hidden=\"true\"></span>\n" +
     "    <span class=\"sr-only\">Error</span>\n" +
-    "    <h3 class=\"results-message\">\n" +
-    "      The binding could not be created.\n" +
-    "    </h3>\n" +
+    "    <div class=\"results-message\">\n" +
+    "      <h3>\n" +
+    "        The binding could not be created.\n" +
+    "      </h3>\n" +
+    "    </div>\n" +
     "  </div>\n" +
     "  <div ng-if=\"ctrl.error\" class=\"sub-title\">\n" +
     "    <span ng-if=\"ctrl.error.data.message\">\n" +

src/components/binding/bindResults.html

 <div ng-if="!ctrl.error && !(ctrl.binding | isBindingFailed)">
   <div ng-if="ctrl.binding && !(ctrl.binding | isBindingReady)" class="results-status">
-    <span class="spinner spinner-sm" aria-hidden="true"></span>
+    <span class="fa fa-clock-o text-muted" aria-hidden="true"></span>
     <span class="sr-only">Pending</span>
-    <h3 class="results-message">
-      The binding is being created.
-    </h3>
+    <div class="results-message">
+      <h3>
+        The binding is being created.
+      </h3>
+      <p class="results-message-details">This may take several minutes.</p>
+    </div>
   </div>
   <div ng-if="(ctrl.binding | isBindingReady)">
     <div class="results-status">
       <span class="pficon pficon-ok" aria-hidden="true"></span>
       <span class="sr-only">Success</span>
-      <h3 class="results-message">
-        <span ng-if="ctrl.bindType === 'application'">
-          <strong>{{ctrl.serviceToBind}}</strong> has been bound to
-          <strong>{{ctrl.applicationToBind}}</strong> successfully.
-        </span>
-        <span ng-if="ctrl.bindType !== 'application'">
-          <strong>{{ctrl.serviceToBind}}</strong> binding created successfully.
-        </span>
-      </h3>
-    </div>
-    <div class="sub-title">
-      The binding operation created the secret
-      <a ng-if="ctrl.secretHref" ng-href="{{ctrl.secretHref}}">{{ctrl.binding.spec.secretName}}</a>
-      <span ng-if="!ctrl.secretHref">{{ctrl.binding.spec.secretName}}</span>
-      that you may need to reference in your application.
-      <span ng-if="ctrl.showPodPresets">Its data will be available to your application as environment variables.</span>
+      <div class="results-message">
+        <h3>
+          <span ng-if="ctrl.bindType === 'application'">
+            <strong>{{ctrl.serviceToBind}}</strong> has been bound to
+            <strong>{{ctrl.applicationToBind}}</strong> successfully.
+          </span>
+          <span ng-if="ctrl.bindType !== 'application'">
+            The binding <strong>{{ctrl.serviceToBind}}</strong> has been created successfully.
+          </span>
+        </h3>
+        <p class="results-message-details">
+          The binding operation created the secret
+          <a ng-if="ctrl.secretHref" ng-href="{{ctrl.secretHref}}">{{ctrl.binding.spec.secretName}}</a>
+          <span ng-if="!ctrl.secretHref">{{ctrl.binding.spec.secretName}}</span>
+          that you may need to reference in your application.
+          <span ng-if="ctrl.showPodPresets">Its data will be available to your application as environment variables.</span>
+        </p>
+      </div>
     </div>
     <div class="alert alert-info results-info" ng-if="ctrl.bindType === 'application'">
       <span class="pficon pficon-info" aria-hidden="true"></span>
@@ -38,9 +43,11 @@
   <div class="results-status">
     <span class="pficon pficon-error-circle-o text-danger" aria-hidden="true"></span>
     <span class="sr-only">Error</span>
-    <h3 class="results-message">
-      The binding could not be created.
-    </h3>
+    <div class="results-message">
+      <h3>
+        The binding could not be created.
+      </h3>
+    </div>
   </div>
   <div ng-if="ctrl.error" class="sub-title">
     <span ng-if="ctrl.error.data.message">

src/styles/_bind-service.less

@@ -52,23 +52,52 @@
 }
 
 .results-message {
-  line-height: 1.4;
-  margin-top: 0;
+  flex: 1 1 0%; // IE
   padding-left: 10px;
-  strong {
-    .word-break();
+  @media(min-width: @screen-sm-min) {
+    padding-left: 15px;
   }
+  h3,
+  .h3 {
+    font-size: 15px;
+    line-height: 1.4;
+    margin-bottom: 0;
+    margin-top: 0;
+    @media(min-width: @screen-sm-min) {
+      font-size: 20px;
+      font-weight: 300;
+    }
+    strong {
+      font-weight: 600;
+      .word-break();
+    }
+  }
+  .results-status-unknown & {
+    padding-left: 0;
+  }
+}
+
+.results-message-details {
+  font-style: italic;
+  margin-bottom: 0;
 }
 
 .results-status {
+  align-items: center;
   display: flex;
-  font-size: 16px;
+  margin-bottom: 15px;
+  .fa,
   .pficon {
-    margin-top: 3px;
+    font-size: 24px;
+    @media(min-width: @screen-sm-min) {
+      font-size: 32px;
+    }
   }
-  .spinner.spinner-sm {
-    height: 16px;
-    margin: 3px 0 0;
-    width: 16px;
+  // make fa-clock-o slightly bigger so it matches pficon-ok, pficon-error-circle-o
+  .fa-clock-o {
+    font-size: 30px;
+    @media(min-width: @screen-sm-min) {
+      font-size: 36px;
+    }
   }
 }