uniweb: Colored content blocks

uniweb/models.py

@@ -37,6 +37,44 @@ RICH_TEXT_FEATURES = [
 ]
 
 
+BLACK_ON_WHITE = "black_on_white"
+WHITE_ON_BLACK = "white_on_black"
+WHITE_ON_BLUE = "white_on_blue"
+WHITE_ON_CYAN = "white_on_cyan"
+WHITE_ON_VIOLET = "white_on_violet"
+
+COLOR_CHOICES = (
+    (BLACK_ON_WHITE, "černá na bílé"),
+    (WHITE_ON_BLACK, "bílá na černé"),
+    (WHITE_ON_BLUE, "bílá na modré"),
+    (WHITE_ON_CYAN, "bílá na tyrkysové"),
+    (WHITE_ON_VIOLET, "bílá na fialové"),
+)
+
+COLOR_CSS = {
+    BLACK_ON_WHITE: "",
+    WHITE_ON_BLACK: "text-white bg-black",
+    WHITE_ON_BLUE: "text-white bg-blue-300",
+    WHITE_ON_CYAN: "text-white bg-cyan-300",
+    WHITE_ON_VIOLET: "text-white bg-violet-300",
+}
+
+
+class ColorBlock(blocks.StructBlock):
+    """
+    Intended as parent class for blocks with color option.
+    """
+
+    color = blocks.ChoiceBlock(
+        label="barva", choices=COLOR_CHOICES, default=BLACK_ON_WHITE
+    )
+
+    def get_context(self, value, parent_context=None):
+        context = super().get_context(value, parent_context=parent_context)
+        context["css_class"] = COLOR_CSS[value["color"]]
+        return context
+
+
 class ColumnsTextBlock(blocks.StructBlock):
     left_text = blocks.RichTextBlock(label="levý sloupec", features=RICH_TEXT_FEATURES)
     right_text = blocks.RichTextBlock(
@@ -46,6 +84,37 @@ class ColumnsTextBlock(blocks.StructBlock):
     class Meta:
         label = "text dva sloupce"
         icon = "doc-full"
+        template = "uniweb/blocks/text_columns.html"
+
+
+class AdvancedColumnsTextBlock(ColorBlock):
+    left_text = blocks.RichTextBlock(label="levý sloupec", features=RICH_TEXT_FEATURES)
+    right_text = blocks.RichTextBlock(
+        label="pravý sloupec", features=RICH_TEXT_FEATURES
+    )
+
+    class Meta:
+        label = "text dva sloupce (pokročilý)"
+        icon = "doc-full"
+        template = "uniweb/blocks/advanced_text_columns.html"
+
+
+class AdvancedTitleBlock(ColorBlock):
+    title = blocks.CharBlock(label="nadpis")
+
+    class Meta:
+        label = "nadpis (pokročilý)"
+        icon = "title"
+        template = "uniweb/blocks/advanced_title.html"
+
+
+class AdvancedTextBlock(ColorBlock):
+    text = blocks.RichTextBlock(label="text", features=RICH_TEXT_FEATURES)
+
+    class Meta:
+        label = "text (pokročilý)"
+        icon = "doc-full"
+        template = "uniweb/blocks/advanced_text.html"
 
 
 class MenuItemBlock(blocks.StructBlock):
@@ -76,8 +145,11 @@ class UniwebContentMixin(models.Model):
     content = StreamField(
         [
             ("title", blocks.CharBlock(label="nadpis", icon="title")),
+            ("advanced_title", AdvancedTitleBlock()),
             ("text", blocks.RichTextBlock(label="text", features=RICH_TEXT_FEATURES)),
+            ("advanced_text", AdvancedTextBlock()),
             ("text_columns", ColumnsTextBlock()),
+            ("advanced_text_columns", AdvancedColumnsTextBlock()),
             (
                 "gallery",
                 blocks.ListBlock(

uniweb/templates/uniweb/blocks/advanced_text.html

+{% load wagtailcore_tags %}
+<div class="content-block px-4 py-2 clearfix{% if first %} mt-8 lg:mt-12{% endif %} {{ css_class }}">
+  {{ block.value.text|richtext }}
+</div>

uniweb/templates/uniweb/blocks/advanced_text_columns.html

+{% load wagtailcore_tags %}
+<div class="lg:flex clearfix">
+  <div class="content-block lg:w-1/2 lg:pr-5 px-4 py-2{% if first %} mt-8 lg:mt-12{% endif %} {{ css_class }}">
+    {{ block.value.left_text|richtext }}
+  </div>
+  <div class="content-block lg:w-1/2 lg:pl-5 px-4 py-2{% if first %} mt-8 lg:mt-12{% endif %} {{ css_class }}">
+    {{ block.value.right_text|richtext }}
+  </div>
+</div>

uniweb/templates/uniweb/blocks/advanced_title.html

+<h1 class="head-alt-md md:head-alt-lg px-4 pt-6 pb-4 lg:mt-16 {{ css_class }}">{{ block.value.title }}</h1>

uniweb/templates/uniweb/blocks/text_columns.html

+{% load wagtailcore_tags %}
+<div class="lg:flex clearfix">
+  <div class="content-block lg:w-1/2 lg:pr-5 px-4 py-2{% if first %} mt-8 lg:mt-12{% endif %}">
+    {{ block.value.left_text|richtext }}
+  </div>
+  <div class="content-block lg:w-1/2 lg:pl-5 px-4 py-2{% if first %} mt-8 lg:mt-12{% endif %}">
+    {{ block.value.right_text|richtext }}
+  </div>
+</div>

uniweb/templates/uniweb/snippet_sections.html

@@ -3,24 +3,29 @@
 <section class="mb-8 lg:mb-16">
 {% for block in page.content %}
 
-  {% if block.block_type == "title" %}
-    <h1 class="head-alt-md md:head-alt-lg max-w-5xl my-6 lg:mt-16">{{ block.value }}</h1>
+  {% if block.block_type == "advanced_title" %}
+    {% include_block block %}
   {% endif %}
 
-  {% if block.block_type == "text" %}
-  <div class="content-block my-4 clearfix{% if forloop.first %} mt-8 lg:mt-12{% endif %}">
-    {{ block.value|richtext }}
-  </div>
+  {% if block.block_type == "advanced_text" %}
+    {% include_block block with first=forloop.first %}
   {% endif %}
 
   {% if block.block_type == "text_columns" %}
-  <div class="lg:flex clearfix">
-    <div class="content-block lg:w-1/2 lg:pr-5 my-4{% if forloop.first %} mt-8 lg:mt-12{% endif %}">
-      {{ block.value.left_text|richtext }}
-    </div>
-    <div class="content-block lg:w-1/2 lg:pl-5 my-4{% if forloop.first %} mt-8 lg:mt-12{% endif %}">
-      {{ block.value.right_text|richtext }}
-    </div>
+    {% include_block block with first=forloop.first %}
+  {% endif %}
+
+  {% if block.block_type == "advanced_text_columns" %}
+    {% include_block block with first=forloop.first %}
+  {% endif %}
+
+  {% if block.block_type == "title" %}
+    <h1 class="head-alt-md md:head-alt-lg px-4 pt-6 pb-4 lg:mt-16">{{ block.value }}</h1>
+  {% endif %}
+
+  {% if block.block_type == "text" %}
+  <div class="content-block px-4 py-2 clearfix{% if forloop.first %} mt-8 lg:mt-12{% endif %}">
+    {{ block.value|richtext }}
   </div>
   {% endif %}