Merge branch '18846-fix-graphs-small-legend' into 'master'

Resolve "Commits graph has overlapping text on mobile"

Apply responsive design for labels on Commits and Continuous Integration graphs.

## What does this MR do?

Make the labels on Commits and Continuous Integration graphs smaller for mobile devices.

## Are there points in the code the reviewer needs to double check?

Graphs should not break at any screen size.

## Why was this MR needed?

Labels overlaps each other on mobile devices.

## What are the relevant issue numbers?

Fixes #18846 (but also fixes a similar bug on Continuous Integration graph).

## Screenshots (if relevant)

Before:

![Screen_Shot_2016-06-21_at_23.15.29](/uploads/acbbb8d751a2192595a61804d09868d9/Screen_Shot_2016-06-21_at_23.15.29.png)

After:

![Screen_Shot_2016-06-21_at_23.04.57](/uploads/ab7607901c3ae07d2c2d3e25e83de901/Screen_Shot_2016-06-21_at_23.04.57.png)

## Does this MR meet the acceptance criteria?

- ~~[ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added~~
- ~~[ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)~~
- ~~[ ] API support added~~
- Tests
  - ~~[ ] Added for this feature/bug~~
  - [x] All builds are passing
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

cc: @jschatz1

See merge request !4841

3 files changed, 16 insertions, 2 deletions

diff --git a/app/views/projects/graphs/ci/_build_times.haml b/app/views/projects/graphs/ci/_build_times.haml
index c58223fd39e..195f18afc76 100644
--- a/app/views/projects/graphs/ci/_build_times.haml
+++ b/app/views/projects/graphs/ci/_build_times.haml
@@ -19,4 +19,9 @@
     ]
   }
   var ctx = $("#build_timesChart").get(0).getContext("2d");
-  new Chart(ctx).Bar(data,{"scaleOverlay": true, responsive: true, maintainAspectRatio: false});
+  var options = { scaleOverlay: true, responsive: true, maintainAspectRatio: false };
+  if (window.innerWidth < 768) {
+    // Scale fonts if window width lower than 768px (iPad portrait)
+    options.scaleFontSize = 8
+  }
+  new Chart(ctx).Bar(data, options);
diff --git a/app/views/projects/graphs/ci/_builds.haml b/app/views/projects/graphs/ci/_builds.haml
index 8fca07114fa..1fbf6ca2c1c 100644
--- a/app/views/projects/graphs/ci/_builds.haml
+++ b/app/views/projects/graphs/ci/_builds.haml
@@ -48,4 +48,9 @@
       ]
     }
     var ctx = $("##{scope}Chart").get(0).getContext("2d");
-    new Chart(ctx).Line(data,{"scaleOverlay": true, responsive: true, maintainAspectRatio: false});
+    var options = { scaleOverlay: true, responsive: true, maintainAspectRatio: false };
+    if (window.innerWidth < 768) {
+      // Scale fonts if window width lower than 768px (iPad portrait)
+      options.scaleFontSize = 8
+    }
+    new Chart(ctx).Line(data, options);
diff --git a/app/views/projects/graphs/commits.html.haml b/app/views/projects/graphs/commits.html.haml
index 65db8af494d..7e34a89f9ae 100644
--- a/app/views/projects/graphs/commits.html.haml
+++ b/app/views/projects/graphs/commits.html.haml
@@ -59,6 +59,10 @@
     var container = $(selector).parent();
     var generateChart = function() {
       selector.attr('width', $(container).width());
+      if (window.innerWidth < 768) {
+        // Scale fonts if window width lower than 768px (iPad portrait)
+        options.scaleFontSize = 8
+      }
       return new Chart(ctx).Bar(data, options);
     };
     // enabling auto-resizing