uniweb: Align content blocks

uniweb/constants.py

+RICH_TEXT_FEATURES = [
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "bold",
+    "italic",
+    "ol",
+    "ul",
+    "hr",
+    "link",
+    "document-link",
+    "image",
+    "superscript",
+    "subscript",
+    "strikethrough",
+    "blockquote",
+]
+
+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: ["text-black", "bg-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"],
+}
+
+LEFT = "left"
+CENTER = "center"
+RIGHT = "right"
+
+ALIGN_CHOICES = (
+    (LEFT, "vlevo"),
+    (CENTER, "uprostřed"),
+    (RIGHT, "vpravo"),
+)
+
+ALIGN_CSS = {
+    LEFT: ["text-left"],
+    CENTER: ["text-center"],
+    RIGHT: ["text-right"],
+}

uniweb/models.py

+from django import forms
 from django.db import models
 from django.utils.translation import gettext_lazy
 from wagtail.admin.edit_handlers import (
@@ -17,61 +18,46 @@ from wagtailmetadata.models import MetadataPageMixin
 
 from tuning import help
 
-RICH_TEXT_FEATURES = [
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "bold",
-    "italic",
-    "ol",
-    "ul",
-    "hr",
-    "link",
-    "document-link",
-    "image",
-    "superscript",
-    "subscript",
-    "strikethrough",
-    "blockquote",
-]
-
-
-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é"),
+from .constants import (
+    ALIGN_CHOICES,
+    ALIGN_CSS,
+    BLACK_ON_WHITE,
+    COLOR_CHOICES,
+    COLOR_CSS,
+    LEFT,
+    RICH_TEXT_FEATURES,
 )
 
-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
+    color = blocks.ChoiceBlock(COLOR_CHOICES, label="barva", default=BLACK_ON_WHITE)
+
+    def get_context(self, value, parent_context=None):
+        context = super().get_context(value, parent_context=parent_context)
+        if "css_class" not in context:
+            context["css_class"] = []
+        context["css_class"] += COLOR_CSS[value["color"]]
+        return context
+
+
+class AlignBlock(blocks.StructBlock):
+    """
+    Intended as parent class for blocks with align option.
+    """
+
+    align = blocks.ChoiceBlock(
+        ALIGN_CHOICES, label="zarovnání", default=LEFT, widget=forms.RadioSelect
     )
 
     def get_context(self, value, parent_context=None):
         context = super().get_context(value, parent_context=parent_context)
-        context["css_class"] = COLOR_CSS[value["color"]]
+        if "css_class" not in context:
+            context["css_class"] = []
+        context["css_class"] += ALIGN_CSS[value["align"]]
         return context
 
 
@@ -87,7 +73,7 @@ class ColumnsTextBlock(blocks.StructBlock):
         template = "uniweb/blocks/text_columns.html"
 
 
-class AdvancedColumnsTextBlock(ColorBlock):
+class AdvancedColumnsTextBlock(ColorBlock, AlignBlock):
     left_text = blocks.RichTextBlock(label="levý sloupec", features=RICH_TEXT_FEATURES)
     right_text = blocks.RichTextBlock(
         label="pravý sloupec", features=RICH_TEXT_FEATURES
@@ -99,7 +85,7 @@ class AdvancedColumnsTextBlock(ColorBlock):
         template = "uniweb/blocks/advanced_text_columns.html"
 
 
-class AdvancedTitleBlock(ColorBlock):
+class AdvancedTitleBlock(ColorBlock, AlignBlock):
     title = blocks.CharBlock(label="nadpis")
 
     class Meta:
@@ -108,7 +94,7 @@ class AdvancedTitleBlock(ColorBlock):
         template = "uniweb/blocks/advanced_title.html"
 
 
-class AdvancedTextBlock(ColorBlock):
+class AdvancedTextBlock(ColorBlock, AlignBlock):
     text = blocks.RichTextBlock(label="text", features=RICH_TEXT_FEATURES)
 
     class Meta:

uniweb/templates/uniweb/base.html

@@ -22,6 +22,9 @@
     .inline-block {
       display: inline-block;
     }
+    .leading-tight {
+      line-height: 1.25;
+    }
   </style>
 
   {% if page.root_page.matomo_id %}

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 }}">
+<div class="content-block px-4 py-2 clearfix{% if first %} mt-8 lg:mt-12{% endif %} {{ css_class|join:" " }}">
   {{ 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 }}">
+  <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|join:" " }}">
     {{ 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 }}">
+  <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|join:" " }}">
     {{ 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>
+<h1 class="head-alt-md md:head-alt-lg px-4 pt-4 pb-2 lg:mt-16 leading-tight {{ css_class|join:" " }}">{{ block.value.title }}</h1>

uniweb/templates/uniweb/snippet_sections.html

@@ -20,7 +20,7 @@
   {% 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>
+    <h1 class="head-alt-md md:head-alt-lg px-4 pt-4 pb-2 leading-tight lg:mt-16">{{ block.value }}</h1>
   {% endif %}
 
   {% if block.block_type == "text" %}