progress bar: Remove display-table vertical align workaround.

Was causing some display glitches on some browsers. Using nested flexbox instead.
This commit is contained in:
Ben Sturmfels 2021-11-26 09:10:25 +11:00
parent a6dcb714b8
commit 4c3661ad19
Signed by: bsturmfels
GPG key ID: 023C05E2C9C068F0

View file

@ -135,15 +135,15 @@
<a href="/sustainer/" style="text-decoration: none !important">
<div id="siteprogressbar" class="flex items-stretch w-100">
{% if this_match_remaining <= 0 %}
<div class="progress matched tc pv1 b dt" style="flex-basis: {{ this_match_so_far }}px">
<span id="site-fundraiser-match-count" class="soFarText dtc v-mid">${{ this_match_goal|floatformat:0|intcomma }} matched!</span>
<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>
{% else %}
<div class="progress tc pv1 b dt" style="flex-basis: {{ this_match_so_far }}px">
<span id="site-fundraiser-match-count" class="soFarText dtc v-mid">${{ this_match_so_far|floatformat:0|intcomma }} matched!</span>
<div class="progress pv1 b flex items-center" style="flex-basis: {{ this_match_so_far }}px">
<span id="site-fundraiser-match-count" class="soFarText tc w-100">${{ this_match_so_far|floatformat:0|intcomma }} matched!</span>
</div>
<div class="final-goal tc pv1 b dt" style="flex-basis: {{ this_match_remaining }}px">
<span id="site-fundraiser-final-goal" class="goalText dtc v-mid">${{ this_match_remaining|floatformat:0|intcomma }} to go!</span>
<div class="final-goal pv1 b flex items-center" style="flex-basis: {{ this_match_remaining }}px">
<span id="site-fundraiser-final-goal" class="goalText tc w-100">${{ this_match_remaining|floatformat:0|intcomma }} to go!</span>
</div>
{% endif %}
</div>