Add alignment on Event Logs page
- Align table search, count and date components on Event Logs page.
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Id681d50f57a6fca86b8d8ba57f8e3420c1a0e56e
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index d472c0c..6029f4b 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -3,7 +3,7 @@
<b-form-group
:label="$t('global.form.search')"
:label-for="`searchInput-${_uid}`"
- label-sr-only
+ label-class="invisible"
class="mb-2"
>
<b-input-group size="md" class="align-items-center">
@@ -16,6 +16,7 @@
v-model="filter"
class="search-input"
type="text"
+ :aria-label="$t('global.form.search')"
:placeholder="placeholder"
@input="onChangeInput"
>
diff --git a/src/components/Global/TableCellCount.vue b/src/components/Global/TableCellCount.vue
index 7561709..acb4d44 100644
--- a/src/components/Global/TableCellCount.vue
+++ b/src/components/Global/TableCellCount.vue
@@ -1,5 +1,5 @@
<template>
- <div class="mt-2 d-flex flex-column justify-content-end">
+ <div class="mt-2">
<p v-if="!filterActive">
{{ $t('global.table.items', { count: totalNumberOfCells }) }}
</p>
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index e182708..b5ffd7a 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -1,21 +1,21 @@
<template>
<b-container fluid="xl">
<page-title />
- <b-row class="mb-3">
- <b-col sm="7" xl="4" class="d-flex flex-column justify-content-end">
+ <b-row class="align-items-start">
+ <b-col sm="8" xl="6" class="d-sm-flex align-items-end">
<search
:placeholder="$t('pageEventLogs.table.searchLogs')"
@change-search="onChangeSearchInput"
@clear-search="onClearSearchInput"
/>
+ <div class="ml-sm-4">
+ <table-cell-count
+ :filtered-items-count="filteredRows"
+ :total-number-of-cells="allLogs.length"
+ ></table-cell-count>
+ </div>
</b-col>
- <b-col sm="3" class="d-flex flex-column justify-content-end">
- <table-cell-count
- :filtered-items-count="filteredRows"
- :total-number-of-cells="allLogs.length"
- ></table-cell-count>
- </b-col>
- <b-col sm="8" md="7" xl="5">
+ <b-col sm="8" md="7" xl="6">
<table-date-filter @change="onChangeDateTimeFilter" />
</b-col>
</b-row>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index ce80530..70df346 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -1,6 +1,6 @@
<template>
<page-section :section-title="$t('pageHardwareStatus.dimmSlot')">
- <b-row>
+ <b-row class="align-items-end">
<b-col sm="6" md="5" xl="4">
<search
@change-search="onChangeSearchInput"
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
index ba2e2ce..e16495b 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -1,6 +1,6 @@
<template>
<page-section :section-title="$t('pageHardwareStatus.fans')">
- <b-row>
+ <b-row class="align-items-end">
<b-col sm="6" md="5" xl="4">
<search
@change-search="onChangeSearchInput"
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
index 366f559..7b4e5a1 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -1,6 +1,6 @@
<template>
<page-section :section-title="$t('pageHardwareStatus.powerSupplies')">
- <b-row>
+ <b-row class="align-items-end">
<b-col sm="6" md="5" xl="4">
<search
@change-search="onChangeSearchInput"
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
index d6a1287..6e2ebda 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
@@ -1,7 +1,7 @@
<template>
<page-section :section-title="$t('pageHardwareStatus.processors')">
<!-- Search -->
- <b-row>
+ <b-row class="align-items-end">
<b-col sm="6" md="5" xl="4">
<search
@change-search="onChangeSearchInput"
diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index 96e6ba6..2f9a7ef 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -1,7 +1,7 @@
<template>
<b-container fluid="xl">
<page-title />
- <b-row>
+ <b-row class="align-items-end">
<b-col sm="6" md="5" xl="4">
<search
:placeholder="$t('pageSensors.searchForSensors')"