bitbake: 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.

(Bitbake rev: 8365f19191d0ec5901c79b7afd5005f7a546fe74)

Signed-off-by: Belen Barros Pena <belen.barros.pena@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

2 files changed, 10 insertions, 25 deletions

diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css
index 41b73cc826..86cf67ad53 100644
--- a/bitbake/lib/toaster/toastergui/static/css/default.css
+++ b/bitbake/lib/toaster/toastergui/static/css/default.css
@@ -2,24 +2,10 @@
 .logo img { height: 30px; width: auto !important; }
 .logo { padding-top: 4px !important; padding-bottom:0px !important; }
 
-/* style the version text */
-.version-text {
-        color: #AAA;
-        font-size: 0.6em;
-        display: table-footer-group;
-        padding: 0px;
-        margin: 1px 1px 1px 1px;
-}
-
-.version-brand, .version-brand:hover, a.version-brand:focus  {
-    color: #777;
-    display: block;
-    float: left;
-    font-size: 20px;
-    font-weight: 200;
-    padding: 00px 0px;
-    text-shadow: 0 1px 0 #fff;
-}
+/* style the version information */
+.brand > a { color: #777; }
+.brand > a:hover { color: #999; text-decoration: none; }
+.icon-info-sign.get-help { color: #777; font-size: 16px; margin-left: 5px;}
 
 /* Style the breadcrumb */
 .breadcrumb { display: inline-block; background-color: transparent; }
diff --git a/bitbake/lib/toaster/toastergui/templates/base.html b/bitbake/lib/toaster/toastergui/templates/base.html
index 6f249bcf2d..695ca5d2ca 100644
--- a/bitbake/lib/toaster/toastergui/templates/base.html
+++ b/bitbake/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