Skip to content

Commit a87f8ea

Browse files
Fran McDadeNoopDog
Fran McDade
authored and
NoopDog
committed
Add banner on Data Browser announcing 'r' release and linking to the release page. Resolves #1054.
1 parent 1e34915 commit a87f8ea

16 files changed

+190
-52
lines changed

‎spa/src/app/app.component.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
<div *ngIf="isMaintenanceModeWarningVisible((config$ | async)?.deployment)" class="status persistent">
1+
<announcement *ngIf="isMaintenanceModeWarningVisible((config$ | async)?.deployment)" class="data-re-ingestion">
22
<p class="fontsize-s">Warning: in maintenance mode for data re-ingestion</p>
3-
</div>
3+
</announcement>
44
<header>
55
<hca-toolbar (menuOpen)="onMenuOpen($event)"></hca-toolbar>
66
</header>
7+
<r-release *ngIf="showRRelease()"></r-release>
78
<ng-container *ngIf="systemStatus$ | async as systemStatus">
8-
<div *ngIf="!systemStatus.health.ok" class="status">
9+
<announcement *ngIf="!systemStatus.health.ok" class="status" >
910
<mat-icon>warning</mat-icon>
1011
<p class="fontsize-s">One or more of the systems composing the HCA DCP is currently unavailable. Please try again later, or monitor the full system status <a href="/system-status">here</a>.</p>
11-
</div>
12-
<div *ngIf="systemStatus.health.ok && systemStatus.index.indexing" class="status">
12+
</announcement>
13+
<announcement *ngIf="systemStatus.health.ok && systemStatus.index.indexing" class="status">
1314
<p class="fontsize-s">Data indexing in progress. Search results may be incomplete.</p>
14-
</div>
15+
</announcement>
1516
</ng-container>
1617
<router-outlet></router-outlet>
1718
<sticky-footer>

‎spa/src/app/app.component.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,20 @@
1111
flex-direction: column;
1212
height: 100%; // Required to force height to reach at least bottom of screen, before content is loaded
1313

14+
/* Status banner */
1415
.status {
15-
align-items: center;
16-
background-color: #000;
17-
display: flex;
18-
color: #fff;
19-
justify-content: center;
20-
padding: 14px 0;
21-
22-
&.persistent {
23-
background-color: $hca-orange;
16+
17+
mat-icon {
18+
align-self: center;
19+
margin-right: 16px;
2420
}
21+
}
22+
23+
/* Status, data re-ingestion banner */
24+
.status, .data-re-ingestion {
2525

2626
p {
27-
margin: 0 16px;
27+
margin: 0;
2828
}
2929

3030
a {

‎spa/src/app/app.component.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,16 @@ export class AppComponent implements OnInit, OnDestroy {
102102
}
103103
}
104104

105+
/**
106+
* Returns true when the url path is not "releases".
107+
*
108+
* @returns {boolean}
109+
*/
110+
public showRRelease() {
111+
112+
return !this.router.url.includes("/releases/");
113+
}
114+
105115
/**
106116
* Returns true if a filter state is encoded in the query params.
107117
*

‎spa/src/app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { ConfigModule } from "./config/config.module";
2727
import { ConfigService } from "./config/config.service";
2828
import { UserService } from "./data/user/user.service";
2929
import { FilesModule } from "./files/files.module";
30+
import { RReleaseComponent } from "./files/releases/r-release/r-release.component";
3031
import { AppReducers } from "./_ngrx/app.reducer";
3132
import { HCAEncodeHttpParamsInterceptor } from "./http/hca-encode-http-params.interceptor";
3233
import { HCAHttpResponseErrorInterceptor } from "./http/hca-http-response-error.interceptor";
@@ -82,6 +83,7 @@ import { SystemService } from "./system/shared/system.service";
8283
DesktopFooterComponent,
8384
HCAFooterComponent,
8485
HCAToolbarComponent,
86+
RReleaseComponent,
8587
StickyFooterComponent
8688
],
8789
providers: [

‎spa/src/app/files/releases/r-release/r-release.component.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<announcement class="r-release">
2+
<span class="fontsize-s">
3+
<span>March 2020 Release lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur enim tellus, molestie in molestie ac. </span>
4+
<a href="/releases/2020-mar">View the March 2020 Release ></a>
5+
</span>
6+
</announcement>

‎spa/src/app/files/releases/r-release/r-release.component.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/*
2+
* Human Cell Atlas
3+
* https://www.humancellatlas.org/
4+
*
5+
* Banner announcing "r" release and linking to release page.
6+
*/
7+
@import "../../../site/theme/cgl.vars";
8+
9+
/* R release */
10+
.r-release span {
11+
margin: 0; /* Overrides fontsize-s margin */
12+
13+
/* "View the release" */
14+
a {
15+
color: $hca-black;
16+
text-decoration: underline;
17+
white-space: nowrap;
18+
}
19+
}

‎spa/src/app/files/releases/r-release/r-release.component.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* Human Cell Atlas
3+
* https://www.humancellatlas.org/
4+
*
5+
* Banner announcing "r" release and linking to release page.
6+
*/
7+
8+
// Core dependencies
9+
import { Component } from "@angular/core";
10+
11+
@Component({
12+
selector: "r-release ",
13+
templateUrl: "./r-release.component.html",
14+
styleUrls: ["./r-release.component.scss"]
15+
})
16+
export class RReleaseComponent {
17+
}

‎spa/src/app/shared/announcement/announcement.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ng-content></ng-content>

‎spa/src/app/shared/announcement/announcement.component.scss‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/*
2+
* Human Cell Atlas
3+
* https://www.humancellatlas.org/
4+
*
5+
* Styles for a wrapper for a "banner" style announcement.
6+
*/
7+
@import "../../site/theme/cgl.vars";
8+
9+
:host {
10+
display: block;
11+
padding: 14px 16px; /* Site gutter */
12+
}
13+
14+
/* Component r-release */
15+
:host-context(r-release) {
16+
background-color: $hca-blue-light;
17+
}
18+
19+
/* Component app with class "data-re-ingestion" */
20+
:host-context(.data-re-ingestion) {
21+
background-color: $hca-orange;
22+
}
23+
24+
/* Component app with class "status" */
25+
:host-context(.status) {
26+
background-color: $hca-black;
27+
color: $hca-white;
28+
display: flex;
29+
}
30+
31+
/* Component desktop-footer */
32+
:host-context(desktop-footer) {
33+
border-bottom: 1px solid $hca-gray-lightest; /* Create delimiter between desktop and data policy footer (not noticeable if data policy has been dismissed) */
34+
}
35+
36+
/* Banners - bottom of site */
37+
/* Component desktop-footer */
38+
/* Component data-policy-footer */
39+
:host-context(desktop-footer), :host-context(data-policy-footer) {
40+
background-color: $hca-off-white;
41+
text-align: center;
42+
}
43+
44+
/**
45+
* Tablet +
46+
*/
47+
@media screen and (min-width: 768px) {
48+
49+
/* Banners - bottom of site */
50+
/* Text left aligned */
51+
/* Component desktop-footer */
52+
/* Component data-policy-footer */
53+
:host-context(desktop-footer), :host-context(data-policy-footer) {
54+
text-align: left;
55+
}
56+
}
57+
58+
/**
59+
* HCA specific breakpoint
60+
*/
61+
@media screen and (min-width: 1200px) {
62+
63+
:host {
64+
padding: 14px 30px; /* Site gutter */
65+
}
66+
67+
/* Center align content - for banners at the top of site */
68+
/* Component r-release */
69+
/* Component app with class "status" */
70+
/* Component app with class "data-re-ingestion" */
71+
:host-context(r-release), :host-context(.status), :host-context(.data-re-ingestion) {
72+
display: flex;
73+
justify-content: center;
74+
}
75+
}
76+

‎spa/src/app/shared/announcement/announcement.component.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*
2+
* Human Cell Atlas
3+
* https://www.humancellatlas.org/
4+
*
5+
* Component responsible for a wrapper for a "banner" style announcement.
6+
*/
7+
8+
// Core dependencies
9+
import { Component } from "@angular/core";
10+
11+
@Component({
12+
selector: "announcement",
13+
templateUrl: "announcement.component.html",
14+
styleUrls: ["announcement.component.scss"]
15+
})
16+
export class AnnouncementComponent {
17+
}

0 commit comments

Comments
 (0)