donate: Design updates

donate/models.py

@@ -385,7 +385,7 @@ class DonateProjectPage(DonateFormMixin, Page, SubpageMixin, MetadataPageMixin):
         return self.photo
 
     def get_meta_title(self):
-        return self.seo_title or self.main_title
+        return self.seo_title or self.title
 
     def get_meta_description(self):
         if self.search_description:
@@ -394,10 +394,6 @@ class DonateProjectPage(DonateFormMixin, Page, SubpageMixin, MetadataPageMixin):
             return str(self.perex)[:150] + "..."
         return self.perex
 
-    @property
-    def main_title(self):
-        return f"Podpoř projekt {self.title}"
-
     def get_context(self, request):
         context = super().get_context(request)
         context["other_projects"] = (
@@ -441,7 +437,7 @@ class DonateCookiesPage(Page, SubpageMixin, MetadataPageMixin):
         verbose_name = "Cookies"
 
 
-class DonateInfoPage(Page, SubpageMixin, MetadataPageMixin):
+class DonateInfoPage(DonateFormMixin, Page, SubpageMixin, MetadataPageMixin):
     body = RichTextField("obsah", blank=True)
 
     content_panels = Page.content_panels + [
@@ -471,3 +467,8 @@ class DonateInfoPage(Page, SubpageMixin, MetadataPageMixin):
 
     class Meta:
         verbose_name = "Info"
+
+    # use portal_project_id from home page
+    @property
+    def portal_project_id(self):
+        return self.get_parent().specific.portal_project_id

donate/static/donate/assets/css/style.css

@@ -156,11 +156,19 @@ h3.page-subheading {
 }
 
 
-
 /* BUTTONS */
 
 .btn-dark {
-  background: black;
+  background: #000000;
+}
+
+.btn-light {
+  background: #CCCCCC;
+}
+
+.btn-dark:hover, .btn-light:hover {
+  background: #222222;
+  color: #FFFFFF;
 }
 
 .btn {
@@ -1109,3 +1117,22 @@ article img {
   display: block;
   font-weight: bold;
 }
+
+/* FORM TWEAKS */
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+/* VARIOUS */
+
+img.full-width {
+  width: 635px;
+  height: auto;
+}

donate/templates/donate/base.html

@@ -117,8 +117,7 @@
             <ul class="footer__menu">
               <li><a href="https://ucet.pirati.cz" title="Zvláštní účet ve smyslu § 17b zákona č. 424/1991 Sb. o sdružování v politických stranách">Účet dle §17b ZPS</a></li>
               <li><a href="https://smlouvy.pirati.cz">Registr smluv</a></li>
-              <li><a href="https://wiki.pirati.cz/fo/otevrene_ucetnictvi">Otevřené účetnictví</a></li>
-              <li><a href="https://drive.google.com/drive/folders/1p9XK-pSPpOd60JGNCNnW8q31tltNki6p" title="Senátní volby 2018 - přehled darů">Senát - dary 2018</a></li>
+              <li><a href="https://piroplaceni.pirati.cz">Otevřené hospodaření</a></li>
               <li><a href="https://wiki.pirati.cz/fo/start" title="Financování a hospodaření">Financování</a></li>
             </ul>
           </div><!-- /column -->
@@ -148,6 +147,9 @@
               <a href="{{ page.root_page.flickr }}" target="_blank" rel="noreferrer"><i class="icon-flickr" title="Profil na Flickr"></i></a>
               {% endif %}
             </div>
+            <div class="row">
+              <a href="https://nalodeni.pirati.cz" class="btn btn-success ml-2 my-3">Naloď se <i class="icon-chevron-right ml-2"></i></a>
+            </div>
           </div><!-- /column -->
         </div> <!-- /row -->
 

donate/templates/donate/donate_home_page.html

@@ -18,7 +18,7 @@
               <a href="#strana" class="btn btn-dark btn-lg js-scroll-anchor">Chci darovat <i class="icon-chevron-right ml-2"></i></a>
             </div><!-- /column -->
             <div class="col-12 col-md-auto">
-              <a href="{{ page.info_page_url }}" class="btn btn-dark btn-lg">Chci vědět více <i class="icon-chevron-right ml-2"></i></a>
+              <a href="{{ page.info_page_url }}" class="btn btn-light btn-lg">Chci vědět více <i class="icon-chevron-right ml-2"></i></a>
             </div><!-- /column -->
           </div> <!-- /row -->
         </div><!-- /column -->

donate/templates/donate/donate_info_page.html

 {% extends "donate/base.html" %}
-{% load wagtailcore_tags %}
+{% load static wagtailcore_tags %}
 
 {% block content %}
 
@@ -13,8 +13,98 @@
   </section>
 
   <section class="section--primary">
-    <div class="container richtext">
+    <div class="container">
+      <div class="row">
+        <div class="col-12 col-lg-8 col-xl-7 mb-4 mb-lg-0 richtext">
+
           {{ page.body|richtext }}
+
+        </div><!-- /column -->
+
+        <div class="col-12 col-lg-4 offset-xl-1"><!-- /column -->
+          <div class="project-donate-form mb-4">
+            <div class="project-donate-form__left">
+              <div class="project-donate-form__left-content">
+                <h2 class="lead mb-0">Podpoř piráty</h2>
+              </div><!-- /project-donate-form__left-content -->
+            </div><!-- /project-donate-form__left -->
+
+            <div class="project-donate-form__right">
+              {% if page.show_donate_form %}
+              <form id="js-donate-form" method="post">
+                {% csrf_token %}
+                <div class="form-group row mb-2 align-items-center">
+                    <legend class="col-form-label col-md-12 col-form-label-lg">Částka</legend>
+                    <div class="col-md-12">
+                        <div class="custom-control custom-radio custom-control-inline">
+                          <input type="radio" id="amount1" name="amount" value="100" class="custom-control-input" checked>
+                          <label class="custom-control-label col-form-label-lg" for="amount1">100 Kč</label>
+                        </div>
+                        <div class="custom-control custom-radio custom-control-inline">
+                          <input type="radio" id="amount2" name="amount" value="200" class="custom-control-input">
+                          <label class="custom-control-label col-form-label-lg" for="amount2">200 Kč</label>
+                        </div>
+                        <div class="custom-control custom-radio custom-control-inline">
+                          <input type="radio" id="amount3" name="amount" value="500" class="custom-control-input">
+                          <label class="custom-control-label col-form-label-lg" for="amount3">500 Kč</label>
+                        </div>
+                        <div class="custom-control custom-radio custom-control-inline">
+                          <input type="radio" id="amount4" name="amount" value="-1" class="custom-control-input">
+                          <label class="custom-control-label col-form-label-lg" for="amount4">Jiná částka</label>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group row mb-2 align-items-center" id="js-custom-amount-input" style="display: none;">
+                    <div class="col-md-12">
+                      <div class="input-group input-group-lg mb-3 custom-amount">
+                        <input type="number" class="form-control" id="customamount" name="custom_amount" placeholder="1000" aria-describedby="customamount-currency">
+                        <div class="input-group-append">
+                          <span class="input-group-text" id="customamount-currency">Kč</span>
+                        </div>
+                      </div>
+                    </div>
+                </div>
+                <div class="form-group row mb-4 align-items-center">
+                    <legend class="col-form-label col-md-12 col-form-label-lg">Typ příspěvku</legend>
+                    <div class="col-md-12">
+                        <div class="custom-control custom-radio custom-control-inline">
+                          <input type="radio" id="periodicity1" name="periodicity" value="730" class="custom-control-input" checked>
+                          <label class="custom-control-label col-form-label-lg" for="periodicity1">Měsíční</label>
+                        </div>
+                        <div class="custom-control custom-radio custom-control-inline">
+                          <input type="radio" id="periodicity2" name="periodicity" value="99999" class="custom-control-input">
+                          <label class="custom-control-label col-form-label-lg" for="periodicity2">Jednorázový</label>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group row mb-0">
+                  <div class="col-12">
+                    <button type="submit" class="btn btn-success btn-lg">Darovat</button>
+                  </div>
+                </div>
+              </form>
+              {% endif %}
+
+            </div><!-- /project-donate-form__right -->
+          </div>
+
+          <div class="article__sharing-box">
+            <div class="card-body">
+              <div class="sharing-box__content">
+                <div class="icon"><i class="icon-heart"></i></div>
+                <div class="text"><h3 class="lead">Sdílení je aktem lásky</h3></div>
+              </div>
+              <div class="sharing-buttons">
+                <a href="https://www.facebook.com/sharer/sharer.php?u={{ page.full_url }}" target="_blank" class="btn btn-facebook"><i class="icon-facebook-f"></i></a>
+                <a href="https://twitter.com/intent/tweet?text=Podpoř projekt {{ page.title }}&url={{ page.full_url }}" target="_blank" class="btn btn-twitter"><i class="icon-twitter"></i></a>
+                <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ page.full_url }}" target="_blank" class="btn btn-linkedin"><i class="icon-linkedin"></i></a>
+              </div>
+            </div>
+            <div class="image"><img data-src="{% static "donate/img/vlajka.jpg" %}" class="img-fluid lazyload" alt="Vlajka pirátů"></div>
+          </div><!-- /article__sharing-box -->
+
+        </div><!-- /column -->
+      </div> <!-- /row -->
     </div> <!-- /container -->
   </section>
 

donate/templates/donate/donate_project_page.html

@@ -8,7 +8,7 @@
 
   <section class="section--alternate project__header">
     <div class="container">
-      <h1 class="lead heading">{{ page.main_title }}</h1>
+      <h1 class="lead heading">{{ page.title }}</h1>
 
       <div class="row align-items-center">
         <div class="col-12 col-md-6 mb-3 mb-md-0">
@@ -17,7 +17,7 @@
         <div class="col-12 col-md-6 text-md-right">
           <div class="project__badges">
             {% if page.is_new %}
-            <span class="badge badge-light new">Nově přidáno</span>
+            <span class="badge badge-light new">Nový projekt</span>
             {% endif %}
             {# TODO <span class="badge badge-light almost">Už jen kousek</span> #}
           </div>