From fad6e34dc6478cb840ba90332186cad9b353aa73 Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 27 Nov 2020 19:04:24 +0000
Subject: [PATCH] people: Update design of groups page

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---
 src/templates/people/group.html  | 50 ++++++++++----------------------
 src/templates/people/groups.html | 18 +++++++-----
 2 files changed, 27 insertions(+), 41 deletions(-)

diff --git a/src/templates/people/group.html b/src/templates/people/group.html
index 359ae38e..272593db 100644
--- 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 48de1b8b..71bb3655 100644
--- 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 %}
-- 
2.47.3