add scroll progress bars & fallback images

district/migrations/0253_districthomepage_fallback_image.py

+# Generated by Django 5.0.6 on 2024-07-16 11:58
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('district', '0252_alter_districtarticlepage_content_and_more'),
+        ('wagtailimages', '0026_delete_uploadedimage'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='districthomepage',
+            name='fallback_image',
+            field=models.ForeignKey(help_text='Zobrazí se místo obrázků v místech, kde jsou požadované, ale v administraci není vybrán žádný obrázek.', null=True, on_delete=django.db.models.deletion.PROTECT, to='wagtailimages.image', verbose_name='Záložní obrázek'),
+        ),
+    ]

district/migrations/0254_districtarticlepage_show_scroll_progress.py

+# Generated by Django 5.0.6 on 2024-07-17 07:54
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('district', '0253_districthomepage_fallback_image'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='districtarticlepage',
+            name='show_scroll_progress',
+            field=models.BooleanField(default=False, help_text='Pokud je toto pole zaškrtlé, zezhora stránky se zobrazí bar, který ukazuje, jak daleko uživatel na stránce doscrolloval.', verbose_name='Zobrazit scrollovací bar'),
+        ),
+    ]

district/models.py

@@ -180,6 +180,7 @@ class DistrictHomePage(CalendarMixin, MainHomePageMixin):
         ),
         FieldPanel("matomo_id"),
         FieldPanel("custom_css"),
+        FieldPanel("fallback_image"),
     ]
 
     ### EDIT HANDLERS

district/templates/district/district_person_page.html

@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block header %}
-  {% include 'styleguide2/includes/organisms/header/district/person_header.html' with first_nav_text=page.root_page.people_page.title first_nav_link=page.root_page.people_page.url second_nav_text=page.primary_group degree_before=page.before_name name=page.title degree_after=page.after_name function=page.position job=page.job main_image=page.main_image profile_image=page.profile_image is_pirate=page.is_pirate other_party_image_source=page.other_party_logo other_party_name=page.other_party %}
+  {% include 'styleguide2/includes/organisms/header/district/person_header.html' with first_nav_text=page.root_page.people_page.title first_nav_link=page.root_page.people_page.url second_nav_text=page.primary_group degree_before=page.before_name name=page.title degree_after=page.after_name function=page.position job=page.job main_image=page.main_image profile_image=page.get_profile_image is_pirate=page.is_pirate other_party_image_source=page.other_party_logo other_party_name=page.other_party %}
 {% endblock %}
 
 {% block newsletter %}{% endblock %}

elections/migrations/0048_electionshomepage_fallback_image.py

+# Generated by Django 5.0.6 on 2024-07-16 11:58
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('elections', '0047_alter_electionsarticlepage_content'),
+        ('wagtailimages', '0026_delete_uploadedimage'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='electionshomepage',
+            name='fallback_image',
+            field=models.ForeignKey(help_text='Zobrazí se místo obrázků v místech, kde jsou požadované, ale v administraci není vybrán žádný obrázek.', null=True, on_delete=django.db.models.deletion.PROTECT, to='wagtailimages.image', verbose_name='Záložní obrázek'),
+        ),
+    ]

elections/migrations/0049_electionsarticlepage_show_scroll_progress.py

+# Generated by Django 5.0.6 on 2024-07-17 07:54
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('elections', '0048_electionshomepage_fallback_image'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='electionsarticlepage',
+            name='show_scroll_progress',
+            field=models.BooleanField(default=False, help_text='Pokud je toto pole zaškrtlé, zezhora stránky se zobrazí bar, který ukazuje, jak daleko uživatel na stránce doscrolloval.', verbose_name='Zobrazit scrollovací bar'),
+        ),
+    ]

elections/templates/elections/elections_article_page.html

@@ -4,7 +4,7 @@
 
 {% block content %}
   {% include 'styleguide2/includes/organisms/layout/elections/navbar.html' with selected_item=page.root_page.articles_page.get_menu_title %}
-  {% include 'styleguide2/includes/organisms/header/elections/article_header.html' with title=page.title description=page.perex tags=page.tags.names first_nav_text=page.root_page.articles_page.title first_nav_link=page.root_page.articles_page.url second_nav_text=page.date %}
+  {% include 'styleguide2/includes/organisms/header/elections/article_header.html' with title=page.title description=page.perex tags=page.tags.names first_nav_text=page.root_page.articles_page.title first_nav_link=page.root_page.articles_page.url second_nav_text=page.date show_scroll_progress=page.show_scroll_progress %}
 
   <main role="main" class="mb-10 xl:mb-32">
     <div class="container--wide flex flex-col">

main/migrations/0107_mainhomepage_fallback_image.py

+# Generated by Django 5.0.6 on 2024-07-16 11:58
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0106_alter_mainarticlepage_content'),
+        ('wagtailimages', '0026_delete_uploadedimage'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='mainhomepage',
+            name='fallback_image',
+            field=models.ForeignKey(help_text='Zobrazí se místo obrázků v místech, kde jsou požadované, ale v administraci není vybrán žádný obrázek.', null=True, on_delete=django.db.models.deletion.PROTECT, to='wagtailimages.image', verbose_name='Záložní obrázek'),
+        ),
+    ]

main/migrations/0108_mainarticlepage_show_scroll_progress.py

+# Generated by Django 5.0.6 on 2024-07-17 07:54
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0107_mainhomepage_fallback_image'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='mainarticlepage',
+            name='show_scroll_progress',
+            field=models.BooleanField(default=False, help_text='Pokud je toto pole zaškrtlé, zezhora stránky se zobrazí bar, který ukazuje, jak daleko uživatel na stránce doscrolloval.', verbose_name='Zobrazit scrollovací bar'),
+        ),
+    ]

shared/models/main.py

@@ -164,6 +164,25 @@ class SubpageMixin:
 # --- BEGIN Partial page mixins ---
 
 
+class ScrollProgressMixin(Page):
+    show_scroll_progress = models.BooleanField(
+        verbose_name="Zobrazit scrollovací bar",
+        help_text=(
+            "Pokud je toto pole zaškrtlé, zezhora stránky se zobrazí "
+            "bar, který ukazuje, jak daleko uživatel na stránce "
+            "doscrolloval."
+        ),
+        default=False,
+    )
+
+    settings_panels = [
+        FieldPanel("show_scroll_progress")
+    ]
+
+    class Meta:
+        abstract = True
+
+
 class MainFooterMixin(Page):
     footer_other_links = StreamField(
         [
@@ -1018,6 +1037,20 @@ class MainHomePageMixin(
         use_json_field=True,
     )
 
+    fallback_image = models.ForeignKey(
+        "wagtailimages.Image",
+        on_delete=models.PROTECT,
+        verbose_name="Záložní obrázek",
+        # Allow null values in the database, as this is not a field
+        # that's always been around. But administrators should always
+        # populate it, hence blank=False.
+        null=True,
+        help_text=(
+            "Zobrazí se místo obrázků v místech, kde jsou požadované, "
+            "ale v administraci není vybrán žádný obrázek."
+        )
+    )
+
     # settings
     @property
     def gdpr_and_cookies_page(self):
@@ -1051,6 +1084,7 @@ class MainHomePageMixin(
     settings_panels = [
         PageChooserPanel("gdpr_and_cookies_page"),
         FieldPanel("matomo_id"),
+        FieldPanel("fallback_image")
     ]
 
     ### EDIT HANDLERS
@@ -1431,6 +1465,7 @@ class MainArticlePageMixin(
     SubpageMixin,
     MetadataPageMixin,
     PageInMenuMixin,
+    ScrollProgressMixin,
     Page,
 ):
     ### BEGIN Fields
@@ -1534,7 +1569,7 @@ class MainArticlePageMixin(
         FieldPanel("shared_tags"),
     ]
 
-    settings_panels = [PublishingPanel()]
+    settings_panels = [PublishingPanel()] + ScrollProgressMixin.settings_panels
 
     promote_panels = make_promote_panels(
         admin_help.build(admin_help.NO_SEO_TITLE, admin_help.NO_DESCRIPTION_USE_PEREX),
@@ -1959,6 +1994,12 @@ class MainPersonPageMixin(
 
         return context
 
+    def get_profile_image(self):
+        if self.profile_image:
+            return self.profile_image
+
+        return self.root_page.fallback_image
+    
     def get_full_name(self) -> str:
         full_name = ""
 

shared/templates/styleguide2/article_page.html

@@ -7,7 +7,7 @@
   {% include 'styleguide2/includes/organisms/layout/navbar.html' with selected_item=page.root_page.articles_page.get_menu_title %}
 {% endblock %}
 
-{% include 'styleguide2/includes/organisms/header/article_header.html' with title=page.title description=page.perex tags=page.tags.all first_nav_text=page.root_page.articles_page.title first_nav_link=page.root_page.articles_page.url second_nav_text=page.date %}
+{% include 'styleguide2/includes/organisms/header/article_header.html' with title=page.title description=page.perex tags=page.tags.all first_nav_text=page.root_page.articles_page.title first_nav_link=page.root_page.articles_page.url second_nav_text=page.date show_scroll_progress=page.show_scroll_progress %}
 
 <main role="main" class="mb-10 xl:mb-32">
   <div class="container--wide flex flex-col">

shared/templates/styleguide2/contact_page.html

@@ -54,8 +54,10 @@
 
         <div class="grid grid-cols-1 xl:grid-cols-2 gap-4 mb-16">
           {% for contact_person in page.contact_people %}
-            {% if contact_person.value.person.profile_image %}
-              {% image contact_person.value.person.profile_image fill-256x256 as contact_box_image %}
+            {% with contact_person.get_profile_image as profile_image %}
+
+            {% if profile_image %}
+              {% image profile_image fill-256x256 as contact_box_image %}
             {% endif %}
 
             {% firstof contact_person.value.position conact_person.value.person.position as contact_position %}

shared/templates/styleguide2/includes/molecules/candidates/candidate_secondary_box.html

@@ -16,8 +16,9 @@
         flex font-bold justify-center items-center rounded-full w-12 shrink-0 grow-1
       "
     >
-      {% if self.page.profile_image %}
-        {% image self.page.profile_image fill-150x150 class="object-cover w-12 shrink-0 grow-1" %}
+      {% with self.page.get_profile_image as profile_image %}
+      {% if profile_image %}
+        {% image profile_image fill-150x150 class="object-cover w-12 shrink-0 grow-1" %}
       {% endif %}
     </div>
 

shared/templates/styleguide2/includes/molecules/contact/center_contacts.html

@@ -8,7 +8,7 @@
   {% for contact_details in self.contact_list %}
     <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
       {% with contact_details.person as person_page %}
-        {% image person_page.profile_image fill-256x256 as contact_box_image %}
+        {% image person_page.get_profile_image fill-256x256 as contact_box_image %}
 
         {% include 'styleguide2/includes/molecules/contact/contact_person_large_box.html' with image=contact_box_image name=person_page.title function=person_page.position %}
       {% endwith %}

shared/templates/styleguide2/includes/molecules/contact/person_badge.html

@@ -2,7 +2,7 @@
 
 <div class="grid grid-cols-1 xl:grid-cols-2 gap-4 mt-4 mb-4">
   {% with self.person.specific as person_page %}
-    {% image person_page.profile_image fill-256x256 as contact_box_image %}
+    {% image person_page.get_profile_image fill-256x256 as contact_box_image %}
 
     {% firstof self.caption person_page.position as function %}
 

shared/templates/styleguide2/includes/molecules/popouts/popout_point.html

@@ -19,8 +19,10 @@
               Garant programového bodu:
             </div>
 
-            {% if guarantor_page.profile_image %}
-              {% image guarnator_page.profile_image fill-150x150 class="w-10 h-10 opacity-75 m-0 p-0 rounded-full" %}
+            {% with self.page.get_profile_image as profile_image %}
+
+            {% if profile_image %}
+              {% image profile_image fill-150x150 class="w-10 h-10 opacity-75 m-0 p-0 rounded-full" %}
             {% endif %}
 
             <strong>

shared/templates/styleguide2/includes/organisms/cards/people_card_list.html

@@ -5,14 +5,14 @@
 <div class="grid grid-cols-1 gap-4 md:grid-cols-2 w-full my-8">
   {% if self.person_list %}
     {% for person_page in self.person_list %}
-      {% image person_page.profile_image fill-480x480 as profile_image %}
+      {% image person_page.get_profile_image fill-480x480 as profile_image %}
 
       {% include 'styleguide2/includes/molecules/contact/contact_person_large_box.html' with image=profile_image name=person_page.title function=person_page.position telephone=person_page.phone mail=person_page.email url=person_page.url %}
     {% endfor %}
   {% elif self.person_list_with_custom_positions %}
     {% for person in self.person_list_with_custom_positions %}
       {% with person.page as person_page %}
-        {% image person_page.profile_image fill-480x480 as profile_image %}
+        {% image person_page.get_profile_image fill-480x480 as profile_image %}
         {% firstof person.position person_page.position as position %}
 
         {% include 'styleguide2/includes/molecules/contact/contact_person_large_box.html' with image=profile_image name=person_page.title function=position telephone=person_page.phone mail=person_page.email url=person_page.url %}

shared/templates/styleguide2/includes/organisms/header/photo_header.html

@@ -2,6 +2,12 @@
 
 {% image main_image original as background_image %}
 
+{% if show_scroll_progress %}
+  <div class="__js-root">
+    <ui-scroll-indicator></ui-scroll-indicator>
+  </div>
+{% endif %}
+
 <header
   class="
     flex items-center mb-4 w-full pt-28 pb-8