frontpage: added browse section for metrics

zenodo · Mar 6, 2024 · 7c5cf93 · 7c5cf93
1 parent 8cfb2b3
commit 7c5cf93
Showing 1 changed file with 58 additions and 11 deletions.
diff --git a/templates/themes/horizon/invenio_communities/details/home/index.html b/templates/themes/horizon/invenio_communities/details/home/index.html
@@ -16,7 +16,7 @@
 {%- block page_body %}
   {{ super() }}
   <div class="ui rel-m-2 rel-pt-1">
-    <div class="ui centered stackable theme-font grid container rel-mt-2 rel-mb-4">
+    <div class="ui centered stackable theme-font grid container rel-mt-4 rel-mb-4">
       <div class="thirteen centered wide column">
         <div class=" rel-mt-2 rel-mb-2">
           <h1 class="ui large header">{{ _("Open repository for EU-funded research (Pilot)") }}</h1>
@@ -48,19 +48,66 @@ <h1 class="ui large header">{{ _("Open repository for EU-funded research (Pilot)
         </div>
       </div>
     </div>
+
+  <!--BROWSE SECTION-->
+  {% macro format_metric_value(key, value) %}
+    {% if key in ("total_records", "total_grants") %}
+      {{ value | compact_number(max_value=1_000_000) }}
+    {% elif key == "total_data" %}
+      {{ value | filesizeformat }}
+    {% else %}
+      {{ value }}
+    {% endif %}
+  {% endmacro %}
+
+  {% set icon_map = {
+    "total_records": {"icon": "file", "title": _("RECORDS")},
+    "total_grants": {"icon": "money", "title": _("GRANTS")},
+    "total_data": {"icon": "database", "title": _("DATA VOLUME")}
+  } %}
+
+  <div class="ui stackable theme-font grid container rel-mt-4 rel-mb-2">
+    <div class="column">
+      <div class="row item">
+        <h1 class="ui large header inline">{{ _("Browse") }}</h1>
+      </div>
+      <div class="ui divider ml-0"></div>
+      <div class="center aligned ui equal width stackable grid rel-mt-4 rel-mb-2">
+        <div class="row rel-mb-4">
+          {% for key, value in metrics.items() %}
+          <div class="column">
+            <div class="theme-primary-text">
+              <h1 class="ui header header huge">
+                <i class="{{ icon_map[key]['icon'] }} icon" aria-hidden="true"></i>
+                {{ format_metric_value(key, value) }}
+              </h1>
+            </div>
+            <h1 class="text-muted ui header medium">{{ icon_map[key]['title'] }}</h1>
+          </div>
+          {% endfor %}
+        </div>
+        <div class="row">
+          <div class="center aligned">
+            <a href="{{ url_for('invenio_app_rdm_communities.communities_detail', pid_value=community.slug) }}"
+              class="ui button labeled icon rel-mt-1">
+              <i class="eye icon" aria-hidden="true"></i>
+              {{ _("Browse") }}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 
-  <!--RECENT UPLOADS SECTION-->
+
     {% if records %}
-      <div class="ui stackable theme-font grid container  rel-mb-4">
+      <div class="ui stackable theme-font grid container ">
         <div class="column rel-mb-4">
           <div class="row item">
-            <h1 class="ui large header inline">{{ _("Recent uploads") }}</h1>
-            <span class="rel-ml-1"><a href="{{ url_for('invenio_app_rdm_communities.communities_detail', pid_value=community.slug) }}">
-              {{ _("View all") }}
-            </a></span>
+            <h1 class="ui large header">{{ title }}</h1>
           </div>
-          <div class="ui divider  ml-0 "></div>
+          <div class="ui divider"></div>
+
           <div class="ui fluid stackable three column grid">
             {% for record in records %}
               <ul class="ui column items m-0">
@@ -72,13 +119,12 @@ <h1 class="ui large header inline">{{ _("Recent uploads") }}</h1>
       </div>
     {% endif %}
 
-    <!--HOW IT WORKS SECTION-->
-    <div class="ui stackable theme-font grid container rel-mt-2 rel-mb-5">
+    <div class="ui stackable theme-font grid container rel-mt-2">
       <div class="column">
           <div class="row item">
             <h1 class="ui large header">{{ _("How it works") }}</h1>
           </div>
-          <div class="ui divider  ml-0"></div> 
+          <div class="ui divider  ml-0"></div>
           <div class="sixteen wide stretched column rel-mt-4">
             <div class="ui equal width grid">
               <div class="five wide computer sixteen wide mobile  segment-container column rel-m-1">
@@ -175,4 +221,5 @@ <h1 class="center aligned ui medium header rel-m-1">{{ _("About") }} </h1>
         </div>
       </div>
     </div>
+  </div>
 {%- endblock page_body -%}