uniweb: Refactor templates

uniweb/models.py

@@ -70,6 +70,7 @@ class ColumnsTextBlock(blocks.StructBlock):
     class Meta:
         label = "text dva sloupce"
         icon = "doc-full"
+        group = "texty"
         template = "uniweb/blocks/text_columns.html"
 
 
@@ -82,6 +83,7 @@ class AdvancedColumnsTextBlock(ColorBlock, AlignBlock):
     class Meta:
         label = "text dva sloupce (pokročilý)"
         icon = "doc-full"
+        group = "texty"
         template = "uniweb/blocks/advanced_text_columns.html"
 
 
@@ -91,15 +93,28 @@ class AdvancedTitleBlock(ColorBlock, AlignBlock):
     class Meta:
         label = "nadpis (pokročilý)"
         icon = "title"
+        group = "nadpisy"
         template = "uniweb/blocks/advanced_title.html"
 
 
+class PictureTitleBlock(ColorBlock):
+    title = blocks.CharBlock(label="nadpis")
+    image = ImageChooserBlock(label="obrázek")
+
+    class Meta:
+        label = "nadpis (s obrázkem)"
+        icon = "title"
+        group = "nadpisy"
+        template = "uniweb/blocks/picture_title.html"
+
+
 class AdvancedTextBlock(ColorBlock, AlignBlock):
     text = blocks.RichTextBlock(label="text", features=RICH_TEXT_FEATURES)
 
     class Meta:
         label = "text (pokročilý)"
         icon = "doc-full"
+        group = "texty"
         template = "uniweb/blocks/advanced_text.html"
 
 
@@ -130,26 +145,51 @@ class SubpageMixin:
 class UniwebContentMixin(models.Model):
     content = StreamField(
         [
-            ("title", blocks.CharBlock(label="nadpis", icon="title")),
+            (
+                "title",
+                blocks.CharBlock(
+                    label="nadpis",
+                    icon="title",
+                    group="nadpisy",
+                    template="uniweb/blocks/title.html",
+                ),
+            ),
             ("advanced_title", AdvancedTitleBlock()),
-            ("text", blocks.RichTextBlock(label="text", features=RICH_TEXT_FEATURES)),
+            ("picture_title", PictureTitleBlock()),
+            (
+                "text",
+                blocks.RichTextBlock(
+                    label="text",
+                    features=RICH_TEXT_FEATURES,
+                    group="texty",
+                    template="uniweb/blocks/text.html",
+                ),
+            ),
             ("advanced_text", AdvancedTextBlock()),
             ("text_columns", ColumnsTextBlock()),
             ("advanced_text_columns", AdvancedColumnsTextBlock()),
             (
                 "gallery",
                 blocks.ListBlock(
-                    ImageChooserBlock(label="obrázek"), label="galerie", icon="image"
+                    ImageChooserBlock(label="obrázek"),
+                    label="galerie",
+                    icon="image",
+                    group="ostatní",
+                    template="uniweb/blocks/gallery.html",
                 ),
             ),
             (
                 "table",
                 TableBlock(
                     label="tabulka",
-                    template="uniweb/snippet_table.html",
+                    group="ostatní",
+                    template="uniweb/blocks/table.html",
+                ),
             ),
+            (
+                "jupyter",
+                DocumentChooserBlock(label="Jupyter notebook", group="ostatní"),
             ),
-            ("jupyter", DocumentChooserBlock(label="Jupyter notebook")),
         ],
         verbose_name="obsah stránky",
         blank=True,

uniweb/templates/uniweb/base.html

@@ -22,7 +22,7 @@
     .inline-block {
       display: inline-block;
     }
-    .leading-tight {
+    .head-alt-md, .head-alt-lg {
       line-height: 1.25;
     }
   </style>

uniweb/templates/uniweb/blocks/advanced_title.html

-<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>
+<h1 class="head-alt-md md:head-alt-lg px-4 pt-4 pb-2 lg:mt-16 {{ css_class|join:" " }}">{{ block.value.title }}</h1>

uniweb/templates/uniweb/blocks/gallery.html

+{% load wagtailimages_tags %}
+<div class="content-block w-full my-6 grid grid-cols-4 gap-4{% if first %} mt-8 lg:mt-12{% endif %}">
+  {% for picture in block.value %}
+    {% image picture width-2000 as img %}
+    {% image picture fill-300x200 as thumb %}
+    <div>
+      <a data-fancybox="gallery" href="{{ img.url }}"><img data-src="{{ thumb.url }}" class="lazyload img-fluid" alt="{{ thumb.alt }}"></a>
+    </div>
+  {% endfor %}
+</div>

uniweb/templates/uniweb/snippet_table.html → uniweb/templates/uniweb/blocks/table.html

 {% load table_block_tags %}
 
+<div class="my-6{% if first %} mt-8 lg:mt-12{% endif %}">
   <table class="table table--bordered table--condensed mx-auto">
     {% if table_caption %}
        <caption class="head-heavy-sm my-4">{{ table_caption }}</caption>
@@ -57,3 +58,4 @@
     {% endfor %}
     </tbody>
   </table>
+</div>

uniweb/templates/uniweb/blocks/text.html

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

uniweb/templates/uniweb/blocks/title.html

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

uniweb/templates/uniweb/snippet_sections.html

@@ -3,54 +3,12 @@
 <section class="mb-8 lg:mb-16">
 {% for block in page.content %}
 
-  {% if block.block_type == "advanced_title" %}
-    {% include_block block %}
-  {% endif %}
-
-  {% if block.block_type == "advanced_text" %}
-    {% include_block block with first=forloop.first %}
-  {% endif %}
-
-  {% if block.block_type == "text_columns" %}
-    {% 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-4 pb-2 leading-tight 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 %}
-
-  {% if block.block_type == "gallery" %}
-  <div class="content-block w-full my-6 grid grid-cols-4 gap-4{% if forloop.first %} mt-8 lg:mt-12{% endif %}">
-    {% for picture in block.value %}
-      {% image picture width-2000 as img %}
-      {% image picture fill-300x200 as thumb %}
-      <div>
-        <a data-fancybox="gallery" href="{{ img.url }}"><img data-src="{{ thumb.url }}" class="lazyload img-fluid" alt="{{ thumb.alt }}"></a>
-      </div>
-    {% endfor %}
-  </div>
-  {% endif %}
-
-  {% if block.block_type == "table" %}
-  <div class="my-6{% if forloop.first %} mt-8 lg:mt-12{% endif %}">
-    {% include_block block %}
-  </div>
-  {% endif %}
-
   {% if block.block_type == "jupyter" %}
   <div class="content-block my-4 clearfix{% if forloop.first %} mt-8 lg:mt-12{% endif %}">
     {{ block|jupyterize }}
   </div>
+  {% else %}
+    {% include_block block with first=forloop.first %}
   {% endif %}
 
 {% endfor %}