diff options
author | Fatih Acet <acetfatih@gmail.com> | 2016-07-26 20:49:00 +0000 |
---|---|---|
committer | Fatih Acet <acetfatih@gmail.com> | 2016-07-26 20:49:00 +0000 |
commit | 0676b7991ec32f3c1d89245322b6834df9013b25 (patch) | |
tree | d9073e7fe448dfda1862aa41a5229028c63c6f60 | |
parent | 0c799be6b6fc0166473c82039ebf662a0558ed8f (diff) | |
parent | 22a2559412027e6125835a8d49e5b25230b7a933 (diff) | |
download | gitlab-ce-0676b7991ec32f3c1d89245322b6834df9013b25.tar.gz |
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
-rw-r--r-- | app/views/projects/graphs/ci/_build_times.haml | 7 | ||||
-rw-r--r-- | app/views/projects/graphs/ci/_builds.haml | 7 | ||||
-rw-r--r-- | app/views/projects/graphs/commits.html.haml | 4 |
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 |