ui: diagnostics: Fix gap between headings

- Wrap each app's results in a <section>. Style section to maintain gap with
previous sections.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>

plinth/modules/diagnostics/templates/diagnostics_app.html

@@ -9,33 +9,35 @@
 
   <h2>{% trans "Diagnostic Results" %}</h2>
 
-  <div class="d-flex align-items-center justify-content-between">
-    <h3>{% blocktrans %}App: {{ app_name }}{% endblocktrans %}</h3>
+  <section>
+    <div class="d-flex align-items-center justify-content-between">
+      <h3>{% blocktrans %}App: {{ app_name }}{% endblocktrans %}</h3>
 
-    {% if show_repair %}
-      <form class="form form-diagnostics-repair-button" method="post"
-            action="{% url 'diagnostics:repair' app_id=app_id %}">
-        {% csrf_token %}
-        <input type="submit" class="btn btn-default"
-               name="repair" value="{% trans "Try to repair" %}"/>
-      </form>
-    {% endif %}
-  </div>
-
-  {% if results %}
-    {% include "diagnostics_results.html" with results=results %}
-  {% elif exception %}
-    <div class="alert alert-danger d-flex align-items-center" role="alert">
-      <div class="me-2">
-        <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
-        <span class="visually-hidden">{% trans "Caution:" %}</span>
-      </div>
-      <div>
-        {{ exception }}
-      </div>
+      {% if show_repair %}
+        <form class="form form-diagnostics-repair-button" method="post"
+              action="{% url 'diagnostics:repair' app_id=app_id %}">
+          {% csrf_token %}
+          <input type="submit" class="btn btn-default"
+                 name="repair" value="{% trans "Try to repair" %}"/>
+        </form>
+      {% endif %}
     </div>
-  {% else %}
-    <p>{% trans "This app does not support diagnostics" %}</p>
-  {% endif %}
+
+    {% if results %}
+      {% include "diagnostics_results.html" with results=results %}
+    {% elif exception %}
+      <div class="alert alert-danger d-flex align-items-center" role="alert">
+        <div class="me-2">
+          <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+          <span class="visually-hidden">{% trans "Caution:" %}</span>
+        </div>
+        <div>
+          {{ exception }}
+        </div>
+      </div>
+    {% else %}
+      <p>{% trans "This app does not support diagnostics" %}</p>
+    {% endif %}
+  </section>
 
 {% endblock %}

plinth/modules/diagnostics/templates/diagnostics_full.html

@@ -33,38 +33,40 @@
   {% if results %}
     <h3>{% trans "Results" %}</h3>
     {% for app_id, app_data in results.results.items %}
-      <div class="d-flex align-items-center justify-content-between">
-        <h4>
-          {% blocktrans trimmed with app_name=app_data.name %}
-            App: {{app_name}}
-          {% endblocktrans %}
-        </h4>
+      <section>
+        <div class="d-flex align-items-center justify-content-between">
+          <h4>
+            {% blocktrans trimmed with app_name=app_data.name %}
+              App: {{app_name}}
+            {% endblocktrans %}
+          </h4>
 
-        {% if app_data.show_repair %}
-          <form class="form form-diagnostics-repair-button" method="post"
-                action="{% url 'diagnostics:repair' app_id=app_id %}">
-            {% csrf_token %}
-            <input type="submit" class="btn btn-default"
-                   name="repair" value="{% trans "Try to repair" %}"/>
-          </form>
-        {% endif %}
-      </div>
-
-      {% if app_data.diagnosis %}
-        {% include "diagnostics_results.html" with results=app_data.diagnosis %}
-      {% elif app_data.exception %}
-        <div class="alert alert-danger d-flex align-items-center" role="alert">
-          <div class="me-2">
-            <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
-            <span class="visually-hidden">{% trans "Caution:" %}</span>
-          </div>
-          <div>
-            {{ app_data.exception }}
-          </div>
+          {% if app_data.show_repair %}
+            <form class="form form-diagnostics-repair-button" method="post"
+                  action="{% url 'diagnostics:repair' app_id=app_id %}">
+              {% csrf_token %}
+              <input type="submit" class="btn btn-default"
+                     name="repair" value="{% trans "Try to repair" %}"/>
+            </form>
+          {% endif %}
         </div>
-      {% else %}
-        <p><span class="fa fa-hourglass-o"></span></p>
-      {% endif %}
+
+        {% if app_data.diagnosis %}
+          {% include "diagnostics_results.html" with results=app_data.diagnosis %}
+        {% elif app_data.exception %}
+          <div class="alert alert-danger d-flex align-items-center" role="alert">
+            <div class="me-2">
+              <span class="fa fa-exclamation-triangle" aria-hidden="true"></span>
+              <span class="visually-hidden">{% trans "Caution:" %}</span>
+            </div>
+            <div>
+              {{ app_data.exception }}
+            </div>
+          </div>
+        {% else %}
+          <p><span class="fa fa-hourglass-o"></span></p>
+        {% endif %}
+      </section>
     {% endfor %}
   {% endif %}
 

static/themes/default/css/main.css

@@ -73,6 +73,7 @@
 /*
  * Bootstrap override
  */
+section:not(:first-child),
 h1:not(:first-child),
 h2:not(:first-child),
 h3:not(:first-child),