fix formatting and template-related issues

- remove unwanted spaces and line breaks
- use just an image instead of using figure and figure caption to
  display the icon in installation page
- eliminate unnecessary code duplication due to if condition

Reviewed-by: James Valleroy <jvalleroy@mailbox.org>

plinth/modules/config/__init__.py

@@ -36,6 +36,11 @@ is_essential = True
 
 name = _('General Configuration')
 
+description = [
+    _('Here you can set some general configuration options ',
+      'like hostname, domain name, webserver home page etc.')
+]
+
 depends = ['firewall', 'names']
 
 manual_page = 'Configure'

plinth/templates/setup.html

@@ -35,45 +35,31 @@
 {% endblock %}
 
 {% block content %}
-  
-  {% if setup_helper.module.icon_filename %}
-  
-    <header class="app-header">
-      <figure>
-        <img src="{% static 'theme/icons/' %}{{ setup_helper.module.icon_filename }}.svg"/>
-        <figcaption>{{ setup_helper.module.name  }}</figcaption>
-      </figure>
-      <section class="app-description">
-        <h2>{% trans "Installation" %}: {{ setup_helper.module.short_description|default:'' }} ({{ setup_helper.module.name }}) </h2>
-    
-        {% for paragraph in setup_helper.module.description %}
-          <p>{{ paragraph|safe }}</p>
-        {% endfor %}
 
-        {% if setup_helper.module.manual_page %}
+  <header class="app-header {% if not setup_helper.module.icon_filename %} app-header-single-column {% endif %}">
-          <p class="manual-page">
-            <a href="{% url 'help:manual-page' lang='-' page=setup_helper.module.manual_page %}">
-              {% trans 'Learn more...' %}
-            </a>
-          </p>
-        {% endif %}
-      </section>
-    </header>
-  {% else %}
-    <h2>{% trans "Installation" %}: {{ setup_helper.module.short_description|default:'' }} ({{ setup_helper.module.name }}) </h2>
 
-    {% for paragraph in setup_helper.module.description %}
+    {% if setup_helper.module.icon_filename %}
-      <p>{{ paragraph|safe }}</p>
+
-    {% endfor %}
+      <img src="{% static 'theme/icons/' %}{{ setup_helper.module.icon_filename }}.svg" alt="{{ setup_helper.module.name  }}"/>
 
-    {% if setup_helper.module.manual_page %}
-      <p class="manual-page">
-        <a href="{% url 'help:manual-page' lang='-' page=setup_helper.module.manual_page %}">
-          {% trans 'Learn more...' %}
-        </a>
-      </p>
     {% endif %}
-  {% endif %}
+
+    <section class="app-description" >
+      <h2>{% trans "Installation" %}: {{ setup_helper.module.short_description|default:'' }} ({{ setup_helper.module.name }}) </h2>
+
+      {% for paragraph in setup_helper.module.description %}
+        <p>{{ paragraph|safe }}</p>
+      {% endfor %}
+
+      {% if setup_helper.module.manual_page %}
+        <p class="manual-page">
+          <a href="{% url 'help:manual-page' lang='-' page=setup_helper.module.manual_page %}">
+            {% trans 'Learn more...' %}
+          </a>
+        </p>
+      {% endif %}
+    </section>
+  </header>
 
   {% include "toolbar.html" with clients=setup_helper.module.clients %}
 
@@ -175,4 +161,4 @@
     {% endif %}
   {% endif %}
 
-{% endblock %}
+{% endblock %}

static/themes/default/css/plinth.css

@@ -545,21 +545,18 @@ a.menu_link_active {
     margin-bottom: 20px;
 }
 
-.app-header > figure {
+.app-header > img {
     margin-top: 25px;
-}
-
-.app-header > figure img {
     width: 100%;
 }
 
-.app-header > figure figcaption {
-    text-align: center;
-    opacity: 0.5;
-    padding: 10px;
-    font-size: 12px;
-}
-
 .app-description {
     grid-column: 2;
 }
+
+.app-header-single-column  {
+    grid-template-columns: 1fr;
+}
+.app-header-single-column .app-description {
+    grid-column: 1;
+}