-
diff --git a/research-hub-web/src/app/components/layout/layout.component.scss b/research-hub-web/src/app/components/layout/layout.component.scss index a5c571ee3..eed3333dc 100644 --- a/research-hub-web/src/app/components/layout/layout.component.scss +++ b/research-hub-web/src/app/components/layout/layout.component.scss @@ -15,14 +15,22 @@ app-navbar { z-index: 1000; } +app-notification { + position: fixed; + position: -webkit-fixed; + top: 64px; + left: 0; + right: 0; + z-index: 999; +} + div.main-content { flex: 1; margin-top: 64px; height: calc(100vh - 64px); overflow-y: auto; background-color: #fafafa; - color: rgba(0,0,0,.87); - // the order of these 2 media queries matters! + color: rgba(0, 0, 0, 0.87); @media (max-width: $navbar-second-row-breakpoint) { margin-top: 100px; height: calc(100vh - 100px); @@ -32,3 +40,25 @@ div.main-content { height: calc(100vh - 92px); } } + +// the order of these 2 media queries matters! +@media (max-width: $navbar-second-row-breakpoint) { + div.main-content { + margin-top: 100px; + height: calc(100vh - 100px); + } + + app-notification { + top: 100px; + } +} +@media (max-width: 960px) { + div.main-content { + margin-top: 92px; + height: calc(100vh - 92px); + } + + app-notification { + top: 92px; + } +} diff --git a/research-hub-web/src/app/components/layout/navbar/navbar.component.scss b/research-hub-web/src/app/components/layout/navbar/navbar.component.scss index e40abaafc..98890e803 100644 --- a/research-hub-web/src/app/components/layout/navbar/navbar.component.scss +++ b/research-hub-web/src/app/components/layout/navbar/navbar.component.scss @@ -18,7 +18,6 @@ mat-toolbar { height: 18px; } } - } .mat-button { line-height: 64px; @@ -80,4 +79,4 @@ mat-toolbar { &:hover { text-decoration:underline } -} \ No newline at end of file +} diff --git a/research-hub-web/src/app/components/layout/notification/notification.component.scss b/research-hub-web/src/app/components/layout/notification/notification.component.scss index 4d84cf28a..4c3b973f1 100644 --- a/research-hub-web/src/app/components/layout/notification/notification.component.scss +++ b/research-hub-web/src/app/components/layout/notification/notification.component.scss @@ -2,9 +2,7 @@ @import "styles-common"; div.notification-bar-container { - z-index: 1000; background: $light-blue; - transition: all 0.1s ease-in-out; a { text-decoration: underline; } diff --git a/research-hub-web/src/app/components/layout/notification/notification.component.ts b/research-hub-web/src/app/components/layout/notification/notification.component.ts index 9fec5a342..c1f6336a6 100644 --- a/research-hub-web/src/app/components/layout/notification/notification.component.ts +++ b/research-hub-web/src/app/components/layout/notification/notification.component.ts @@ -1,14 +1,15 @@ +import { animate, style, transition, trigger } from '@angular/animations'; import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { GetNotificationGQL } from '@app/graphql/schema'; import { Document } from '@contentful/rich-text-types'; +import { NotificationService } from '@services/notification.service'; import { Subscription } from 'rxjs'; -import { filter, map } from 'rxjs/operators'; @Component({ selector: 'app-notification', template: `
`, styleUrls: ['notification.component.scss'], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + animations: [ + trigger('slideInOut', [ + transition(':enter', [ + style({ transform: 'translateY(-100%)' }), + animate('200ms ease-in', style({ transform: 'translateY(0%)' })) + ]), + transition(':leave', [ + animate('200ms ease-in', style({ transform: 'translateY(-100%)' })) + ]) + ] + + ) + ] }) export class NotificationComponent implements OnInit, OnDestroy { private subscriptions: Subscription = new Subscription(); + public showNotification = false; - public hasBeenDismissed = false; public notification: Document | null = null; constructor( - private getNotificationGQL: GetNotificationGQL + private notificationService: NotificationService ) { } ngOnInit(): void { this.subscriptions.add( - this.getNotificationGQL.fetch().pipe( - map((result) => result.data.homepageCollection?.items[0]?.notification), - filter((result) => result !== null) - ).subscribe((result) => { - this.notification = result?.json; - - this.showNotification = true; + this.notificationService.getNotification().subscribe((result) => { + if (result) { + this.notification = result.json; + this.showNotification = true; + } }) ); } close(): void { - this.showNotification = false; - this.hasBeenDismissed = true; + this.notificationService + .storeCurrentNotificationVersion() + .then(() => { + this.showNotification = false; + }).catch((e) => { + console.log(e); + this.showNotification = false; + }); } ngOnDestroy(): void { diff --git a/research-hub-web/src/app/components/layout/search-bar/search-bar.component.html b/research-hub-web/src/app/components/layout/search-bar/search-bar.component.html index 70b3f612c..cc3aa978e 100644 --- a/research-hub-web/src/app/components/layout/search-bar/search-bar.component.html +++ b/research-hub-web/src/app/components/layout/search-bar/search-bar.component.html @@ -35,7 +35,8 @@ id="search" #searchBox type="search" - (keydown.enter)="search()" + #trigger="matAutocompleteTrigger" + (keydown.enter)="search(); trigger.closePanel()" placeholder="Search for anything" [matAutocomplete]="auto" [formControl]="searchText" diff --git a/research-hub-web/src/app/components/layout/search-bar/search-bar.component.ts b/research-hub-web/src/app/components/layout/search-bar/search-bar.component.ts index 98d678e3c..313356804 100644 --- a/research-hub-web/src/app/components/layout/search-bar/search-bar.component.ts +++ b/research-hub-web/src/app/components/layout/search-bar/search-bar.component.ts @@ -16,7 +16,7 @@ import { filter, map, startWith } from 'rxjs/operators'; export class SearchBarComponent implements OnInit, OnDestroy { @ViewChild('searchBarContainer') searchBarContainer: ElementRef; @ViewChild('searchBox') searchBox: ElementRef; - @ViewChild('filterContent') filterContent: ElementRef + @ViewChild('filterContent') filterContent: ElementRef; public searchText: FormControl = new FormControl(); public activeFilters: SearchFilters; diff --git a/research-hub-web/src/app/components/layout/search-filters/search-filters.component.html b/research-hub-web/src/app/components/layout/search-filters/search-filters.component.html index 113a5c67c..e6b969d1b 100644 --- a/research-hub-web/src/app/components/layout/search-filters/search-filters.component.html +++ b/research-hub-web/src/app/components/layout/search-filters/search-filters.component.html @@ -1,6 +1,13 @@
- +
@@ -14,7 +21,14 @@
- +
- +
-
diff --git a/research-hub-web/src/app/components/search-page/search-results-list/search-results-list.component.html b/research-hub-web/src/app/components/search-page/search-results-list/search-results-list.component.html index c25612ca3..ff7767539 100644 --- a/research-hub-web/src/app/components/search-page/search-results-list/search-results-list.component.html +++ b/research-hub-web/src/app/components/search-page/search-results-list/search-results-list.component.html @@ -5,20 +5,21 @@ *ngFor="let result of searchResults.results" class="card-content" role="listitem" - [routerLink]="['/' + result.contentType.toLowerCase() + '/' + result.slug]" (keydown.enter)="navigate(result.contentType, result.slug)" > + + {{ result.contentType | contentTypeDisplayName }} -

+ {{ result.title }}  lock -

+

diff --git a/research-hub-web/src/app/components/search-page/search-results-list/search-results-list.component.scss b/research-hub-web/src/app/components/search-page/search-results-list/search-results-list.component.scss index 1623bd36f..2e4ce08a5 100644 --- a/research-hub-web/src/app/components/search-page/search-results-list/search-results-list.component.scss +++ b/research-hub-web/src/app/components/search-page/search-results-list/search-results-list.component.scss @@ -3,12 +3,26 @@ @import "mixins"; @import "styles-common"; +/** + * Link behaviour + * Ref: https://github.com/twbs/bootstrap/issues/18294 + */ + .search-link { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + &:hover ~ .mat-card-title { + border-bottom: 1px solid $dark-blue; + } +} + /** * Material Overrides */ mat-card { background-color: $light-grey; - } .card-content { @include mat.elevation-transition; @@ -18,25 +32,12 @@ mat-card { } cursor: pointer; width: 100%; - p { - @include size(medium) { - display: inline-block; - width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } - .card-title { - @extend .card-title; - width: fit-content; - display: inline-block; + .mat-card-title { + display: inline; + font-weight: 100; margin-top: 0 !important; margin-bottom: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0); - &:hover { - border-bottom: 1px solid $dark-blue; - } font-size: 22px; color: $dark-blue; } diff --git a/research-hub-web/src/app/components/shared/app.shared.module.ts b/research-hub-web/src/app/components/shared/app.shared.module.ts index f41ea7947..efdd679d8 100644 --- a/research-hub-web/src/app/components/shared/app.shared.module.ts +++ b/research-hub-web/src/app/components/shared/app.shared.module.ts @@ -3,8 +3,6 @@ import { CommonModule } from '@angular/common'; import { FlexLayoutModule } from '@angular/flex-layout'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MaterialModule } from '@app/app.material.module'; -import { ErrorDialogComponent } from './error-dialog/error-dialog.component'; -import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component'; import { HumanCasePipe } from '@pipes/human-case.pipe'; import { ContentTypeDisplayNamePipe } from '@pipes/content-type-display-name.pipe'; import { CollectionListComponent } from './collection-list/collection-list.component'; @@ -39,8 +37,6 @@ import { ExpandablePagePartComponent } from './body-media/expandable-page-part/e MarkdownModule.forRoot() ], declarations: [ - ErrorDialogComponent, - ConfirmDialogComponent, HumanCasePipe, ContentTypeDisplayNamePipe, CollectionListComponent, @@ -60,7 +56,6 @@ import { ExpandablePagePartComponent } from './body-media/expandable-page-part/e FormsModule, ReactiveFormsModule, MaterialModule, - ErrorDialogComponent, HumanCasePipe, ContentTypeDisplayNamePipe, CollectionListComponent, diff --git a/research-hub-web/src/app/components/shared/body-media/blocks-embedded-asset/blocks-embedded-asset.component.html b/research-hub-web/src/app/components/shared/body-media/blocks-embedded-asset/blocks-embedded-asset.component.html index b1ca6b1bc..d5bd86049 100644 --- a/research-hub-web/src/app/components/shared/body-media/blocks-embedded-asset/blocks-embedded-asset.component.html +++ b/research-hub-web/src/app/components/shared/body-media/blocks-embedded-asset/blocks-embedded-asset.component.html @@ -2,7 +2,7 @@
- + {{ contentItem.title }} @@ -15,7 +15,7 @@
- + {{ contentItem.title }}
{{ contentItem.title }}  â€” {{ contentItem.description @@ -43,7 +43,7 @@
- + {{ contentItem.title }} diff --git a/research-hub-web/src/app/components/shared/body-media/blocks-embedded-entry/blocks-embedded-entry.component.html b/research-hub-web/src/app/components/shared/body-media/blocks-embedded-entry/blocks-embedded-entry.component.html index bf2193283..0fa567469 100644 --- a/research-hub-web/src/app/components/shared/body-media/blocks-embedded-entry/blocks-embedded-entry.component.html +++ b/research-hub-web/src/app/components/shared/body-media/blocks-embedded-entry/blocks-embedded-entry.component.html @@ -2,13 +2,12 @@ - + {{ contentItem.title }} @@ -22,7 +21,7 @@ -
+