Contain margins for stats panel with modifier

- Create CSS `—inline` modifier so that other areas where
`at-Panel-headingTitleBadge` are not affected.
This commit is contained in:
kialam 2018-08-22 11:51:27 -04:00
parent 5cdd947196
commit c67e9143fb
2 changed files with 15 additions and 9 deletions

View File

@ -1,20 +1,20 @@
<!-- todo: styling, markup, css etc. - disposition according to project lib conventions -->
<div class="at-u-floatRight">
<span ng-show="!vm.hideCounts" class="at-Panel-label">plays</span>
<span ng-show="!vm.hideCounts && vm.running" class="at-Panel-headingTitleBadge">...</span>
<span ng-show="!vm.hideCounts && !vm.running" class="at-Panel-headingTitleBadge">{{ vm.plays || 0 }}</span>
<span ng-show="!vm.hideCounts && vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">...</span>
<span ng-show="!vm.hideCounts && !vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">{{ vm.plays || 0 }}</span>
<span ng-show="!vm.hideCounts" class="at-Panel-label">tasks</span>
<span ng-show="!vm.hideCounts && vm.running" class="at-Panel-headingTitleBadge">...</span>
<span ng-show="!vm.hideCounts && !vm.running" class="at-Panel-headingTitleBadge">{{ vm.tasks || 0 }}</span>
<span ng-show="!vm.hideCounts && vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">...</span>
<span ng-show="!vm.hideCounts && !vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">{{ vm.tasks || 0 }}</span>
<span ng-show="!vm.hideCounts" class="at-Panel-label">{{:: vm.strings.get('stats.HOSTS')}}</span>
<span ng-show="!vm.hideCounts && vm.running" class="at-Panel-headingTitleBadge">...</span>
<span ng-show="!vm.hideCounts && !vm.running" class="at-Panel-headingTitleBadge">{{ vm.hosts || 1 }}</span>
<span ng-show="!vm.hideCounts && vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">...</span>
<span ng-show="!vm.hideCounts && !vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">{{ vm.hosts || 1 }}</span>
<span class="at-Panel-label">{{:: vm.strings.get('stats.ELAPSED') }}</span>
<span ng-show="vm.running" class="at-Panel-headingTitleBadge">...</span>
<span ng-show="!vm.running" class="at-Panel-headingTitleBadge">
<span ng-show="vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">...</span>
<span ng-show="!vm.running" class="at-Panel-headingTitleBadge at-Panel-headingTitleBadge--inline">
{{ (vm.elapsed * 1000 || 0) | duration: "hh:mm:ss"}}
</span>

View File

@ -44,7 +44,13 @@
vertical-align: middle;
white-space: nowrap;
text-align: center;
margin-right: @at-space-2x;
margin-left: 10px;
margin-right: auto;
&--inline {
margin-right: @at-space-2x;
margin-left: 0;
}
}
.at-Panel-headingCustomContent {