feat(district): add option to promote selected geo feature collection items

district/migrations/0090_districtgeofeaturecollectionpage_promoted_block_title_and_more.py

+# Generated by Django 4.0.4 on 2022-06-17 14:09
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("district", "0089_districthomepage_content"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="districtgeofeaturecollectionpage",
+            name="promoted_block_title",
+            field=models.TextField(
+                blank=True,
+                null=True,
+                verbose_name="Titulek bloku propagovaných položek",
+            ),
+        ),
+        migrations.AddField(
+            model_name="districtgeofeaturedetailpage",
+            name="promoted",
+            field=models.BooleanField(default=False, verbose_name="Propagovat"),
+        ),
+    ]

district/models.py

@@ -1356,6 +1356,9 @@ class DistrictGeoFeatureCollectionPage(
     category_list_title = models.TextField(
         "Titulek přehledu dle kategorie", blank=True, null=True
     )
+    promoted_block_title = models.TextField(
+        "Titulek bloku propagovaných položek", blank=True, null=True
+    )
 
     ### PANELS
 
@@ -1367,6 +1370,7 @@ class DistrictGeoFeatureCollectionPage(
                 StreamFieldPanel("content"),
                 StreamFieldPanel("content_after"),
                 StreamFieldPanel("content_footer"),
+                FieldPanel("promoted_block_title"),
                 ImageChooserPanel("logo_image"),
                 ImageChooserPanel("image"),
             ],
@@ -1416,11 +1420,21 @@ class DistrictGeoFeatureCollectionPage(
             for category in categories
         ]
 
+    def get_promoted_features(self):
+        return (
+            self.get_children()
+            .live()
+            .specific()
+            .filter(districtgeofeaturedetailpage__promoted=True)
+            .order_by("districtgeofeaturedetailpage__sort_order")
+        )
+
     def get_context(self, request):
         context = super().get_context(request)
         features_by_category = self.get_features_by_category()
 
         context["features_by_category"] = features_by_category
+        context["promoted_features"] = self.get_promoted_features()
         context["js_map"] = {
             "tile_server_config": json.dumps(TILE_SERVER_CONFIG),
             "style": self.style,
@@ -1543,6 +1557,10 @@ class DistrictGeoFeatureDetailPage(
         null=False,
         blank=False,
     )
+    promoted = models.BooleanField(
+        "Propagovat",
+        default=False,
+    )
     sort_order = models.IntegerField(
         "Index řazení",
         null=True,
@@ -1564,6 +1582,7 @@ class DistrictGeoFeatureDetailPage(
                 StreamFieldPanel("parts_section_title"),
                 ImageChooserPanel("image"),
                 FieldPanel("category"),
+                FieldPanel("promoted"),
             ],
             "Základní informace",
         ),

district/templates/district/district_geo_feature_collection_page.html

@@ -31,6 +31,44 @@
       </div>
     </div>
   </header>
+
+  {% if promoted_features %}
+    <section id="propagovane" class="bg-grey-50 py-8 lg:py-16">
+      <div class="container container--default">
+        {% if page.promoted_block_title %}
+          <h2 class="head-alt-md mb-4">{{ page.promoted_block_title }}</h2>
+        {% endif %}
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {% for feature in promoted_features %}
+            <div class="card card--hoveractive article-card bg-white">
+              <div class="article-card-cover">
+                <span class="absolute mt-2 ml-2 rounded-full inline-flex items-center justify-center bg-grey-125 font-bold text-center text-base w-8 h-8 no-underline">
+                  <a href="?item={{ feature.pk }}-{{ feature.slug }}" class="no-underline js-feature-item-anchor">{{ feature.index }}</a>
+                </span>
+                {% if feature.image %}
+                  {% image feature.image height-400 as img %}
+                  <a href="?item={{ feature.pk }}-{{ feature.slug }}" title="{{ feature.title }}" class="js-feature-item-anchor"><img src="{{ img.url }}" alt="{{ feature.title }}"></a>
+                {% endif %}
+              </div>
+              <div class="card__body p-4 flex items-center">
+                <h2 class="head-heavy-2xs flex-1"><a href="?item={{ feature.pk }}-{{ feature.slug }}" title="{{ feature.title }}" class="js-feature-item-anchor underline">{{ feature.title }}</a></h2>
+              </div>
+            </div>
+          {% endfor %}
+        </div>
+
+        <div class="text-center mt-8 lg:mt-16">
+          <a href="#mapa" class="btn btn--black btn--hoveractive btn--icon text-lg btn--fullwidth md:btn--autowidth">
+            <div class="btn__body-wrap">
+              <div class="btn__body">Zobrazit další</div>
+              <div class="btn__icon"><i class="ico--chevron-right"></i></div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </section>
+  {% endif %}
 {% endblock subheader %}
 
 {% block container_class %}container--default{% endblock %}

maps_utils/static/maps_utils/geo-feature-collection.js

@@ -763,7 +763,8 @@ const GeoFeatureCollection = Vue.component("GeoFeatureCollection", {
                     <div class="modal__container w-full max-w-xl" role="dialog" @click="stopPropagation">
                         <div class="modal__container-body elevation-10">
                             <button @click="closeItemInfo" class="modal__close" title="Zavřít"><i class="ico--cross" /></button>
-                            <div class="card">
+                            <div class="card relative">
+                                <span v-if="currentItem.image && currentItem.index" class="absolute mt-2 ml-2 rounded-full inline-flex items-center justify-center bg-grey-125 font-bold text-center text-lg w-8 h-8">{{ currentItem.index }}</span>
                                 <img v-if="currentItem.image" :src="currentItem.image" :alt="currentItem.name">
                                 <div class="card__body">
                                     <div class="geo-feature-collection-item__category flex items-center space-x-2" v-if="currentItem.categoryObj">
@@ -771,8 +772,8 @@ const GeoFeatureCollection = Vue.component("GeoFeatureCollection", {
                                         <span class="head-allcaps-4xs">{{ currentItem.categoryObj.name }}</span>
                                     </div>
                                     <div class="card-headline flex items-center mb-2">
-                                        <span v-if="currentItem.index" class="rounded-full inline-flex items-center justify-center bg-grey-125 font-bold text-center text-sm w-6 h-6 mr-2">{{ currentItem.index }}</span>
-                                        <span>{{ currentItem.title }}</span>
+                                        <span v-if="!currentItem.image && currentItem.index" class="rounded-full inline-flex items-center justify-center bg-grey-125 font-bold text-center text-sm w-6 h-6 mr-2">{{ currentItem.index }}</span>
+                                        <span class="flex-1">{{ currentItem.title }}</span>
                                     </div>
 
                                     <div class="card-body-text space-y-4">