diff options
author | SurenNeware <sneware9@in.ibm.com> | 2020-07-08 13:27:23 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-07-24 02:08:56 +0300 |
commit | 5e25e2819a1d76ddd1bab1bd828adb0d6b9c9142 (patch) | |
tree | ef4fd88fd4d846a3d4ebbf3df4a8ca036b825a7a /src | |
parent | be88c61e6aedd361f1583f33152190ea6118fef1 (diff) | |
download | webui-vue-5e25e2819a1d76ddd1bab1bd828adb0d6b9c9142.tar.xz |
Add table responsive layout and fix search icon visibility
-Add responsive layout for all the tables.
-Fix search icon visibility in search component.
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Ibb4f77cf322aeb3699b13ab6cbbdb6cc38efbdc4
Diffstat (limited to 'src')
15 files changed, 35 insertions, 25 deletions
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue index 84cdd04d..bb18ceb5 100644 --- a/src/components/Global/TableToolbar.vue +++ b/src/components/Global/TableToolbar.vue @@ -75,6 +75,7 @@ $toolbar-height: 46px; .toolbar-container { width: 100%; position: relative; + z-index: 5; } .toolbar-content { diff --git a/src/views/AccessControl/Ldap/TableRoleGroups.vue b/src/views/AccessControl/Ldap/TableRoleGroups.vue index 63b73a2e..c09d1661 100644 --- a/src/views/AccessControl/Ldap/TableRoleGroups.vue +++ b/src/views/AccessControl/Ldap/TableRoleGroups.vue @@ -30,6 +30,7 @@ /> <b-table ref="table" + responsive selectable no-select-on-click no-sort-reset diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue index 957ea137..7906072e 100644 --- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue +++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue @@ -28,6 +28,7 @@ /> <b-table ref="table" + responsive="md" selectable no-select-on-click :fields="fields" @@ -116,13 +117,13 @@ import IconChevron from '@carbon/icons-vue/es/chevron--up/20'; import ModalUser from './ModalUser'; import ModalSettings from './ModalSettings'; -import PageTitle from '../../../components/Global/PageTitle'; +import PageTitle from '@/components/Global/PageTitle'; import TableRoles from './TableRoles'; -import TableToolbar from '../../../components/Global/TableToolbar'; -import TableRowAction from '../../../components/Global/TableRowAction'; +import TableToolbar from '@/components/Global/TableToolbar'; +import TableRowAction from '@/components/Global/TableRowAction'; -import BVTableSelectableMixin from '../../../components/Mixins/BVTableSelectableMixin'; -import BVToastMixin from '../../../components/Mixins/BVToastMixin'; +import BVTableSelectableMixin from '@/components/Mixins/BVTableSelectableMixin'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; export default { @@ -163,7 +164,7 @@ export default { { key: 'actions', label: '', - tdClass: 'text-right' + tdClass: 'text-right text-nowrap' } ], tableToolbarActions: [ diff --git a/src/views/AccessControl/LocalUserManagement/TableRoles.vue b/src/views/AccessControl/LocalUserManagement/TableRoles.vue index a951b4f5..24aeb30f 100644 --- a/src/views/AccessControl/LocalUserManagement/TableRoles.vue +++ b/src/views/AccessControl/LocalUserManagement/TableRoles.vue @@ -1,5 +1,5 @@ <template> - <b-table small :items="items" :fields="fields"> + <b-table stacked="sm" small :items="items" :fields="fields"> <template v-slot:cell(administrator)="data"> <template v-if="data.value"> <checkmark20 /> diff --git a/src/views/AccessControl/SslCertificates/SslCertificates.vue b/src/views/AccessControl/SslCertificates/SslCertificates.vue index 7dcb4dd9..681ea4be 100644 --- a/src/views/AccessControl/SslCertificates/SslCertificates.vue +++ b/src/views/AccessControl/SslCertificates/SslCertificates.vue @@ -49,7 +49,7 @@ </b-row> <b-row> <b-col xl="11"> - <b-table :fields="fields" :items="tableItems"> + <b-table responsive="md" :fields="fields" :items="tableItems"> <template v-slot:cell(validFrom)="{ value }"> {{ value | formatDate }} </template> @@ -94,12 +94,12 @@ import IconTrashcan from '@carbon/icons-vue/es/trash-can/20'; import ModalGenerateCsr from './ModalGenerateCsr'; import ModalUploadCertificate from './ModalUploadCertificate'; -import PageTitle from '../../../components/Global/PageTitle'; -import TableRowAction from '../../../components/Global/TableRowAction'; -import StatusIcon from '../../../components/Global/StatusIcon'; -import Alert from '../../../components/Global/Alert'; +import PageTitle from '@/components/Global/PageTitle'; +import TableRowAction from '@/components/Global/TableRowAction'; +import StatusIcon from '@/components/Global/StatusIcon'; +import Alert from '@/components/Global/Alert'; -import BVToastMixin from '../../../components/Mixins/BVToastMixin'; +import BVToastMixin from '@/components/Mixins/BVToastMixin'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; export default { @@ -143,7 +143,7 @@ export default { { key: 'actions', label: '', - tdClass: 'text-right' + tdClass: 'text-right text-nowrap' } ] }; diff --git a/src/views/Configuration/NetworkSettings/NetworkSettings.vue b/src/views/Configuration/NetworkSettings/NetworkSettings.vue index 604949ca..fd245a31 100644 --- a/src/views/Configuration/NetworkSettings/NetworkSettings.vue +++ b/src/views/Configuration/NetworkSettings/NetworkSettings.vue @@ -101,6 +101,7 @@ <b-row> <b-col lg="9" class="mb-3"> <b-table + responsive="md" :fields="ipv4StaticTableFields" :items="form.ipv4StaticTableItems" class="mb-0" @@ -210,6 +211,7 @@ <b-row> <b-col lg="4" class="mb-3"> <b-table + responsive :fields="dnsTableFields" :items="form.dnsStaticTableItems" class="mb-0" diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue index bf340167..488efcab 100644 --- a/src/views/Health/EventLogs/EventLogs.vue +++ b/src/views/Health/EventLogs/EventLogs.vue @@ -41,6 +41,7 @@ <b-table id="table-event-logs" ref="table" + responsive="md" selectable no-select-on-click sort-icon-left @@ -213,7 +214,7 @@ export default { key: 'actions', sortable: false, label: '', - tdClass: 'text-right' + tdClass: 'text-right text-nowrap' } ], tableFilters: [ diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue index 6a996524..ffbfc791 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue @@ -1,6 +1,6 @@ <template> <page-section :section-title="$t('pageHardwareStatus.bmcManager')"> - <b-table :items="items" :fields="fields"> + <b-table responsive="md" :items="items" :fields="fields"> <!-- Expand chevron icon --> <template v-slot:cell(expandRow)="row"> <b-button diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue index fdf58de4..5632e83f 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue @@ -1,6 +1,6 @@ <template> <page-section :section-title="$t('pageHardwareStatus.chassis')"> - <b-table :items="chassis" :fields="fields"> + <b-table responsive="md" :items="chassis" :fields="fields"> <!-- Expand chevron icon --> <template v-slot:cell(expandRow)="row"> <b-button diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue index 6ae74433..79bbe96d 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue @@ -9,6 +9,7 @@ sort-icon-left no-sort-reset sort-by="health" + responsive="md" :items="dimms" :fields="fields" :sort-desc="true" diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue index 70d5d6d9..e9cbf049 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue @@ -8,6 +8,7 @@ <b-table sort-icon-left no-sort-reset + responsive="md" sort-by="health" :items="fans" :fields="fields" diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue index 98ec52d3..b6dd326e 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue @@ -8,6 +8,7 @@ <b-table sort-icon-left no-sort-reset + responsive="md" sort-by="health" :items="powerSupplies" :fields="fields" diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue index 68f5de5a..bff91083 100644 --- a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue +++ b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue @@ -1,6 +1,6 @@ <template> <page-section :section-title="$t('pageHardwareStatus.system')"> - <b-table :items="systems" :fields="fields"> + <b-table responsive="md" :items="systems" :fields="fields"> <!-- Expand chevron icon --> <template v-slot:cell(expandRow)="row"> <b-button diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue index a73c4adb..f8564d86 100644 --- a/src/views/Health/Sensors/Sensors.vue +++ b/src/views/Health/Sensors/Sensors.vue @@ -28,6 +28,7 @@ </table-toolbar> <b-table ref="table" + responsive="md" selectable no-select-on-click sort-icon-left @@ -82,16 +83,16 @@ </template> <script> -import PageTitle from '../../../components/Global/PageTitle'; -import StatusIcon from '../../../components/Global/StatusIcon'; -import Search from '../../../components/Global/Search'; -import TableFilter from '../../../components/Global/TableFilter'; +import PageTitle from '@/components/Global/PageTitle'; +import Search from '@/components/Global/Search'; +import StatusIcon from '@/components/Global/StatusIcon'; +import TableFilter from '@/components/Global/TableFilter'; import TableToolbar from '@/components/Global/TableToolbar'; import TableToolbarExport from '@/components/Global/TableToolbarExport'; -import TableFilterMixin from '../../../components/Mixins/TableFilterMixin'; import BVTableSelectableMixin from '@/components/Mixins/BVTableSelectableMixin'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/Mixins/TableFilterMixin'; import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin'; import TableSortMixin from '@/components/Mixins/TableSortMixin'; diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue index 2c39cc36..5c862639 100644 --- a/src/views/Overview/OverviewEvents.vue +++ b/src/views/Overview/OverviewEvents.vue @@ -8,7 +8,7 @@ variant="link" to="/health/event-logs" data-test-id="overviewEvents-button-eventLogs" - class="float-right" + class="float-md-right" > {{ $t('pageOverview.events.viewAllButton') }} </b-button> @@ -16,7 +16,7 @@ per-page="5" sort-by="date" sort-desc - stacked="sm" + responsive="md" :items="eventLogData" :fields="fields" > |