basic styling talk.ipfire.org

[people/shoehn/ipfire.org.git] / templates / talk / phonebook.html

diff --git a/templates/talk/phonebook.html b/templates/talk/phonebook.html
index ed7e9a77ca0de18742a69e972d2533d1fe9b5bc9..18716f9bf884a40f1e4c0a1ec904402c8044b02a 100644 (file)
--- 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 %}