added badge labels (#226)

hack4impact-uiuc · Dec 9, 2018 · 908cbb3 · 908cbb3
1 parent 40676e1
commit 908cbb3
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/backend/api/models/Badge.py b/backend/api/models/Badge.py
@@ -4,9 +4,12 @@
 
 
 class Badge:
-    def __init__(self, id, title, description, congrats_text, graphic, quantity):
+    def __init__(
+        self, id, title, progress_text, description, congrats_text, graphic, quantity
+    ):
         self.id = id
         self.title = title
+        self.progress_text = progress_text
         self.description = description
         self.congrats_text = congrats_text
         self.graphic = graphic
@@ -20,6 +23,7 @@ def serialize_to_json(self):
         return {
             "id": self.id,
             "title": self.title,
+            "progress_text": self.progress_text,
             "description": self.description,
             "congrats_text": self.congrats_text,
             "graphic": self.graphic,
@@ -115,6 +119,7 @@ def __init__(self, quantity, graphic):
             self,
             badge_id,
             f"{quantity} {get_quiz_word(quantity)} Completed!",
+            f"Complete {quantity} {get_quiz_word(quantity)}",
             f"This award is given after completing {quantity} {get_quiz_word(quantity).lower()}",
             f"Congratulations on completing {quantity} {get_quiz_word(quantity).lower()}!",
             graphic,
@@ -129,6 +134,7 @@ def __init__(self, quantity, graphic):
             self,
             badge_id,
             f"{quantity} Perfect {get_quiz_word(quantity)} Completed!",
+            f"Complete {quantity} Perfect {get_quiz_word(quantity)}",
             f"This award is given after completing {quantity} perfect {get_quiz_word(quantity).lower()}",
             f"Congratulations on completing {quantity} perfect {get_quiz_word(quantity).lower()}!",
             graphic,
@@ -143,6 +149,7 @@ def __init__(self, quantity, graphic):
             self,
             badge_id,
             f"Quizzes from {quantity} {get_book_word(quantity)} Completed!",
+            f"Complete Quizzes From {quantity} {get_book_word(quantity)}",
             f"This award is given after completing quizzes from {quantity} {get_book_word(quantity).lower()}",
             f"Congratulations on completing quizzes from {quantity} {get_book_word(quantity).lower()}!",
             graphic,

diff --git a/frontend/src/pages/BadgesPage.js b/frontend/src/pages/BadgesPage.js
@@ -64,7 +64,13 @@ class BadgesPage extends Component {
       return (
         <Row className="bar" key={badge.id}>
           <Col lg="3" align="center" className="ip-badge">
-            <img src={badgeMap[badge.graphic]} width="50" alt={badge.graphic} />
+            <img
+              src={badgeMap[badge.graphic]}
+              width="50"
+              alt={badge.graphic}
+              title={badge.description}
+            />
+            <p>{badge.progress_text}</p>
           </Col>
           <Col lg="9" align="center">
             <Progress
@@ -85,9 +91,15 @@ class BadgesPage extends Component {
             alt={badge.graphic}
             src={badgeMap[badge.graphic]}
             width="50"
+            align="center"
             className="completed-badge"
+            title={badge.description}
           />
-          <p align="center">{badge.year}</p>
+          <p align="center">
+            {badge.title}
+            <br />
+            {badge.year}
+          </p>
         </div>
       );
     });

diff --git a/frontend/src/styles/BadgesPage.scss b/frontend/src/styles/BadgesPage.scss
@@ -9,6 +9,7 @@
 .earned-badge {
   margin-left: 15px;
   margin-right: 15px;
+  text-align: center;
 }
 
 .ip-badge {