diff --git a/src/components/Admin/Admin.css b/src/components/Admin/Admin.css index ade4b7b1..a73482ab 100644 --- a/src/components/Admin/Admin.css +++ b/src/components/Admin/Admin.css @@ -62,8 +62,18 @@ line-height: 2; } +.skillCountMobileView{ + display: none; +} + @media screen and (max-width: 520px) { .flexCard { width: 310px; } + .skillCount { + display: none; + } + .skillCountMobileView { + display: inline; + } } diff --git a/src/components/Admin/Admin.js b/src/components/Admin/Admin.js index 202e4b81..5b9ac1a2 100644 --- a/src/components/Admin/Admin.js +++ b/src/components/Admin/Admin.js @@ -10,6 +10,7 @@ import Tabs from 'antd/lib/tabs'; import 'antd/lib/tabs/style/index.css'; import Avatar from 'antd/lib/avatar'; import NotFound from './../NotFound/NotFound.react'; +import isMobileView from '../../Utils/isMobileView'; import { urls } from '../../Utils'; @@ -17,6 +18,28 @@ const cookies = new Cookies(); const TabPane = Tabs.TabPane; +const styles = { + tabStyle: { + width: '100%', + animated: false, + textAlign: 'left', + display: 'inline-block', + }, + skillCountStyle: { + display: 'flex', + justifyContent: 'space-between', + marginTop: '50px', + }, + skillCountMobileViewStyle: { + width: '300px', + height: '210px', + marginBottom: '20px', + fontSize: '18px', + fontWeight: 'bold', + lineHeight: '2', + }, +}; + class Admin extends Component { constructor(props) { super(props); @@ -93,12 +116,14 @@ class Admin extends Component { }; render() { - const tabStyle = { - width: '100%', - animated: false, - textAlign: 'left', - display: 'inline-block', - }; + let MobileView = isMobileView(); + + const { skillStats } = this.state; + const { + totalSkills = 0, + reviewedSkills = 0, + nonReviewedSkills = 0, + } = skillStats; return (
@@ -109,7 +134,7 @@ class Admin extends Component {

Admin Panel

- + } + style={ + MobileView ? styles.skillCountMobileViewStyle : null + } > -

Total

+

+ Total + : + + {totalSkills} + +

- {this.state.skillStats && - this.state.skillStats.totalSkills - ? this.state.skillStats.totalSkills - : 0} + {totalSkills}
-

Reviewed

+

+ Reviewed + : + + {reviewedSkills} + +

- {this.state.skillStats && - this.state.skillStats.reviewedSkills - ? this.state.skillStats.reviewedSkills - : 0} + {reviewedSkills}
-

Not Reviewed

+

+ Not Reviewed + : + + {nonReviewedSkills} + +

{' '} - {this.state.skillStats && - this.state.skillStats.nonReviewedSkills - ? this.state.skillStats.nonReviewedSkills - : 0} + {nonReviewedSkills}