From 1e9ba2be522accc374aa253e3acc34ddb3424c05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Bedna=C5=99=C3=ADk?= <jan.bednarik@gmail.com>
Date: Thu, 26 Nov 2020 11:47:11 +0100
Subject: [PATCH] uniweb: Align content blocks
---
uniweb/constants.py | 56 +++++++++++++
uniweb/models.py | 78 ++++++++-----------
uniweb/templates/uniweb/base.html | 3 +
.../uniweb/blocks/advanced_text.html | 2 +-
.../uniweb/blocks/advanced_text_columns.html | 4 +-
.../uniweb/blocks/advanced_title.html | 2 +-
uniweb/templates/uniweb/snippet_sections.html | 2 +-
7 files changed, 96 insertions(+), 51 deletions(-)
create mode 100644 uniweb/constants.py
diff --git a/uniweb/constants.py b/uniweb/constants.py
new file mode 100644
index 00000000..885537a0
--- /dev/null
+++ b/uniweb/constants.py
@@ -0,0 +1,56 @@
+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"],
+}
diff --git a/uniweb/models.py b/uniweb/models.py
index e9bcf7c3..89e9992d 100644
--- a/uniweb/models.py
+++ b/uniweb/models.py
@@ -1,3 +1,4 @@
+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:
diff --git a/uniweb/templates/uniweb/base.html b/uniweb/templates/uniweb/base.html
index a49df61e..f27f5fc0 100644
--- a/uniweb/templates/uniweb/base.html
+++ b/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 %}
diff --git a/uniweb/templates/uniweb/blocks/advanced_text.html b/uniweb/templates/uniweb/blocks/advanced_text.html
index 87f05325..eb024d1d 100644
--- a/uniweb/templates/uniweb/blocks/advanced_text.html
+++ b/uniweb/templates/uniweb/blocks/advanced_text.html
@@ -1,4 +1,4 @@
{% 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>
diff --git a/uniweb/templates/uniweb/blocks/advanced_text_columns.html b/uniweb/templates/uniweb/blocks/advanced_text_columns.html
index 46169330..1d4f9576 100644
--- a/uniweb/templates/uniweb/blocks/advanced_text_columns.html
+++ b/uniweb/templates/uniweb/blocks/advanced_text_columns.html
@@ -1,9 +1,9 @@
{% 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>
diff --git a/uniweb/templates/uniweb/blocks/advanced_title.html b/uniweb/templates/uniweb/blocks/advanced_title.html
index 395940b0..844e96f3 100644
--- a/uniweb/templates/uniweb/blocks/advanced_title.html
+++ b/uniweb/templates/uniweb/blocks/advanced_title.html
@@ -1 +1 @@
-<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>
diff --git a/uniweb/templates/uniweb/snippet_sections.html b/uniweb/templates/uniweb/snippet_sections.html
index 74f92f66..5e8f817a 100644
--- a/uniweb/templates/uniweb/snippet_sections.html
+++ b/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" %}
--
GitLab