From 729c06b8380fc6c8718f5d371b9e4156e83f04ec Mon Sep 17 00:00:00 2001
From: Sven Hoehn <shoehn@ipfire.org>
Date: Thu, 21 Dec 2017 19:31:06 +0100
Subject: [PATCH] basic styling talk.ipfire.org

---
 static/css/style.css                  |  8 ++-
 static/scss/_nav.scss                 |  4 +-
 templates/modules/menu.html           |  6 +-
 templates/talk/diagnosis.html         | 36 ++++++-----
 templates/talk/index.html             | 39 +++++++-----
 templates/talk/modules/call-log.html  |  2 +-
 templates/talk/modules/lines.html     |  2 +-
 templates/talk/phonebook-contact.html | 61 ++++++++++--------
 templates/talk/phonebook.html         | 91 ++++++++++++---------------
 9 files changed, 130 insertions(+), 119 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 44255d2..f9ef945 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -5879,12 +5879,16 @@ h5.fireinfo {
   body.About li.nav-item a.about,
   body.Download li.nav-item a.download,
   body.Support li.nav-item a.support,
-  body.Involved li.nav-item a.community {
+  body.Involved li.nav-item a.community,
+  body.Phonebook li.nav-item a.phonebook,
+  body.Diagnosis li.nav-item a.diagnosis {
     color: #b71c1c; }
     body.About li.nav-item a.about:after,
     body.Download li.nav-item a.download:after,
     body.Support li.nav-item a.support:after,
-    body.Involved li.nav-item a.community:after {
+    body.Involved li.nav-item a.community:after,
+    body.Phonebook li.nav-item a.phonebook:after,
+    body.Diagnosis li.nav-item a.diagnosis:after {
       content: "";
       border-bottom: 2px solid #b71c1c;
       position: absolute;
diff --git a/static/scss/_nav.scss b/static/scss/_nav.scss
index 48c024d..837e4ea 100644
--- a/static/scss/_nav.scss
+++ b/static/scss/_nav.scss
@@ -213,7 +213,9 @@
 body.About li.nav-item a.about,
 body.Download li.nav-item a.download,
 body.Support li.nav-item a.support,
-body.Involved li.nav-item a.community {
+body.Involved li.nav-item a.community,
+body.Phonebook li.nav-item a.phonebook,
+body.Diagnosis li.nav-item a.diagnosis {
 	@include media-breakpoint-up(lg) {
 		color: $red_900;
 		&:after {
diff --git a/templates/modules/menu.html b/templates/modules/menu.html
index 09b96d8..615996d 100644
--- a/templates/modules/menu.html
+++ b/templates/modules/menu.html
@@ -55,11 +55,11 @@
 		</li>
 	{% elif hostname == "talk.ipfire.org" and current_user %}
 		<li class="nav-item">
-			<a class="nav-link" href="/phonebook">{{ _("Phonebook") }}</a>
+			<a class="nav-link phonebook" href="/phonebook">{{ _("Phonebook") }}</a>
 		</li>
 
 		<li class="nav-item">
-			<a class="nav-link" href="/conferences">{{ _("Conferences") }}</a>
+			<a class="nav-link conferences" href="/conferences">{{ _("Conferences") }}</a>
 		</li>
 
 		<li class="nav-item">
@@ -69,7 +69,7 @@
 		</li>
 
 		<li class="nav-item">
-			<a class="nav-link" href="/diagnosis">{{ _("Diagnosis") }}</a>
+			<a class="nav-link diagnosis" href="/diagnosis">{{ _("Diagnosis") }}</a>
 		</li>
 	{% end %}
 </ul>
diff --git a/templates/talk/diagnosis.html b/templates/talk/diagnosis.html
index a609e7b..515012f 100644
--- a/templates/talk/diagnosis.html
+++ b/templates/talk/diagnosis.html
@@ -3,23 +3,25 @@
 {% block title %}{{ _("Diagnosis") }}{% end block %}
 
 {% block body %}
-	<div class="page-header">
-		<h2>{{ _("Diagnosis") }}</h2>
-	</div>
-
-	<section id="test-call">
-		<h3>{{ _("Test Call") }}</h3>
-
-		<div class="well">
-			<span class="glyphicon glyphicon-earphone text-success"></span>
-			<a href="/call/9999"">9999<span class="text-muted">@ipfire.org</span></a>
-			- {{ _("A music playing service") }}
+<div class="container">
+	<section class="features-content col-12">
+		<h2 class="display-2 text-center">{{ _("Diagnosis") }}</h2>
+		
+		<div class="row">
+			<div class="col-6">
+				<i class="fa fa-phone" aria-hidden="true"></i>
+				<span class="text-success"></span>
+				<a href="/call/9999">9999<span class="text-muted">@ipfire.org</span></a> - {{ _("A music playing service") }}
+			</div>
+			
+			<div class="col-6">
+				{% if current_user.is_admin() %}
+					<section id="lines">
+						{% module TalkLines(show_account=True) %}
+					</section>
+				{% end %}
+			</div>
 		</div>
 	</section>
-
-	{% if current_user.is_admin() %}
-		<section id="lines">
-			{% module TalkLines(show_account=True) %}
-		</section>
-	{% end %}
+</div>
 {% end block %}
diff --git a/templates/talk/index.html b/templates/talk/index.html
index 51f4cc9..052e828 100644
--- a/templates/talk/index.html
+++ b/templates/talk/index.html
@@ -3,11 +3,15 @@
 {% block title %}{{ _("Index") }}{% end block %}
 
 {% block body %}
-	<div class="page-header">
-		<h3>{{ _("Hello, %s!") % current_user.first_name or current_user.name }}</h3>
-	</div>
-
-	{% if favourite_contacts %}
+<div class="container">
+	<section class="features-content col-12">
+		<div class="row">
+			<div class="col-12">
+				<h3>{{ _("Hello, %s!") % current_user.first_name or current_user.name }}</h3>
+			</div>
+		</div>
+	
+		{% if favourite_contacts %}
 		<div class="row">
 			{% for contact in favourite_contacts %}
 				<div class="col-md-4">
@@ -15,21 +19,20 @@
 						<div class="row">
 							<div class="col-md-4 hidden-sm hidden-xs">
 								{% if contact.called_account %}
-									<img src="{{ contact.called_account.gravatar_icon(106) }}"
-										alt="{{ contact.called_account.name }}">
+									<img src="{{ contact.called_account.gravatar_icon(106) }}" alt="{{ contact.called_account.name }}">
 								{% end %}
 							</div>
 							<div class="col-md-8">
 								<div class="caption">
-									{% if contact.called_account %}
-										<h4>
-											<a href="/phonebook/{{ contact.called_account.uid }}">
-												{{ contact.called_account.name }}
-											</a>
-										</h4>
-									{% else %}
-										<h4>{{ contact.called }}</h4>
-									{% end %}
+								{% if contact.called_account %}
+									<h4>
+										<a href="/phonebook/{{ contact.called_account.uid }}">
+											{{ contact.called_account.name }}
+										</a>
+									</h4>
+								{% else %}
+									<h4>{{ contact.called }}</h4>
+								{% end %}
 									<p>
 										<a href="/call/{{ contact.called }}" class="btn btn-sm {% if contact.called_account and contact.called_account.sip_is_online() %}btn-success{% else %}btn-danger disabled{% end %}" role="button">
 											<span class="glyphicon glyphicon-earphone"></span> {{ _("Call") }}
@@ -42,7 +45,7 @@
 				</div>
 			{% end %}
 		</div>
-	{% end %}
+		{% end %}
 
 	{% if current_user and current_user.is_admin() %}
 		{% module TalkOngoingCalls() %}
@@ -51,4 +54,6 @@
 	{% end %}
 
 	{% module TalkCallLog(current_user) %}
+	</section>
+</div>
 {% end block %}
diff --git a/templates/talk/modules/call-log.html b/templates/talk/modules/call-log.html
index b39a139..fb9fe12 100644
--- a/templates/talk/modules/call-log.html
+++ b/templates/talk/modules/call-log.html
@@ -1,6 +1,6 @@
 <h3>{{ _("Call Log") }}</h3>
 
-<table class="table table-condensed table-hover table-striped">
+<table class="table table-sm table-hover table-striped">
 	<thead>
 		<tr>
 			<th>{{ _("Date") }}</th>
diff --git a/templates/talk/modules/lines.html b/templates/talk/modules/lines.html
index 722ee13..5192b54 100644
--- a/templates/talk/modules/lines.html
+++ b/templates/talk/modules/lines.html
@@ -1,6 +1,6 @@
 <h3>{{ _("Lines") }}</h3>
 
-<table class="table table-condensed table-hover table-striped">
+<table class="table table-sm table-hover table-striped">
 	<thead>
 		<tr>
 			{% if show_account %}
diff --git a/templates/talk/phonebook-contact.html b/templates/talk/phonebook-contact.html
index 7c109f1..a4c076a 100644
--- a/templates/talk/phonebook-contact.html
+++ b/templates/talk/phonebook-contact.html
@@ -3,17 +3,15 @@
 {% block title %}{{ account.name }}{% end block %}
 
 {% block body %}
-	<div class="page-header">
-		<h3>{{ account.name }}</h3>
-	</div>
-
-	<div class="well">
-		<div class="row">
-			<div class="col-md-3 ac">
-				<img src="{{ account.gravatar_icon(243) }}" alt="{{ account.name }}"
-					class="img-thumbnail">
+<div class="container">
+	<section class="features-content col-12">
+		<h2 class="display-2 text-center">{{ account.name }}</h2>
+		
+		<div class="row mb-6">
+			<div class="col-3">
+				<img src="{{ account.gravatar_icon(243) }}" alt="{{ account.name }}" class="img-thumbnail">
 			</div>
-			<div class="col-md-6 ac">
+			<div class="col">
 				{% if account.sip_id %}
 					<h4>{{ _("Voice over IP") }}</h4>
 
@@ -21,13 +19,15 @@
 						<li>
 							<h4>
 								{% if account.uses_sip_forwarding() %}
-									<span class="glyphicon glyphicon-earphone" title="{{ _("calls forwarded") }}"></span>
+									<i class="fa fa-phone" aria-hidden="true"></i>
 									<a href="/call/{{ account.sip_id }}">{{ account.sip_id }}</a>
 								{% elif account.sip_is_online() %}
-									<span class="glyphicon glyphicon-earphone text-success" title="{{ _("online") }}"></span>
+									<i class="fa fa-phone" aria-hidden="true"></i>
+									<span class="text-success" title="{{ _("online") }}"></span>
 									<a href="/call/{{ account.sip_id }}">{{ account.sip_id }}</a>
 								{% else %}
-									<span class="glyphicon glyphicon-earphone text-danger" title="{{ _("offline") }}"></span>									
+									<i class="fa fa-phone" aria-hidden="true"></i>
+									<span class="text-danger" title="{{ _("offline") }}"></span>									
 									{{ account.sip_id }}
 								{% end %}
 							</h4>
@@ -56,6 +56,7 @@
 				{% if account.email %}
 					<ul class="list-unstyled">
 						<li>
+							<i class="fa fa-envelope" aria-hidden="true"></i>
 							<span class="glyphicon glyphicon-envelope" title="{{ _("Email") }}"></span>
 							<a href="mailto:{{ account.email }}">{{ account.email }}</a>
 						</li>
@@ -66,7 +67,8 @@
 					</ul>
 				{% end %}
 			</div>
-			<div class="col-md-3">
+			
+			<div class="col">
 				<h4>{{ _("Postal Address") }}</h4>
 				<address>
 					<strong>{{ account.name }}</strong><br>
@@ -96,19 +98,24 @@
 					</ul>
 				{% end %}
 			</div>
+			
 		</div>
-	</div>
-
-	{% if current_user.is_admin() and account.uses_sip_forwarding() %}
-		<div class="alert alert-info" role="alert">
-			{{ _("All calls are forwarded to:") }}
-			<a href="sip:{{ account.sip_routing_url }}">{{ account.sip_routing_url }}</a>
+		<div class="row">
+			<div class="col">				
+				{% if current_user.is_admin() and account.uses_sip_forwarding() %}
+					<div class="alert alert-info" role="alert">
+						{{ _("All calls are forwarded to:") }}
+						<a href="sip:{{ account.sip_routing_url }}">{{ account.sip_routing_url }}</a>
+					</div>
+				{% end %}
+			
+				{% if current_user == account or current_user.is_admin() %}
+					{% module TalkLines(account) %}
+					{% module TalkOngoingCalls(account) %}
+					{% module TalkCallLog(account) %}
+				{% end %}
+			</div>
 		</div>
-	{% end %}
-
-	{% if current_user == account or current_user.is_admin() %}
-		{% module TalkLines(account) %}
-		{% module TalkOngoingCalls(account) %}
-		{% module TalkCallLog(account) %}
-	{% end %}
+	</section>
+</div>
 {% end block %}
diff --git a/templates/talk/phonebook.html b/templates/talk/phonebook.html
index ed7e9a7..18716f9 100644
--- a/templates/talk/phonebook.html
+++ b/templates/talk/phonebook.html
@@ -3,56 +3,47 @@
 {% block title %}{{ _("Phonebook") }}{% end block %}
 
 {% block body %}
-	<div class="page-header">
-		<h3>{{ _("Phonebook") }}</h3>
-	</div>
 
-	<div class="row">
-		<div class="col-md-8 col-md-offset-2">
-			<ul class="media-list">
-				{% for e in phonebook %}
-					<li class="media">
-						<div class="media-body">
-							<div class="row">
-								<div class="col-md-6">
-									<h4 class="media-heading">
-										<a href="/phonebook/{{ e.uid }}">{{ e.name }}</a>
-									</h4>
-								</div>
-
-								<div class="col-md-6">
-									<ul class="list-unstyled">
-										<li>
-											<i class="glyphicon glyphicon-envelope"></i>
-											<a href="mailto:{{ e.email }}">{{ e.email }}</a>
-										</li>
-
-										{% if e.sip_id %}
-											<li>
-												{% if e.uses_sip_forwarding() %}
-													<span class="glyphicon glyphicon-earphone" title="{{ _("calls forwarded") }}"></span>
-													{{ e.sip_id }}
-												{% elif e.sip_is_online() %}
-													<span class="glyphicon glyphicon-earphone text-success" title="{{ _("online") }}"></span>
-													<a href="/call/{{ e.sip_id }}">{{ e.sip_id }}</a>
-												{% else %}
-													<span class="glyphicon glyphicon-earphone text-danger" title="{{ _("offline") }}"></span>									
-													{{ e.sip_id }}
-												{% end %}
-											</li>
+<div class="container">
+	<section class="features-content col-12">
+		<h2 class="display-2 text-center">{{ _("Phonebook") }}</h2>
+	
+		<div class="row">
+			<div class="col-12">
+				<table class="table table-sm table-striped">
+					<thead>
+						<tr>
+							<th scope="col">Name</th>
+							<th scope="col">eMail</th>
+							<th scope="col">Phone</th>
+							<th scope="col">Gravatar</th>
+						</tr>
+					</thead>
+					<tbody>
+						{% for e in phonebook %}
+							<tr>
+								<td><a href="/phonebook/{{ e.uid }}">{{ e.name }}</a></td>
+								<td>
+									<i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:{{ e.email }}">{{ e.email }}</a></td>
+								<td>
+									{% if e.sip_id %}
+										<i class="fa fa-phone" aria-hidden="true"></i>
+										{% if e.uses_sip_forwarding() %}
+											{{ e.sip_id }}
+										{% elif e.sip_is_online() %}
+											<a href="/call/{{ e.sip_id }}">{{ e.sip_id }}</a>
+										{% else %}
+											{{ e.sip_id }}
 										{% end %}
-									</ul>
-								</div>
-							</div>
-						</div>
-						<div class="media-right">
-							<a href="/phonebook/{{ e.uid }}">
-								<img class="media-object" src="{{ e.gravatar_icon(64) }}" alt="{{ e.name }}">
-							</a>
-						</div>
-					</li>
-				{% end %}
-			</ul>
-		</div>
-	</div>
+									{% end %}
+								</td>
+								<td><a href="/phonebook/{{ e.uid }}"><img src="{{ e.gravatar_icon(64) }}" alt="{{ e.name }}"></a></td>
+							</tr>
+						{% end %}
+					</tbody>
+				</table>
+			</div>
+		</div>										
+	</section>
+</div>
 {% end block %}
-- 
2.39.5