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

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

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>

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 {