src/club/templates/club/membership_form.html

   1 {% extends request.session.from_app|yesno:"base/app.html,base/base.html" %}
   2 {% load chunks %}
   3 {% load thumbnail %}
   4 {% load club %}
   5
   6 {% block titleextra %}Uwalniaj książki razem z nami!{% endblock %}
   7 {% block metadescription %}„Wolne Lektury należy wspierać, bo są” - Filip Springer{% endblock %}
   8
   9
  10 {% block body %}
  11
  12   <style>
  13    .payment-method.disabled {
  14        opacity: .5;
  15        filter: grayscale(100%);
  16    }
  17
  18    .button {
  19        box-sizing: border-box;
  20        display: inline-block;
  21        text-align: center;
  22    }
  23    .kwota, .inna .button, .plan-toggle, .inna input {
  24        border: 1px solid black;
  25        background: none;
  26        cursor: pointer;
  27        padding: 10px 0;
  28        margin-right: 3%;
  29        margin-bottom: 10px;
  30        line-height: 3em;
  31    }
  32    .plan-toggle {
  33        width: 46.5%;
  34    }
  35    .kwota {
  36        width: 30%;
  37    }
  38    .kwota:after {
  39        content: " zł";
  40    }
  41    .kwota.yearly {
  42        background: orange;
  43
  44    }
  45    .inna .button {
  46        width: 63%;
  47    }
  48    .inna input {
  49        width: 60%;
  50        padding-left: 1.5%;
  51        padding-right: 1.5%;
  52        height: 3em !important;
  53        text-align: center;
  54    }
  55    .chunk-alt {
  56        position: relative;
  57        overflow: hidden;
  58    }
  59    .chunk-alt .chunk {
  60        top: 0;
  61    }
  62
  63    .kwota.active, .plan-toggle.active {
  64        background: black;
  65        color: white;
  66    }
  67    .inna input {display: none;}
  68    .inna.active input {display: inline;}
  69    .inna.active .button {display: none;}
  70
  71    .ambassador {
  72        padding: 2em;
  73        margin-bottom: 1em;
  74        border: 1px solid #ddd;
  75        position: relative;
  76    }
  77    .ambassador.with-photo {
  78        padding-right: 145px;
  79    }
  80    .ambassador img {
  81        border-radius: 100%;
  82        height: 100px;
  83        width: 100px;
  84        position: absolute;
  85        top: 35px;
  86        right: 30px;
  87    }
  88    .ambassador div {
  89        text-align: right;
  90        line-height: 1.5em;
  91    }
  92
  93    .club-form-info {
  94        line-height: 1.5em;
  95    }
  96
  97    @media screen and (max-width: 1023px) {
  98        .club-form-info {
  99            margin-top: 2em;
 100        }
 101    }
 102
 103
 104    @media screen and (min-width: 1024px) {
 105        .club-form-info {
 106            border-left: 1px solid #ddd;
 107            padding-left: 2em;
 108            margin-left: 2em;
 109        }
 110        .twocol {
 111            display: flex;
 112        }
 113        .twocol > form, .twocol > div {
 114            flex: 1;
 115        }
 116    }
 117
 118   </style>
 119
 120
 121   <div class="white-box normal-text">
 122
 123     <h1>Wspieraj Wolne Lektury</h1>
 124     <h2 style="margin-bottom:2em;">
 125       {% 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>
 126
 127     {% with schedule=request.user|active_schedule %}
 128      {% if schedule %}
 129       <p><a href="{{ schedule.get_absolute_url }}">Zobacz swoje dotychczasowe wsparcie.</a></p>
 130      {% endif %}
 131     {% endwith %}
 132
 133     {% chunk 'club_form_top' %}
 134     <div class='twocol'>
 135
 136       <form method="POST" action="" id="payment-form" class="wlform">
 137         {% csrf_token %}
 138         <h3>Zadeklaruj, jak często i jaką kwotą chcesz nas wspierać:</h3>
 139
 140         <ul class="errorlist">
 141           {% for e in  form.non_field_errors %}
 142             <li>{{ e }}</li>
 143           {% endfor %}
 144           {% for e in  form.plan.errors %}
 145             <li>{{ e }}</li>
 146           {% endfor %}
 147           {% for e in  form.amount.errors %}
 148             <li>{{ e }}</li>
 149           {% endfor %}
 150         </ul>
 151
 152         {{ form.amount }}
 153         {{ form.monthly }}
 154         <div>
 155           <span class="button plan-toggle" data-plan="plan-single" data-monthly="False">jednorazowo</span>
 156           <span class="button plan-toggle active" data-plan="plan-monthly" data-monthly="True">miesięcznie</span>
 157         </div>
 158
 159         <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 }}">
 160           {% for amount in club.proposed_single_amounts %}
 161             <span class="button kwota{% if amount == club.default_single_amount %} active{% endif %}{% if amount >= club.min_for_year %} yearly{% endif %}">{{ amount }}</span>
 162           {% endfor %}
 163
 164           <span class="inna">
 165             <span class="button">inna kwota</span>
 166             <input type="number" min="{{ club.min_amount }}">
 167           </span>
 168         </div>
 169
 170
 171         <div class="plan" id="plan-monthly" data-monthly="True" data-amount="{{ club.default_monthly_amount }}">
 172           {% for amount in club.proposed_monthly_amounts %}
 173             <span class="button kwota{% if amount == club.default_monthly_amount %} active{% endif %}">{{ amount }}</span>
 174           {% endfor %}
 175
 176           <span class="inna">
 177             <span class="button">inna kwota</span>
 178             <input type="number" min="{{ club.min_amount }}">
 179           </span>
 180         </div>
 181
 182         <h3>
 183           Podaj nam swój adres e-mail, żebyśmy mogli się z Tobą skontaktować:
 184         </h3>
 185
 186         <p>
 187           {{ form.email }}</p>
 188         <button class="submit" type='submit'>Dołącz</button>
 189       </form>
 190
 191       <div class="club-form-info">
 192         {% if ambassador %}
 193         <div class="ambassador {% if ambassador.photo %}with-photo{% endif %}">
 194             <div>
 195               <em>
 196                 {{ ambassador.text }}
 197               </em>
 198               <div style="font-size: 1.2em">{{ ambassador.name }}</div>
 199             </div>
 200             {% if ambassador.photo %}
 201               <img src="{% thumbnail ambassador.photo "100x100" as thumb %}{{ thumb.url }}{% empty %}{{ ambassador.photo.url }}{% endthumbnail %}">
 202             {% endif %}
 203           </div>
 204         {% endif %}
 205         <div class="chunk-alt">
 206           <div class="chunk chunk-monthly">
 207             {% chunk 'club-form-info-monthly' %}
 208           </div>
 209           <div class="chunk chunk-single" style="display: none;">
 210             {% chunk 'club-form-info-single' %}
 211           </div>
 212           <div class="chunk chunk-single-year" style="display: none;">
 213             {% chunk 'club-form-info-single-year' %}
 214           </div>
 215   </div>
 216 </div>
 217 </div>
 218
 219 {% chunk 'club_form_bottom' %}
 220
 221 </div>
 222
 223 {% endblock %}