X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/ca336bd1f9658cf713681d1412d4153e5c4d9c93..1a6ad5b9b48a5efa90410fd324c256f59f57e08f:/src/club/templates/club/membership_form.html

diff --git a/src/club/templates/club/membership_form.html b/src/club/templates/club/membership_form.html
index db2a8ed24..8ad0387e6 100644
--- a/src/club/templates/club/membership_form.html
+++ b/src/club/templates/club/membership_form.html
@@ -1,20 +1,222 @@
 {% extends request.session.from_app|yesno:"base/app.html,base/base.html" %}
+{% load chunks %}
+{% load thumbnail %}
+{% load club %}
 
-
-{% block titleextra %}Towarzystwo Wolnych Lektur{% endblock %}
+{% block titleextra %}Uwalniaj książki razem z nami!{% endblock %}
+{% block metadescription %}„Wolne Lektury należy wspierać, bo są” - Filip Springer{% endblock %}
 
 
 {% block body %}
-<div class="white-box normal-text">
 
-	<h1>{% if membership %}Odnów swoje członkostwo w Towarzystwie Wolnych Lektur{% else %}Dołącz do Towarzystwa Wolnych Lektur{% endif %}</h1>
+  <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;
+       margin-bottom: 1em;
+       border: 1px solid #ddd;
+       position: relative;
+   }
+   .ambassador.with-photo {
+       padding-right: 145px;
+   }
+   .ambassador img {
+       border-radius: 100%;
+       height: 100px;
+       width: 100px;
+       position: absolute;
+       top: 35px;
+       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>
+    <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>
+
+    {% with schedule=request.user|active_schedule %}
+     {% if schedule %}
+      <p><a href="{{ schedule.get_absolute_url }}">Zobacz swoje dotychczasowe wsparcie.</a></p>
+     {% endif %}
+    {% endwith %}
 
-<form method="POST" action="">
-  {% csrf_token %}
+    {% chunk 'club_form_top' %}
+    <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>
+      </form>
+
+      <div class="club-form-info">
+        {% if ambassador %}
+	<div class="ambassador {% if ambassador.photo %}with-photo{% endif %}">
+            <div>
+              <em>
+                {{ ambassador.text }}
+              </em>
+              <div style="font-size: 1.2em">{{ ambassador.name }}</div>
+            </div>
+            {% if ambassador.photo %}
+              <img src="{% thumbnail ambassador.photo "100x100" as thumb %}{{ thumb.url }}{% empty %}{{ ambassador.photo.url }}{% endthumbnail %}">
+            {% 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>
+</div>
+</div>
 
-  {{ form.as_p }}
-  <button type='submit'>Dołącz</button>
-</form>
+{% chunk 'club_form_bottom' %}
 
 </div>