Report types listed in a modal @ report plugins

rocky/assets/css/components/report.scss

@@ -110,8 +110,6 @@ span {
     padding: var(--spacing-grid-050) var(--spacing-grid-100);
     font-size: var(--tile-font-size);
     font-weight: var(--list-item-completed-font-weight);
-    margin: var(--spacing-grid-050) var(--spacing-grid-100)
-      var(--spacing-grid-050) 0;
 
     &.tags-color-grey-2 {
       color: var(--colors-grey-800);

rocky/assets/css/vendor_overrides/manon/tile.scss

@@ -46,6 +46,27 @@ ul.tiles {
 
   &.plugins {
     gap: 1.25rem;
+
+    .dropdown {
+      max-width: 100%;
+      border: none;
+      padding: 0;
+
+      .dropdown-list {
+        li {
+          padding: 0.5rem;
+          font-size: var(--tile-font-size);
+        }
+      }
+
+      button {
+        color: var(--colors-blue-600);
+        border: none;
+        border-radius: 0;
+        padding: 0.25rem 0 1rem;
+        font-size: var(--tile-font-size);
+      }
+    }
   }
 
   @extend %tile-style-overrides;
@@ -80,4 +101,11 @@ ul.tiles {
   flex-direction: row;
   flex-wrap: wrap;
   gap: 0.5rem;
+  border: 0;
+  padding: 0;
+
+  p {
+    color: var(--colors-blue-600);
+    padding-left: 0;
+  }
 }

rocky/katalogus/templates/partials/plugin_tile.html

@@ -30,18 +30,34 @@
         {% endif %}
         <span class="plugin-author-link de-emphasized"><a target="_blank" href="https://openkat.nl" rel="noopener noreferrer">OpenKAT</a></span>
         {% if show_report_types %}
-            <div class="tags">
-                <p>
-                    <strong>{% translate "Required for:" %}</strong>
-                </p>
-                {% for plugin_id, report_types in plugin_report_types.items %}
-                    {% if plugin_id == plugin.id %}
-                        {% for report_type in report_types %}
-                            <span class="label tags-color-{{ report_type.label_style }}">{{ report_type.name }}</span>
-                        {% endfor %}
+            {% for plugin_id, report_types in plugin_report_types.items %}
+                {% if plugin_id == plugin.id %}
+                    {% if report_types|length >= 2 %}
+                        <div class="dropdown">
+                            <button aria-controls="plugin-report-types"
+                                    aria-expanded="false"
+                                    class="dropdown-button ghost">
+                                {% translate "Required for" %} {{ report_types|length }} {% translate "report types" %}
+                                <span aria-hidden="true" class="icon ti-chevron-right"></span>
+                            </button>
+                            <div class="dropdown-list" id="plugin-report-types">
+                                <ul>
+                                    {% for report_type in report_types %}<li>{{ report_type.name }}</li>{% endfor %}
+                                </ul>
+                            </div>
+                        </div>
+                    {% else %}
+                        <div class="tags">
+                            <p>
+                                <strong>{% translate "Required for: " %}</strong>
+                            </p>
+                            {% for report_type in report_types %}
+                                <span class="label tags-color-{{ report_type.label_style }}">{{ report_type.name }}</span>
+                            {% endfor %}
+                        </div>
                     {% endif %}
-                {% endfor %}
-            </div>
+                {% endif %}
+            {% endfor %}
         {% endif %}
         {% if not remove_action_buttons %}
             <div class="action-buttons">

rocky/rocky/locale/django.pot

@@ -9,7 +9,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2024-10-16 14:17+0000\n"
+"POT-Creation-Date: 2024-10-23 12:12+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <[email protected]>\n"
@@ -1081,7 +1081,15 @@ msgid "Add"
 msgstr ""
 
 #: katalogus/templates/partials/plugin_tile.html
-msgid "Required for:"
+msgid "Required for"
+msgstr ""
+
+#: katalogus/templates/partials/plugin_tile.html
+msgid "report types"
+msgstr ""
+
+#: katalogus/templates/partials/plugin_tile.html
+msgid "Required for: "
 msgstr ""
 
 #: katalogus/templates/partials/plugin_tile_modal.html