From b5e19726fe37cb62606d8f85b76e3cd912b5abbb Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Tue, 18 Feb 2020 14:02:56 -0800
Subject: [PATCH] app: Show short description as secondary title

Closes: #1721

Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 plinth/templates/app-header.html     | 15 ++++++++++-----
 static/themes/default/css/plinth.css |  8 ++++++++
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/plinth/templates/app-header.html b/plinth/templates/app-header.html
index be1c12ddb..5470a0639 100644
--- a/plinth/templates/app-header.html
+++ b/plinth/templates/app-header.html
@@ -17,11 +17,16 @@
   <section class="app-description" >
     <section class='app-titles'>
       {% block pagetitle %}
-        {% if setup %}
-          <h2>{% trans "Installation" %}: {{ app_info.short_description|default:'' }} ({{ app_info.name }})</h2>
-        {% else %}
-          <h2>{{ app_info.name }}</h2>
-        {% endif %}
+        <div>
+          {% if setup %}
+            <h2>{% trans "Installation" %}: {{ app_info.name }}</h2>
+          {% else %}
+            <h2>{{ app_info.name }}</h2>
+          {% endif %}
+          {% if app_info.short_description %}
+            <h3>{{ app_info.short_description }}</h3>
+          {% endif %}
+        </div>
       {% endblock %}
       <div id='app-toggle-container' class="app-toggle-container">
         {% if is_enabled %}
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index 0af361868..857364a21 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -568,6 +568,14 @@ a.menu_link_active {
     margin: auto 0;
 }
 
+.app-titles h3 {
+    margin-top: -0.5rem;
+    margin-bottom: 1.6rem;
+    font-size: 1.6rem;
+    font-weight: normal;
+    font-style: italic;
+}
+
 .app-toggle-container {
     display: none;
     flex-flow: row;