Move donation sidebar to pop out at bottom.

This commit is contained in:
Ben Sturmfels 2021-10-19 15:46:56 +11:00 committed by Bradley M. Kuhn
parent aa2219fc09
commit 204ca5e9de
4 changed files with 79 additions and 94 deletions

View file

@ -131,17 +131,14 @@ text-decoration: none; color: #557733;
/* FIXME: We should do this: */ /* FIXME: We should do this: */
/* http://www.waypointarts.com/blog/2013/06/29/fixing-a-side-bar-while-scrolling-until-bottom */ /* http://www.waypointarts.com/blog/2013/06/29/fixing-a-side-bar-while-scrolling-until-bottom */
.donate-sidebar { .donate-sidebar {
position: fixed; background: var(--light-green) no-repeat;
top: 180px; position: sticky;
right: 2%; bottom: 0;
width: 18%; width: auto;
} padding: 0.5rem 1rem;
@media all and (max-width: 725px) { margin: 2rem -1rem 0;
.donate-sidebar { display: none; } border-radius: 8px 8px 0 0;
.content-with-donate-sidebar { border: 1px solid #90d468;
align: center;
width: 100%;
}
} }
p.footnote { p.footnote {
@ -279,10 +276,6 @@ body > header {
margin-left: .5rem; margin-left: .5rem;
} }
#mainContent {
overflow: auto;
}
#sidebar + #mainContent { #sidebar + #mainContent {
float: left; float: left;
} }
@ -328,11 +321,6 @@ body > header {
text-align: center; text-align: center;
} }
.content-with-donate-sidebar {
align: left;
width: 80%;
}
#container #mainContent { #container #mainContent {
max-width: 50em; max-width: 50em;
margin: 0; margin: 0;

View file

@ -8,21 +8,6 @@
{% endblock %} {% endblock %}
{% block outercontent %} {% block outercontent %}
<div class="donate-sidebar">
<table style="background-color:#afe478;width:100%;">
<tr><td style="text-align:center;padding:10px;padding-bottom:10px;">
<div id="donate-box" class="toggle-unit"><h1 class="toggle-content">Support
Now!</h1></div>
<h3>Support Copyleft Enforcement Now!</h3>
<p>
To support our copyleft compliance &amp; enforcement work,
please <a href="/sustainer/#annual"><span class="donate-box-highlight">become a Conservancy
Sustainer <strong>right now</strong></span></a>. We can't sustain
this work without ongoing support from donors like you!</p>
</td></tr></table>
</div>
<div class="content-with-donate-sidebar"> <div class="content-with-donate-sidebar">
<div id="container"> <div id="container">
<div id="sidebar" class="{% block submenuselection %}other{% endblock %}"> <div id="sidebar" class="{% block submenuselection %}other{% endblock %}">
@ -40,5 +25,18 @@
</div> </div>
<div id="mainContent">{% block content %}{% endblock %} <div id="mainContent">{% block content %}{% endblock %}
</div> </div>
</div></div> </div>
<div class="donate-sidebar">
<details>
<summary>Support Now!</summary>
<h3>Support Copyleft Enforcement Now!</h3>
<p>
To support our copyleft compliance &amp; enforcement work,
please <a href="/sustainer/#annual"><span class="donate-box-highlight">become a Conservancy
Sustainer <strong>right now</strong></span></a>. We can't sustain
this work without ongoing support from donors like you!</p>
</details>
</div>
{% endblock %} {% endblock %}

View file

@ -8,21 +8,6 @@
{% endblock %} {% endblock %}
{% block outercontent %} {% block outercontent %}
<div class="donate-sidebar">
<table style="background-color:#afe478;width:100%;">
<tr><td style="text-align:center;padding:10px;padding-bottom:10px;">
<div id="donate-box" class="toggle-unit"><h1 class="toggle-content">Support
Now!</h1></div>
<h3>Support Copyleft Enforcement Now!</h3>
<p>
To support our copyleft compliance &amp; enforcement work,
please <a href="/sustainer/#annual"><span class="donate-box-highlight">become a Conservancy
Sustainer <strong>right now</strong></span></a>. We can't sustain
this work without ongoing support from donors like you!</p>
</td></tr></table>
</div>
<div class="content-with-donate-sidebar"> <div class="content-with-donate-sidebar">
<div id="container"> <div id="container">
<div id="sidebar" class="{% block submenuselection %}other{% endblock %}"> <div id="sidebar" class="{% block submenuselection %}other{% endblock %}">
@ -39,4 +24,17 @@
<div id="mainContent">{% block content %}{% endblock %} <div id="mainContent">{% block content %}{% endblock %}
</div> </div>
</div></div> </div></div>
<div class="donate-sidebar">
<details>
<summary>Support Now!</summary>
<h3>Support Copyleft Enforcement Now!</h3>
<p>
To support our copyleft compliance &amp; enforcement work,
please <a href="/sustainer/#annual"><span class="donate-box-highlight">become a Conservancy
Sustainer <strong>right now</strong></span></a>. We can't sustain
this work without ongoing support from donors like you!</p>
</details>
</div>
{% endblock %} {% endblock %}

View file

@ -1,4 +1,5 @@
{% extends "base_conservancy.html" %} {% extends "base_conservancy.html" %}
{% load static %}
{% block subtitle %}Support Conservancy - {% endblock %} {% block subtitle %}Support Conservancy - {% endblock %}
{% block category %}sustainer{% endblock %} {% block category %}sustainer{% endblock %}
@ -14,48 +15,6 @@
<p><a href="/">Home</a> / <a href="#fixme">Who We Are</a></p> <p><a href="/">Home</a> / <a href="#fixme">Who We Are</a></p>
</div> </div>
<div class="donate-sidebar">
<table style="background-color:#afe478;width:100%;">
<tr><td style="text-align:center;padding:10px;padding-bottom:10px;">
<div id="donate-box" class="toggle-unit"><h1 class="toggle-content">Support
Now!</h1></div>
<h3 class="donate-box-highlight">Become a Sustainer Now:</h3>
<p>Support us now!</p>
<h4><a href="#annual"><span class="donate-box-highlight">Annual sustainer</span> via PayPal, ACH, or credit card.</a></h4>
<h4><a href="#monthly"><span class="donate-box-highlight">Monthly sustainer</span> via PayPal, ACH, or credit card.</a></h4>
<h4><a href="#renewal"><span class="donate-box-highlight">Renewing Annual sustainer</span> via PayPal, ACH, or credit card.</a></h4>
<span class="donate-box-highlight">Other annual sustainers methods:</span>
<div class="toggle-unit">
<h4 class="toggle-control" data-text="Wire Transfer"
data-expanded-text="Wire Transfer:">Wire Transfer</h4>
<div class="toggle-content">
Contact <a href="mailto:donate@sfconservancy.org">Conservancy
by email</a><br/> for wire transfer instructions.<br/>
Include currency &amp; country.<br/>
</div><!-- /.toggle-content -->
</div><!-- /.toggle.unit -->
<div class="toggle-unit">
<h4 class="toggle-control" data-text="Paper Check"
data-expanded-text="Paper Check:">Paper Check</h4>
<div class="toggle-content">
Send paper check for $120 to:<br/>
Software Freedom Conservancy, Inc.<br/>
137 MONTAGUE ST STE 380<br/>
BROOKLYN, NY 11201-3548 &nbsp; USA<br/>
Please write <q>SUSTAINER</q>, t-shirt size, if you are renewing, and if
you want public acknowledgment in memo line.
</div><!-- /.toggle-content -->
</div><!-- /.toggle.unit -->
<p><a href="/donate">Even More Ways to Donate</a></p>
<!-- Flattr end -->
</td></tr></table>
</div>
<div class="content-with-donate-sidebar" id="formStart"> <div class="content-with-donate-sidebar" id="formStart">
@ -214,6 +173,7 @@ you products this end of year season, we offer you a chance to donate to somethi
your money to work fighting for the freedom and rights of all software your money to work fighting for the freedom and rights of all software
users.</p> users.</p>
<div style="overflow: auto">
<div class="picture-small right"> <div class="picture-small right">
<img src="/img/scaled-LLW-2015-Conservancy-Supporters-by-Carlo-Piana-CC-0.jpg" alt="Zack, Karen, John and Jim pose, mostly wearing the vintage t-shirt!" /> <img src="/img/scaled-LLW-2015-Conservancy-Supporters-by-Carlo-Piana-CC-0.jpg" alt="Zack, Karen, John and Jim pose, mostly wearing the vintage t-shirt!" />
<p>Vintage-shirt-wearing Sustainers pose with Karen! <br/>From left: Stefano &ldquo;Zack&rdquo; Zacchiroli, Karen M. Sandler, John Sullivan, and Jim Wright</p> <p>Vintage-shirt-wearing Sustainers pose with Karen! <br/>From left: Stefano &ldquo;Zack&rdquo; Zacchiroli, Karen M. Sandler, John Sullivan, and Jim Wright</p>
@ -270,10 +230,51 @@ $256 or more between 2020-01-15 and 2021-01-15 can receive one of these vintage
<p>You too can look cool in the vintage design. Or maybe your original has faded and you're ready to spruce up with a new one? As we said, <p>You too can look cool in the vintage design. Or maybe your original has faded and you're ready to spruce up with a new one? As we said,
supplies are limited so make a big donation today, support Conservancy, and show you've always been old-school &mdash; or just supplies are limited so make a big donation today, support Conservancy, and show you've always been old-school &mdash; or just
want to look that way!</p> want to look that way!</p>
</div>
</div> </div>
<a class="expander" data-expand-link-text="(Expand All Sections)"></a> <a class="expander" data-expand-link-text="(Expand All Sections)"></a>
</div> </div>
</div> </div>
<div class="donate-sidebar">
<details>
<summary>Support Now!</summary>
<h3 class="donate-box-highlight">Become a Sustainer Now:</h3>
<p>Support us now!</p>
<h4><a href="#annual"><span class="donate-box-highlight">Annual sustainer</span> via PayPal, ACH, or credit card.</a></h4>
<h4><a href="#monthly"><span class="donate-box-highlight">Monthly sustainer</span> via PayPal, ACH, or credit card.</a></h4>
<h4><a href="#renewal"><span class="donate-box-highlight">Renewing Annual sustainer</span> via PayPal, ACH, or credit card.</a></h4>
<span class="donate-box-highlight">Other annual sustainers methods:</span>
<div class="toggle-unit">
<h4 class="toggle-control" data-text="Wire Transfer"
data-expanded-text="Wire Transfer:">Wire Transfer</h4>
<div class="toggle-content">
Contact <a href="mailto:donate@sfconservancy.org">Conservancy
by email</a><br/> for wire transfer instructions.<br/>
Include currency &amp; country.<br/>
</div><!-- /.toggle-content -->
</div><!-- /.toggle.unit -->
<div class="toggle-unit">
<h4 class="toggle-control" data-text="Paper Check"
data-expanded-text="Paper Check:">Paper Check</h4>
<div class="toggle-content">
Send paper check for $120 to:<br/>
Software Freedom Conservancy, Inc.<br/>
137 MONTAGUE ST STE 380<br/>
BROOKLYN, NY 11201-3548 &nbsp; USA<br/>
Please write <q>SUSTAINER</q>, t-shirt size, if you are renewing, and if
you want public acknowledgment in memo line.
</div><!-- /.toggle-content -->
</div><!-- /.toggle.unit -->
<p><a href="/donate">Even More Ways to Donate</a></p>
<!-- Flattr end -->
</details>
</div>
{% endblock %} {% endblock %}