diff options
| author | Brandon Labuschagne <blabuschagne@gitlab.com> | 2019-11-15 17:39:29 +0300 |
|---|---|---|
| committer | Aakriti Gupta <agupta@gitlab.com> | 2019-11-20 12:42:17 +0300 |
| commit | b3076997eb00021004063cf552fb07bbd117e81a (patch) | |
| tree | 2605f5a10a7c3161fd74a823f203c68e5d61d1f8 | |
| parent | cd6d264948e09fd44fdbe9c5d0324761c3d22814 (diff) | |
Ensure that summary items remain aligned
Default number of items is 3. If this is not the case,
then increase the column width of the summary items
to cater for 2 items plus the date filter.
| -rw-r--r-- | app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js | 6 | ||||
| -rw-r--r-- | app/views/projects/cycle_analytics/show.html.haml | 4 |
2 files changed, 8 insertions, 2 deletions
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js index cd67ba5fab8..1074ce0e744 100644 --- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js +++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js @@ -58,10 +58,16 @@ export default () => { service: this.createCycleAnalyticsService(cycleAnalyticsEl.dataset.requestPath), }; }, + defaultNumberOfSummaryItems: 3, computed: { currentStage() { return this.store.currentActiveStage(); }, + summaryTableColumnClass() { + return this.state.summary.length === this.$options.defaultNumberOfSummaryItems + ? 'col-sm-3' + : 'col-sm-4'; + }, }, created() { // Conditional check placed here to prevent this method from being called on the diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml index 7fedd1ab785..1691af9dfdd 100644 --- a/app/views/projects/cycle_analytics/show.html.haml +++ b/app/views/projects/cycle_analytics/show.html.haml @@ -13,10 +13,10 @@ .content-block .container-fluid .row - .col-sm-3.col-12.column{ "v-for" => "item in state.summary" } + .col-12.column{ "v-for" => "item in state.summary", ":class" => "summaryTableColumnClass" } %h3.header {{ item.value }} %p.text {{ item.title }} - .col-sm-3.col-12.column + .col-12.column{ ":class" => "summaryTableColumnClass" } .dropdown.inline.js-ca-dropdown %button.dropdown-menu-toggle{ "data-toggle" => "dropdown", :type => "button" } %span.dropdown-label {{ n__('Last %d day', 'Last %d days', 30) }} |