[Styles] Final touches on review screen - pagination, table end, nav …

…buttons
elastic · Apr 26, 2016 · ce32552 · ce32552
1 parent 4a0d18c
commit ce32552
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 41 deletions.
diff --git a/...lic/settings/sections/indices/add_data_steps/pattern_review_step/pattern_review_step.html b/...lic/settings/sections/indices/add_data_steps/pattern_review_step/pattern_review_step.html
@@ -3,7 +3,7 @@ <h2><em>Review the index pattern.</em>
   fields can be changed if we got it wrong!
 </h2>
 
-<div class="pattern-review form-group form-inline">
+<div class="pattern-review form-inline">
   <label>Index name or pattern</label>
   <span id="pattern-help" class="help-block">Patterns allow you to define dynamic index names using * as a wildcard. Example: filebeat-*</span>
   <input ng-model="reviewStep.indexPattern.id" class="pattern-input form-control" aria-describedby="pattern-help"/>
@@ -21,9 +21,9 @@ <h2><em>Review the index pattern.</em>
   </label>
 </div>
 
-<div>
-  <paginated-table
-    columns="reviewStep.columns"
-    rows="reviewStep.rows">
-  </paginated-table>
-</div>
+<paginated-table
+  class="pattern-review-field-table"
+  columns="reviewStep.columns"
+  rows="reviewStep.rows"
+  per-page="10">
+</paginated-table>
diff --git a/...ions/indices/add_data_steps/pattern_review_step/styles/_add_data_pattern_review_step.less b/...ions/indices/add_data_steps/pattern_review_step/styles/_add_data_pattern_review_step.less
@@ -1,8 +1,14 @@
-.pattern-review {
+@import (reference) "../../../styles/_add_data_wizard";
 
-  label {
-    margin-bottom: 0;
-  }
+pattern-review-step {
+  margin-bottom: 14px;
+
+  .pattern-review {
+    margin-bottom: 15px;
+
+    label {
+      margin-bottom: 0;
+    }
 
   .time-field-input {
     padding-left: 14px;
@@ -14,7 +20,52 @@
     margin-right: 7px;
   }
 
-  > .help-block {
-    margin-top: 0;
+    > .help-block {
+      margin-top: 0;
+    }
+  }
+
+  paginated-table.pattern-review-field-table {
+    table {
+      border-bottom: 3px solid @settings-filebeat-wizard-panel-bg;
+
+      tr {
+        .form-group;
+      }
+
+      th {
+        border-bottom: 0;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        background-color: @settings-filebeat-wizard-panel-bg;
+        font-weight: normal;
+      }
+
+      td {
+        border-top: 3px solid @settings-filebeat-wizard-panel-bg;
+        vertical-align: middle;
+        padding-right: 14px;
+      }
+
+      select {
+        .form-control;
+        .wizard-container.form-control;
+
+        min-width: 105px;
+      }
+    }
+
+    paginate-controls {
+      position: relative;
+
+      ul > li > a {
+        background-color: @settings-filebeat-wizard-panel-bg;
+      }
+
+      form.pagination-size {
+        position: absolute;
+        right: 0;
+      }
+    }
   }
 }
diff --git a/src/plugins/kibana/public/settings/sections/indices/filebeat/directives/filebeat_wizard.html b/src/plugins/kibana/public/settings/sections/indices/filebeat/directives/filebeat_wizard.html
@@ -25,7 +25,7 @@
   <div ng-switch="wizard.currentStep">
     <div ng-switch-when="0">
       <paste-samples-step samples="wizard.stepResults.samples" raw-samples="wizard.stepResults.rawSamples"></paste-samples-step>
-      <div class="filebeat-wizard-buttons">
+      <div class="wizard-nav-buttons">
         <div></div>
         <div>
           <button
@@ -45,7 +45,7 @@
         samples="wizard.stepResults.samples">
       </pipeline-setup>
 
-      <div class="filebeat-wizard-buttons">
+      <div class="wizard-nav-buttons">
         <div>
           <button
             class="btn btn-secondary"
@@ -72,7 +72,7 @@
         sample-doc="wizard.stepResults.pipeline.output">
       </pattern-review-step>
 
-      <div class="filebeat-wizard-buttons">
+      <div class="wizard-nav-buttons">
         <div>
           <button
             class="btn btn-secondary"

diff --git a/src/plugins/kibana/public/settings/sections/indices/filebeat/styles/_filebeat_wizard.less b/src/plugins/kibana/public/settings/sections/indices/filebeat/styles/_filebeat_wizard.less
@@ -52,31 +52,6 @@ filebeat-wizard {
   }
   //************* Common Styles? *********************//
 
-  .nav-buttons {
-    float: right;
-  }
-
-  .filebeat-wizard-buttons {
-    display: flex;
-    float: none;
-
-    div {
-      width:100px;
-      flex: 1 1 auto;
-      display: flex;
-    }
-
-    :nth-child(1) {
-      justify-content: flex-start;
-    }
-    :nth-child(2) {
-      justify-content: center;
-    }
-    :nth-child(3) {
-      justify-content: flex-end;
-    }
-  }
-
   .install-filebeat {
     padding-bottom: 1em;
   }

diff --git a/src/plugins/kibana/public/settings/sections/indices/styles/_add_data_wizard.less b/src/plugins/kibana/public/settings/sections/indices/styles/_add_data_wizard.less
@@ -50,6 +50,32 @@
   padding-bottom: 14px;
 }
 
+.nav-buttons {
+  float: right;
+}
+
+.wizard-nav-buttons {
+  display: flex;
+  float: none;
+  margin-top: 14px;
+
+  div {
+    width:100px;
+    flex: 1 1 auto;
+    display: flex;
+  }
+
+  :nth-child(1) {
+    justify-content: flex-start;
+  }
+  :nth-child(2) {
+    justify-content: center;
+  }
+  :nth-child(3) {
+    justify-content: flex-end;
+  }
+}
+
 .paste-samples {
   textarea {
     width: 100%;