people: Update design of call page

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

diff --git a/src/templates/people/call.html b/src/templates/people/call.html
index 12d5fd787c803d95c623527b3558a56d9caf3b41..83edd816e923e8edc28e2b6d3dbfdcf5aaf9301b 100644 (file)
--- a/src/templates/people/call.html
+++ b/src/templates/people/call.html
@@ -2,10 +2,10 @@
 
 {% block title %}{{ account }} - {{ _("Call") }}{% end block %}
 
-{% block content %}
-       <div class="card">
-               <div class="card-body">
-                       <h4 class="card-title mb-1">
+{% block container %}
+       <div class="header">
+               <div class="container">
+                       <h1>
                                {% if call.direction == "inbound" %}
                                        {{ _("Call to") }}
 
@@ -23,53 +23,73 @@
                                                {{ format_phone_number(call.caller_number) }}
                                        {% end %}
                                {% end %}
-                       </h4>
-                       <h6 class="card-subtitle text-muted mb-4">{{ locale.format_date(call.time_answered or call.time_start) }}</h6>
+                       </h1>
 
-                       <h3 class="text-center my-5">
-                               {% if call.duration %}
-                                       {{ format_time(call.duration) }}
-                               {% else %}
-                                       {{ _("Not Answered") }}
-                               {% end %}
-                       </h3>
+                       <ul class="list-inline text-muted">
+                               <li class="list-inline-item">
+                                       {{ locale.format_date(call.time_answered or call.time_start, relative=False) }}
+                               </li>
+
+                               <li class="list-inline-item">
+                                       {% if call.duration %}
+                                               {{ format_time(call.duration) }}
+                                       {% else %}
+                                               {{ _("Not Answered") }}
+                                       {% end %}
+                               </li>
+                       </p>
+               </div>
+       </div>
 
-                       <h6>{{ _("Media Information") }}</h6>
+       <div class="container">
+               <section>
+                       <h4>{{ _("Media Information") }}</h4>
 
                        <div class="row">
                                {% for c in (call, call.bleg) %}
                                        {% if c %}
-                                               <div class="col">
-                                                       <div class="card card-body bg-light">
-                                                               <p>
-                                                                       <strong>
+                                               <div class="col-12 col-lg-6 mb-4">
+                                                       <div class="card">
+                                                               <div class="card-body">
+                                                                       <h6 class="card-title">
                                                                                {% if c == call %}
                                                                                        {{ _("Your Leg") }}
                                                                                {% else %}
                                                                                        {{ _("Other Leg") }}
                                                                                {% end %}
-                                                                       </strong>
-                                                               </p>
 
-                                                               <p class="text-center">
-                                                                       {% module MOS(c) %}
-                                                               </p>
+                                                                               {% if c.user_agent %}
+                                                                                       <small class="text-muted">
+                                                                                               ({{ c.user_agent }})
+                                                                                       </small>
+                                                                               {% end %}
+                                                                       </h6>
+
+
 
-                                                               <dl class="row mb-0">
-                                                                       <dt class="col-sm-6">{{ _("Codec") }}</dt>
-                                                                       <dd class="col-sm-6">{{ c.codec or _("N/A") }}</dd>
+                                                                       <p class="text-center">
+                                                                               {% module MOS(c) %}
+                                                                       </p>
 
-                                                                       <dt class="col-sm-6">{{ _("Data Transferred") }}</dt>
-                                                                       <dd class="col-sm-6">{{ format_size(c.size) }}</dd>
+                                                                       <ul class="list-inline text-center small mb-0">
+                                                                               {% if c.codec %}
+                                                                                       <li class="list-inline-item text-muted">
+                                                                                               {{ c.codec }}
+                                                                                       </li>
+                                                                               {% end %}
 
-                                                                       <dt class="col-sm-6">{{ _("User Agent") }}</dt>
-                                                                       <dd class="col-sm-6">{{ c.user_agent or _("N/A") }}</dd>
-                                                               </dl>
+                                                                               {% if c.size %}
+                                                                                       <li class="list-inline-item text-muted">
+                                                                                               {{ format_size(c.size) }}
+                                                                                       </li>
+                                                                               {% end %}
+                                                                       </ul>
+                                                               </div>
                                                        </div>
                                                </div>
                                        {% end %}
                                {% end %}
                        </div>
-               </div>
+               </section>
        </div>
 {% end %}

diff --git a/src/templates/people/modules/mos.html b/src/templates/people/modules/mos.html
index 5ae9ddb3cf3d0c213eef6728d497cb29fcf25507..493fc4d0d15484390b4a4958c96d04f75075fe38 100644 (file)
--- a/src/templates/people/modules/mos.html
+++ b/src/templates/people/modules/mos.html
@@ -1,12 +1,20 @@
 {% if call.mos %}
-       <span class="small text-muted" title="{{ "%.2f" % call.mos }}/5">
+       {% if call.mos >= 4.5 %}
+               {% set color = "text-success" %}
+       {% elif call.mos >= 4.3 %}
+               {% set color = "text-warning" %}
+       {% else %}
+               {% set color = "text-danger" %}
+       {% end %}
+
+       <span class="text-muted" title="{{ "%.2f" % call.mos }}/5">
                {% for i in range(5) %}
                        {% if call.mos > (i + 0.5) %}
-                               <span class="fas fa-star"></span>
+                               <span class="fas fa-star {{ color }}"></span>
                        {% elif call.mos > i %}
-                               <span class="fas fa-star-half-alt"></span>
+                               <span class="fas fa-star-half-alt {{ color }}"></span>
                        {% else %}
-                               <span class="far fa-star"></span>
+                               <span class="far fa-star {{ color }}"></span>
                        {% end %}
                {% end %}
        </span>