Merge pull request #191 from anmekin/fix/tooltips

Fix vertical align for statics tooltips

3 files changed, 17 insertions, 9 deletions

diff --git a/omaha_server/omaha/static/statistics/css/statistics.css b/omaha_server/omaha/static/statistics/css/statistics.css
index 40c5e59..075fa30 100644
--- a/omaha_server/omaha/static/statistics/css/statistics.css
+++ b/omaha_server/omaha/static/statistics/css/statistics.css
@@ -25,3 +25,12 @@
 .versions-stat-container{
     min-width: 350px;
 }
+
+.inline-middle {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.middle {
+    vertical-align: middle;
+}
\ No newline at end of file
diff --git a/omaha_server/omaha/templates/admin/omaha/live_statistics.html b/omaha_server/omaha/templates/admin/omaha/live_statistics.html
index 5f874ec..75985e8 100644
--- a/omaha_server/omaha/templates/admin/omaha/live_statistics.html
+++ b/omaha_server/omaha/templates/admin/omaha/live_statistics.html
@@ -68,9 +68,9 @@
 {% block content %}
     <h1 data-name='{{ app.name }}' id="app_name">{{ app.name|title }}</h1>
 
-    <h2 style="display: inline">Live Statistics</h2>
+    <h2 class="inline-middle">Live Statistics</h2>
     <span data-toggle="popover" data-content="This shows how many users are active during a particular hour. The data is stored only for the last 7 days. These statistics are based on update check requests.">
-        <i class="icon-question-sign"></i>
+        <i class="icon-question-sign middle"></i>
     </span>
 
     <div id="month-statistics" class="form-inline center">
diff --git a/omaha_server/omaha/templates/admin/omaha/statistics_detail.html b/omaha_server/omaha/templates/admin/omaha/statistics_detail.html
index cfc51eb..3ed035c 100644
--- a/omaha_server/omaha/templates/admin/omaha/statistics_detail.html
+++ b/omaha_server/omaha/templates/admin/omaha/statistics_detail.html
@@ -67,9 +67,9 @@
 
     <hr/>
 
-    <h2 style="display: inline;">Monthly Statistics</h2>
+    <h2 class="inline-middle">Monthly Statistics</h2>
     <span data-toggle="popover" data-content="Two charts for Windows and Mac platforms showing aggregated information about users’ actions (installs, updates, uninstalls) per month. A special feature of them is the fact that they show installs and uninstalls separately and all actions are unique. It means that if a user installs the application in a particular month and updates it in the same month, the charts show only one action and in this case it will be an install. So it allows us to see the number of new users per month. But if a user does an install and right after that deletes the application, the charts show one install and one uninstall action.">
-        <i class="icon-question-sign"></i>
+        <i class="icon-question-sign middle"></i>
     </span>
 
     <form id="month-statistics" class="form-inline center" action="">
@@ -95,9 +95,9 @@
 
     <hr/>
 
-    <h2 style="display: inline">Versions</h2>
+    <h2 class="inline-middle">Versions</h2>
     <span data-toggle="popover" data-content="Two pie charts for Windows and Mac platforms showing the number of active users per month for each version of the application.">
-        <i class="icon-question-sign"></i>
+        <i class="icon-question-sign middle"></i>
     </span>
 
     <form id="version-statistics" class="form-inline center" action="">
@@ -145,11 +145,10 @@
         </div>
     <hr/>
 
-    <h2 style="display: inline">Channels</h2>
+    <h2 class="inline-middle">Channels</h2>
     <span data-toggle="popover" data-content="This pie chart shows the number of active users per distribution channel per month.">
-        <i class="icon-question-sign"></i>
+        <i class="icon-question-sign middle"></i>
     </span>
-
     <form id="channel-statistics" class="form-inline center" action="">
         Choose a month:
         <input type="text" class="input-small input-datepicker" placeholder="Month" name="date">