From 0eeb17ca2c485720ea2a5526f73942a30f54f0ab Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Tue, 11 Oct 2016 14:37:34 -0700
Subject: [PATCH] Add classes for standardizing the vertical rhythm of content
 on a page. Apply to Management landing page.

---
 .../kibana/public/management/landing.html     | 81 ++++++++++---------
 .../kibana/public/management/styles/main.less | 12 ---
 src/ui/public/styles/base.less                | 14 ++++
 3 files changed, 55 insertions(+), 52 deletions(-)

diff --git a/src/core_plugins/kibana/public/management/landing.html b/src/core_plugins/kibana/public/management/landing.html
index a3c69fb7c2240..036baba5dbcc1 100644
--- 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
index ff459dad54a59..b8ed9701cfa17 100644
--- 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
index 9790469d0debe..9f90cba0439c0 100644
--- 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";