Commit a416b83b authored by Brandon Labuschagne's avatar Brandon Labuschagne Committed by Aakriti Gupta

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.
parent 9e674f92
......@@ -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
......
......@@ -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) }}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment