users: Improve appearance

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

diff --git a/src/templates/users/show.html b/src/templates/users/show.html
index 2eff083ab329c6708caf78faf096e44831661b51..d065d483609fbdb0b8c25a20ebd2774e3fe1f28d 100644 (file)
--- a/src/templates/users/show.html
+++ b/src/templates/users/show.html
@@ -3,107 +3,110 @@
 {% block title %}{{ _("Users") }} - {{ user }}{% end block %}
 
 {% block body %}
-       <section class="section">
-               <div class="container">
-                       <nav class="breadcrumb" aria-label="breadcrumbs">
-                               <ul>
-                                       <li>
-                                               <a href="/users">{{ _("Users") }}</a>
-                                       </li>
-                                       <li class="is-active">
-                                               <a href="#" aria-current="page">{{ user }}</a>
-                                       </li>
-                               </ul>
-                       </nav>
+       <section class="hero is-light">
+               <div class="hero-body">
+                       <div class="container">
+                               <nav class="breadcrumb" aria-label="breadcrumbs">
+                                       <ul>
+                                               <li>
+                                                       <a href="/users">{{ _("Users") }}</a>
+                                               </li>
+                                               <li class="is-active">
+                                                       <a href="#" aria-current="page">{{ user }}</a>
+                                               </li>
+                                       </ul>
+                               </nav>
 
-                       <h1 class="title is-1">{{ user }}</h1>
-                       <h4 class="subtitle is-4">{{ user.name }}</h4>
-
-                       <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>
-
-                                               <div class="message-body">
-                                                       {{ _("You have exceeded your quota.") }}
-                                               </div>
-                                       </article>
-                               {% end %}
+                               <h1 class="title is-1">{{ user }}</h1>
+                               <h4 class="subtitle is-4">{{ user.name }}</h4>
 
-                               <div class="box">
-                                       <div class="columns">
-                                               <div class="column is-4">
-                                                       <figure class="image is-1by1">
-                                                               <img src="{{ user.avatar(512) }}" alt="{{ user }}" />
-                                                       </figure>
+                               <div class="block">
+                                       <nav class="level">
+                                               {# Total Builds #}
+                                               <div class="level-item has-text-centered">
+                                                       <div>
+                                                               <p class="heading">{{ _("Total Builds") }}</p>
+                                                               <p class="title">{{ user.total_builds }}</p>
+                                                       </div>
                                                </div>
 
-                                               <div class="column">
-                                                       {% if user.has_perm(current_user) %}
-                                                               <h6 class="subtitle is-6">{{ _("Resource Limits") }}</h6>
-
-                                                               <nav class="level">
-                                                                       <div class="level-left">
-                                                                               <div class="level-item has-text-centered">
-                                                                                       <div>
-                                                                                               {% if user.quota %}
-                                                                                                       <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>
-                                                                                               {% else %}
-                                                                                                       <p class="heading">{{ _("Disk Usage") }}</p>
-                                                                                                       <p class="title">
-                                                                                                               {{ format_size(user.disk_usage) }}
-                                                                                                       </p>
-                                                                                               {% end %}
-                                                                                       </div>
-                                                                               </div>
-                                                                       </div>
-                                                               </nav>
-                                                       {% 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 %}
+                                               {# Total Build Time #}
+                                               {% if user.total_build_time %}
+                                                       <div class="level-item has-text-centered">
+                                                               <div>
+                                                                       <p class="heading">{{ _("Total Build Time") }}</p>
+                                                                       <p class="title">
+                                                                               {{ format_time(user.total_build_time) }}
+                                                                       </p>
+                                                               </div>
+                                                       </div>
+                                               {% end %}
 
-                                                               {% if current_user and current_user.is_admin() %}
-                                                                       <a class="button is-light" href="mailto:{{ user.email }}">
-                                                                               {{ _("Email") }}
-                                                                       </a>
-                                                               {% end %}
+                                               {# Quota/Disk Usage #}
+                                               {% if user.has_perm(current_user) %}
+                                                       <div class="level-item has-text-centered">
+                                                               <div>
+                                                                       {% if user.quota %}
+                                                                               <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>
+                                                                       {% else %}
+                                                                               <p class="heading">{{ _("Disk Usage") }}</p>
+                                                                               <p class="title">
+                                                                                       {{ format_size(user.disk_usage) }}
+                                                                               </p>
+                                                                       {% end %}
+                                                               </div>
                                                        </div>
-                                               </div>
-                                       </div>
+                                               {% end %}
+                                       </nav>
                                </div>
                        </div>
                </div>
        </section>
 
-       {# Repositories #}
-
+       {# Actions #}
        <section class="section">
                <div class="container">
-                       <h5 class="title is-5">{{ _("Repositories") }}</h5>
+                       <div class="buttons">
+                               {% if user.has_perm(current_user) %}
+                                       <a class="button is-warning" href="/users/{{ user.name }}/edit">
+                                               {{ _("Edit") }}
+                                       </a>
+                               {% end %}
 
-                       {% if user.has_perm(current_user) %}
-                               <a class="button is-success" href="/users/{{ user.name }}/repos/create">
-                                       {{ _("Create Repository") }}
-                               </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>
+
+       {# Repositories #}
+       {% if user.repos %}
+               <section class="section">
+                       <div class="container">
+                               <h4 class="title is-4">{{ _("Repositories") }}</h4>
 
-                       {% if user.repos %}
                                {% for distro in sorted(user.repos) %}
-                                       <h6 class="title is-6">{{ distro }}</h6>
+                                       <div class="block">
+                                               <h5 class="title is-5">{{ distro }}</h5>
 
-                                       {% module ReposList(user.repos[distro]) %}
+                                               {% module ReposList(user.repos[distro]) %}
+                                       </div>
                                {% end %}
-                       {% end %}
-               </div>
-       </section>
+
+                               {% if user.has_perm(current_user) %}
+                                       <div class="block">
+                                               <a class="button is-success" href="/users/{{ user.name }}/repos/create">
+                                                       {{ _("Create Repository") }}
+                                               </a>
+                                       </div>
+                               {% end %}
+                       </div>
+               </section>
+       {% end %}
 {% end block %}