From f91f532a8e0d92c4c6805ae0e515930654a2b99f Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Mon, 18 Nov 2019 16:36:29 -0700
Subject: [PATCH] Add a percentage next to the donation goal meter

---
 tildes/scss/modules/_donation.scss  | 23 ++++++++++++++++++-----
 tildes/tildes/templates/home.jinja2 | 20 ++++++++++++--------
 tildes/tildes/views/topic.py        |  4 ++++
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/tildes/scss/modules/_donation.scss b/tildes/scss/modules/_donation.scss
index e8f1b45..e864310 100644
--- a/tildes/scss/modules/_donation.scss
+++ b/tildes/scss/modules/_donation.scss
@@ -17,10 +17,23 @@
   header {
     font-weight: bold;
   }
+}
 
-  meter {
-    width: 100%;
-    height: 0.4rem;
-    margin: 0.4rem 0 0.2rem;
-  }
+.donation-goal-meter {
+  width: 100%;
+  height: 0.4rem;
+}
+
+.donation-goal-progress {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: 0.2rem 0;
+}
+
+.donation-goal-percentage {
+  font-size: 0.6rem;
+  line-height: 0.6rem;
+  font-weight: bold;
+  margin-left: 0.4rem;
 }
diff --git a/tildes/tildes/templates/home.jinja2 b/tildes/tildes/templates/home.jinja2
index a953325..3d4757f 100644
--- a/tildes/tildes/templates/home.jinja2
+++ b/tildes/tildes/templates/home.jinja2
@@ -95,14 +95,18 @@
 {% macro donation_goal(financial_data, current_time) %}
   <div class="donation-goal">
     <header>{{ current_time.strftime("%B %Y") }} donation goal</header>
-    <meter
-      max="{{ financial_data["goal"] }}"
-      low="{{ financial_data["expense"] }}"
-      high="{{ financial_data["goal"] // 4 * 3 }}" {# 3/4 of the goal #}
-      optimum="{{ financial_data["goal"] - 1 }}" {# just needs to be between high and max #}
-      value="{{ financial_data["income"] }}"
-      title="${{ financial_data["income"] }} / ${{ financial_data["goal"] }} (USD)"
-    ></meter>
+    <div class="donation-goal-progress">
+      <meter
+        class="donation-goal-meter"
+        max="{{ financial_data["goal"] }}"
+        low="{{ financial_data["expense"] }}"
+        high="{{ financial_data["goal"] // 4 * 3 }}" {# 3/4 of the goal #}
+        optimum="{{ financial_data["goal"] - 1 }}" {# just needs to be between high and max #}
+        value="{{ financial_data["income"] }}"
+        title="${{ financial_data["income"] }} / ${{ financial_data["goal"] }} (USD)"
+      ></meter>
+      <span class="donation-goal-percentage">{{ financial_data["goal_percentage"] }}%</span>
+    </div>
 
     <p>
       Tildes is a non-profit site with no ads or investors, funded entirely by donations.<br>
diff --git a/tildes/tildes/views/topic.py b/tildes/tildes/views/topic.py
index 3d9c028..a1a480d 100644
--- a/tildes/tildes/views/topic.py
+++ b/tildes/tildes/views/topic.py
@@ -512,4 +512,8 @@ def _get_financial_data(db_session: Session) -> Optional[Dict[str, Decimal]]:
     if any(key not in financial_data for key in ("expense", "goal", "income")):
         return None
 
+    financial_data["goal_percentage"] = round(
+        financial_data["income"] / financial_data["goal"] * 100
+    )
+
     return financial_data