web: Refactor users page

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

diff --git a/src/templates/users/show.html b/src/templates/users/show.html
index 8f829959653ad68ef28ad7f07f2d3b8e4c084efb..26014fadf6aa61447b90a6539332c082e42b76e1 100644 (file)
--- a/src/templates/users/show.html
+++ b/src/templates/users/show.html
@@ -3,75 +3,94 @@
 {% block title %}{{ _("Users") }} - {{ user }}{% end block %}
 
 {% block container %}
-       <nav aria-label="{{ _("You are here:") }}" role="navigation">
-               <ul class="breadcrumbs">
-                       <li>
-                               <a href="/">{{ _("Home") }}</a>
-                       </li>
+       <nav class="breadcrumb" aria-label="breadcrumbs">
+               <ul>
                        <li>
                                <a href="/users">{{ _("Users") }}</a>
                        </li>
-                       <li>
-                               <span class="show-for-sr">{{ _("Current") }}: </span> {{ user }}
+                       <li class="is-active">
+                               <a href="#" aria-current="page">{{ user }}</a>
                        </li>
                </ul>
        </nav>
 
-       <h1>
-               {{ user }} <small>{{ user.name }}</small>
-       </h1>
+       <h1 class="title is-1">{{ user }}</h1>
+       <h4 class="subtitle is-4">{{ user.name }}</h4>
 
-       <!-- <div class="grid-x grid-padding-x">
-               <div class="cell large-4">
-                       <img class="thumbnail" src="{{ user.avatar(200) }}" alt="{{ user }}" />
-               </div>
-       </div> -->
+       <div class="block">
+               {% if user == current_user and user.has_exceeded_quota() %}
+                       <article class="message is-danger">
+                               <div class="message-header">
+                                       <p>{{ _("Quota Exceeded") }}</p>
+                               </div>
 
-       {% if current_user and current_user.is_admin() %}
-               <a class="secondary expanded button" href="mailto:{{ user.email }}">
-                       {{ _("Send an Email to %s") % user }}
-               </a>
-       {% end %}
+                               <div class="message-body">
+                                       {{ _("You have exceeded your quota.") }}
+                               </div>
+                       </article>
+               {% end %}
 
-       {# Repositories #}
+               <div class="box">
+                       <div class="columns">
+                               <div class="column is-4">
+                                       <figure class="image is-1by1">
+                                               <img src="{{ user.avatar(256) }}" alt="{{ user }}" />
+                                       </figure>
+                               </div>
 
-       <h4>{{ _("Repositories") }}</h4>
+                               <div class="column">
+                                       {% if user.has_perm(current_user) %}
+                                               <h6 class="subtitle is-6">{{ _("Resource Limits") }}</h6>
 
-       {% if user.repos %}
-               {% for distro in sorted(user.repos) %}
-                       <h5>{{ distro }}</h5>
+                                               <nav class="level">
+                                                       <div class="level-left">
+                                                               <div class="level-item has-text-centered">
+                                                                       <div>
+                                                                               <p class="heading">{{ _("Disk Quota") }}</p>
+                                                                               <p class="title {% if user.has_exceeded_quota() %}has-text-danger{% end %}">
+                                                                                       {{ format_size(user.disk_usage) }}/{{ format_size(user.quota) }}
+                                                                               </p>
+                                                                       </div>
+                                                               </div>
+                                                       </div>
+                                               </nav>
+                                       {% end %}
 
-                       {% module ReposList(user.repos[distro]) %}
-               {% end %}
-       {% end %}
+                                       <div class="buttons are-small">
+                                               {% if user.has_perm(current_user) %}
+                                                       <a class="button is-warning" href="/users/{{ user.name }}/edit">
+                                                               {{ _("Edit") }}
+                                                       </a>
+                                               {% end %}
+
+                                               {% if current_user and current_user.is_admin() %}
+                                                       <a class="button is-light" href="mailto:{{ user.email }}">
+                                                               {{ _("Email") }}
+                                                       </a>
+                                               {% end %}
+                                       </div>
+                               </div>
+                       </div>
+               </div>
+       </div>
 
-       {% if user.has_perm(current_user) %}
-               <a class="success expanded button" href="/users/{{ user.name }}/repos/create">
-                       {{ _("Create Repository") }}
-               </a>
-       {% end %}
+       {# Repositories #}
 
-       <div class="callout">
-               <div class="grid-x grid-padding-x">
-                       {% if user.quota %}
-                               <div class="cell large-4 offset-8">
-                                       <h6>{{ _("Quota") }}</h6>
+       <div class="block">
+               <h5 class="title is-5">{{ _("Repositories") }}</h5>
 
-                                       {% set p = min(user.disk_usage * 100 / user.quota, 100) %}
+               {% if user.has_perm(current_user) %}
+                       <a class="button is-success is-small" href="/users/{{ user.name }}/repos/create">
+                               {{ _("Create Repository") }}
+                       </a>
+               {% end %}
 
-                                       <div class="{% if user.has_exceeded_quota() %}alert{% end %} progress"
-                                                       role="progressbar"
-                                                       aria-valuenow="{{ "%.0f" % p }}"
-                                                       aria-valuemin="0"
-                                                       aria-valuemax="100">
-                                               <span class="progress-meter" style="width: {{ "%.0f%%" % p }}">
-                                                       <span class="progress-meter-text">
-                                                               {{ format_size(user.disk_usage) }}/{{ format_size(user.quota) }}
-                                                       </span>
-                                               </span>
-                                       </div>
-                               </div>
+               {% if user.repos %}
+                       {% for distro in sorted(user.repos) %}
+                               <h6 class="title is-6">{{ distro }}</h6>
+
+                               {% module ReposList(user.repos[distro]) %}
                        {% end %}
-               </div>
+               {% end %}
        </div>
 {% end block %}