voip: Show queues

[ipfire.org.git] / src / templates / people / call.html

diff --git a/src/templates/people/call.html b/src/templates/people/call.html
index 3fb4b0906064a7c9d2baed5dbd8032ab0fb4bcf2..83edd816e923e8edc28e2b6d3dbfdcf5aaf9301b 100644 (file)
--- a/src/templates/people/call.html
+++ b/src/templates/people/call.html
@@ -1,11 +1,11 @@
-{% extends "base.html" %}
+{% extends "../base.html" %}
 
 {% block title %}{{ account }} - {{ _("Call") }}{% end block %}
 
-{% block main %}
-       <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 %}