Make the tables in Admin Panel Mobile Responsive

fossasia · May 11, 2019 · a1bdb1a · a1bdb1a
1 parent e51ab1c
commit a1bdb1a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git a/src/Utils/isMobileView.js b/src/Utils/isMobileView.js
@@ -0,0 +1,3 @@
+export default function() {
+  return window.innerWidth <= 520;
+}
diff --git a/src/components/Admin/ListSkills/ListSkills.js b/src/components/Admin/ListSkills/ListSkills.js
@@ -16,6 +16,7 @@ import './ListSkills.css';
 import * as $ from 'jquery';
 
 import { urls } from '../../../Utils';
+import isMobileView from '../../../Utils/isMobileView';
 import ChatConstants from '../../../constants/ChatConstants';
 
 const cookies = new Cookies();
@@ -446,19 +447,23 @@ class ListSkills extends React.Component {
       textAlign: 'left',
       display: 'inline-block',
     };
+
+    let MobileView = isMobileView();
+
     let columns = [
       {
         title: 'Name',
         dataIndex: 'skillName',
-        width: '20%',
+        width: MobileView ? '30vw' : '20%',
+        fixed: MobileView ? 'left' : null,
       },
       {
         title: 'Group',
         dataIndex: 'group',
         filters: this.state.groups,
         onFilter: (value, record) => record.group.indexOf(value) === 0,
         sorter: (a, b) => a.group.length - b.group.length,
-        width: '10%',
+        width: MobileView ? 'auto' : '10%',
       },
       {
         title: 'Language',
@@ -571,12 +576,13 @@ class ListSkills extends React.Component {
       {
         title: 'Name',
         dataIndex: 'skillName',
-        width: '20%',
+        width: MobileView ? '30vw' : '20%',
+        fixed: MobileView ? 'fixed' : null,
       },
       {
         title: 'Model',
         dataIndex: 'model',
-        width: '10%',
+        width: MobileView ? 'auto' : '10%',
       },
       {
         title: 'Group',
@@ -618,6 +624,8 @@ class ListSkills extends React.Component {
       },
     ];
 
+    const Scroll = { x: 1500, y: 300 };
+
     return (
       <div>
         {cookies.get('showAdmin') === 'true' ? (
@@ -892,6 +900,7 @@ class ListSkills extends React.Component {
                                 rowKey={record => record.registered}
                                 dataSource={this.state.skillsData}
                                 loading={this.state.loading}
+                                scroll={MobileView ? Scroll : ''}
                               />
                             </LocaleProvider>
                           </TabPane>
@@ -905,6 +914,7 @@ class ListSkills extends React.Component {
                                 }}
                                 rowKey={record => record.registered}
                                 dataSource={this.state.deletedSkills}
+                                scroll={MobileView ? Scroll : ''}
                               />
                             </LocaleProvider>
                           </TabPane>

diff --git a/src/components/Admin/SystemSettings/SystemSettings.js b/src/components/Admin/SystemSettings/SystemSettings.js
@@ -11,6 +11,7 @@ import enUS from 'antd/lib/locale-provider/en_US';
 import NotFound from '../../NotFound/NotFound.react';
 
 import urls from '../../../Utils/urls';
+import isMobileView from '../../../Utils/isMobileView.js';
 
 const cookies = new Cookies();
 
@@ -26,16 +27,19 @@ class SystemSettings extends Component {
       loading: true,
     };
 
+    let MobileView = isMobileView();
+
     this.keysColumns = [
       {
         title: 'S.No.',
         dataIndex: 'serialNum',
-        width: '10%',
+        width: MobileView ? '15vw' : '10%',
+        fixed: MobileView ? 'left' : null,
       },
       {
         title: 'Key Name',
         dataIndex: 'keyName',
-        width: '30%',
+        width: MobileView ? 'auto' : '30%',
       },
       {
         title: 'Value',
@@ -101,6 +105,10 @@ class SystemSettings extends Component {
       display: 'inline-block',
     };
 
+    const Scroll = { x: 1500, y: 300 };
+
+    let MobileView = isMobileView();
+
     return (
       <div>
         {cookies.get('showAdmin') === 'true' ? (
@@ -135,8 +143,9 @@ class SystemSettings extends Component {
                           loading={this.state.loading}
                           pagination={false}
                           style={{
-                            width: '50%',
+                            width: '100%',
                           }}
+                          scroll={MobileView ? Scroll : ''}
                         />
                       </LocaleProvider>
                     </div>