Fixed issue with selected date not loading correctly

Added loading icon to selected date box

app/assets/javascripts/calendar.js.coffee

@@ -1,6 +1,10 @@
 class @Calendar
   constructor: (timestamps, calendar_activities_path) ->
     currentSelectedDate = ''
+    daySpace = 1
+    daySize = 15
+    daySizeWithSpace = daySize + (daySpace * 2)
+
     # Get the highest value from the timestampes
     highestValue = 0
     _.each timestamps, (count) ->
@@ -51,7 +55,7 @@ class @Calendar
     months = []
     svg = d3.select '.js-contrib-calendar'
       .append 'svg'
-      .attr 'width', 54 * 17
+      .attr 'width', 54 * daySizeWithSpace
       .attr 'height', 167
       .attr 'class', 'contrib-calendar'
 
@@ -64,7 +68,7 @@ class @Calendar
         _.each group, (stamp, a) ->
           if a is 0 and stamp.day is 0
             month = stamp.date.getMonth()
-            x = (17 * i + 1) + 17
+            x = (daySizeWithSpace * i + 1) + daySizeWithSpace
             lastMonth = _.last(months)
             if lastMonth?
               lastMonthX = lastMonth.x
@@ -73,12 +77,12 @@ class @Calendar
               months.push
                 month: month
                 x: x
-            else if month isnt lastMonth.month and x - 17 isnt lastMonthX
+            else if month isnt lastMonth.month and x - daySizeWithSpace isnt lastMonthX
               months.push
                 month: month
                 x: x
 
-        "translate(#{(17 * i + 1) + 17}, 18)"
+        "translate(#{(daySizeWithSpace * i + 1) + daySizeWithSpace}, 18)"
       .selectAll 'rect'
       .data (stamp) ->
         stamp
@@ -86,9 +90,9 @@ class @Calendar
       .append 'rect'
       .attr 'x', '0'
       .attr 'y', (stamp, i) ->
-        (17 * stamp.day)
+        (daySizeWithSpace * stamp.day)
-      .attr 'width', 15
+      .attr 'width', daySize
-      .attr 'height', 15
+      .attr 'height', daySize
       .attr 'title', (stamp) ->
         contribText = 'No contributions'
 
@@ -106,22 +110,22 @@ class @Calendar
           '#ededed'
       .attr 'data-container', 'body'
       .on 'click', (stamp) ->
-        if currentSelectedDate is ''
+        if currentSelectedDate isnt stamp.date
           currentSelectedDate = stamp.date
-          formated_date = currentSelectedDate.getFullYear() + "-" + (currentSelectedDate.getMonth()+1) + "-" + currentSelectedDate.getDate()
+          formatted_date = currentSelectedDate.getFullYear() + "-" + (currentSelectedDate.getMonth()+1) + "-" + currentSelectedDate.getDate()
 
           $.ajax
             url: calendar_activities_path
             data:
-              date: formated_date
+              date: formatted_date
             cache: false
             dataType: 'html'
+            beforeSend: ->
+              $('.user-calendar-activities').html '<div class="text-center"><i class="fa fa-spinner fa-spin user-calendar-activities-loading"></i></div>'
             success: (data) ->
               $('.user-calendar-activities').html data
         else
-          currentSelectedDate = ''
+          $('.user-calendar-activities').html ''
-          $('.user-calendar-activities, .content_list').html ''
-          Pager.getOld()
 
     # Month titles
     svg.append 'g'
@@ -139,13 +143,13 @@ class @Calendar
     # Day titles
     days = [{
       text: 'M'
-      y: 29 + (17 * 1)
+      y: 29 + (daySizeWithSpace * 1)
     }, {
       text: 'W'
-      y: 29 + (17 * 3)
+      y: 29 + (daySizeWithSpace * 3)
     }, {
       text: 'F'
-      y: 29 + (17 * 5)
+      y: 29 + (daySizeWithSpace * 5)
     }]
     svg.append 'g'
       .selectAll 'text'
@@ -162,15 +166,15 @@ class @Calendar
 
     # Key with color boxes
     svg.append 'g'
-      .attr 'transform', "translate(18, #{17 * 8 + 16})"
+      .attr 'transform', "translate(18, #{daySizeWithSpace * 8 + 16})"
       .selectAll 'rect'
       .data keyColors
       .enter()
       .append 'rect'
-      .attr 'width', 15
+      .attr 'width', daySize
-      .attr 'height', 15
+      .attr 'height', daySize
       .attr 'x', (color, i) ->
-        17 * i
+        daySizeWithSpace * i
       .attr 'y', 0
       .attr 'fill', (color) ->
         color

app/assets/stylesheets/framework/calendar.scss

@@ -5,24 +5,12 @@
 }
 
 .user-calendar-activities {
-  .calendar_onclick_hr {
-    padding: 0;
-    margin: 10px 0;
-  }
-
   .str-truncated {
     max-width: 70%;
   }
 
-  .text-expander {
+  .user-calendar-activities-loading {
-    background: #eee;
+    font-size: 24px;
-    color: #555;
-    padding: 0 5px;
-    cursor: pointer;
-    margin-left: 4px;
-    &:hover {
-      background-color: #ddd;
-    }
   }
 }
 

app/views/users/calendar_activities.html.haml

@@ -1,23 +1,27 @@
 %h4.prepend-top-20
-  %span.light Contributions for
+  Contributions for
   %strong #{@calendar_date.to_s(:short)}
 
-%ul.bordered-list
+- if @events.any?
-  - @events.sort_by(&:created_at).each do |event|
+  %ul.bordered-list
-    %li
+    - @events.sort_by(&:created_at).each do |event|
-      %span.light
+      %li
-        %i.fa.fa-clock-o
+        %span.light
-        = event.created_at.to_s(:time)
+          %i.fa.fa-clock-o
-      - if event.push?
+          = event.created_at.to_s(:time)
-        #{event.action_name} #{event.ref_type} #{event.ref_name}
+        - if event.push?
-      - else
+          #{event.action_name} #{event.ref_type} #{event.ref_name}
-        = event_action_name(event)
-        - if event.target
-          %strong= link_to "##{event.target_iid}", [event.project.namespace.becomes(Namespace), event.project, event.target]
-
-      at
-      %strong
-        - if event.project
-          = link_to_project event.project
         - else
-          = event.project_name
+          = event_action_name(event)
+          - if event.target
+            %strong= link_to "##{event.target_iid}", [event.project.namespace.becomes(Namespace), event.project, event.target]
+
+        at
+        %strong
+          - if event.project
+            = link_to_project event.project
+          - else
+            = event.project_name
+- else
+  %p
+    No contributions found for #{@calendar_date.to_s(:short)}