[bitbake-devel] [PATCH 08/10] toasterui: style the Toaster version information

[Alex DAMIAN]

From: Belen Barros Pena <belen.barros.pena at intel.com>

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 at intel.com>
---
 lib/toaster/toastergui/static/css/default.css | 22 ++++------------------
 lib/toaster/toastergui/templates/base.html    | 13 ++++++-------
 2 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/lib/toaster/toastergui/static/css/default.css b/lib/toaster/toastergui/static/css/default.css
index 41b73cc..86cf67a 100644
--- a/lib/toaster/toastergui/static/css/default.css
+++ b/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/lib/toaster/toastergui/templates/base.html b/lib/toaster/toastergui/templates/base.html
index 6f249bc..695ca5d 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
-- 
1.9.1