toasterui: style the Toaster version information

In debug mode, we show the Toaster version and mode in the
top bar. Display them inside a tooltip that appears when
you hover over a nice info icon to make them less conspicuous.

Signed-off-by: Belen Barros Pena <belen.barros.pena@intel.com>

1 files changed, 6 insertions, 7 deletions

diff --git a/lib/toaster/toastergui/templates/base.html b/lib/toaster/toastergui/templates/base.html
index 6f249bcf2..695ca5d2c 100644
--- a/lib/toaster/toastergui/templates/base.html
+++ b/lib/toaster/toastergui/templates/base.html
@@ -58,13 +58,12 @@
 <div class="navbar navbar-static-top">
     <div class="navbar-inner">
             <a class="brand logo" href="#"><img src="{% static 'img/logo.png' %}" class="" alt="Yocto logo project"/></a>
-            <a class="brand" href="/">Toaster</a>
-            {% if DEBUG %}
-            <div style="display: inline;" class="version-brand">
-              <p class="version-text">version {{TOASTER_VERSION}}</p>
-              <p class="version-text">{%if MANAGED%}managed{%else%}interactive{%endif%} mode</p>
-            </div>
-            {% endif %}
+            <span class="brand">
+                <a href="/">Toaster</a>
+                {% if DEBUG %}
+                    <i class="icon-info-sign get-help heading-help" data-placement="bottom" title="Version: {{TOASTER_VERSION}} <br /> Mode: {%if MANAGED%}build{%else%}analysis{%endif%}"></i>
+                {% endif %}
+            </span>
             <a class="pull-right manual" target="_blank" href="http://www.yoctoproject.org/documentation/toaster-manual">
                 <i class="icon-book"></i>
                 Toaster manual