basic styling talk.ipfire.org

diff --git a/static/css/style.css b/static/css/style.css
index 44255d28f3a377b46fd8da498431de5a71e55672..f9ef945841c1c9fb8cd20e1f78b3c823d902a809 100644 (file)
--- 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 48c024d028852316bc3d6cb6f975decca9347eac..837e4ea2273d2ac6bfd65a3ccaa2f28782913928 100644 (file)
--- 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 09b96d8077fce980e5db1740b75681d9d6964714..615996d8862992019d38b896e076d99a3834fbf0 100644 (file)
--- 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 a609e7bae0c20da7a2ec15a3dafabea8d54fef06..515012fffcfb94ebbd8132ffce4bb31e55ae63d1 100644 (file)
--- 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 51f4cc90547b39229fd476f6aa852ade9b698a94..052e8284417fa46cfe391deaa6e2977893334b97 100644 (file)
--- 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 b39a139b1a8561ea7f9b70fb1b394c6f6f6f4d61..fb9fe12ca9da0ee8ae15291446e8db72a84a91a1 100644 (file)
--- 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 722ee13cc94d6d71937cf4638f2f181c8a291bc2..5192b54c0ce2854e6b795bf5adb28dfe7eba76c7 100644 (file)
--- 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 7c109f14e99b182418bb10053831b80f4fb17b52..a4c076ac477445b1843ce0567a8ebb85be8b4aaa 100644 (file)
--- 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 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 %}