From 800464eb4926d3cb8a5e9584994da7691297f621 Mon Sep 17 00:00:00 2001
From: Joseph Nuthalapati <njoseph@riseup.net>
Date: Mon, 23 Dec 2024 18:39:25 +0530
Subject: [PATCH] apps: Replace short description with tags in apps list

Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net>
[sunil: Move style to CSS]
[sunil: Allow upto three lines of tags]
[sunil: Adjust width and padding for app cards]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
---
 plinth/templates/card.html         |  5 ++++-
 static/themes/default/css/main.css | 13 ++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/plinth/templates/card.html b/plinth/templates/card.html
index 7a3e5169d..6c810cd69 100644
--- a/plinth/templates/card.html
+++ b/plinth/templates/card.html
@@ -2,6 +2,7 @@
 # SPDX-License-Identifier: AGPL-3.0-or-later
 {% endcomment %}
 
+{% load i18n %}
 {% load static %}
 
 <div class="card">
@@ -18,6 +19,8 @@
       {% endif %}
     </div>
     <div class="card-title">{{ item.name }}</div>
-    <div class="card-description">{{ item.short_description|default:'' }}</div>
+    <div class="card-tags">
+      {% for tag in item.app.info.tags|slice:":3" %}{% trans tag %}{% if not forloop.last %}・{% endif %}{% endfor %}
+    </div>
   </a>
 </div>
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index 2a6f17903..e20277a6c 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -596,8 +596,8 @@ footer {
     display: block;
     line-height: 1.42857143;
     text-align: center;
-    width: 10rem;
-    padding: 1rem;
+    width: 11.5rem;
+    padding: 1rem 0.5rem;
     border: none;
     border-radius: 0.5rem;
     transition: border .2s ease-in-out;
@@ -619,10 +619,17 @@ footer {
     margin-bottom: 0;
 }
 
-.card-description {
+.card-tags {
     font-weight: 400;
     color: var(--bs-secondary);
     font-size: 0.875rem;
+
+    /* Show ellipsis after 3 lines. */
+    /* Standardized in CSS Overflow Module Level 4 */
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
 }
 
 .card-icon span,