1 files changed, 53 insertions, 57 deletions

diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index 04bcb16f036..aa537d4a43e 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -2,7 +2,8 @@ import $ from 'jquery';
 import axios from '~/lib/utils/axios_utils';
 import Activities from '~/activities';
 import { localTimeAgo } from '~/lib/utils/datetime_utility';
-import { __, sprintf } from '~/locale';
+import AjaxCache from '~/lib/utils/ajax_cache';
+import { __ } from '~/locale';
 import flash from '~/flash';
 import ActivityCalendar from './activity_calendar';
 import UserOverviewBlock from './user_overview_block';
@@ -62,23 +63,20 @@ import UserOverviewBlock from './user_overview_block';
  * </div>
  */
 
-const CALENDAR_TEMPLATES = {
-  activity: `
-    <div class="clearfix calendar">
-      <div class="js-contrib-calendar"></div>
-      <div class="calendar-hint bottom-right"></div>
-    </div>
-  `,
-  overview: `
-    <div class="clearfix calendar">
-      <div class="calendar-hint"></div>
-      <div class="js-contrib-calendar prepend-top-20"></div>
-    </div>
-  `,
-};
+const CALENDAR_TEMPLATE = `
+  <div class="clearfix calendar">
+    <div class="js-contrib-calendar"></div>
+    <div class="calendar-hint bottom-right"></div>
+  </div>
+`;
 
 const CALENDAR_PERIOD_6_MONTHS = 6;
 const CALENDAR_PERIOD_12_MONTHS = 12;
+/* computation based on
+ * width = (group + 1) * this.daySizeWithSpace + this.getExtraWidthPadding(group);
+ * (see activity_calendar.js)
+ */
+const OVERVIEW_CALENDAR_BREAKPOINT = 918;
 
 export default class UserTabs {
   constructor({ defaultAction, action, parentEl }) {
@@ -105,6 +103,12 @@ export default class UserTabs {
       .off('shown.bs.tab', '.nav-links a[data-toggle="tab"]')
       .on('shown.bs.tab', '.nav-links a[data-toggle="tab"]', event => this.tabShown(event))
       .on('click', '.gl-pagination a', event => this.changeProjectsPage(event));
+
+    window.addEventListener('resize', () => this.onResize());
+  }
+
+  onResize() {
+    this.loadActivityCalendar();
   }
 
   changeProjectsPage(e) {
@@ -167,8 +171,6 @@ export default class UserTabs {
       return;
     }
 
-    this.loadActivityCalendar('activity');
-
     // eslint-disable-next-line no-new
     new Activities('#activity');
 
@@ -180,10 +182,10 @@ export default class UserTabs {
       return;
     }
 
-    this.loadActivityCalendar('overview');
+    this.loadActivityCalendar();
 
     UserTabs.renderMostRecentBlocks('#js-overview .activities-block', {
-      requestParams: { limit: 5 },
+      requestParams: { limit: 10 },
     });
     UserTabs.renderMostRecentBlocks('#js-overview .projects-block', {
       requestParams: { limit: 10, skip_pagination: true },
@@ -198,52 +200,39 @@ export default class UserTabs {
       container,
       url: $(`${container} .overview-content-list`).data('href'),
       ...options,
+      postRenderCallback: () => localTimeAgo($('.js-timeago', container)),
     });
   }
 
-  loadActivityCalendar(action) {
-    const monthsAgo = action === 'overview' ? CALENDAR_PERIOD_6_MONTHS : CALENDAR_PERIOD_12_MONTHS;
+  loadActivityCalendar() {
     const $calendarWrap = this.$parentEl.find('.tab-pane.active .user-calendar');
     const calendarPath = $calendarWrap.data('calendarPath');
+
+    AjaxCache.retrieve(calendarPath)
+      .then(data => UserTabs.renderActivityCalendar(data, $calendarWrap))
+      .catch(() => flash(__('There was an error loading users activity calendar.')));
+  }
+
+  static renderActivityCalendar(data, $calendarWrap) {
+    const monthsAgo = UserTabs.getVisibleCalendarPeriod($calendarWrap);
     const calendarActivitiesPath = $calendarWrap.data('calendarActivitiesPath');
     const utcOffset = $calendarWrap.data('utcOffset');
-    let utcFormatted = 'UTC';
-    if (utcOffset !== 0) {
-      utcFormatted = `UTC${utcOffset > 0 ? '+' : ''}${utcOffset / 3600}`;
-    }
+    const calendarHint = __('Issues, merge requests, pushes and comments.');
 
-    axios
-      .get(calendarPath)
-      .then(({ data }) => {
-        $calendarWrap.html(CALENDAR_TEMPLATES[action]);
-
-        let calendarHint = '';
-
-        if (action === 'activity') {
-          calendarHint = sprintf(
-            __(
-              'Summary of issues, merge requests, push events, and comments (Timezone: %{utcFormatted})',
-            ),
-            { utcFormatted },
-          );
-        } else if (action === 'overview') {
-          calendarHint = __('Issues, merge requests, pushes and comments.');
-        }
-
-        $calendarWrap.find('.calendar-hint').text(calendarHint);
-
-        // eslint-disable-next-line no-new
-        new ActivityCalendar(
-          '.tab-pane.active .js-contrib-calendar',
-          '.tab-pane.active .user-calendar-activities',
-          data,
-          calendarActivitiesPath,
-          utcOffset,
-          0,
-          monthsAgo,
-        );
-      })
-      .catch(() => flash(__('There was an error loading users activity calendar.')));
+    $calendarWrap.html(CALENDAR_TEMPLATE);
+
+    $calendarWrap.find('.calendar-hint').text(calendarHint);
+
+    // eslint-disable-next-line no-new
+    new ActivityCalendar(
+      '.tab-pane.active .js-contrib-calendar',
+      '.tab-pane.active .user-calendar-activities',
+      data,
+      calendarActivitiesPath,
+      utcOffset,
+      0,
+      monthsAgo,
+    );
   }
 
   toggleLoading(status) {
@@ -267,4 +256,11 @@ export default class UserTabs {
   getCurrentAction() {
     return this.$parentEl.find('.nav-links a.active').data('action');
   }
+
+  static getVisibleCalendarPeriod($calendarWrap) {
+    const width = $calendarWrap.width();
+    return width < OVERVIEW_CALENDAR_BREAKPOINT
+      ? CALENDAR_PERIOD_6_MONTHS
+      : CALENDAR_PERIOD_12_MONTHS;
+  }
 }