people: Update design of calls page

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

diff --git a/src/templates/people/calls.html b/src/templates/people/calls.html
index f4059ca5511898a850c2b074eb79d421c95fafce..d26a6655ba016ffb96330a3a81790abeb962def5 100644 (file)
--- a/src/templates/people/calls.html
+++ b/src/templates/people/calls.html
@@ -2,13 +2,21 @@
 
 {% block title %}{{ account }} - {{ _("Calls") }}{% end block %}
 
-{% block content %}
-       <h1>{{ _("Calls") }}</h1>
+{% block container %}
+       <div class="header">
+               <div class="container">
+                       <h1>{{ _("Calls") }}</h1>
+
+                       <p class="text-muted">
+                               {{ locale.format_day(date) }}
+                       </p>
+               </div>
+       </div>
 
-       {% module Channels(current_user) %}
+       <div class="container">
+               <section>
+                       {% module Channels(current_user) %}
 
-       <div class="card">
-               <div class="card-body">
                        <nav>
                                <ul class="pagination justify-content-center">
                                        {% set yesterday = date - datetime.timedelta(days=1) %}
@@ -20,12 +28,6 @@
                                                </a>
                                        </li>
 
-                                       <li class="page-item active">
-                                               <a class="page-link" href="/users/{{ account.uid }}/calls/{{ date }}" tabindex="-1">
-                                                       {{ locale.format_day(date) }}
-                                               </a>
-                                       </li>
-
                                        <li class="page-item {% if tomorrow > now %}disabled{% end %}">
                                                <a class="page-link" href="/users/{{ account.uid }}/calls/{{ tomorrow }}">
                                                        {{ locale.format_day(tomorrow) }} &raquo;
@@ -35,6 +37,6 @@
                        </nav>
 
                        {% module CDR(account, date=date) %}
-               </div>
+               </section>
        </div>
 {% end block %}

diff --git a/src/templates/people/modules/cdr.html b/src/templates/people/modules/cdr.html
index 456f8f2f76efc2389b2e4080f3f5bb8cf310c5f1..a810b15bd128b141760800211f111db25c85d7ed 100644 (file)
--- a/src/templates/people/modules/cdr.html
+++ b/src/templates/people/modules/cdr.html
@@ -1,56 +1,48 @@
 {% if cdr %}
-       <table class="table table-sm mb-0">
-               <thead>
-                       <tr>
-                               <th></th>
-                               <th class="text-right">{{ _("Duration") }}</th>
-                       </tr>
-               </thead>
+       <div class="list-group">
+               {% for c in cdr %}
+                       <a class="list-group-item list-group-item-action"
+                                       href="/users/{{ account.uid }}/calls/{{ c.uuid }}">
+                               {% if c.direction == "inbound" %}
+                                       <span class="fas fa-arrow-right text-danger"></span>
 
-               <tbody>
-                       {% for c in cdr %}
-                               <tr>
-                                       <td>
-                                               {% if c.direction == "inbound" %}
-                                                       <span class="fas fa-arrow-right text-danger"></span>
+                                       {% if c.callee %}
+                                               {{ c.callee }}
+                                       {% else %}
+                                               {{ format_phone_number(c.callee_number) }}
+                                       {% end %}
+                               {% elif c.direction == "outbound" %}
+                                       <span class="fas fa-arrow-left text-success"></span>
 
-                                                       <a href="/users/{{ account.uid }}/calls/{{ c.uuid }}">
-                                                               {% if c.callee %}
-                                                                       {{ c.callee }}
-                                                               {% else %}
-                                                                       {{ format_phone_number(c.callee_number) }}
-                                                               {% end %}
-                                                       </a>
-                                               {% elif c.direction == "outbound" %}
-                                                       <span class="fas fa-arrow-left text-success"></span>
+                                       {% if c.caller %}
+                                               {{ c.caller }}
+                                       {% else %}
+                                               {{ format_phone_number(c.caller_number) }}
+                                       {% end %}
+                               {% end %}
 
-                                                       <a href="/users/{{ account.uid }}/calls/{{ c.uuid }}">
-                                                               {% if c.caller %}
-                                                                       {{ c.caller }}
-                                                               {% else %}
-                                                                       {{ format_phone_number(c.caller_number) }}
-                                                               {% end %}
-                                                       </a>
-                                               {% end %}
-
-                                               <br>
+                               <ul class="list-inline small mb-0">
+                                       <li class="list-inline-item">
+                                               {{ locale.format_date(c.time_start, relative=False) }}
+                                       </li>
 
+                                       <li class="list-inline-item">
                                                {% module MOS(c) %}
-                                       </td>
-
-                                       <td class="text-right">
-                                               {{ locale.format_date(c.time_start, relative=False) }} <br>
+                                       </li>
 
-                                               {% if c.time_answered %}
-                                                       <span class="text-muted">{{ format_time(c.duration) }}</span>
-                                               {% else %}
-                                                       <span class="text-danger">{{ _("Not Answered") }}</span>
-                                               {% end %}
-                                       </td>
-                               </tr>
-                       {% end %}
-               </tbody>
-       </table>
+                                       {% if c.time_answered %}
+                                               <li class="list-inline-item text-muted">
+                                                       {{ format_time(c.duration) }}
+                                               </li>
+                                       {% else %}
+                                               <li class="list-inline-item text-danger">
+                                                       {{ _("Not Answered") }}
+                                               </li>
+                                       {% end %}
+                               </ul>
+                       </a>
+               {% end %}
+       </div>
 {% else %}
        <p class="text-muted text-center my-5">
                {{ _("There are no calls") }}

diff --git a/src/templates/people/modules/channels.html b/src/templates/people/modules/channels.html
index 3a234434a51edab3429e6d7bef0102a1bedddfd3..0fb2f9d3c084f54af188c37653595d90bf7f2f6e 100644 (file)
--- a/src/templates/people/modules/channels.html
+++ b/src/templates/people/modules/channels.html
@@ -1,79 +1,76 @@
 {% if channels %}
-       <div class="card mb-3">
-               <div class="card-body">
-                       <h6 class="card-title">{{ _("Ongoing Calls") }}</h6>
+       <ul class="list-group mb-3">
+               {% for chan in channels %}
+                       <li class="list-group-item">
+                               {% if chan.direction == "inbound" %}
+                                       <span class="fas fa-arrow-right text-danger"></span>
 
-                       <table class="table mb-0">
-                               <tbody>
-                                       {% for chan in channels %}
-                                               <tr>
-                                                       <td>
-                                                               {% if chan.direction == "inbound" %}
-                                                                       <span class="fas fa-arrow-right text-danger"></span>
+                                       {% if chan.conference %}
+                                               <a href="/conferences#{{ chan.conference.handle }}">
+                                                       {{ _("Conference Room %s") % chan.conference.number }}
+                                               </a>
+                                       {% elif chan.application == "echo" %}
+                                               {{ _("Echo Test") }}
 
-                                                                       {% if chan.conference %}
-                                                                               <a href="/conferences#{{ chan.conference.handle }}">{{ _("Conference Room %s") % chan.conference.number }}</a>
+                                       {% elif chan.application == "voicemail" %}
+                                               {{ _("Voicemail") }}
 
-                                                                               <span class="text-muted">
-                                                                                       ({{ _("One Participant", "%(num)s Participants", len(chan.conference)) % { "num" : len(chan.conference) } }})
-                                                                               </span>
-                                                                       {% elif chan.application == "echo" %}
-                                                                               {{ _("Echo Test") }}
+                                       {% elif chan.callee %}
+                                               {% if chan.callee %}
+                                                       <a href="/users/{{ chan.callee.uid }}">{{ chan.callee }}</a>
+                                               {% else %}
+                                                       {{ chan.callee_name }}
+                                               {% end %}
 
-                                                                       {% elif chan.application == "voicemail" %}
-                                                                               {{ _("Voicemail") }}
+                                               <span class="text-muted">({{ format_phone_number(chan.callee_number) }})</span>
 
-                                                                       {% elif chan.callee %}
-                                                                               {% if chan.callee %}
-                                                                                       <a href="/users/{{ chan.callee.uid }}">{{ chan.callee }}</a>
-                                                                               {% else %}
-                                                                                       {{ chan.callee_name }}
-                                                                               {% end %}
-               
-                                                                               <span class="text-muted">({{ format_phone_number(chan.callee_number) }})</span>
-                                                                       {% else %}
-                                                                               {{ format_phone_number(chan.called_number) }}
-                                                                       {% end %}
-                                                               {% elif chan.direction == "outbound" %}
-                                                                       <span class="fas fa-arrow-right text-success"></span>
+                                       {% else %}
+                                               {{ format_phone_number(chan.called_number) }}
+                                       {% end %}
+                               {% elif chan.direction == "outbound" %}
+                                       <span class="fas fa-arrow-right text-success"></span>
 
-                                                                       {% if chan.caller %}
-                                                                               <a href="/users/{{ chan.caller.uid }}">{{ chan.caller }}</a>
-                                                                       {% else %}
-                                                                               {{ chan.caller_name }}
-                                                                       {% end %}
-       
-                                                                       <span class="text-muted">({{ format_phone_number(chan.caller_number) }})</span>
-                                                               {% end %}
-               
-                                                               <br>
-               
-                                                               <span class="text-muted small">
-                                                                       {% if chan.is_secure() %}
-                                                                               <span class="fas fa-lock" title="{{ chan.secure }}"></span>
-                                                                       {% end %}
+                                       {% if chan.caller %}
+                                               <a href="/users/{{ chan.caller.uid }}">{{ chan.caller }}</a>
+                                       {% else %}
+                                               {{ chan.caller_name }}
+                                       {% end %}
 
-                                                                       {{ chan.codec }}
-                                                               </span>
-                                                       </td>
+                                       <span class="text-muted">({{ format_phone_number(chan.caller_number) }})</span>
+                               {% end %}
 
-                                                       <td class="text-right">
-                                                               {% if chan.state == "ACTIVE" %}
-                                                                       {# Don't show anything #}
-                                                               {% elif chan.state == "HELD" %}
-                                                                       <span class="badge badge-warning mr-2">{{ _("On Hold") }}</span>
-                                                               {% elif chan.state == "RINGING" %}
-                                                                       <span class="badge badge-info mr-2">{{ _("Ringing") }}</span>
-                                                               {% else %}
-                                                                       {{ _("Unknown State: %s") % chan.state }}
-                                                               {% end %}
+                               <ul class="list-inline small mb-0">
+                                       {% if chan.state == "ACTIVE" %}
+                                               {# Don't show anything #}
+                                       {% elif chan.state == "HELD" %}
+                                               <li class="list-inline-item">
+                                                       <span class="badge badge-warning">{{ _("On Hold") }}</span>
+                                               </li>
+                                       {% elif chan.state == "RINGING" %}
+                                               <li class="list-inline-item">
+                                                       <span class="badge badge-info">{{ _("Ringing") }}</span>
+                                               </li>
+                                       {% else %}
+                                               <li class="list-inline-item">
+                                                       {{ _("Unknown State: %s") % chan.state }}
+                                               </li>
+                                       {% end %}
 
-                                                               {{ format_time(chan.duration) }}
-                                                       </td>
-                                               </tr>
+                                       <li class="list-inline-item">
+                                               {{ format_time(chan.duration) }}
+                                       </li>
+
+                                       {% if chan.is_secure() %}
+                                               <li class="list-inline-item">
+                                                       <i class="fas fa-lock" title="{{ chan.secure }}"></i>
+                                               </li>
                                        {% end %}
-                               </tbody>
-                       </table>
-               </div>
-       </div>
+
+                                       <li class="list-inline-item">
+                                               {{ chan.codec }}
+                                       </li>
+                               </ul>
+                       </li>
+               {% end %}
+       </ul>
 {% end %}