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;
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 {
</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">
</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>
{% 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 %}
{% 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">
<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") }}
</div>
{% end %}
</div>
- {% end %}
+ {% end %}
{% if current_user and current_user.is_admin() %}
{% module TalkOngoingCalls() %}
{% end %}
{% module TalkCallLog(current_user) %}
+ </section>
+</div>
{% end block %}
<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>
<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 %}
{% 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>
<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>
{% 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>
</ul>
{% end %}
</div>
- <div class="col-md-3">
+
+ <div class="col">
<h4>{{ _("Postal Address") }}</h4>
<address>
<strong>{{ account.name }}</strong><br>
</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 %}
{% 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 %}