people: Update design of groups page

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/people/group.html b/src/templates/people/group.html
index 359ae38e26e9036fbb65a45dbfb284a5849aa7e4..272593dbcc8cbc8da57673a08343c2cb44d43488 100644 (file)
--- a/src/templates/people/group.html
+++ b/src/templates/people/group.html
@@ -2,48 +2,30 @@
 
 {% block title %}{{ group }}{% end block %}
 
-{# WHERE DOES THIS GO ??? #}
-{% block sidebar %}
-       <div class="col-12 col-md-3">
-               <h3 class="my-3">
-                       <a class="text-white" href="/groups/{{ group.gid }}">{{ group }}</a>
-               </h3>
+{% block container %}
+       <div class="header">
+               <div class="container">
+                       <h1>{{ group }}</h1>
+
+                       <p class="text-muted">
+                               {{ _("One Member", "%(num)s Members", len(group)) % { "num" : len(group) } }}
+                       </p>
+               </div>
        </div>
-{% end block %}
 
-{% block content %}
-       <div class="card mb-3">
+       <div class="container">
                {% if group.email %}
-                       <div class="card-body">
+                       <section>
                                <a class="btn btn-dark btn-block" href="mailto:{{ group.email }}">
-                                       {{ _("Email %s") % group }}
+                                       {{ _("Email Group") }}
                                </a>
-                       </div>
+                       </section>
                {% end %}
 
                {% if len(group) > 0 %}
-                       <div class="card-body">
-                               <div class="row">
-                                       <div class="col">
-                                               <h6 class="mb-0">{{ _("Members") }}</h6>
-                                       </div>
-                               </div>
-                       </div>
-
-                       <div class="list-group list-group-flush">
-                               {% for account in group %}
-                                       <a class="list-group-item list-group-item-active" href="/users/{{ account.uid }}">
-                                               <div class="row">
-                                                       <div class="col-1 text-center">
-                                                               <img class="img-fluid rounded-circle" src="{{ account.avatar_url(64) }}" alt="{{ account }}" style="height: 24px" />
-                                                       </div>
-                                                       <div class="col-11">
-                                                               {{ account }}
-                                                       </div>
-                                               </div>
-                                       </a>
-                               {% end %}
-                       </div>
+                       <section>
+                               {% module AccountsList(group) %}
+                       </section>
                {% end %}
        </div>
 {% end block %}

diff --git a/src/templates/people/groups.html b/src/templates/people/groups.html
index 48de1b8bb7cdc7347eb09e504f0d5cb17e01004e..71bb365570b8cca87a2a6f55762310cf04d2e891 100644 (file)
--- a/src/templates/people/groups.html
+++ b/src/templates/people/groups.html
@@ -2,14 +2,18 @@
 
 {% block title %}{{ _("Groups") }}{% end block %}
 
-{% block content %}
-       <div class="row justify-content-center">
-               <div class="col col-md-8">
+{% block container %}
+       <div class="header">
+               <div class="container">
                        <h1>{{ _("Groups") }}</h1>
+               </div>
+       </div>
 
-                       <div class="row">
+       <div class="container">
+               <section>
+                       <div class="row row-cols-1 row-cols-lg-2">
                                {% for group in backend.groups %}
-                                       <div class="col-12 col-lg-6 mb-3">
+                                       <div class="col mb-4">
                                                <div class="card">
                                                        <div class="card-body">
                                                                <h6 class="card-title mb-0">
@@ -17,13 +21,13 @@
                                                                </h6>
 
                                                                <small class="text-muted">
-                                                                       {{ _("One member", "%(num)s members", len(group)) % { "num" : len(group) } }}
+                                                                       {{ _("One Member", "%(num)s Members", len(group)) % { "num" : len(group) } }}
                                                                </small>
                                                        </div>
                                                </div>
                                        </div>
                                {% end %}
                        </div>
-               </div>
+               </section>
        </div>
 {% end block %}