Make the UI of Skills similar to skill types in Admin in mobile view

fossasia · May 8, 2019 · 17968f7 · 17968f7
1 parent e51ab1c
commit 17968f7
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 27 deletions.
diff --git 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
@@ -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 (
       <div>
         {cookies.get('showAdmin') === 'true' ? (
@@ -109,7 +130,7 @@ class Admin extends Component {
               <h2 className="h2">Admin Panel</h2>
             </div>
             <div className="tabs">
-              <Paper style={tabStyle} zDepth={0}>
+              <Paper style={styles.tabStyle} zDepth={0}>
                 <Tabs
                   onTabClick={this.handleTabChange}
                   tabPosition={this.state.tabPosition}
@@ -281,16 +302,30 @@ class Admin extends Component {
                             Skills
                           </span>
                         }
+                        style={
+                          window.innerWidth <= 520
+                            ? styles.skillCountMobileViewStyle
+                            : null
+                        }
                       >
                         <span
-                          style={{
-                            display: 'flex',
-                            justifyContent: 'space-between',
-                            marginTop: '50px',
-                          }}
+                          style={
+                            window.innerWidth <= 520
+                              ? null
+                              : styles.skillCountStyle
+                          }
                         >
                           <span>
-                            <p>Total</p>
+                            <p>
+                              Total
+                              <span className="skillCountMobileView">: </span>
+                              <span
+                                className="skillCountMobileView"
+                                style={{ color: 'orange' }}
+                              >
+                                {totalSkillsCount}
+                              </span>
+                            </p>
                             <Avatar
                               style={{
                                 backgroundColor: 'orange',
@@ -299,15 +334,22 @@ class Admin extends Component {
                               }}
                               size="large"
                               shape="square"
+                              className="skillCount"
                             >
-                              {this.state.skillStats &&
-                              this.state.skillStats.totalSkills
-                                ? this.state.skillStats.totalSkills
-                                : 0}
+                              {totalSkillsCount}
                             </Avatar>
                           </span>
                           <span>
-                            <p>Reviewed</p>
+                            <p>
+                              Reviewed
+                              <span className="skillCountMobileView">: </span>
+                              <span
+                                className="skillCountMobileView"
+                                style={{ color: 'green' }}
+                              >
+                                {reviewedSkillsCount}
+                              </span>
+                            </p>
                             <Avatar
                               style={{
                                 backgroundColor: 'green',
@@ -316,15 +358,22 @@ class Admin extends Component {
                               }}
                               size="large"
                               shape="square"
+                              className="skillCount"
                             >
-                              {this.state.skillStats &&
-                              this.state.skillStats.reviewedSkills
-                                ? this.state.skillStats.reviewedSkills
-                                : 0}
+                              {reviewedSkillsCount}
                             </Avatar>
                           </span>
                           <span>
-                            <p>Not Reviewed</p>
+                            <p>
+                              Not Reviewed
+                              <span className="skillCountMobileView">: </span>
+                              <span
+                                className="skillCountMobileView"
+                                style={{ color: 'red' }}
+                              >
+                                {nonReviewedSkillsCount}
+                              </span>
+                            </p>
                             <Avatar
                               style={{
                                 backgroundColor: 'red',
@@ -333,12 +382,10 @@ class Admin extends Component {
                               }}
                               size="large"
                               shape="square"
+                              className="skillCount"
                             >
                               {' '}
-                              {this.state.skillStats &&
-                              this.state.skillStats.nonReviewedSkills
-                                ? this.state.skillStats.nonReviewedSkills
-                                : 0}
+                              {nonReviewedSkillsCount}
                             </Avatar>
                           </span>
                         </span>