Restructure full group page

aleksis/core/templates/core/group/full.html

@@ -9,7 +9,9 @@
 {% block browser_title %}{{ group.name }}{% endblock %}
 
 {% block content %}
-  <h1>{{ group.name }} <small class="grey-text">{{ group.short_name }}</small></h1>
+  <h1>{{ group.name }}
+    <small class="grey-text">{{ group.short_name }}</small>
+  </h1>
 
   {% has_perm 'core.edit_group_rule' user group as can_change_group %}
   {% has_perm 'core.change_group_preferences_rule' user group as can_change_group_preferences %}
@@ -44,39 +46,57 @@
   <table>
     <tr>
       <th>
-        <i class="material-icons iconify center" data-icon="mdi:shape-outline" title="{% trans "Group type" %}"></i>
+        <i class="material-icons iconify left" data-icon="mdi:shape-outline"></i>
+        {% trans "Group type" %}
       </th>
       <td>
-        {{ group.group_type }}
+        {{ group.group_type|default:"–" }}
       </td>
     </tr>
     <tr>
       <th>
-        <i class="material-icons iconify center" data-icon="mdi:format-vertical-align-top" title="{% trans "Parent groups" %}"></i>
+        <i class="material-icons iconify left" data-icon="mdi:format-vertical-align-top"></i>
+        {% trans "Parent groups" %}
       </th>
       <td>
-        {{ group.parent_groups.all|join:", " }}
+        {{ group.parent_groups.all|join:", "|default:"–" }}
       </td>
     </tr>
   </table>
 
   {% if can_view_group_stats %}
     <h2>{% blocktrans %}Statistics{% endblocktrans %}</h2>
-    <ul>
-      <li>
-        {% trans "Count of members" %}: {{ stats.members }}
-      </li>
+    <table>
+      <tr>
+        <th>
+          <i class="material-icons iconify left" data-icon="mdi:account-group-outline"></i>
+          {% trans "Count of members" %}
+        </th>
+        <td>{{ stats.members }}</td>
+      </tr>
       {% if stats.age_avg %}
-        <li>
-          {% trans "Average age" %}: {{ stats.age_avg|floatformat }}
-        </li>
+        <tr>
+          <th>
+            <i class="material-icons iconify left" data-icon="mdi:cake-variant-outline"></i>
+            {% trans "Average age" %}
+          </th>
+          <td>{{ stats.age_avg|floatformat }}</td>
+        </tr>
       {% endif %}
       {% if stats.age_range_min %}
-        <li>
-          {% trans "Age range" %}: {{ stats.age_range_min }} {% trans "years to" %} {{ stats.age_range_max }} {% trans "years "%}
-        </li>
+        <tr>
+          <th>
+            <i class="material-icons iconify left" data-icon="mdi:calendar-range-outline"></i>
+            {% trans "Age range" %}
+          </th>
+          <td>
+            {% blocktrans with min=stats.age_range_min max=stats.age_range_max %}
+              {{ min }} years to {{ max }} years
+            {% endblocktrans %}
+          </td>
+        </tr>
       {% endif %}
-    </ul>
+    </table>
   {% endif %}
 
   <h2>{% blocktrans %}Owners{% endblocktrans %}</h2>