Fix table header

Makes the table header in sensor page stay fixed after scrolling.
Fixes the allignment of filter button.

Resolves openbmc/phosphor-webui#28

Change-Id: If9b8b0848169b5924b811e67588ff57c8dae7c5c
Signed-off-by: Iftekharul Islam <iffy.ryan@ibm.com>

4 files changed, 21 insertions, 6 deletions

diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index 01c0632..c26ba59 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -109,6 +109,13 @@
   @include indeterminate-bar;
 }
 
+// sensor fixed table header on scroll
+.fixed-table-header{
+  position: sticky;
+  top: 130px;
+  z-index: 1;
+}
+
 //sortable heading
 .sort-heading {
   position: relative;
diff --git a/app/common/styles/elements/content-search.scss b/app/common/styles/elements/content-search.scss
index d4b9e14..5fa8ef2 100644
--- a/app/common/styles/elements/content-search.scss
+++ b/app/common/styles/elements/content-search.scss
@@ -41,8 +41,8 @@
   .search-submit__wrapper {
     position: absolute;
     width: auto;
-    top: .4em;
-    right: 5px;
+    top: 0.2em;
+    right: 0.2em;
   }
   .content__search-submit {
     display: inline-block;
diff --git a/app/server-health/controllers/sensors-overview-controller.html b/app/server-health/controllers/sensors-overview-controller.html
index 977a608..90950c8 100644
--- a/app/server-health/controllers/sensors-overview-controller.html
+++ b/app/server-health/controllers/sensors-overview-controller.html
@@ -49,7 +49,7 @@
   </section>
 
   <section id="sensor-categories" class="row column" ng-show="filteredSensorData.length">
-    <div class="row column header-row">
+    <div class="row column header-row fixed-table-header">
       <div class="column large-12 header__actions-bar">
         <p class="inline sensor__title">Sensors ({{filteredSensorData.length}})</p>
         <p class="inline sensor__reading">Low critical</p>
diff --git a/app/server-health/styles/sensors.scss b/app/server-health/styles/sensors.scss
index a2246d7..041a1e5 100644
--- a/app/server-health/styles/sensors.scss
+++ b/app/server-health/styles/sensors.scss
@@ -8,9 +8,13 @@ $title-minWidth: 210px;
 
 .header__actions-bar {
   padding-left: 1.5em;
+  padding-right: 1em;
   font-weight: 700;
+  .sensor__title {
+    margin-left: 1.5em;
+  }
   .sensor__reading {
-    margin-right: .3em;
+    margin-right: .2em;
   }
   .sensor__heading-current {
     padding-right: 1em;
@@ -34,7 +38,7 @@ $title-minWidth: 210px;
 }
 
 .sensor__title {
-  min-width: 30%;
+  min-width: 28%;
   margin-bottom: 0;
 }
 
@@ -139,7 +143,11 @@ $title-minWidth: 210px;
 #sensors, #sensors-overview {
 
   .toggle-filter {
-    margin-right: 0;
+    margin-bottom: 20px;
+  }
+  .column, .columns {
+    padding-left: 0px;
+    padding-right: 0px;
   }
 }