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..5a53f0e4 100644 --- a/src/components/Admin/Admin.js +++ b/src/components/Admin/Admin.js @@ -93,13 +93,34 @@ class Admin extends Component { }; render() { - const tabStyle = { - width: '100%', - animated: false, - textAlign: 'left', - display: 'inline-block', + 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', + }, }; - + const { skillStats } = this.state; + const { totalSkills, reviewedSkills, nonReviewedSkills } = skillStats; + const totalSkillsCount = skillStats && totalSkills ? totalSkills : 0; + const reviewedSkillsCount = + skillStats && reviewedSkills ? reviewedSkills : 0; + const nonReviewedSkillsCount = + skillStats && nonReviewedSkills ? nonReviewedSkills : 0; return (
Total
++ Total + : + + {totalSkillsCount} + +
Reviewed
++ Reviewed + : + + {reviewedSkillsCount} + +
Not Reviewed
++ Not Reviewed + : + + {nonReviewedSkillsCount} + +