nicer mobile carousel header

main/blocks.py

@@ -106,8 +106,12 @@ class BoxesBlock(StructBlock):
 
 
 class HomePageCarouseSlideBlock(StructBlock):
-    line_1 = TextBlock(label="První řádek")
-    line_2 = TextBlock(label="Druhý řádek")
+    desktop_line_1 = TextBlock(label="Desktop první řádek")
+    desktop_line_2 = TextBlock(label="Desktop druhý řádek")
+
+    mobile_line_1 = TextBlock(label="První mobilní řádek")
+    mobile_line_2 = TextBlock(label="Druhý mobilní řádek")
+    mobile_line_3 = TextBlock(label="Třetí mobilní řádek")
 
     class Meta:
         template = "main/includes/molecules/menus/carousel.html"

main/migrations/0064_alter_mainhomepage_content.py

+# Generated by Django 4.1.10 on 2023-12-22 21:05
+
+from django.db import migrations
+import main.blocks
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0063_remove_mainarticlepage_article_type_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='mainhomepage',
+            name='content',
+            field=wagtail.fields.StreamField([('carousel', wagtail.blocks.StructBlock([('desktop_line_1', wagtail.blocks.TextBlock(label='Desktop první řádek')), ('desktop_line_2', wagtail.blocks.TextBlock(label='Desktop druhý řádek')), ('mobile_line_1', wagtail.blocks.TextBlock(label='První mobilní řádek')), ('mobile_line_2', wagtail.blocks.TextBlock(label='Druhý mobilní řádek')), ('mobile_line_3', wagtail.blocks.TextBlock(label='Třetí mobilní řádek'))])), ('news', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(help_text='Nejnovější články se načtou automaticky', label='Titulek')), ('description', wagtail.blocks.TextBlock(label='Popis'))])), ('europarl_news', wagtail.blocks.StructBlock([])), ('people', wagtail.blocks.StructBlock([('title_line_1', wagtail.blocks.CharBlock(label='První řádek titulku')), ('title_line_2', wagtail.blocks.CharBlock(label='Druhý řádek titulku')), ('description', wagtail.blocks.TextBlock(label='Popis')), ('list', wagtail.blocks.ListBlock(main.blocks.BoxBlock, label='Boxíky'))])), ('regions', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(help_text='Články pro regiony se načtou automaticky', label='Titulek'))])), ('boxes', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(label='Nadpis')), ('list', wagtail.blocks.ListBlock(main.blocks.BoxBlock, label='Boxíky')), ('image', wagtail.images.blocks.ImageChooserBlock(label='Obrázek pozadí', required=False))]))], blank=True, use_json_field=True, verbose_name='Hlavní obsah'),
+        ),
+    ]

main/static/main/pirati-ui.svg

@@ -127,4 +127,4 @@
 <glyph unicode="&#xe976;" glyph-name="price-tags" horiz-adv-x="1280" d="M1232 960h-384c-26.4 0-63.274-15.274-81.942-33.942l-476.116-476.116c-18.668-18.668-18.668-49.214 0-67.882l412.118-412.118c18.668-18.668 49.214-18.668 67.882 0l476.118 476.118c18.666 18.666 33.94 55.54 33.94 81.94v384c0 26.4-21.6 48-48 48zM992 576c-53.020 0-96 42.98-96 96s42.98 96 96 96 96-42.98 96-96-42.98-96-96-96zM128 416l544 544h-80c-26.4 0-63.274-15.274-81.942-33.942l-476.116-476.116c-18.668-18.668-18.668-49.214 0-67.882l412.118-412.118c18.668-18.668 49.214-18.668 67.882 0l30.058 30.058-416 416z" />
 <glyph unicode="&#xe977;" glyph-name="twitter" horiz-adv-x="1001" d="M596.009 526.629l372.819 433.371h-88.346l-323.718-376.29-258.553 376.29h-298.21l390.983-569.018-390.983-454.457h88.351l341.855 397.375 273.051-397.375h298.21l-405.458 590.103zM475 385.969l-354.815 507.521h135.702l624.636-893.48h-135.702l-269.821 385.959z" />
 <glyph unicode="&#xe99b;" glyph-name="stats-dots" d="M128 64h896v-128h-1024v1024h128zM288 128c-53.020 0-96 42.98-96 96s42.98 96 96 96c2.828 0 5.622-0.148 8.388-0.386l103.192 171.986c-9.84 15.070-15.58 33.062-15.58 52.402 0 53.020 42.98 96 96 96s96-42.98 96-96c0-19.342-5.74-37.332-15.58-52.402l103.192-171.986c2.766 0.238 5.56 0.386 8.388 0.386 2.136 0 4.248-0.094 6.35-0.23l170.356 298.122c-10.536 15.408-16.706 34.036-16.706 54.11 0 53.020 42.98 96 96 96s96-42.98 96-96c0-53.020-42.98-96-96-96-2.14 0-4.248 0.094-6.35 0.232l-170.356-298.124c10.536-15.406 16.706-34.036 16.706-54.11 0-53.020-42.98-96-96-96s-96 42.98-96 96c0 19.34 5.74 37.332 15.578 52.402l-103.19 171.984c-2.766-0.238-5.56-0.386-8.388-0.386s-5.622 0.146-8.388 0.386l-103.192-171.986c9.84-15.068 15.58-33.060 15.58-52.4 0-53.020-42.98-96-96-96z" />
-</font></defs></svg>
+</font></defs></svg>
\ No newline at end of file

main/templates/main/includes/molecules/menus/carousel.html

@@ -21,12 +21,20 @@
         draggable="false"
       >
 
-      <div class="header-carousel--text-wrapper">
-        <div class="container--wide h-full flex flex-col justify-end items-start">
-          <div class="mb-4">
-            <h1 class="text-black">{{ self.line_1 }}</h1>
-            <h1 class="text-black mb-2">{{ self.line_2 }}</h1>
-          </div>
+      <div class="header-carousel--text-wrapper" style="box-sizing: border-box">
+        <div class="container--wide px-0 h-full flex flex-col justify-end items-start" style="box-sizing: border-box">
+
+          <h1 class="mb-4 px-5 flex flex-col text-black block lg:hidden">
+            <div>{{ self.mobile_line_1 }}</div>
+            <div>{{ self.mobile_line_2 }}</div>
+            <div>{{ self.mobile_line_3 }}</div>
+          </h1>
+
+          <h1 class="mb-4 px-5 flex flex-col text-black hidden lg:block">
+            <div>{{ self.desktop_line_1 }}</div>
+            <div>{{ self.desktop_line_2 }}</div>
+          </h1>
+
         </div>
       </div>
     </div>