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
diff --git a/src/views/AccessControl/Ldap/TableRoleGroups.vue b/src/views/AccessControl/Ldap/TableRoleGroups.vue
index 63b73a2..c09d166 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 957ea13..7906072 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 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 @@
{
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 a951b4f..24aeb30 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 7dcb4dd..681ea4b 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 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 @@
{
key: 'actions',
label: '',
- tdClass: 'text-right'
+ tdClass: 'text-right text-nowrap'
}
]
};