Fixes #4135: Payment form directly on book page.
authorRadek Czajka <rczajka@rczajka.pl>
Mon, 7 Dec 2020 12:41:57 +0000 (13:41 +0100)
committerRadek Czajka <rczajka@rczajka.pl>
Mon, 7 Dec 2020 12:41:57 +0000 (13:41 +0100)
src/catalogue/templates/catalogue/book_short.html
src/catalogue/templates/catalogue/book_wide.html
src/catalogue/views.py
src/club/static/club/club.scss [new file with mode: 0644]
src/club/templates/club/membership_form.html
src/club/templates/club/payment_form.html [new file with mode: 0644]
src/club/templates/club/payment_info.html [new file with mode: 0644]
src/wolnelektury/settings/static.py
src/wolnelektury/static/scss/main/book_box.scss

index 0c63179..4c69492 100644 (file)
           </li>
         </ul>
       {% else %}
           </li>
         </ul>
       {% else %}
-        <p class="book-box-tools book-box-tools-warn">{% trans "For now this work is only available for our subscribers." %}
-          <a href="/towarzystwo/">Dołącz do Towarzystwa Przyjaciół Wolnych Lektur</a>
-       </p>
+        {% block preview-info %}
+          <p class="book-box-tools book-box-tools-warn">
+            {% trans "For now this work is only available for our subscribers." %}
+           <a href="/towarzystwo/">Dołącz do Towarzystwa Przyjaciół Wolnych Lektur</a>
+         </p>
+        {% endblock %}
       {% endif %}
       {% endcache %}
       {% block book-box-extra-info %}{% endblock %}
       {% endif %}
       {% endcache %}
       {% block book-box-extra-info %}{% endblock %}
index ffa4bce..84eb9dd 100644 (file)
@@ -2,6 +2,8 @@
 {% load i18n %}
 {% load choose_fragment license_icon from catalogue_tags %}
 {% load choose_cite from social_tags %}
 {% load i18n %}
 {% load choose_fragment license_icon from catalogue_tags %}
 {% load choose_cite from social_tags %}
+{% load status from catalogue_tags %}
+{% load chunks %}
 
 
 {% block box-class %}book-wide-box{% endblock %}
 
 
 {% block box-class %}book-wide-box{% endblock %}
 {% endblock %}
 
 
 {% endblock %}
 
 
+{% block preview-info %}
+  <p class="book-box-tools book-box-tools-warn">
+    {% chunk "book-preview-warn" %}
+  </p>
+
+  {% include "club/payment_info.html" %}
+{% endblock %}
+
+
+
 {% block right-column %}
   <div class="right-column">
     <div class="quote">
 {% block right-column %}
   <div class="right-column">
     <div class="quote">
       {% endif %}
     </div>
     {% include 'catalogue/snippets/jplayer.html' %}
       {% endif %}
     </div>
     {% include 'catalogue/snippets/jplayer.html' %}
+
+    {% if book|status:request.user == 'closed' %}
+      {% with form=club_form %}
+        <form method="POST" action="/towarzystwo/" id="payment-form" class="wlform">
+          {% csrf_token %}
+          {% include "club/payment_form.html" %}
+          {% chunk 'club_form_bottom' %}
+        </form>
+      {% endwith %}
+    {% endif %}
+
   </div>
 {% endblock %}
 
   </div>
 {% endblock %}
 
index bca75e7..9a36b73 100644 (file)
@@ -17,6 +17,7 @@ from django.utils.translation import ugettext as _, ugettext_lazy
 from django.views.decorators.cache import never_cache
 
 from ajaxable.utils import AjaxableFormView
 from django.views.decorators.cache import never_cache
 
 from ajaxable.utils import AjaxableFormView
+from club.forms import ScheduleForm
 from club.models import Membership
 from annoy.models import DynamicTextInsert
 from pdcounter import views as pdcounter_views
 from club.models import Membership
 from annoy.models import DynamicTextInsert
 from pdcounter import views as pdcounter_views
@@ -289,6 +290,7 @@ def book_detail(request, slug):
             'book': book,
             'book_children': book.children.all().order_by('parent_number', 'sort_key'),
             'active_menu_item': 'books',
             'book': book,
             'book_children': book.children.all().order_by('parent_number', 'sort_key'),
             'active_menu_item': 'books',
+            'club_form': ScheduleForm() if book.preview else None,
         })
 
 
         })
 
 
diff --git a/src/club/static/club/club.scss b/src/club/static/club/club.scss
new file mode 100644 (file)
index 0000000..4b3d7d5
--- /dev/null
@@ -0,0 +1,126 @@
+.plan-select {
+    margin-bottom: 15px;
+}
+
+.methods {
+    color: #888;
+    line-height: 30px;
+}
+.methods .method {
+    border: 1px solid #888;
+    border-radius: 5px;
+    display: inline-block;
+    padding: 0 5px;
+}
+
+.methods img {
+    height: 30px;
+    margin-right: 5px;
+    vertical-align: middle;
+}
+
+.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;
+    border-radius: 8px;
+    background: none;
+    cursor: pointer;
+    padding: 0;
+    margin-right: 3%;
+    margin-bottom: 10px;
+    line-height: 3em;
+    font-size: 20px;
+}
+.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: #9ACD32;
+}
+.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;
+    }
+}
index 1ae2f82..f9fe931 100644 (file)
@@ -9,136 +9,6 @@
 
 
 {% block body %}
 
 
 {% block body %}
-
-  <style>
-
-   .plan-select {
-       margin-bottom: 15px;
-   }
-.methods {
- color: #888;
-line-height: 30px;
-}
-.methods .method {
-  border: 1px solid #888;
-  border-radius: 5px;
-display: inline-block;
-padding: 0 5px;
-}
-.methods img {
-height: 30px;
-margin-right: 5px;
-vertical-align: middle;
-}
-   .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;
-       border-radius: 8px;
-       background: none;
-       cursor: pointer;
-       padding: 0;
-       margin-right: 3%;
-       margin-bottom: 10px;
-       line-height: 3em;
-       font-size: 20px;
-   }
-   .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: #9ACD32;
-   }
-   .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>{% trans "Support Wolne Lektury" %}</h1>
   <div class="white-box normal-text">
 
     <h1>{% trans "Support Wolne Lektury" %}</h1>
@@ -164,68 +34,7 @@ vertical-align: middle;
 
         {% chunk 'club_form_top' %}
 
 
         {% chunk 'club_form_top' %}
 
-        <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>
-
-        <h3>1. {% trans "Choose your type of support" %}</h3>
-
-        {{ form.amount }}
-        {{ form.monthly }}
-        <div class="plan-select">
-          <span class="button plan-toggle" data-plan="plan-single" data-monthly="False">{% trans "one-time" %}</span>
-          <span class="button plan-toggle active" data-plan="plan-monthly" data-monthly="True">{% trans "monthly" %}</span>
-        </div>
-
-        <h3>2. {% trans "Choose the amount" %}</h3>
-
-        <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">{% trans "different amount" %}</span>
-            <input type="number" min="{{ club.min_amount }}">
-          </span>
-          <div class="methods">{% include 'club/payment/payu.html' %}</div>
-        </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">{% trans "different amount" %}</span>
-            <input type="number" min="{{ club.min_amount }}">
-          </span>
-          <div class="methods">{% include 'club/payment/payu-re.html' %}</div>
-        </div>
-
-        <h3>3. {% trans "Provide an e-mail address" %}</h3>
-
-        <p>{{ form.email }}</p>
-
-        <p>
-          {{ form.agree_newsletter }}
-          <label for="id_agree_newsletter">
-            {% trans "I'd like to receive informations about new publications." %}
-          </label>
-        </p>
-
-        <p>{% trans 'You can unsubscribe at any point. More in the <a target="_blank" href="https://nowoczesnapolska.org.pl/prywatnosc/">privacy policy</a>.' %}</p>
-
-        <div><button class="submit" type='submit'>{% trans "Donate" %}</button></div>
+        {% include "club/payment_form.html" %}
 
         {% chunk 'club_form_bottom' %}
 
 
         {% chunk 'club_form_bottom' %}
 
@@ -245,17 +54,8 @@ vertical-align: middle;
             {% endif %}
           </div>
         {% endif %}
             {% 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>
 
 </div>
 </div>
 
diff --git a/src/club/templates/club/payment_form.html b/src/club/templates/club/payment_form.html
new file mode 100644 (file)
index 0000000..454bc77
--- /dev/null
@@ -0,0 +1,64 @@
+{% load i18n %}
+
+<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>
+
+<h3>1. {% trans "Choose your type of support" %}</h3>
+
+{{ form.amount }}
+{{ form.monthly }}
+<div class="plan-select">
+  <span class="button plan-toggle" data-plan="plan-single" data-monthly="False">{% trans "one-time" %}</span>
+  <span class="button plan-toggle active" data-plan="plan-monthly" data-monthly="True">{% trans "monthly" %}</span>
+</div>
+
+<h3>2. {% trans "Choose the amount" %}</h3>
+
+<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">{% trans "different amount" %}</span>
+    <input type="number" min="{{ club.min_amount }}">
+  </span>
+  <div class="methods">{% include 'club/payment/payu.html' %}</div>
+</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">{% trans "different amount" %}</span>
+    <input type="number" min="{{ club.min_amount }}">
+  </span>
+  <div class="methods">{% include 'club/payment/payu-re.html' %}</div>
+</div>
+
+<h3>3. {% trans "Provide an e-mail address" %}</h3>
+
+<p>{{ form.email }}</p>
+
+<p>
+  {{ form.agree_newsletter }}
+  <label for="id_agree_newsletter">
+    {% trans "I'd like to receive informations about new publications." %}
+  </label>
+</p>
+
+<p>{% trans 'You can unsubscribe at any point. More in the <a target="_blank" href="https://nowoczesnapolska.org.pl/prywatnosc/">privacy policy</a>.' %}</p>
+
+<div><button class="submit" type='submit'>{% trans "Donate" %}</button></div>
diff --git a/src/club/templates/club/payment_info.html b/src/club/templates/club/payment_info.html
new file mode 100644 (file)
index 0000000..7527f85
--- /dev/null
@@ -0,0 +1,13 @@
+{% load chunks %}
+
+<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>
index 1f42d55..efb61b2 100644 (file)
@@ -39,6 +39,7 @@ PIPELINE = {
                 'css/tlite.css',
 
                 'scss/main.scss',
                 'css/tlite.css',
 
                 'scss/main.scss',
+                'club/club.scss',
             ],
             'output_filename': 'css/compressed/main.css',
         },
             ],
             'output_filename': 'css/compressed/main.css',
         },
index 17b72f1..f9e2d6b 100644 (file)
      max-width: 32em;
      border: 1px solid #888;
      padding: 1em;
      max-width: 32em;
      border: 1px solid #888;
      padding: 1em;
+     box-sizing: border-box;
   }
 
 
   }