diff --git a/static/css/quay.css b/static/css/quay.css index 755e189bb..c0c42532c 100644 --- a/static/css/quay.css +++ b/static/css/quay.css @@ -48,6 +48,12 @@ z-index: 2; } +.announcement.inline .message { + display: flex; + justify-content: center; + align-items: center; +} + .announcement .spacer { display: inline-block; width: 45px; diff --git a/static/directives/quay-service-status-bar.html b/static/directives/quay-service-status-bar.html index 24e2cdef9..84c3e0671 100644 --- a/static/directives/quay-service-status-bar.html +++ b/static/directives/quay-service-status-bar.html @@ -1,12 +1,12 @@ <div class="announcement inline" ng-show="indicator != 'loading' && (scheduled_maintenances.length || incidents.length)"> - <div ng-repeat="incident in incidents"> + <div ng-repeat="incident in incidents" class="message"> <span class="quay-service-status-indicator" ng-class="indicator" - ng-if="indicator != 'loading'"></span> + ng-if="indicator != 'loading'"></span> <a ng-href="{{ incident.shortlink }}" class="quay-service-status-description">{{ incident.name }}</a> </div> - <div ng-repeat="scheduled in scheduled_maintenances"> + <div ng-repeat="scheduled in scheduled_maintenances" class="message"> <i class="fa fa-calendar" style="margin-right: 6px;"></i> <span ng-switch on="scheduled.status" style="vertical-align: middle"> <span ng-switch-when="scheduled"> diff --git a/static/js/directives/structural/quay-require/quay-require.directive.ts b/static/js/directives/structural/quay-require/quay-require.directive.ts index 4ac1add29..589b5831a 100644 --- a/static/js/directives/structural/quay-require/quay-require.directive.ts +++ b/static/js/directives/structural/quay-require/quay-require.directive.ts @@ -16,6 +16,7 @@ import { Directive, Inject, Input, AfterContentInit } from 'ng-metadata/core'; export class QuayRequireDirective implements AfterContentInit { @Input('<quayRequire') public requiredFeatures: string[] = []; + private ngIfDirective: ng.IDirective; constructor(@Inject('Features') private features: any, @@ -27,7 +28,7 @@ export class QuayRequireDirective implements AfterContentInit { } public ngAfterContentInit(): void { - const attrs: {[name: string]: any} = {'ngIf': () => this.features.matchesFeatures(this.requiredFeatures)}; + const attrs: {[name: string]: () => boolean} = {'ngIf': () => this.features.matchesFeatures(this.requiredFeatures)}; (<Function>this.ngIfDirective.link).apply(this.ngIfDirective, [ diff --git a/templates/base.html b/templates/base.html index 0dfa13c80..213725d92 100644 --- a/templates/base.html +++ b/templates/base.html @@ -154,7 +154,9 @@ mixpanel.init("{{ mixpanel_key }}", { track_pageview : false, debug: {{ is_debug {% endif %} <div class="quay-message-bar"></div> - <div class="quay-service-status-bar" quay-require="['BILLING']"></div> + <div quay-require="['BILLING']"> + <div class="quay-service-status-bar"></div> + </div> <div id="padding-container"> <div id="co-l-view-container">