diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts index 0d9064dc87..697e379f3d 100644 --- a/src/app/+search-page/search-page.component.ts +++ b/src/app/+search-page/search-page.component.ts @@ -71,18 +71,27 @@ export class SearchPageComponent implements OnInit, OnDestroy { this.query = params.query || ''; this.scope = params.scope; const page = +params.page || this.searchOptions.pagination.currentPage; - const pageSize = +params.pageSize || this.searchOptions.pagination.pageSize; + let pageSize = +params.pageSize || this.searchOptions.pagination.pageSize; + let pageSizeOptions: number[] = [5, 10, 20, 40, 60, 80, 100]; + + if (isNotEmpty(params.view) && params.view === ViewMode.Grid) { + pageSize = 12; + pageSizeOptions = [12, 24, 36, 48 , 50, 62, 74, 84]; + // pageSize = 9; + // pageSizeOptions = [9, 18, 27, 36 , 45, 54, 63, 72]; + } const sortDirection = +params.sortDirection || this.searchOptions.sort.direction; const pagination = Object.assign({}, this.searchOptions.pagination, - { currentPage: page, pageSize: pageSize } + { currentPage: page, pageSize: pageSize, pageSizeOptions: pageSizeOptions} ); const sort = Object.assign({}, this.searchOptions.sort, { direction: sortDirection, field: params.sortField } ); + this.updateSearchResults({ pagination: pagination, sort: sort @@ -98,6 +107,7 @@ export class SearchPageComponent implements OnInit, OnDestroy { private updateSearchResults(searchOptions) { this.resultsRDObs = this.service.search(this.query, this.scope, searchOptions); + this.searchOptions = searchOptions; } ngOnDestroy() { diff --git a/src/app/object-grid/grid-card-styling.scss b/src/app/object-grid/grid-card-styling.scss index 52b78524b0..44f4183bfd 100644 --- a/src/app/object-grid/grid-card-styling.scss +++ b/src/app/object-grid/grid-card-styling.scss @@ -1,6 +1,9 @@ +@import '../../styles/custom_variables'; + .card-title{ - line-height: 1em; - height:3em; + line-height: $line-height-base; + height:$headings-line-height; + font-size:$headings-font-size; overflow: hidden; text-overflow: ellipsis; } @@ -8,29 +11,35 @@ .card-text { overflow: hidden; text-overflow: ellipsis; - line-height: 1em; - margin-bottom:10px; + line-height: $line-height-base; + margin-bottom:$card-block-margin-base*2; } .card-text.item-authors { - height: 1em; + height: $line-height-base; } .card-text.item-abstract { - height: 5em; - + height: $content-line-height; } + .viewButton{ - display:block; + display:table; + margin:auto; + width: $card-button-width; } .card{ - padding:10px; - margin-bottom: 15px; + margin-bottom: $card-block-margin-base *3; + height: 98%; } .card-img-top ::ng-deep img { - height: 120px; + height: $card-thumbnail-height; width: 100%; object-fit: cover; - margin-bottom: 10px; } + +.card-block{ + margin: $card-block-margin-base; +} + diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.html b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.html new file mode 100644 index 0000000000..6221cbaba1 --- /dev/null +++ b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss new file mode 100644 index 0000000000..50be6f5ad0 --- /dev/null +++ b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.scss @@ -0,0 +1 @@ +@import '../../../styles/variables.scss'; diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts new file mode 100644 index 0000000000..f4ca434221 --- /dev/null +++ b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts @@ -0,0 +1,42 @@ +import { ComponentFixture, TestBed, async } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { ThumbnailComponent } from './thumbnail.component'; +import { Bitstream } from '../../core/shared/bitstream.model'; +import { SafeUrlPipe } from '../../shared/utils/safe-url-pipe'; + +describe('ThumbnailComponent', () => { + let comp: ThumbnailComponent; + let fixture: ComponentFixture; + let de: DebugElement; + let el: HTMLElement; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ThumbnailComponent, SafeUrlPipe] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ThumbnailComponent); + comp = fixture.componentInstance; // BannerComponent test instance + de = fixture.debugElement.query(By.css('div.thumbnail')); + el = de.nativeElement; + }); + + it('should display image', () => { + comp.thumbnail = new Bitstream(); + comp.thumbnail.content = 'test.url'; + fixture.detectChanges(); + const image: HTMLElement = de.query(By.css('img')).nativeElement; + expect(image.getAttribute('src')).toBe(comp.thumbnail.content); + }); + + it('should display placeholder', () => { + fixture.detectChanges(); + const image: HTMLElement = de.query(By.css('img')).nativeElement; + expect(image.getAttribute('src')).toBe(comp.holderSource); + }); + +}); diff --git a/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts new file mode 100644 index 0000000000..7baa47b39e --- /dev/null +++ b/src/app/object-grid/grid-thumbnail/grid-thumbnail.component.ts @@ -0,0 +1,30 @@ +import { Component, Input } from '@angular/core'; +import { Bitstream } from '../../core/shared/bitstream.model'; + +/** + * This component renders a given Bitstream as a thumbnail. + * One input parameter of type Bitstream is expected. + * If no Bitstream is provided, a holderjs image will be rendered instead. + */ + +@Component({ + selector: 'ds-grid-thumbnail', + styleUrls: ['./grid-thumbnail.component.scss'], + templateUrl: './grid-thumbnail.component.html' +}) +export class GridThumbnailComponent { + + @Input() thumbnail: Bitstream; + + data: any = {}; + + /** + * The default 'holder.js' image + */ + holderSource = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+'; + + errorHandler(event) { + event.currentTarget.src = this.holderSource; + } + +} diff --git a/src/app/object-grid/item-grid-element/item-grid-element.component.html b/src/app/object-grid/item-grid-element/item-grid-element.component.html index ea7b894896..3fae55088e 100644 --- a/src/app/object-grid/item-grid-element/item-grid-element.component.html +++ b/src/app/object-grid/item-grid-element/item-grid-element.component.html @@ -1,17 +1,18 @@
- - + +

{{object.findMetadata('dc.title')}}

-

+ +

{{authorMd.value}} ; + {{object.findMetadata("dc.date.issued")}}

- ({{object.findMetadata("dc.publisher")}}, {{object.findMetadata("dc.date.issued")}})

{{object.findMetadata("dc.description.abstract") | dsTruncate:[200] }}

diff --git a/src/app/object-grid/object-grid.component.html b/src/app/object-grid/object-grid.component.html index 7abfaf28d3..ebcf240d28 100644 --- a/src/app/object-grid/object-grid.component.html +++ b/src/app/object-grid/object-grid.component.html @@ -10,14 +10,12 @@ (sortDirectionChange)="onSortDirectionChange($event)" (sortFieldChange)="onSortDirectionChange($event)" (paginationChange)="onPaginationChange($event)"> -
    -
    +
    -
diff --git a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html index 895e8b59c3..be84039416 100644 --- a/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html +++ b/src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html @@ -1,24 +1,29 @@
- - + +
-

{{dso.findMetadata('dc.title')}}

+

-

+

{{authorMd.value}} - ; + *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let first=first;"> + + , ... + -

- ({{dso.findMetadata("dc.publisher")}}, {{dso.findMetadata("dc.date.issued")}}) + + , + {{dso.findMetadata("dc.date.issued")}} -

- {{dso.findMetadata("dc.description.abstract") | dsTruncate:[200] }}

+ +

+

+

View
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 1ebf251e2c..8ef05b2f89 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -40,6 +40,7 @@ import { ThumbnailComponent } from '../thumbnail/thumbnail.component'; import { SearchFormComponent } from './search-form/search-form.component'; import { SearchResultGridElementComponent } from '../object-grid/search-result-grid-element/search-result-grid-element.component'; import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component'; +import { GridThumbnailComponent } from '../object-grid/grid-thumbnail/grid-thumbnail.component'; import { VarDirective } from './utils/var.directive'; const MODULES = [ @@ -78,6 +79,7 @@ const COMPONENTS = [ PaginationComponent, SearchFormComponent, ThumbnailComponent, + GridThumbnailComponent, WrapperListElementComponent, ViewModeSwitchComponent ]; diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss index 12ebfd6618..f52a99f014 100644 --- a/src/styles/_custom_variables.scss +++ b/src/styles/_custom_variables.scss @@ -1,3 +1,3 @@ $content-spacing: $spacer * 1.5; -$button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2); \ No newline at end of file +$button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2);