...@@ -63,10 +63,16 @@ export default () => { ...@@ -63,10 +63,16 @@ export default () => {
service: this.createCycleAnalyticsService(cycleAnalyticsEl.dataset.requestPath), service: this.createCycleAnalyticsService(cycleAnalyticsEl.dataset.requestPath),
}; };
}, },
defaultNumberOfSummaryItems: 3,
computed: { computed: {
currentStage() { currentStage() {
return this.store.currentActiveStage(); return this.store.currentActiveStage();
}, },
summaryTableColumnClass() {
return this.state.summary.length === this.$options.defaultNumberOfSummaryItems
? 'col-sm-3'
: 'col-sm-4';
},
}, },
created() { created() {
// Conditional check placed here to prevent this method from being called on the // Conditional check placed here to prevent this method from being called on the
... ...
......
...@@ -13,10 +13,10 @@ ...@@ -13,10 +13,10 @@
.content-block .content-block
.container-fluid .container-fluid
.row .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 }} %h3.header {{ item.value }}
%p.text {{ item.title }} %p.text {{ item.title }}
.col-sm-3.col-12.column .col-12.column{ ":class" => "summaryTableColumnClass" }
.dropdown.inline.js-ca-dropdown .dropdown.inline.js-ca-dropdown
%button.dropdown-menu-toggle{ "data-toggle" => "dropdown", :type => "button" } %button.dropdown-menu-toggle{ "data-toggle" => "dropdown", :type => "button" }
%span.dropdown-label {{ n__('Last %d day', 'Last %d days', 30) }} %span.dropdown-label {{ n__('Last %d day', 'Last %d days', 30) }}
... ...
......