From 7a49bf08d6817b083f1a4ffa24877e24036b7cbd 2022-01-04 22:34:28
From: Daniel Pono Takamori <pono@sfconservancy.org>
Date: 2022-01-04 22:34:28
Subject: [PATCH] separate divs and add css for exceeded

---

diff --git a/www/conservancy/static/css/conservancy.css b/www/conservancy/static/css/conservancy.css
index 34fab6b61364d0a25a469b76658b0009964b764a..a3595666f031aeb369670cb78cc1d4954c87f159 100644
--- a/www/conservancy/static/css/conservancy.css
+++ b/www/conservancy/static/css/conservancy.css
@@ -302,6 +302,9 @@ body > header {
 #siteprogressbar .soFarText {
   color: white;
 }
+#siteprogressbar .exceeded {
+  color: var(--khaki-green);
+}
 #siteprogressbar .progress {
   background: linear-gradient(var(--khaki-green), #84a377, var(--khaki-green));
   padding-left: 0.5rem;
@@ -320,6 +323,11 @@ body > header {
   border-top-right-radius: 16px;
   border-bottom-right-radius: 16px;
 }
+#siteprogressbar .progress.exceeded {
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 16px;
+  background: linear-gradient(#84a377, var(--washed-green), #84a377);
+}
 #siteprogressbar {
   background: linear-gradient(var(--washed-green), white, var(--washed-green));
   box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
diff --git a/www/conservancy/templates/base_conservancy.html b/www/conservancy/templates/base_conservancy.html
index 191e9cbad0f8388c31563975e21724c00d1aad5f..49d368bb54c432a5346a9230f68c7b56bd095368 100644
--- a/www/conservancy/templates/base_conservancy.html
+++ b/www/conservancy/templates/base_conservancy.html
@@ -138,8 +138,9 @@
   {% if this_match_remaining <= 0 %}
     <div class="progress matched pv1 b flex" style="flex-basis: {{ this_match_so_far }}px">
       <span id="site-fundraiser-match-count" class="soFarText tc w-100">${{ this_match_goal|floatformat:0|intcomma }} matched!</span>
-    <div class="progress matched pv1 b flex" style="flex-basis: {{ this_match_exceeded }}px">
-      <span id="site-fundraiser-match-count" class="soFarText tc w-100">${{this_match_exceeded|floatformat:0|intcomma }} extra given!</span>
+    </div>
+    <div class="progress exceeded pv1 b flex" style="flex-basis: {{ this_match_exceeded }}px">
+      <span id="site-fundraiser-match-count" class="soFarText tc w-100 exceeded">${{this_match_exceeded|floatformat:0|intcomma }} extra given!</span>
     </div>
   {% else %}
     <div class="progress pv1 b flex items-center" style="flex-basis: {{ this_match_so_far }}px">