uniweb: List with image

uniweb/models.py

@@ -121,6 +121,24 @@ class AdvancedTextBlock(ColorBlock, AlignBlock):
         template = "uniweb/blocks/advanced_text.html"
 
 
+class PictureListBlock(ColorBlock):
+    items = blocks.ListBlock(
+        blocks.RichTextBlock(label="odstavec", features=RICH_TEXT_FEATURES),
+        label="odstavce",
+    )
+    picture = ImageChooserBlock(
+        label="obrázek",
+        # TODO rozměry v helpu
+        help_text="rozměr 25x25px nebo více (obrázek bude zmenšen na 25x25px)",
+    )
+
+    class Meta:
+        label = "seznam z obrázkovými odrážkami"
+        icon = "list-ul"
+        group = "texty"
+        template = "uniweb/blocks/picture_list.html"
+
+
 class MenuItemBlock(blocks.StructBlock):
     name = blocks.CharBlock(label="název")
     page = blocks.PageChooserBlock(
@@ -181,6 +199,7 @@ class UniwebContentMixin(models.Model):
                     template="uniweb/blocks/gallery.html",
                 ),
             ),
+            ("picture_list", PictureListBlock()),
             (
                 "table",
                 TableBlock(

uniweb/templates/uniweb/base.html

@@ -25,6 +25,15 @@
     .head-alt-md, .head-alt-lg {
       line-height: 1.25;
     }
+    .ul-picture li:before {
+      content: none !important;
+    }
+    .ul-picture li {
+      background-repeat: no-repeat;
+      background-position: 0 0;
+      padding: 0 0 1em 35px !important;
+    }
+
   </style>
 
   {% if page.root_page.matomo_id %}

uniweb/templates/uniweb/blocks/picture_list.html

+{% load wagtailcore_tags wagtailimages_tags %}
+{% image block.value.picture max-25x25 as img %}
+<div class="content-block px-4 py-2 clearfix{% if first %} mt-8 lg:mt-12{% endif %} {{ css_class|join:" " }}">
+  <ul class="ul-picture">
+    {% for text in block.value.items %}
+      <li style="background-image: url('{{ img.url }}');">{{ text|richtext }}</li>
+    {% endfor %}
+  </ul>
+</div>