From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 27 Nov 2020 18:51:04 +0000 (+0000)
Subject: people: Update design of call page
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=dfea34a290734ae58c1f3c466c3f55ccccff7270;p=ipfire.org.git

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 12d5fd78..83edd816 100644
--- 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 5ae9ddb3..493fc4d0 100644
--- 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>