The existing jQuery UI-based fundraising progress bar used a float layout,
making it hard to adapt for mobile use. Given that there is not interactivity,
I've dropped all the JS and switched to a flexbox layout. This works well
because the bar will stretch to fit the text rather than always maintaining its scale.
The expandable sections can be expanded either one-by-one, or with
the “Expand All” button. Add a counter for each expandable
section (which requires their div's to have 'id' attributes, lest
they be counted in the '__global' section of expandables).
The __global counter will work as advertised if you have no 'id'
attributes on any of your 'expandable-section'-classed div's, but if
you mix a __global without an id with ones that *do* have an id, it's
likely this particular code won't work for that.
Finally, add some documentation which is probably over-documenting
for someone who knows Javascript and jQuery well, but it took me a
while to figure out this code so I felt throwing some notes in there
might be helpful.
I wrap the entire section that has material that can be expanded in a
div with class `expandable-section`. Once doing so, if you provide an
anchor with the class of `expander`, that anchor will be created with
text in the `data-expand-link-text` attribute.
I've also added some CSS to make the link look a certain way, for
good measure.
This makes it easier to keep baseline alignment between labels and their
respective inputs. Declaring `margin-left: 51%;` for the post-input notes
is not exactly what we want, but it's much closer and less troublesome than
dealing with the vertical alignment of labels otherwise.
* Separate out amount-parsing and reacting into separate events. This sets
the stage for other elements to react to the custom
'conservancy:newamount' event.
* Set up events in the context of each supporter form, with closures. This
lets us avoid weird CSS selector gymnastics in the event, and instead
drill down from the form to find the elements we need.
There are no functional changes in this code, barring bugs.
* Add an animation for state changes.
* Set the start state by triggering the event on the selection at page load.
Firefox at least remembers the selected button on page load. This avoids
a situation where the user says they want a shirt, reload, and now the
size selection is invisible because we used to hide that unconditionally.
This commit keeps the presentation basically the same, it just moves
presentation rules out of HTML and into CSS. It's not pixel-perfect but
pretty close.
With a valid URL, a past donor can upgrade to a supporter by donating
the rest of the amount. Django validates the data and, if it passes,
puts it in the form. The JavaScript does most of the work from there.
Surprisingly, given her predilection for exclamation points:
<karen> yeah... believe it or not, I'd rather not have two exclamation points
in the 750 achieved! [20:30]
<karen> and I would also delete the exclamation point after " enforcement
efforts!" in the text above it [20:31]
So this change is made on her behalf.
After the next import, we'll have more than 750 supporters. This change
not only handles that fact, but adds sufficient Javascript and Django
templating to handle the case if the Supporter count for any reason
drops below 750 again.
