website Changeset - 6b649e2f48e0 · Conservancy Kallithea

Changeset - 6b649e2f48e0

Parent rev.

Child rev.

[Not reviewed]

0 3 0

Bradley M. Kuhn - 3 years ago 2020-11-26 03:27:53
bkuhn@sfconservancy.org

Supporter page: Support a “Expand All” link for collapsible sections

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.

3 files changed with 23 insertions and 2 deletions:

www/conservancy/static/css/forms.css

www/conservancy/static/js/supporter-page.js

www/conservancy/templates/supporter/index.html

0 comments (0 inline, 0 general)

www/conservancy/static/css/forms.css

➞

Show inline comments

@@ ... / @@ -113,2 +113,7 @@ p.appeal-match-text { @@
     background: #eee;
+}
 a.expander {
     font-size: 75%;
     font-style: italic;
     text-align: center;
+}

www/conservancy/static/js/supporter-page.js

➞

Show inline comments

 /* Copyright (C) 2012-2013 Denver Gingerich,
 ** Copyright (C) 2013-2014 Bradley M. Kuhn,
+** Copyright (C) 2013-2014, 2020 Bradley M. Kuhn,
 ** Copyright (C) 2016, 2020 Brett Smith.
 ** License: GPLv3-or-later
@@ ... / @@ -129,3 +129,16 @@ $(document).ready(function() { @@
+        }
     });
     $('a[data-expand-link-text]').each(function(index, element) {
         var $element = $(element);
         $element.append($element.data('expand-link-text'));
         $element.removeAttr('data-expand-link-text');
     });
     $('.expandable-section').each(function(index) {
         var $expandlink = $(this).children('.expander');
         var $ourexpandablesection = $(this);
         $expandlink.addClass('active').trigger('click');
         $expandlink.on('click', function(event) {
             $expandlink.fadeOut('slow');
             $ourexpandablesection.find('.read-more').each(function(index) { $(this).click(); }); });
     });
 });

www/conservancy/templates/supporter/index.html

➞

Show inline comments

@@ ... / @@ -78,4 +78,5 @@ @@
 <hr style="clear: both;"/>
 <div class="expandable-section">
 <div class="picture right" style="clear: right;">
@@ ... / @@ -102,4 +103,6 @@ freedom can be in the service of human freedom.</p> @@
 even in the face of so many obstacles.</p>
 <a class="expander" data-expand-link-text="(Expand All Sections)"/>
 <h3 id="StayingConnected">Staying Connected</h3>
 <div data-read-more="Read more about staying connected&hellip;">
@@ ... @@
 your money to work fighting for the freedom and rights of all software
 users.</p>
+</div>
 {% endblock %}

0 comments (0 inline, 0 general)