Improve graphic styling of donate

#209

donate/blocks.py

@@ -9,6 +9,8 @@ from wagtail.blocks import (
 )
 from wagtail.images.blocks import ImageChooserBlock
 
+from donate.constants import RICH_TEXT_FEATURES
+
 
 class CrowdfundingRewardBlock(StructBlock):
     title = CharBlock(label="Název odměny")
@@ -33,7 +35,7 @@ class CrowdfundingRewardBlock(StructBlock):
 
 class CustomContentBlock(StructBlock):
     title = CharBlock(label="Nadpis")
-    content = RichTextBlock(label="Obsah")
+    content = RichTextBlock(label="Obsah", features=RICH_TEXT_FEATURES)
     link = URLBlock(label="Odkaz")
 
     class Meta:

donate/constants.py

+from shared.const import RICH_TEXT_DEFAULT_FEATURES
+
+# Select colors for rich text editors font color from style guide
+font_colors = [
+    ("Green", "#4ca971"),
+    ("Yellow", "#fde119"),
+    ("Blue", "#027da8"),
+    ("Cyan", "#004958"),
+    ("Violet", "#670047"),
+    ("Red", "#d60d53"),
+    ("Grey", "#262626"),
+]
+
+RICH_TEXT_FEATURES = RICH_TEXT_DEFAULT_FEATURES + list(
+    map(lambda color: "font_color_" + color[1], font_colors)
+)

donate/migrations/0028_donatehomepage_faq_page.py

+# Generated by Django 4.1.8 on 2023-07-01 00:13
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("donate", "0027_donatehomepage_custom_blocks"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="donatehomepage",
+            name="faq_page",
+            field=models.ForeignKey(
+                blank=True,
+                null=True,
+                on_delete=django.db.models.deletion.PROTECT,
+                related_name="FAQ",
+                to="donate.donatetextpage",
+                verbose_name="Stránka s FAQ",
+            ),
+        ),
+    ]

donate/models.py

@@ -136,6 +136,14 @@ class DonateHomePage(
         verbose_name="Obecné bloky",
     )
     # settings
+    faq_page = models.ForeignKey(
+        "donate.DonateTextPage",
+        on_delete=models.PROTECT,
+        blank=True,
+        null=True,
+        related_name="FAQ",
+        verbose_name="Stránka s FAQ",
+    )
     custom_url_1 = models.URLField("Vlastní odkaz 1", blank=True, null=True)
     custom_url_1_text = models.CharField(
         "Text vlastního odkazu 1", max_length=128, blank=True
@@ -222,6 +230,7 @@ class DonateHomePage(
             ],
             "nastavení darů",
         ),
+        FieldPanel("faq_page"),
     ]
 
     ### RELATIONS

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

@@ -213,6 +213,10 @@ h3.page-subheading {
   color: #ffffff;
 }
 
+.section--custom {
+  display: flow-root;
+}
+
 /* SECTION SIZING */
 
 section {
@@ -1199,3 +1203,13 @@ img.full-width {
   font-style: italic;
   font-weight: inherit;
 }
+
+/* OVERRIDE RICHTEXT IMAGES FOR MAIN PAGE (TODO: find out if we can apply this to all richtext images in donate */
+.section--custom .richtext-image.left {
+  float: left;
+  margin-right: 1.5rem;
+}
+.section--custom .richtext-image.right {
+  float: right;
+  margin-left: 1.5rem;
+}

donate/templates/donate/base.html

@@ -139,6 +139,9 @@
               <img src="{% static "donate/img/logo_napis_white.svg" %}" alt="Logo podpoř piráty">
             </div>
             <ul class="footer__menu mt-5">
+              {% if page.root_page.faq_page %}
+                <li><a href={{ page.root_page.faq_page.url }}>FAQ - pravidla pro přijímání darů</a></li>
+              {% endif %}
               <li><a href="/osobni-udaje/">Zásady zpracování osobních údajů</a></li>
               <li><a href="/obchodni-podminky/">Obchodní podmínky</a></li>
             </ul>

donate/templates/donate/blocks/custom_content_block.html

 {% load wagtailcore_tags wagtailimages_tags %}
 
-<div class="container mt-5">
+<div class="container">
     <h2 class="lead page-subheading mb-4">{{ self.title }}</h2>
-    <p class="mb-4">
+    <div class="mb-4 clearfix">
         {{ self.content|richtext }}
-    </p>
+    </div>
     <a href="{{ self.link }}" class="btn btn-dark btn-lg my-2">Chci vědět více <i class="icon-chevron-right ml-2"></i></a>
 </div>

donate/templates/donate/donate_home_page.html

 {% extends "donate/base.html" %}
-{% load static wagtailimages_tags wagtailcore_tags %}
+{% load static wagtailimages_tags wagtailcore_tags donate_tags %}
 
 {% block content %}
 
 <!-- CONTENT -->
 <main role="main">
-
-  <section class="section--alternate section--lead" id="uvod">
+  <section class="section--{% get_section_kind %} section--lead" id="uvod">
     <div class="container">
       <div class="row align-items-center">
 
@@ -39,7 +38,7 @@
   </section>
 
   {% if page.show_donate_form %}
-  <section class="section--primary" id="strana">
+  <section class="section--{% get_section_kind %}" id="strana">
     <div class="container">
       <h2 class="lead page-subheading mb-4">{{ page.support_title }}</h2>
       <p class="mb-4">{{ page.support_body }}</p>
@@ -101,8 +100,20 @@
   </section>
   {% endif %}
 
+  <section class="section--{% get_section_kind %}" id="kraje">
+    <div class="container">
+      <h2 class="lead page-subheading mb-4">{{ page.region_title }}</h2>
+      <p class="mb-4">{{ page.region_body }}</p>
+      <div class="row mb-4">
+
+        {% include "donate/region_map_snippet.html" with index_url=page.regions_page_url %}
+
+      </div> <!-- /row -->
+    </div> <!-- /container -->
+  </section>
+
   {% if page.has_projects %}
-  <section class="section--alternate" id="projekty">
+  <section class="section--{% get_section_kind %}" id="projekty">
     <div class="container">
 
       <h2 class="lead page-subheading mb-4">{{ page.project_title }}</h2>
@@ -118,25 +129,13 @@
       <a href="{{ page.projects_page_url }}" class="btn btn-dark btn-lg my-2">Všechny projekty a kampaně <i class="icon-chevron-right ml-2"></i></a>
     </div> <!-- /container -->
   </section>
-
-  <section class="section--primary" id="kraje">
-  {% else %}
-  <section class="section--alternate" id="kraje">
   {% endif %}
-    <div class="container">
-      <h2 class="lead page-subheading mb-4">{{ page.region_title }}</h2>
-      <p class="mb-4">{{ page.region_body }}</p>
-      <div class="row mb-4">
 
-        {% include "donate/region_map_snippet.html" with index_url=page.regions_page_url %}
-
-      </div> <!-- /row -->
-    </div> <!-- /container -->
-    {% for content in page.custom_blocks %}
+  {% for content in page.custom_blocks %}
+    <section class="section--{% get_section_kind %} section--custom" id="custom">
       {% include_block content %}
-    {% endfor %}
-  </section>
-
+    </section>
+  {% endfor %}
 </main>
 <!-- /CONTENT -->
 

donate/templatetags/donate_tags.py

+from django import template
+
+register = template.Library()
+
+
+@register.simple_tag(takes_context=True)
+def get_section_kind(context):
+    if "current_section" not in context or context["current_section"] == "primary":
+        context["current_section"] = "alternate"
+    else:
+        context["current_section"] = "primary"
+    return context["current_section"]

donate/wagtail_hooks.py

+import wagtail.admin.rich_text.editors.draftail.features as draftail_features
 from django.utils.html import escape
 from wagtail import hooks
+from wagtail.admin.rich_text.converters.html_to_contentstate import (
+    InlineStyleElementHandler,
+)
 from wagtail.rich_text import LinkHandler
 
+from donate.constants import font_colors
+
 
 class ExternalLinkHandler(LinkHandler):
     identifier = "external"
@@ -15,3 +21,33 @@ class ExternalLinkHandler(LinkHandler):
 @hooks.register("register_rich_text_features")
 def register_external_link(features):
     features.register_link_type(ExternalLinkHandler)
+
+
+@hooks.register("register_rich_text_features")
+def register_font_color_feature(features):
+    for color_name, color_value in font_colors:
+        feature_name = "font_color_" + color_value
+        type_ = "FONT_COLOR_" + color_value
+        tag = "span"
+
+        control = {
+            "type": type_,
+            "label": color_name,
+            "description": color_name + " text color",
+            "style": {"color": color_value},
+        }
+
+        features.register_editor_plugin(
+            "draftail", feature_name, draftail_features.InlineStyleFeature(control)
+        )
+
+        db_conversion = {
+            "from_database_format": {tag: InlineStyleElementHandler(type_)},
+            "to_database_format": {
+                "style_map": {
+                    type_: {"element": tag, "props": {"style": "color: " + color_value}}
+                }
+            },
+        }
+
+        features.register_converter_rule("contentstate", feature_name, db_conversion)