log: Improve the design

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

diff --git a/src/static/css/site.scss b/src/static/css/site.scss
index 08ee3f9f246060f4989d37b27cfcb138431051d4..8fb631811d0b82d351126c8cd8216b2b407075d6 100644 (file)
--- a/src/static/css/site.scss
+++ b/src/static/css/site.scss
@@ -35,8 +35,8 @@ $link:                                                        $primary;
 */
 
 .log {
-       .level {
-               font-size: $small-font-size;
+       .media-left {
+               min-width: 64px;
        }
 }
 

diff --git a/src/templates/events/modules/system-message.html b/src/templates/events/modules/system-message.html
index 9062d0d79c376edb3666ae04fe42722e3e9c9d54..ee4c01990a6906acc33037e7a9ad1070b00f8fd0 100644 (file)
--- a/src/templates/events/modules/system-message.html
+++ b/src/templates/events/modules/system-message.html
@@ -1,67 +1,79 @@
 <div class="media log">
        {% block thumbnail %}
-               <div class="media-left">
-                       {% if event.type in ("build-failed", "job-failed") %}
-                               <span class="icon is-large has-text-danger">
-                                       <i class="fa-solid fa-3x fa-square-xmark"></i>
-                               </span>
-                       {% elif event.type in ("build-finished", "job-finished") %}
-                               <span class="icon is-large has-text-success">
-                                       <i class="fa-solid fa-3x fa-square-check"></i>
-                               </span>
+               <div class="media-left has-text-centered">
+                       {% if event.type == "job-created" %}
+                               <p class="icon is-large has-text-info">
+                                       <i class="fa-solid fa-2x fa-plus"></i>
+                               </p>
+                       {% elif event.type == "job-dispatched" %}
+                               <p class="icon is-large has-text-info">
+                                       <i class="fa-solid fa-2x fa-gear"></i>
+                               </p>
+                       {% elif event.type == "build-finished" %}
+                               <p class="icon is-large has-text-success">
+                                       <i class="fa-solid fa-2x fa-check-double"></i>
+                               </p>
+                       {% elif event.type == "job-finished" %}
+                               <p class="icon is-large has-text-success">
+                                       <i class="fa-solid fa-2x fa-check"></i>
+                               </p>
+                       {% elif event.type in ("build-failed", "job-failed") %}
+                               <p class="icon is-large has-text-danger">
+                                       <i class="fa-solid fa-2x fa-xmark"></i>
+                               </p>
                        {% else %}
-                               <span class="icon is-large">
-                                       <i class="fa-solid fa-3x fa-square-question"></i>
-                               </span>
+                               <p class="icon is-large has-text-light">
+                                       <i class="fa-solid fa-2x fa-question"></i>
+                               </p>
                        {% end %}
                </div>
        {% end block %}
 
        <div class="media-content">
                <p>
-                       {% if event.type == "build-comment" %}
-                               {{ _("%s Commented") % event.by_user }}
-                       {% elif event.type == "build-created" %}
-                               {{ _("Build Created") }}
-                       {% elif event.type == "build-deleted" %}
-                               {{ _("Build Deleted") }}
-                       {% elif event.type == "build-failed" %}
-                               {{ _("Build Failed") }}
-                       {% elif event.type == "build-finished" %}
-                               {{ _("Build Finished") }}
-                       {% elif event.type == "build-deprecated" %}
-                               {{ _("This build was deprecated") }}
-                       {% elif event.type == "build-watcher-added" %}
-                               {{ _("%s started watching this build") % event.user }}
-                       {% elif event.type == "build-watcher-removed" %}
-                               {{ _("%s stopped watching this build") % event.user }}
-                       {% elif event.type == "job-created" %}
-                               {{ _("Job Created") }}
-                       {% elif event.type == "job-failed" %}
-                               {{ _("Job Failed") }}
-                       {% elif event.type == "job-finished" %}
-                               {{ _("Job Finished") }}
-                       {% elif event.type == "job-aborted" %}
-                               {{ _("Job Aborted") }}
-                       {% elif event.type == "job-dispatched" %}
-                               {{ _("Job Dispatched") }}
-                       {% elif event.type == "repository-build-added" %}
-                               {{ _("Build has been added to repository %s") % event.repository }}
-                       {% elif event.type == "repository-build-removed" %}
-                               {{ _("Build has been removed from repository %s") % event.repository }}
-                       {% else %}
-                               {{ _("- Unknown Event %s -") % event.type }}
-                       {% end %}
+                       <strong>
+                               {% if event.type == "build-comment" %}
+                                       {{ event.by_user }}
+                               {% elif event.type == "build-created" %}
+                                       {{ _("Build Created") }}
+                               {% elif event.type == "build-deleted" %}
+                                       {{ _("Build Deleted") }}
+                               {% elif event.type == "build-failed" %}
+                                       {{ _("Build Failed") }}
+                               {% elif event.type == "build-finished" %}
+                                       {{ _("Build Finished") }}
+                               {% elif event.type == "build-deprecated" %}
+                                       {{ _("This build was deprecated") }}
+                               {% elif event.type == "build-watcher-added" %}
+                                       {{ _("%s started watching this build") % event.user }}
+                               {% elif event.type == "build-watcher-removed" %}
+                                       {{ _("%s stopped watching this build") % event.user }}
+                               {% elif event.type == "job-created" %}
+                                       {{ _("Job Created") }}
+                               {% elif event.type == "job-failed" %}
+                                       {{ _("Job Failed") }}
+                               {% elif event.type == "job-finished" %}
+                                       {{ _("Job Finished") }}
+                               {% elif event.type == "job-aborted" %}
+                                       {{ _("Job Aborted") }}
+                               {% elif event.type == "job-dispatched" %}
+                                       {{ _("Job Dispatched") }}
+                               {% elif event.type == "repository-build-added" %}
+                                       {{ _("Build has been added to repository %s") % event.repository }}
+                               {% elif event.type == "repository-build-removed" %}
+                                       {{ _("Build has been removed from repository %s") % event.repository }}
+                               {% else %}
+                                       {{ _("- Unknown Event %s -") % event.type }}
+                               {% end %}
+                       </strong>
+
+                       <small>{{ locale.format_date(event.t, shorter=True) }}</small>
                </p>
 
                {% block content %}{% end %}
 
                <nav class="level">
                        <div class="level-left">
-                               <span class="level-item">
-                                       {{ locale.format_date(event.t, shorter=True) }}
-                               </span>
-
                                {# Build #}
                                {% if show_build and event.build and not event.job %}
                                        <a class="level-item" href="/builds/{{ event.build.uuid }}">
@@ -91,7 +103,7 @@
                                {% end %}
 
                                {# By User #}
-                               {% if event.by_user %}
+                               {% if not event.type == "build-comment" and event.by_user %}
                                        <a class="level-item" href="/users/{{ event.by_user.name }}">
                                                {{ _("by %s") % event.by_user }}
                                        </a>

diff --git a/src/templates/events/modules/user-message.html b/src/templates/events/modules/user-message.html
index 6b4f83cc616770a24cc70e17ebc2918bd6573c2f..b288d2767db88021d721d59fede495f742c6f0ec 100644 (file)
--- a/src/templates/events/modules/user-message.html
+++ b/src/templates/events/modules/user-message.html
@@ -4,8 +4,9 @@
        {% set user = event.user or event.by_user %}
 
        <div class="media-left">
-               <p class="image is-48x48">
-                       <img src="{{ user.avatar(64) }}">
+               <p class="image is-64x64">
+                       <img class="is-rounded" src="{{ user.avatar(64) }}"
+                               alt="{{ user }}">
                </p>
        </div>
 {% end block %}