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>
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 @@
.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 @@
}
.sensor__title {
- min-width: 30%;
+ min-width: 28%;
margin-bottom: 0;
}
@@ -139,7 +143,11 @@
#sensors, #sensors-overview {
.toggle-filter {
- margin-right: 0;
+ margin-bottom: 20px;
+ }
+ .column, .columns {
+ padding-left: 0px;
+ padding-right: 0px;
}
}