users: Update design of groups pages

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

diff --git a/src/templates/users/groups/index.html b/src/templates/users/groups/index.html
index ed589127dc409153d074456e8840812d944b62d6..a8bf8c0efc5625c5d7cf7daccd52363cf995adbe 100644 (file)
--- a/src/templates/users/groups/index.html
+++ b/src/templates/users/groups/index.html
@@ -3,31 +3,49 @@
 {% block title %}{{ _("Groups") }}{% end block %}
 
 {% block container %}
-       <div class="header">
-               <div class="container">
-                       <h1>{{ _("Groups") }}</h1>
+       <section class="hero is-dark">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li>
+                                                       <a href="/">
+                                                               {{ _("Home") }}
+                                                       </a>
+                                               </li>
+                                               <li>
+                                                       <a href="/users">
+                                                               {{ _("Users") }}
+                                                       </a>
+                                               </li>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">{{ _("Groups") }}</a>
+                                               </li>
+                                       </ul>
+                               </nav>
+
+                               <h1 class="title is-1">{{ _("Groups") }}</h1>
+                       </div>
                </div>
-       </div>
+       </section>
 
-       <div class="container">
-               <section>
-                       <div class="row row-cols-1 row-cols-lg-2">
+       <section class="section">
+               <div class="container">
+                       <div class="columns is-multiline">
                                {% for group in backend.groups %}
-                                       <div class="col mb-4">
-                                               <div class="card">
-                                                       <div class="card-body">
-                                                               <h6 class="card-title mb-0">
-                                                                       <a href="/groups/{{ group.gid }}">{{ group }}</a>
-                                                               </h6>
+                                       <div class="column is-half">
+                                               <div class="box">
+                                                       <h5 class="title is-5">
+                                                               <span class="tag is-pulled-right">
+                                                                       {{ len(group) }}
+                                                               </span>
 
-                                                               <small class="text-muted">
-                                                                       {{ _("One Member", "%(num)s Members", len(group)) % { "num" : len(group) } }}
-                                                               </small>
-                                                       </div>
+                                                               <a href="/users/groups/{{ group.gid }}">{{ group }}</a>
+                                                       </h5>
                                                </div>
                                        </div>
                                {% end %}
                        </div>
-               </section>
-       </div>
+               </div>
+       </section>
 {% end block %}

diff --git a/src/templates/users/groups/show.html b/src/templates/users/groups/show.html
index 63125b54f642e943c9b98ce06ee1c477fc28fcdb..5e6225fe9aab127206df647a65dd6e7ad79501e3 100644 (file)
--- a/src/templates/users/groups/show.html
+++ b/src/templates/users/groups/show.html
@@ -3,31 +3,64 @@
 {% block title %}{{ group }}{% end block %}
 
 {% block container %}
-       <div class="header">
-               <div class="container">
-                       <h1>{{ group }}</h1>
+       <section class="hero is-dark">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li>
+                                                       <a href="/">
+                                                               {{ _("Home") }}
+                                                       </a>
+                                               </li>
+                                               <li>
+                                                       <a href="/users">
+                                                               {{ _("Users") }}
+                                                       </a>
+                                               </li>
+                                               <li>
+                                                       <a href="/users/groups">
+                                                               {{ _("Groups") }}
+                                                       </a>
+                                               </li>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">{{ group }}</a>
+                                               </li>
+                                       </ul>
+                               </nav>
 
-                       <p class="text-muted">
-                               {{ _("One Member", "%(num)s Members", len(group)) % { "num" : len(group) } }}
-                       </p>
+                               <h1 class="title is-1">{{ group }}</h1>
+                               <h6 class="subtitle is-6">{{ group.gid }}</h6>
+                       </div>
                </div>
-       </div>
+       </section>
 
-       <div class="container">
-               {% if group.email %}
-                       <section>
-                               <div class="d-grid">
-                                       <a class="btn btn-dark" href="mailto:{{ group.email }}">
+       <section class="section">
+               <div class="container">
+                       <div class="level">
+                               <div class="level-item has-text-centered">
+                                       <div>
+                                               <p class="heading">{{ _("Members") }}</p>
+                                               <p class="title">{{ len(group) }}</p>
+                                       </div>
+                               </div>
+                       </div>
+               </div>
+       </section>
+
+       <section class="section">
+               <div class="container">
+                       {% if group.email %}
+                               <div class="block">
+                                       <a class="button is-light is-fullwidth" href="mailto:{{ group.email }}">
                                                {{ _("Email Group") }}
                                        </a>
                                </div>
-                       </section>
-               {% end %}
+                       {% end %}
 
-               {% if len(group) > 0 %}
-                       <section>
-                               {% module AccountsList(group) %}
-                       </section>
-               {% end %}
-       </div>
+                       <div class="block">
+                               {% module UsersList(group) %}
+                       </div>
+               </div>
+       </section>
 {% end block %}

diff --git a/src/web/__init__.py b/src/web/__init__.py
index 6819343c47f02d0c9210ef626ba1897f0799fa76..5a238aafc38014f7f924c03e69f39aee22a8b641 100644 (file)
--- a/src/web/__init__.py
+++ b/src/web/__init__.py
@@ -154,15 +154,15 @@ class Application(tornado.web.Application):
                        (r"/password\-reset", auth.PasswordResetInitiationHandler),
                        (r"/password\-reset/([a-z_][a-z0-9_-]{0,31})/(\w+)", auth.PasswordResetHandler),
 
+                       # User Groups
+                       (r"/users/groups", users.GroupIndexHandler),
+                       (r"/users/groups/([a-z_][a-z0-9_-]{0,31})", users.GroupShowHandler),
+
                        # Users
                        (r"/users", users.IndexHandler),
                        (r"/users/([a-z_][a-z0-9_-]{0,31})", users.ShowHandler),
                        (r"/users/([a-z_][a-z0-9_-]{0,31})\.jpg", users.AvatarHandler),
 
-                       # User Groups
-                       (r"/users/groups", users.GroupIndexHandler),
-                       (r"/users/groups/([a-z_][a-z0-9_-]{0,31})", users.GroupShowHandler),
-
                        # RSS feed
                        (r"/news.rss", tornado.web.RedirectHandler, { "url" : "https://blog.ipfire.org/feed.xml" }),