{% extends request.session.from_app|yesno:"base/app.html,base/base.html" %}
+{% load i18n %}
{% load chunks %}
{% load thumbnail %}
+{% load club %}
-{% block titleextra %}Towarzystwo Wolnych Lektur{% endblock %}
+{% block titleextra %}{% trans "Join us in freeing the books!" %}{% endblock %}
+{% block metadescription %}{% trans "„Wolne Lektury należy wspierać, bo są” - Filip Springer" %}{% endblock %}
{% block body %}
-
- <style>
- .payment-method.disabled {
- opacity: .5;
- filter: grayscale(100%);
- }
-
- .button {
- box-sizing: border-box;
- display: inline-block;
- text-align: center;
- }
- .kwota, .inna .button, .plan-toggle, .inna input {
- border: 1px solid black;
- background: none;
- cursor: pointer;
- padding: 10px 0;
- margin-right: 3%;
- margin-bottom: 10px;
- line-height: 3em;
- }
- .plan-toggle {
- width: 46.5%;
- }
- .kwota {
- width: 30%;
- }
- .kwota:after {
- content: " zł";
- }
- .kwota.yearly {
- background: orange;
-
- }
- .inna .button {
- width: 63%;
- }
- .inna input {
- width: 60%;
- padding-left: 1.5%;
- padding-right: 1.5%;
- height: 3em !important;
- text-align: center;
- }
- .chunk-alt {
- position: relative;
- overflow: hidden;
- }
- .chunk-alt .chunk {
- top: 0;
- }
-
- .kwota.active, .plan-toggle.active {
- background: black;
- color: white;
- }
- .inna input {display: none;}
- .inna.active input {display: inline;}
- .inna.active .button {display: none;}
-
- .ambassador {
- padding: 2em 145px 2em 2em;
- margin-bottom: 1em;
- border: 1px solid #ddd;
- position: relative;
- }
- .ambassador img {
- border-radius: 100%;
- height: 100px;
- width: 100px;
- position: absolute;
- top: 30px;
- right: 30px;
- }
- .ambassador div {
- text-align: right;
- line-height: 1.5em;
- }
-
- .club-form-info {
- line-height: 1.5em;
- }
-
- @media screen and (max-width: 1023px) {
- .club-form-info {
- margin-top: 2em;
- }
- }
-
-
- @media screen and (min-width: 1024px) {
- .club-form-info {
- border-left: 1px solid #ddd;
- padding-left: 2em;
- margin-left: 2em;
- }
- .twocol {
- display: flex;
- }
- .twocol > form, .twocol > div {
- flex: 1;
- }
- }
-
- </style>
-
-
<div class="white-box normal-text">
- <h1>Wspieraj Wolne Lektury</h1>
+ <h1>{% trans "Support Wolne Lektury" %}</h1>
<h2 style="margin-bottom:2em;">
- {% if membership %}Dziękujemy za Twoje dotychczasowe zaangażowanie! Wesprzyj nas ponownie!{% else %}Dziękujemy, że chcesz razem z nami uwalniać książki!{% endif %}</h2>
+ {% if membership %}
+ {# Displays to members. #}
+ {% trans "Thank you for your support! Support us again!" %}
+ {% else %}
+ {# Displays to non-supporters. #}
+ {% trans "Thank you for wanting to free the books with us!" %}
+ {% endif %}</h2>
+
+ {% with schedule=request.user|active_schedule %}
+ {% if schedule %}
+ <p><a href="{{ schedule.get_absolute_url }}">{% trans "See your past support." %}</a></p>
+ {% endif %}
+ {% endwith %}
- {% chunk 'club_form_top' %}
- <div class='twocol'>
+ <div class='twocol'>
<form method="POST" action="" id="payment-form" class="wlform">
{% csrf_token %}
- <h3>Zadeklaruj, jak często i jaką kwotą chcesz nas wspierać:</h3>
-
- <ul class="errorlist">
- {% for e in form.non_field_errors %}
- <li>{{ e }}</li>
- {% endfor %}
- {% for e in form.plan.errors %}
- <li>{{ e }}</li>
- {% endfor %}
- {% for e in form.amount.errors %}
- <li>{{ e }}</li>
- {% endfor %}
- </ul>
-
- {{ form.amount }}
- {{ form.monthly }}
- <div>
- <span class="button plan-toggle" data-plan="plan-single" data-monthly="False">jednorazowo</span>
- <span class="button plan-toggle active" data-plan="plan-monthly" data-monthly="True">miesięcznie</span>
- </div>
-
- <div class="plan" id="plan-single" style="display:none;" data-monthly="False" data-min-for-year="{{ club.min_for_year }}" data-amount="{{ club.default_single_amount }}">
- {% for amount in club.proposed_single_amounts %}
- <span class="button kwota{% if amount == club.default_single_amount %} active{% endif %}{% if amount >= club.min_for_year %} yearly{% endif %}">{{ amount }}</span>
- {% endfor %}
-
- <span class="inna">
- <span class="button">inna kwota</span>
- <input type="number" min="{{ club.min_amount }}">
- </span>
- </div>
-
-
- <div class="plan" id="plan-monthly" data-monthly="True" data-amount="{{ club.default_monthly_amount }}">
- {% for amount in club.proposed_monthly_amounts %}
- <span class="button kwota{% if amount == club.default_monthly_amount %} active{% endif %}">{{ amount }}</span>
- {% endfor %}
-
- <span class="inna">
- <span class="button">inna kwota</span>
- <input type="number" min="{{ club.min_amount }}">
- </span>
- </div>
-
- <h3>
- Podaj nam swój adres e-mail, żebyśmy mogli się z Tobą skontaktować:
- </h3>
-
- <p>
- {{ form.email }}</p>
- <button class="submit" type='submit'>Dołącz</button>
+
+ {% chunk 'club_form_top' %}
+
+ {% if supporters_target %}
+ {% club_monthly_since supporters_since as supporters %}
+ {% club_monthly_missing_since supporters_since supporters_target as missing_supporters %}
+ <p>
+ {% blocktrans %}Help us get 100 new Friends by the end of the school semester.{% endblocktrans %}
+ {% blocktrans count supporters=supporters %}
+ So far <b style="color: #0d7e85">{{ supporters }}</b> reader has already supported us with a regular donation,
+ {% plural %}
+ So far <b style="color: #0d7e85">{{ supporters }}</b> readers have already supported us with a regular donation,
+ {% endblocktrans %}
+ {% blocktrans count missing_supporters=missing_supporters %}
+ <b style="color: #0d7e85">{{ missing_supporters }}</b> is missing.
+ {% plural %}
+ <b style="color: #0d7e85">{{ missing_supporters }}</b> are missing.
+ {% endblocktrans %}
+ </p>
+ <div class="funding" style="background: none;"><div class="description"><div class="progress" style="text-align: center; background-size: {{ supporters }}% 1px;"><span class="piece progress-collected"> {{ supporters }}</span><span class="piece progress-target">{{ missing_supporters }} </span><div style="clear: both"></div></div></div></div>
+ {% endif %}
+
+ {% include "club/payment_form.html" %}
+
+ {% chunk 'club_form_bottom' %}
+
</form>
<div class="club-form-info">
{% if ambassador %}
- <div class="ambassador">
+ <div class="ambassador {% if ambassador.photo %}with-photo{% endif %}">
<div>
<em>
{{ ambassador.text }}
{% endif %}
</div>
{% endif %}
- <div class="chunk-alt">
- <div class="chunk chunk-monthly">
- {% chunk 'club-form-info-monthly' %}
- </div>
- <div class="chunk chunk-single" style="display: none;">
- {% chunk 'club-form-info-single' %}
- </div>
- <div class="chunk chunk-single-year" style="display: none;">
- {% chunk 'club-form-info-single-year' %}
- </div>
- </div>
+
+ {% include "club/payment_info.html" %}
</div>
</div>
fnp / wolnelektury.git / blobdiff