Update pipelines, secrets and membership page headers to be consisten…

…t with the rest of secondary level pages. Fixes #779 Fixes #780
openshift · Nov 2, 2016 · 7897cc5 · 7897cc5
1 parent 6ab1616
commit 7897cc5
Show file tree

Hide file tree

Showing 16 changed files with 70 additions and 65 deletions.
diff --git a/app/styles/_substructure.less b/app/styles/_substructure.less
@@ -80,7 +80,7 @@ html,body {
     }
   }
 }
-.header-light {
+.header-toolbar {
   background-color: @panel-light;
   border-bottom: 1px solid @page-header-border-color;
 }

diff --git a/app/views/browse/routes.html b/app/views/browse/routes.html
@@ -4,7 +4,7 @@
   <!-- Middle section -->
   <div class="middle-section">
     <div class="middle-container">
-      <div class="middle-header header-light">
+      <div class="middle-header header-toolbar">
         <div class="container-fluid">
           <div class="page-header page-header-bleed-right page-header-bleed-left">
             <div class="pull-right" ng-if="project && ('routes' | canI : 'create')">

diff --git a/app/views/builds.html b/app/views/builds.html
@@ -4,7 +4,7 @@
   <!-- Middle section -->
   <div class="middle-section">
     <div class="middle-container">
-      <div class="middle-header header-light">
+      <div class="middle-header header-toolbar">
         <div class="container-fluid">
           <div class="page-header page-header-bleed-right page-header-bleed-left">
             <h1>Builds</h1>

diff --git a/app/views/deployments.html b/app/views/deployments.html
@@ -4,7 +4,7 @@
   <!-- Middle section -->
   <div class="middle-section">
     <div class="middle-container">
-      <div class="middle-header header-light">
+      <div class="middle-header header-toolbar">
         <div class="container-fluid">
           <div class="page-header page-header-bleed-right page-header-bleed-left">
             <h1>Deployments</h1>

diff --git a/app/views/images.html b/app/views/images.html
@@ -4,7 +4,7 @@
   <!-- Middle section -->
   <div class="middle-section">
     <div class="middle-container">
-      <div class="middle-header header-light">
+      <div class="middle-header header-toolbar">
         <div class="container-fluid">
           <div class="page-header page-header-bleed-right page-header-bleed-left">
             <h1>Image Streams</h1>

diff --git a/app/views/membership.html b/app/views/membership.html
@@ -5,30 +5,32 @@
     <div class="middle-container">
       <div class="middle-header">
         <div class="container-fluid">
-          <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
+          <div class="page-header page-header-bleed-right page-header-bleed-left">
+            <h1>
+              <a
+                class="pull-right btn btn-default"
+                href=""
+                ng-if="'rolebindings' | canI : 'update'"
+                ng-click="toggleEditMode()">
+                <span ng-if="!(mode.edit)">Edit Membership</span>
+                <span ng-if="mode.edit">Done Editing</span>
+              </a>
+               Membership
+               <span class="learn-more-inline">
+                 <a ng-href="{{'roles' | helpLink}}" target="_blank">
+                   Learn more <i class="fa fa-external-link"></i>
+                 </a>
+               </span>
+            </h1>
+            <alerts alerts="alerts"></alerts>
+          </div>
         </div>
       </div>
       <div class="middle-content" persist-tab-state>
         <div class="container-fluid">
           <div class="row">
             <div class="col-md-12">
-              <h1>
-                <a
-                  class="pull-right btn btn-default"
-                  href=""
-                  ng-if="'rolebindings' | canI : 'update'"
-                  ng-click="toggleEditMode()">
-                  <span ng-if="!(mode.edit)">Edit Membership</span>
-                  <span ng-if="mode.edit">Done Editing</span>
-                </a>
-                 Membership
-              </h1>
-              <span class="learn-more-block">
-                <a ng-href="{{'roles' | helpLink}}" target="_blank">
-                  Learn more <i class="fa fa-external-link"></i>
-                </a>
-              </span>
-              <alerts alerts="alerts"></alerts>
+
             </div>
           </div>
           <div  ng-if="!('rolebindings' | canI : 'list')">

diff --git a/app/views/monitoring.html b/app/views/monitoring.html
@@ -5,7 +5,7 @@
     <div class="middle-section monitoring-page"
          ng-class="{ 'sidebar-open': !renderOptions.collapseEventsSidebar }">
       <div class="middle-container">
-        <div class="middle-header header-light">
+        <div class="middle-header header-toolbar">
           <div class="container-fluid">
             <div class="page-header page-header-bleed-right page-header-bleed-left">
               <h1>

diff --git a/app/views/other-resources.html b/app/views/other-resources.html
@@ -4,7 +4,7 @@
   <!-- Middle section -->
   <div class="middle-section">
     <div class="middle-container">
-      <div class="middle-header header-light">
+      <div class="middle-header header-toolbar">
         <div class="container-fluid">
           <div class="page-header page-header-bleed-right page-header-bleed-left">
             <h1>Other Resources</h1>

diff --git a/app/views/pods.html b/app/views/pods.html
@@ -4,7 +4,7 @@
   <!-- Middle section -->
   <div class="middle-section">
     <div class="middle-container">
-      <div class="middle-header header-light">
+      <div class="middle-header header-toolbar">
         <div class="container-fluid">
           <div class="page-header page-header-bleed-right page-header-bleed-left">
             <h1>Pods</h1>

diff --git a/app/views/project.html b/app/views/project.html
@@ -4,7 +4,7 @@
   <!-- Middle section -->
   <div class="middle-section">
     <div class="middle-container">
-      <div class="middle-header header-light">
+      <div class="middle-header header-toolbar">
         <div class="container-fluid">
           <tasks></tasks>
 

diff --git a/app/views/quota.html b/app/views/quota.html
@@ -6,18 +6,19 @@
       <div class="middle-container">
         <div class="middle-header">
           <div class="container-fluid">
-            <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
+            <div class="page-header page-header-bleed-right page-header-bleed-left">
+              <h1>
+                <span ng-if="clusterQuotas | hashSize">Cluster </span>Quota
+              </h1>
+            </div>
             <alerts alerts="alerts"></alerts>
           </div>
         </div><!-- /middle-header-->
         <div class="middle-content">
           <div class="container-fluid">
             <div class="row">
               <div class="col-md-12">
-                <h1>
-                  <span ng-if="clusterQuotas | hashSize">Cluster </span>Quota
-                </h1>
-                <div ng-if="!(quotas | hashSize) && !(clusterQuotas | hashSize)">
+                <div ng-if="!(quotas | hashSize) && !(clusterQuotas | hashSize)" class="mar-top-xl">
                   <div class="help-block">{{quotaHelp}}</div>
                   <p><em ng-if="!quotas && !clusterQuotas">Loading...</em><em ng-if="quotas || clusterQuotas">There are no resource quotas set on this project.</em></p>
                 </div>
@@ -108,7 +109,7 @@ <h3 class="text-center">Memory <small>Limit</small></h3>
                   </div>
                 </div>
 
-                <h1 ng-if="(clusterQuotas | hashSize) && (quotas | hashSize)">Project Quota</h1>
+                <h2 ng-if="(clusterQuotas | hashSize) && (quotas | hashSize)">Project Quota</h2>
                 <div ng-repeat="quota in quotas | orderBy: 'metadata.name'" class="gutter-bottom">
                   <h2 ng-if="(quotas | hashSize) > 1">{{quota.metadata.name}}</h2>
                   <div ng-if="$first" class="help-block mar-bottom-md">{{quotaHelp}}</div>
@@ -191,7 +192,7 @@ <h3 class="text-center">Memory <small>Limit</small></h3>
                 </div>
 
                 <div class="limit-ranges-section">
-                  <h1>Limit Range</h1>
+                  <h2>Limit Range</h2>
                   <div ng-if="!(limitRanges | hashSize)">
                     <div class="help-block">{{limitRangeHelp}}</div>
                     <p><em>{{emptyMessageLimitRanges}}</em></p>

diff --git a/app/views/secrets.html b/app/views/secrets.html
@@ -4,7 +4,7 @@
   <!-- Middle section -->
   <div class="middle-section">
     <div class="middle-container">
-      <div class="middle-header header-light">
+      <div class="middle-header">
         <div class="container-fluid">
           <div class="page-header page-header-bleed-right page-header-bleed-left">
             <div class="pull-right" ng-if="project && ('secrets' | canI : 'create')">

diff --git a/app/views/services.html b/app/views/services.html
@@ -4,7 +4,7 @@
   <!-- Middle section -->
   <div class="middle-section">
     <div class="middle-container">
-      <div class="middle-header header-light">
+      <div class="middle-header header-toolbar">
         <div class="container-fluid">
           <div class="page-header page-header-bleed-right page-header-bleed-left">
             <h1>Services</h1>

diff --git a/app/views/storage.html b/app/views/storage.html
@@ -4,7 +4,7 @@
   <!-- Middle section -->
   <div class="middle-section">
     <div class="middle-container">
-      <div class="middle-header header-light">
+      <div class="middle-header header-toolbar">
         <div class="container-fluid">
           <div class="page-header page-header-bleed-right page-header-bleed-left">
             <h1>Storage</h1>

diff --git a/dist/scripts/templates.js b/dist/scripts/templates.js
@@ -3184,7 +3184,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "\n" +
     "<div class=\"middle-section\">\n" +
     "<div class=\"middle-container\">\n" +
-    "<div class=\"middle-header header-light\">\n" +
+    "<div class=\"middle-header header-toolbar\">\n" +
     "<div class=\"container-fluid\">\n" +
     "<div class=\"page-header page-header-bleed-right page-header-bleed-left\">\n" +
     "<div class=\"pull-right\" ng-if=\"project && ('routes' | canI : 'create')\">\n" +
@@ -3535,7 +3535,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "\n" +
     "<div class=\"middle-section\">\n" +
     "<div class=\"middle-container\">\n" +
-    "<div class=\"middle-header header-light\">\n" +
+    "<div class=\"middle-header header-toolbar\">\n" +
     "<div class=\"container-fluid\">\n" +
     "<div class=\"page-header page-header-bleed-right page-header-bleed-left\">\n" +
     "<h1>Builds</h1>\n" +
@@ -4562,7 +4562,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "\n" +
     "<div class=\"middle-section\">\n" +
     "<div class=\"middle-container\">\n" +
-    "<div class=\"middle-header header-light\">\n" +
+    "<div class=\"middle-header header-toolbar\">\n" +
     "<div class=\"container-fluid\">\n" +
     "<div class=\"page-header page-header-bleed-right page-header-bleed-left\">\n" +
     "<h1>Deployments</h1>\n" +
@@ -8314,7 +8314,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "\n" +
     "<div class=\"middle-section\">\n" +
     "<div class=\"middle-container\">\n" +
-    "<div class=\"middle-header header-light\">\n" +
+    "<div class=\"middle-header header-toolbar\">\n" +
     "<div class=\"container-fluid\">\n" +
     "<div class=\"page-header page-header-bleed-right page-header-bleed-left\">\n" +
     "<h1>Image Streams</h1>\n" +
@@ -8459,28 +8459,29 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"middle-container\">\n" +
     "<div class=\"middle-header\">\n" +
     "<div class=\"container-fluid\">\n" +
-    "<breadcrumbs breadcrumbs=\"breadcrumbs\"></breadcrumbs>\n" +
-    "</div>\n" +
-    "</div>\n" +
-    "<div class=\"middle-content\" persist-tab-state>\n" +
-    "<div class=\"container-fluid\">\n" +
-    "<div class=\"row\">\n" +
-    "<div class=\"col-md-12\">\n" +
+    "<div class=\"page-header page-header-bleed-right page-header-bleed-left\">\n" +
     "<h1>\n" +
     "<a class=\"pull-right btn btn-default\" href=\"\" ng-if=\"'rolebindings' | canI : 'update'\" ng-click=\"toggleEditMode()\">\n" +
     "<span ng-if=\"!(mode.edit)\">Edit Membership</span>\n" +
     "<span ng-if=\"mode.edit\">Done Editing</span>\n" +
     "</a>\n" +
     "Membership\n" +
-    "</h1>\n" +
-    "<span class=\"learn-more-block\">\n" +
+    "<span class=\"learn-more-inline\">\n" +
     "<a ng-href=\"{{'roles' | helpLink}}\" target=\"_blank\">\n" +
     "Learn more <i class=\"fa fa-external-link\"></i>\n" +
     "</a>\n" +
     "</span>\n" +
+    "</h1>\n" +
     "<alerts alerts=\"alerts\"></alerts>\n" +
     "</div>\n" +
     "</div>\n" +
+    "</div>\n" +
+    "<div class=\"middle-content\" persist-tab-state>\n" +
+    "<div class=\"container-fluid\">\n" +
+    "<div class=\"row\">\n" +
+    "<div class=\"col-md-12\">\n" +
+    "</div>\n" +
+    "</div>\n" +
     "<div ng-if=\"!('rolebindings' | canI : 'list')\">\n" +
     "<p>You do not have permission to view roles in this project.</p>\n" +
     "</div>\n" +
@@ -8909,7 +8910,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "\n" +
     "<div class=\"middle-section monitoring-page\" ng-class=\"{ 'sidebar-open': !renderOptions.collapseEventsSidebar }\">\n" +
     "<div class=\"middle-container\">\n" +
-    "<div class=\"middle-header header-light\">\n" +
+    "<div class=\"middle-header header-toolbar\">\n" +
     "<div class=\"container-fluid\">\n" +
     "<div class=\"page-header page-header-bleed-right page-header-bleed-left\">\n" +
     "<h1>\n" +
@@ -9265,7 +9266,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "\n" +
     "<div class=\"middle-section\">\n" +
     "<div class=\"middle-container\">\n" +
-    "<div class=\"middle-header header-light\">\n" +
+    "<div class=\"middle-header header-toolbar\">\n" +
     "<div class=\"container-fluid\">\n" +
     "<div class=\"page-header page-header-bleed-right page-header-bleed-left\">\n" +
     "<h1>Other Resources</h1>\n" +
@@ -9970,7 +9971,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "\n" +
     "<div class=\"middle-section\">\n" +
     "<div class=\"middle-container\">\n" +
-    "<div class=\"middle-header header-light\">\n" +
+    "<div class=\"middle-header header-toolbar\">\n" +
     "<div class=\"container-fluid\">\n" +
     "<div class=\"page-header page-header-bleed-right page-header-bleed-left\">\n" +
     "<h1>Pods</h1>\n" +
@@ -10004,7 +10005,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "\n" +
     "<div class=\"middle-section\">\n" +
     "<div class=\"middle-container\">\n" +
-    "<div class=\"middle-header header-light\">\n" +
+    "<div class=\"middle-header header-toolbar\">\n" +
     "<div class=\"container-fluid\">\n" +
     "<tasks></tasks>\n" +
     "<div ng-if=\"renderOptions.showToolbar\" class=\"page-header page-header-bleed-right page-header-bleed-left\">\n" +
@@ -10334,18 +10335,19 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<div class=\"middle-container\">\n" +
     "<div class=\"middle-header\">\n" +
     "<div class=\"container-fluid\">\n" +
-    "<breadcrumbs breadcrumbs=\"breadcrumbs\"></breadcrumbs>\n" +
+    "<div class=\"page-header page-header-bleed-right page-header-bleed-left\">\n" +
+    "<h1>\n" +
+    "<span ng-if=\"clusterQuotas | hashSize\">Cluster </span>Quota\n" +
+    "</h1>\n" +
+    "</div>\n" +
     "<alerts alerts=\"alerts\"></alerts>\n" +
     "</div>\n" +
     "</div>\n" +
     "<div class=\"middle-content\">\n" +
     "<div class=\"container-fluid\">\n" +
     "<div class=\"row\">\n" +
     "<div class=\"col-md-12\">\n" +
-    "<h1>\n" +
-    "<span ng-if=\"clusterQuotas | hashSize\">Cluster </span>Quota\n" +
-    "</h1>\n" +
-    "<div ng-if=\"!(quotas | hashSize) && !(clusterQuotas | hashSize)\">\n" +
+    "<div ng-if=\"!(quotas | hashSize) && !(clusterQuotas | hashSize)\" class=\"mar-top-xl\">\n" +
     "<div class=\"help-block\">{{quotaHelp}}</div>\n" +
     "<p><em ng-if=\"!quotas && !clusterQuotas\">Loading...</em><em ng-if=\"quotas || clusterQuotas\">There are no resource quotas set on this project.</em></p>\n" +
     "</div>\n" +
@@ -10429,7 +10431,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</table>\n" +
     "</div>\n" +
     "</div>\n" +
-    "<h1 ng-if=\"(clusterQuotas | hashSize) && (quotas | hashSize)\">Project Quota</h1>\n" +
+    "<h2 ng-if=\"(clusterQuotas | hashSize) && (quotas | hashSize)\">Project Quota</h2>\n" +
     "<div ng-repeat=\"quota in quotas | orderBy: 'metadata.name'\" class=\"gutter-bottom\">\n" +
     "<h2 ng-if=\"(quotas | hashSize) > 1\">{{quota.metadata.name}}</h2>\n" +
     "<div ng-if=\"$first\" class=\"help-block mar-bottom-md\">{{quotaHelp}}</div>\n" +
@@ -10506,7 +10508,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "</div>\n" +
     "</div>\n" +
     "<div class=\"limit-ranges-section\">\n" +
-    "<h1>Limit Range</h1>\n" +
+    "<h2>Limit Range</h2>\n" +
     "<div ng-if=\"!(limitRanges | hashSize)\">\n" +
     "<div class=\"help-block\">{{limitRangeHelp}}</div>\n" +
     "<p><em>{{emptyMessageLimitRanges}}</em></p>\n" +
@@ -10584,7 +10586,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "\n" +
     "<div class=\"middle-section\">\n" +
     "<div class=\"middle-container\">\n" +
-    "<div class=\"middle-header header-light\">\n" +
+    "<div class=\"middle-header\">\n" +
     "<div class=\"container-fluid\">\n" +
     "<div class=\"page-header page-header-bleed-right page-header-bleed-left\">\n" +
     "<div class=\"pull-right\" ng-if=\"project && ('secrets' | canI : 'create')\">\n" +
@@ -10669,7 +10671,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "\n" +
     "<div class=\"middle-section\">\n" +
     "<div class=\"middle-container\">\n" +
-    "<div class=\"middle-header header-light\">\n" +
+    "<div class=\"middle-header header-toolbar\">\n" +
     "<div class=\"container-fluid\">\n" +
     "<div class=\"page-header page-header-bleed-right page-header-bleed-left\">\n" +
     "<h1>Services</h1>\n" +
@@ -11079,7 +11081,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "\n" +
     "<div class=\"middle-section\">\n" +
     "<div class=\"middle-container\">\n" +
-    "<div class=\"middle-header header-light\">\n" +
+    "<div class=\"middle-header header-toolbar\">\n" +
     "<div class=\"container-fluid\">\n" +
     "<div class=\"page-header page-header-bleed-right page-header-bleed-left\">\n" +
     "<h1>Storage</h1>\n" +

diff --git a/dist/styles/main.css b/dist/styles/main.css
@@ -4856,7 +4856,7 @@ body,html{margin:0;padding:0}
 .console-os .middle .middle-section .middle-container{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-ms-flex;display:flex;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%}
 .console-os .middle .middle-section .middle-container .middle-header{-webkit-flex:0 0 auto;-moz-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}
 .console-os .middle .middle-section .middle-container .middle-content{-webkit-flex:1 1 auto;-moz-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;width:100%}
-.header-light{background-color:#fff;border-bottom:1px solid #e4e4e4}
+.header-toolbar{background-color:#fff;border-bottom:1px solid #e4e4e4}
 .surface-shaded{background-color:#f2f2f2}
 @media (min-width:768px){.layout-pf-alt-fixed .nav-pf-vertical-alt{position:fixed;bottom:0;overflow:visible}
 .console-os .wrap{margin-top:-60px;padding-top:60px;-webkit-flex-direction:row;-moz-flex-direction:row;-ms-flex-direction:row;flex-direction:row;overflow:hidden}