Backport PR elastic#8628

--------- **Commit 1:** Add classes for standardizing the vertical rhythm of content on a page. Apply to Management landing page. * Original sha: 6c3b32fff8fecf2e008b0eeea68bbc898e28a30c [formerly 0eeb17c] * Authored by CJ Cenizal <[email protected]> on 2016-10-11T21:37:34Z Former-commit-id: 24b4fff
airow · Oct 11, 2016 · e8849af · e8849af
1 parent e1dcdf8
commit e8849af
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 52 deletions.
diff --git a/src/core_plugins/kibana/public/management/landing.html b/src/core_plugins/kibana/public/management/landing.html
@@ -1,50 +1,51 @@
 <kbn-management-app>
   <kbn-management-landing>
-    <div class="product-overview">
-      <span class="kibana-version">Version: {{::kbnVersion}}</span>
+    <!-- General info -->
+    <div class="page-row">
+      <div class="page-row-text">Version: {{::kbnVersion}}</div>
     </div>
-    <div class="management-sections">
-      <div
-        ng-if="section.items.length > 0"
-        ng-repeat="section in sections"
-        ng-class="{ 'management-section-info-expanded': section.showInfo }"
-        class="col-xs-12 management-section management-section-{{::section.id}}">
 
-        <div class="panel panel-product management-panel-product">
-          <div class="panel-heading panel-heading-{{::section.id}}">
-            {{::section.display}}
+    <!-- Management sections for the ES stack -->
+    <div
+      ng-if="section.items.length > 0"
+      ng-repeat="section in sections"
+      ng-class="{ 'management-section-info-expanded': section.showInfo }"
+      class="page-row"
+    >
+      <div class="panel panel-product management-panel-product">
+        <div class="panel-heading panel-heading-{{::section.id}}">
+          {{::section.display}}
 
-            <i
-              class="fa fa-info-circle pull-right panel-heading-icon"
-              ng-click="section.showInfo = !!!section.showInfo"
-              ng-if="section.info">
-            </i>
-          </div>
+          <i
+            class="fa fa-info-circle pull-right panel-heading-icon"
+            ng-click="section.showInfo = !!!section.showInfo"
+            ng-if="section.info">
+          </i>
+        </div>
 
-          <div class="panel-body">
-            <div class="row">
-              <ul class="management-section-items list-unstyled">
-                <li
-                  class="col-xs-4 col-md-3"
-                  ng-repeat="item in section.items.inOrder"
+        <div class="panel-body">
+          <div class="row">
+            <ul class="management-section-items list-unstyled">
+              <li
+                class="col-xs-4 col-md-3"
+                ng-repeat="item in section.items.inOrder"
+              >
+                <a
+                  class="management-link"
+                  ng-class="{ 'is-management-link-disabled': !item.url }"
+                  kbn-href="{{::item.url}}"
+                  tooltip="{{::item.tooltip}}"
+                  tooltip-placement="bottom"
+                  tooltip-popup-delay="400"
+                  tooltip-append-to-body="1"
                 >
-                  <a
-                    class="management-link"
-                    ng-class="{ 'is-management-link-disabled': !item.url }"
-                    kbn-href="{{::item.url}}"
-                    tooltip="{{::item.tooltip}}"
-                    tooltip-placement="bottom"
-                    tooltip-popup-delay="400"
-                    tooltip-append-to-body="1"
-                  >
-                    {{::item.display}}
-                  </a>
-                </li>
-              </ul>
-            </div>
-            <div class="management-section-info">
-              {{::section.info}}
-            </div>
+                  {{::item.display}}
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="management-section-info">
+            {{::section.info}}
           </div>
         </div>
       </div>

diff --git a/src/core_plugins/kibana/public/management/styles/main.less b/src/core_plugins/kibana/public/management/styles/main.less
@@ -43,8 +43,6 @@ kbn-management-app {
 }
 
 kbn-management-landing {
-  padding: 5px;
-
   .management-panel-product {
     margin-bottom: 10px;
 
@@ -54,11 +52,6 @@ kbn-management-landing {
     }
   }
 
-  .management-section {
-    padding-left: 5px;
-    padding-right: 5px;
-  }
-
   .management-link {
     font-size: 17px;
     line-height: 32px;
@@ -78,11 +71,6 @@ kbn-management-landing {
     padding: 5px;
   }
 
-  .product-overview {
-    color: @kibanaGray2;
-    padding: 5px 0 10px 10px;
-  }
-
   .management-section-info {
     bottom: 10px;
     display: none;

diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
@@ -621,6 +621,10 @@ fieldset {
     padding: 7px 10px;
   }
 
+  .panel-heading--clickable {
+    cursor: pointer;
+  }
+
   .panel-heading-elasticsearch,
   .panel-heading-kibana,
   .panel-heading-beats,
@@ -656,4 +660,14 @@ fieldset {
   }
 }
 
+.page-row {
+  padding: 0 10px;
+  margin: 10px 0;
+}
+
+.page-row-text {
+  color: @kibanaGray2;
+  font-size: 14px;
+}
+
 @import "~dragula/dist/dragula.css";