From 8fa01837cee91819738c532d1013e0d11e9f3d37 Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Mon, 18 Nov 2019 18:01:15 -0700
Subject: [PATCH] Add "extra bar" when donation goal over 100%

Creates an effect of some "extra bar" (in the same color as Exemplary
labels) expanding on the right end of the donation goal meter when it's
above 100%.
---
 tildes/scss/themes/_theme_base.scss | 8 ++++++++
 tildes/tildes/templates/home.jinja2 | 7 +++++++
 2 files changed, 15 insertions(+)

diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss
index 83def14..9b39367 100644
--- a/tildes/scss/themes/_theme_base.scss
+++ b/tildes/scss/themes/_theme_base.scss
@@ -331,6 +331,14 @@
     background-color: map-get($theme, "background-primary");
   }
 
+  .donation-goal-meter-over-goal {
+    background: map-get($theme, "comment-label-exemplary");
+
+    &::-webkit-meter-bar {
+      background: map-get($theme, "comment-label-exemplary");
+    }
+  }
+
   .empty-subtitle {
     color: map-get($theme, "foreground-secondary");
   }
diff --git a/tildes/tildes/templates/home.jinja2 b/tildes/tildes/templates/home.jinja2
index 3d4757f..d10144e 100644
--- a/tildes/tildes/templates/home.jinja2
+++ b/tildes/tildes/templates/home.jinja2
@@ -97,12 +97,19 @@
     <header>{{ current_time.strftime("%B %Y") }} donation goal</header>
     <div class="donation-goal-progress">
       <meter
+      {% if financial_data["goal_percentage"] <= 100 %}
         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"] }}"
+      {% else %}
+        {# Above 100%, this creates an effect of "extra" bar being added to the end #}
+        class="donation-goal-meter donation-goal-meter-over-goal"
+        max="{{ financial_data["income"] }}"
+        value="{{ financial_data["goal"] }}"
+      {% endif %}
         title="${{ financial_data["income"] }} / ${{ financial_data["goal"] }} (USD)"
       ></meter>
       <span class="donation-goal-percentage">{{ financial_data["goal_percentage"] }}%</span>