Prettify style and make heatmaps more visible

lib/git_stats/version.rb

@@ -1,4 +1,4 @@
 # -*- encoding : utf-8 -*-
 module GitStats
-  VERSION = "1.0.17"
+  VERSION = "1.0.18"
 end

templates/activity/_activity.haml

@@ -60,14 +60,16 @@
         %tr
           %th
           - (0..23).each do |h|
-            %th= h
+            %th{width: "30", align: "center"}
+              %div{style: "text-align: center"}= h
         - max = author.activity.by_wday_hour.values.map {|h| h.values.empty? ? 0 : h.values.max }.max
         - (0..6).each do |day|
           %tr
             %th= I18n.t('date.abbr_day_names')[day]
             - (0..23).each do |hour|
               - color = max ? "%02x" % (255 - author.activity.by_wday_hour[day][hour] * 100 / max) : "FF"
-              %td{style: "background-color: ##{color}#{color}#{color};"}= author.activity.by_wday_hour[day][hour]
+              %td{style: "background-color: #ff#{color}#{color};", width: "30", align: "center"}
+                %div{style: "text-align: center"}= author.activity.by_wday_hour[day][hour]
 
     - elsif page == :month_of_year
       %table{:class => "table table-bordered table-condensed"}
@@ -93,9 +95,14 @@
         %tr
           %th
           - I18n.t('date.abbr_month_names')[1..-1].each do |h|
-            %th= h
+            %th{width: "50", align: "center"}
+              %div{style: "text-align: center"}= h
+        - max = author.activity.by_year_month.values.map {|h| h.values.empty? ? 0 : h.values.max }.max
         - author.activity.by_year_month.each do |year, months|
           %tr
-            %th= year
+            %th{align: "right"}
+              %div{style: "text-align: right"}= year
             - (1..12).each do |month|
-              %td= months[month]
+              - color = max ? "%02x" % (255 - months[month] * 100 / max) : "FF"
+              %td{style: "background-color: #ff#{color}#{color};", width: "50", align: "center"}
+                %div{style: "text-align: center"}= months[month]

templates/layout.haml

@@ -7,13 +7,25 @@
     %link{:rel => "stylesheet", :href => asset_path('bootstrap/css/bootstrap.min.css', active_page), :type => "text/css"}
     %style
       :plain
-        body { padding-top: 60px; }
+        body { padding-top: 60px; font-family: 'Avenir Next', 'Montserrat', sans-serif; }
     %link{:rel => "stylesheet", :href => asset_path('bootstrap/css/bootstrap-responsive.min.css', active_page), :type => "text/css"}
+    %link{:rel => "stylesheet", :href => 'https://fonts.googleapis.com/css?family=Montserrat', :type => "text/css"}
     %script{:src => asset_path('jquery.min.js', active_page), :type => "text/javascript"}
     %script{:src => asset_path('bootstrap/js/bootstrap.min.js', active_page), :type => "text/javascript"}
     %script{:src => asset_path('highstock.js', active_page), :type => "text/javascript"}
     %script{:src => asset_path('exporting.js', active_page), :type => "text/javascript"}
     %script{:src => asset_path('export-csv.js', active_page), :type => "text/javascript"}
+    :javascript
+      Highcharts.theme = {
+        colors: ['#7cb5ec', '#f7a35c', '#90ee7e', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
+        chart: {
+          style: {
+              fontFamily: '"Avenir Next", Montserrat'
+          }
+        }
+      };
+      Highcharts.setOptions(Highcharts.theme);
+
   %body
     %div.navbar.navbar-fixed-top
       %div.navbar-inner