Fixed misc UI issues on analytics page

gouravtiwari · Mar 19, 2015 · 564cc07 · 564cc07
1 parent a5e8374
commit 564cc07
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 75 deletions.
diff --git a/app/assets/javascripts/audit_rails/audit.js b/app/assets/javascripts/audit_rails/audit.js
@@ -39,33 +39,33 @@ $(document).ready(function(){
   });
 
   $('#user-clicks-zoomin').on('click', function(){
-    $('#user-clicks').fadeIn( "slow", function() {});
+    $('#user-clicks').show("fast", function(){});
   });
   $('#page-views-zoomin').on('click', function(){
-    $('#page-views').fadeIn( "slow", function() {});
+    $('#page-views').show("fast", function(){});
   });
   $('#hourly-views-zoomin').on('click', function(){
-    $('#hourly-views').fadeIn( "slow", function() {});
+    $('#hourly-views').show("fast", function(){});
   });
   $('#user-pages-zoomin').on('click', function(){
-    $('#user-pages').fadeIn( "slow", function() {});
-    $('per-user-by-pages-bar').fadeIn( "slow", function() {});
-    $('per-user-by-pages-pie').fadeIn( "slow", function() {});
+    $('#user-pages').show("fast", function(){});
+    $('per-user-by-pages-bar').show("fast", function(){});
+    $('per-user-by-pages-pie').show("fast", function(){});
   });
 
   $('#user-clicks-zoomout').on('click', function(){
-    $('#user-clicks').fadeOut( "slow", function() {});
+    $('#user-clicks').effect("puff", 'slow');
   });
   $('#page-views-zoomout').on('click', function(){
-    $('#page-views').fadeOut( "slow", function() {});
+    $('#page-views').effect("puff", 'slow');
   });
   $('#hourly-views-zoomout').on('click', function(){
-    $('#hourly-views').fadeOut( "slow", function() {});
+    $('#hourly-views').effect("puff", 'slow');
   });
   $('#user-pages-zoomout').on('click', function(){
-    $('#user-pages').fadeOut( "slow", function() {});
-    $('per-user-by-pages-bar').fadeOut( "slow", function() {});
-    $('per-user-by-pages-pie').fadeOut( "slow", function() {});
+    $('#user-pages').effect("puff", 'slow');
+    $('per-user-by-pages-bar').effect("puff", 'slow');
+    $('per-user-by-pages-pie').effect("puff", 'slow');
   });
 });
 

diff --git a/app/assets/stylesheets/audit_rails/audit_rails.css.erb b/app/assets/stylesheets/audit_rails/audit_rails.css.erb
@@ -31,13 +31,13 @@
 .homepage-heading{
   font-family: HelveticaNeueLTStdLtCn;
   font-weight: bold;
-  font-size: 24px; 
+  font-size: 24px;
 }
 ul.homepage-content li,
 ol.homepage-content li,
 .homepage-content{
   font-family: HelveticaNeueLTStdLtCn;
-  font-size: 18px; 
+  font-size: 18px;
 }
 ul.error-explanation{
   margin:0;
@@ -80,7 +80,7 @@ ul.error-explanation li{
 }
 
 .left-navigation{
- min-height: 650px; 
+ min-height: 400px;
 }
 
 a.active-item, a.active-item:hover{
@@ -115,11 +115,11 @@ a.active-item span.badge{
 
 .section-header{
   height: 45px;
+  background-color: #33aeb8;
 }
 
 .section-text{
   color: white;
-  background-color: #33aeb8;
   padding: 15px;
   height: 100%;
   float: left;
@@ -130,20 +130,24 @@ a.active-item span.badge{
 }
 
 .section-count{
-  float: left;
   background-color: #006978;
   color: white;
   height: 45px;
   padding: 10px;
   font-size: 20px;
   width: 20%;
   text-align: center;
+  width: 70px;
+  float: right;
 }
 .section-count.disabled{
   background-color: #C7C7C7;
+  width: 70px;
+  float: right;
 }
 .section-zoom{
-  width: 20%;
+  width: 70px;
+  float: right;
 }
 
 .section-body{
@@ -188,17 +192,15 @@ input.download-report:hover{
   border-color: #e98e4e;
   border-radius: 0;
 }
-
 .overlay{
-  width: 92%;
-  height: 470px;
-  top: 410px;
-  position: absolute;
-  background-color: white;
-  margin: 0;
-  padding: 0;
+  min-width: 960px;
+  min-height: 470px;
+  position: relative;
+  display: none;
+  clear: both;
+  margin-left: 15px;
+  margin-bottom: 10px;
 }
-
 .overlay-section{
   margin: 0;
   padding: 0;
@@ -223,3 +225,7 @@ input.download-report:hover{
 .bar:hover {
   fill: #e98e4e ;
 }
+.chart-modal{
+  background-color: white;
+  min-height: 400px;
+}
diff --git a/app/views/audit_rails/audits/_hourly_views.html.erb b/app/views/audit_rails/audits/_hourly_views.html.erb
@@ -1,17 +1,17 @@
-<div id='hourly-views' class='overlay'>
-  <div data-attr-id="hourly-views" class="col-sm-12 overlay-section">
+<div id='hourly-views' class='overlay col-sm-12'>
+  <div data-attr-id="hourly-views" class="overlay-section">
     <div class="section-header">
       <div class="section-text">
         Hourly Views (UTC)
       </div>
-      <div class="section-count">
-        <%= @analysis[:total] %>
-      </div>
       <button id="hourly-views-zoomout" type="button" class="btn btn-default btn-lg section-zoom">
         <span class='glyphicon glyphicon-fullscreen large'></span>
       </button>
+      <div class="section-count">
+        <%= @analysis[:total] %>
+      </div>
     </div>
   </div>
 
-  <div id='hourlyViewsCount' data-visit-count='<%= @analysis[:by_hourly_views] %>'></div>
+  <div id='hourlyViewsCount' data-visit-count='<%= @analysis[:by_hourly_views] %>' class='chart-modal'></div>
 </div>
diff --git a/app/views/audit_rails/audits/_page_views.html.erb b/app/views/audit_rails/audits/_page_views.html.erb
@@ -1,16 +1,16 @@
-<div id='page-views' class='overlay'>
-  <div data-attr-id="page-views" class="col-sm-12 overlay-section">
+<div id='page-views' class='overlay col-sm-12'>
+  <div data-attr-id="page-views" class="overlay-section">
     <div class="section-header">
       <div class="section-text">
         View by Pages
       </div>
-      <div class="section-count">
-        <%= @analysis[:total] %>
-      </div>
       <button id="page-views-zoomout" type="button" class="btn btn-default btn-lg section-zoom">
         <span class='glyphicon glyphicon-fullscreen large'></span>
       </button>
+      <div class="section-count">
+        <%= @analysis[:total] %>
+      </div>
     </div>
   </div>
-  <div id='pageViewsCount' data-visit-count='<%= @analysis[:by_page_views] %>'></div>
+  <div id='pageViewsCount' data-visit-count='<%= @analysis[:by_page_views] %>' class='chart-modal'></div>
 </div>
diff --git a/app/views/audit_rails/audits/_sub_menu.html.erb b/app/views/audit_rails/audits/_sub_menu.html.erb
@@ -4,12 +4,12 @@
       <div class="section-text">
         View by Users
       </div>
-      <div class="section-count">
-        <%= @analysis[:total] %>
-      </div>
       <button id="user-clicks-zoomin" type="button" class="btn btn-default btn-lg section-zoom">
         <span class='glyphicon glyphicon-fullscreen large'></span>
       </button>
+      <div class="section-count">
+        <%= @analysis[:total] %>
+      </div>
     </div>
     <div class="section-body">
     </div>
@@ -19,12 +19,12 @@
       <div class="section-text">
         View by Pages
       </div>
-      <div class="section-count">
-        <%= @analysis[:total] %>
-      </div>
       <button id="page-views-zoomin" type="button" class="btn btn-default btn-lg section-zoom">
         <span class='glyphicon glyphicon-fullscreen large'></span>
       </button>
+      <div class="section-count">
+        <%= @analysis[:total] %>
+      </div>
     </div>
     <div class="section-body">
     </div>
@@ -34,12 +34,12 @@
       <div class="section-text">
         Hourly Views (UTC)
       </div>
-      <div class="section-count">
-        <%= @analysis[:total] %>
-      </div>
       <button id="hourly-views-zoomin" type="button" class="btn btn-default btn-lg section-zoom">
         <span class='glyphicon glyphicon-fullscreen large'></span>
       </button>
+      <div class="section-count">
+        <%= @analysis[:total] %>
+      </div>
     </div>
     <div class="section-body">
     </div>
@@ -53,12 +53,12 @@
       <div class="section-text">
         Users' Views by Pages
       </div>
-      <div class="section-count">
-        <%= @analysis[:total] %>
-      </div>
       <button id="user-pages-zoomin" type="button" class="btn btn-default btn-lg section-zoom">
         <span class='glyphicon glyphicon-fullscreen large'></span>
       </button>
+      <div class="section-count">
+        <%= @analysis[:total] %>
+      </div>
     </div>
     <div class="section-body-user-pages">
     </div>
@@ -68,12 +68,12 @@
       <div class="section-text disabled">
         Global Hits
       </div>
-      <div class="section-count disabled">
-        <%= @analysis[:total] %>
-      </div>
       <button id="world-zoom" type="button" class="btn btn-default btn-lg section-zoom">
         <span class='glyphicon glyphicon-fullscreen large'></span>
       </button>
+      <div class="section-count disabled">
+        <%= @analysis[:total] %>
+      </div>
     </div>
     <div class="section-body-world">
     </div>

diff --git a/app/views/audit_rails/audits/_user_clicks.html.erb b/app/views/audit_rails/audits/_user_clicks.html.erb
@@ -1,16 +1,16 @@
-<div id='user-clicks' class='overlay'>
-  <div data-attr-id="user-clicks" class="col-sm-12 overlay-section">
+<div id='user-clicks' class='overlay col-sm-12'>
+  <div data-attr-id="user-clicks" class="overlay-section">
     <div class="section-header">
       <div class="section-text">
         View by Users
       </div>
-      <div class="section-count">
-        <%= @analysis[:total] %>
-      </div>
       <button id="user-clicks-zoomout" type="button" class="btn btn-default btn-lg section-zoom">
         <span class='glyphicon glyphicon-fullscreen large'></span>
       </button>
+      <div class="section-count">
+        <%= @analysis[:total] %>
+      </div>
     </div>
   </div>
-  <div id='userViewsCount' data-visit-count='<%= @analysis[:by_user_name] %>'></div>
+  <div id='userViewsCount' data-visit-count='<%= @analysis[:by_user_name] %>' class='chart-modal'></div>
 </div>
diff --git a/app/views/audit_rails/audits/_user_pages.html.erb b/app/views/audit_rails/audits/_user_pages.html.erb
@@ -1,35 +1,35 @@
-<div id='user-pages' class='overlay'>
-  <div data-attr-id="user-pages" class="col-sm-12 overlay-section">
+<div id='user-pages' class='overlay col-sm-12'>
+  <div data-attr-id="user-pages" class="overlay-section">
     <div class="section-header">
       <div class="section-text">
         Users' Views by Pages
       </div>
-      <div class="section-count">
-        <%= @analysis[:total] %>
-      </div>
       <button id="user-pages-zoomout" type="button" class="btn btn-default btn-lg section-zoom">
         <span class='glyphicon glyphicon-fullscreen large'></span>
       </button>
+      <div class="section-count">
+        <%= @analysis[:total] %>
+      </div>
     </div>
   </div>
-
-  <div id='per-user-by-pages-bar' class='overlay-section'>
-    <div class='clear'></div>
+  <div id='per-user-by-pages-bar' class='overlay-section chart-modal'>
     <div class='left page-views left-navigation'>
       <div class="list-group page-views">
         <% JSON.parse(@analysis[:by_user_name]).each do |user_hsh| %>
-          <a href="#page-views-by-user" class="list-group-item" data-user='<%=user_hsh["user"]%>' data-page-visits='<%= page_visits_by_user(user_hsh['user'])%>'><%= user_hsh["user"] %> - <%= percentage_share(user_hsh["user"], user_hsh["count"], @analysis[:total])%>
+          <a href="#page-views-by-user" class="list-group-item"
+            data-user='<%=user_hsh["user"]%>'
+            data-page-visits='<%= page_visits_by_user(user_hsh['user'])%>'>
+            <%= user_hsh["user"] %> - <%= percentage_share(user_hsh["user"], user_hsh["count"], @analysis[:total])%>
             <span class="badge"><%= user_hsh["count"] %></span>
           </a>
         <% end %>
       </div>
     </div>
-    <div class='left' style="850px;">
+    <div class='left'>
       <div id="userNameToShow"></div>
       <div id='pageViewsByUser'></div>
       <div id='pageViewsShareByUser'></div>
     </div>
     <div id="tooltip"></div>
   </div>
-
 </div>
diff --git a/app/views/audit_rails/audits/analytics.html.erb b/app/views/audit_rails/audits/analytics.html.erb
@@ -14,18 +14,16 @@
   </div>
 </div>
 <br/>
-
 <div class='container theme-showcase'>
   <% if @analysis[:by_user_name] == {} %>
     <%= render partial: 'no_audits_available', locals: {no_audits: @no_audits} %>
   <% else %>
-    <%= render partial: 'sub_menu' %>
-    <br/>
     <%= render partial: 'user_clicks' %>
     <%= render partial: 'page_views' %>
     <%= render partial: 'hourly_views' %>
     <%= render partial: 'user_pages' %>
+    <%= render partial: 'sub_menu' %>
     <%#= render partial: 'page_views_by_user_bar' %>
     <%#= render partial: 'page_views_by_user_pie' %>
   <% end %>
-</div>
+</div>