subcommunities: updated page layout

invenio_communities/templates/semantic-ui/invenio_communities/details/subcommunity/index.html

@@ -1,10 +1,10 @@
 {# -*- coding: utf-8 -*-
 
-    This file is part of Invenio.
-    Copyright (C) 2024 CERN.
+This file is part of Invenio.
+Copyright (C) 2024 CERN.
 
-    Invenio is free software; you can redistribute it and/or modify it
-    under the terms of the MIT License; see LICENSE file for more details.
+Invenio is free software; you can redistribute it and/or modify it
+under the terms of the MIT License; see LICENSE file for more details.
 #}
 
 {% extends "invenio_communities/details/base.html" %}
@@ -14,20 +14,34 @@
 {%- set title = community.metadata.title + _(" subcommunities") -%}
 
 {%- block javascript %}
-    {{ super() }}
-    {{ webpack['invenio-communities-subcommunities.js'] }}
+{{ super() }}
+{{ webpack['invenio-communities-subcommunities.js'] }}
 {%- endblock %}
 
 {%- block page_body %}
 {{ super() }}
-<div class="ui container fluid rel-mt-3 rel-mb-2 compact ml-0-mobile mr-0-mobile">
-  <div class="ui container community-search page-subheader flex align-items-center justify-space-between">
-    <h1 class="ui large header m-0">{{_("Subcommunities")}}</h1>
+<div class="ui container fluid page-subheader rel p-10 mr-0-mobile ml-0-mobile">
+  <div class="collection-header ui container align-items-center justify-space-between">
+    <h1 class="ui medium header m-0">{{ config.get("APP_RDM_SUBCOMMUNITIES_LABEL", _("Subcommunities")) }}</h1>
+  </div>
+</div>
+<!-- Breadcrumbs -->
+<div class="ui container mb-0">
+  <div class="ui breadcrumb">
+    <a class="section"
+      href="{{ url_for('invenio_app_rdm_communities.communities_browse', pid_value=community.slug ) }}">
+      {{ _("Browse") }}
+    </a>
+    <i class="angle right icon divider mr-0" aria-hidden="true"></i>
+    <a class="section"
+      href="{{ url_for('invenio_communities.communities_subcommunities', pid_value=community.slug) }}">
+      {{ config.get("APP_RDM_SUBCOMMUNITIES_LABEL", _("Subcommunities")) }}
+    </a>
   </div>
 </div>
+<div class="ui divider mt-0 mb-0" aria-hidden="true"></div>
 <div id="communities-search" class="rel-mt-2"
-    data-invenio-search-config='{{search_app_communities_subcommunities_config(app_id="InvenioSubCommunities.Search", endpoint=search_endpoint) | tojson }}'
-    data-permissions='{{ permissions | tojson }}'
-    >
+  data-invenio-search-config='{{search_app_communities_subcommunities_config(app_id="InvenioSubCommunities.Search", endpoint=search_endpoint) | tojson }}'
+  data-permissions='{{ permissions | tojson }}'>
 </div>
 {%- endblock page_body %}