separate divs and add css for exceeded

This commit is contained in:
Daniel Pono Takamori 2022-01-04 14:34:28 -08:00
parent c586ffb383
commit 7a49bf08d6
Signed by: pono
GPG key ID: 17BB4167325DAA02
2 changed files with 11 additions and 2 deletions

View file

@ -302,6 +302,9 @@ body > header {
#siteprogressbar .soFarText { #siteprogressbar .soFarText {
color: white; color: white;
} }
#siteprogressbar .exceeded {
color: var(--khaki-green);
}
#siteprogressbar .progress { #siteprogressbar .progress {
background: linear-gradient(var(--khaki-green), #84a377, var(--khaki-green)); background: linear-gradient(var(--khaki-green), #84a377, var(--khaki-green));
padding-left: 0.5rem; padding-left: 0.5rem;
@ -320,6 +323,11 @@ body > header {
border-top-right-radius: 16px; border-top-right-radius: 16px;
border-bottom-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 { #siteprogressbar {
background: linear-gradient(var(--washed-green), white, var(--washed-green)); background: linear-gradient(var(--washed-green), white, var(--washed-green));
box-shadow: 1px 1px 1px rgba(0,0,0,0.2); box-shadow: 1px 1px 1px rgba(0,0,0,0.2);

View file

@ -138,8 +138,9 @@
{% if this_match_remaining <= 0 %} {% if this_match_remaining <= 0 %}
<div class="progress matched pv1 b flex" style="flex-basis: {{ this_match_so_far }}px"> <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> <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"> </div>
<span id="site-fundraiser-match-count" class="soFarText tc w-100">${{this_match_exceeded|floatformat:0|intcomma }} extra given!</span> <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> </div>
{% else %} {% else %}
<div class="progress pv1 b flex items-center" style="flex-basis: {{ this_match_so_far }}px"> <div class="progress pv1 b flex items-center" style="flex-basis: {{ this_match_so_far }}px">