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

@@ -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>

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,