From 6cb51719aab9cffa97a5f7488021cf1c8f4eb265 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Mon, 21 Oct 2024 10:17:56 -0700
Subject: [PATCH] ui: Move app names below app icons

Fixes: #2418.

- This resolves a issue that icons being misaligned when the name of the app
flows into multiple lines. The increase in size of the card is not very
bothering as long as icons are not still aligning. If the noise background is
removed (to be proposed later), the increased size of the icon is even less
bothering.

- The other options would have been to reflect the increased size of the tile to
neighboring apps in that row (does not seem possible with CSS) or ellipsize the
title when it overflows.

- Redo all the spacing in spacing inside the card to better match the new
layout. The height of the card reduces slightly due this change, which looks
better and closer to other icons grids in other UIs.

Tests:

- In index, apps, and help:index pages, the title has change location. Spacings
are as expected and appealing. System page is unaffected.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 plinth/templates/card.html         |  2 +-
 plinth/templates/index.html        |  6 +++---
 static/themes/default/css/main.css | 11 ++++++-----
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/plinth/templates/card.html b/plinth/templates/card.html
index 40b1b3f42..6466433c3 100644
--- a/plinth/templates/card.html
+++ b/plinth/templates/card.html
@@ -6,7 +6,6 @@
 
 <div class="card">
   <a href="{{ item.url }}" class="nav-link">
-    <div class="card-title">{{ item.name }}</div>
     <div class="card-icon">
       {% if 'fa-' in item.icon %}
         <span class="fa {{ item.icon }}"></span>
@@ -18,6 +17,7 @@
         {% endif %}
       {% endif %}
     </div>
+    <div class="card-title">{{ item.name }}</div>
     <div class="card-description">{{ item.short_description|default:'' }}</div>
   </a>
 </div>
diff --git a/plinth/templates/index.html b/plinth/templates/index.html
index 57bb2d6be..1e12f6d5e 100644
--- a/plinth/templates/index.html
+++ b/plinth/templates/index.html
@@ -61,9 +61,6 @@
                   {% else %}
                     <a href="{{ shortcut.url }}" class="nav-link">
                   {% endif %}
-                        <div class="card-title">
-                          {{ shortcut.name }}
-                        </div>
                         <div class="card-icon">
                           {% if "custom" in shortcut.icon %}
                             <img src="{{ shortcut.icon }}"/>
@@ -75,6 +72,9 @@
                             {% endif %}
                           {% endif %}
                         </div>
+                        <div class="card-title">
+                          {{ shortcut.name }}
+                        </div>
                         <div class="card-description">
                           {{ shortcut.short_description|default:'' }}
                         </div>
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index a59e01a22..4d199d2e9 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -562,7 +562,7 @@ a.menu_link_active {
     text-align: center;
     box-shadow: 0 0.1875rem 0.3125rem 0 rgba(0,0,0,0.12);
     width: 10rem;
-    padding: 0;
+    padding: 0.5rem 0.25rem;
     margin: 0 0.625rem 1.25rem;
     border: none;
     border-radius: 0.5rem;
@@ -575,21 +575,20 @@ a.menu_link_active {
 
 .card .nav-link {
     display: block;
-    padding: 0.25rem;
+    padding: 0rem;
     color: #212529;  /* Same as Bootstrap default color */
 }
 
 .card-title {
     font-size: 1.25rem;
-    padding: 0.75rem 0;
+    padding: 0.25rem 0;
     margin-bottom: 0;
 }
 
 .card-description {
     font-weight: 400;
-    padding: 0.75rem 0;
     color: #646464;
-    font-size: 0.75rem;
+    font-size: 0.875rem;
 }
 
 .card-icon span,
@@ -597,12 +596,14 @@ a.menu_link_active {
     width: 6.25rem;
     height: 6.25rem;
     font-size: 5rem;
+    margin: 0.5rem 0;
 }
 
 /* System page - special card styling */
 .system-page .card {
     text-align: left;
     width: 19.375rem;
+    padding: 0;
 }
 
 .system-page .card .nav-link {