diff --git a/webapp/src/app/core/components/header/header.component.html b/webapp/src/app/core/components/header/header.component.html index ed4a3234f060029999446db9c9ca05c7844bfc2f..3f38b1a43d3efcda622ead7fe1c3f6062b6d440b 100644 --- a/webapp/src/app/core/components/header/header.component.html +++ b/webapp/src/app/core/components/header/header.component.html @@ -3,8 +3,8 @@ <a class="navbar-item" routerLink="/accueil"> <img class="logo-smart-data-grand-lyon" src="./assets/img/logo-smart-data-grand-lyon.png"> </a> - <div class="navbar-item"> - <img class="logo-smart-data-grand-lyon" src="./assets/img/logo-grand-lyon.png"> + <div class="navbar-item is-hidden-touch"> + <img class="logo-smart-data-grand-lyon" width="112" height="28" src="./assets/img/logo-grand-lyon.png"> </div> <div role="button" class="navbar-burger" aria-label="menu" (click)="burgerActive = !burgerActive"> <span aria-hidden="true"></span> diff --git a/webapp/src/app/core/components/header/header.component.scss b/webapp/src/app/core/components/header/header.component.scss index 5c6ea7d8785308229d2f2ee2da52f71483e28e02..bf45465d44bf6f056d8f0f29c04b79371101b9b7 100644 --- a/webapp/src/app/core/components/header/header.component.scss +++ b/webapp/src/app/core/components/header/header.component.scss @@ -10,10 +10,10 @@ .navbar { flex-wrap: wrap; } -.navbar-item img { - max-height: 3rem; - margin: 0.5rem; -} +// .navbar-item img { +// max-height: 3rem; +// margin: 0.5rem; +// } .navbar-brand { justify-content: space-between; background-color: #F3F5F7; diff --git a/webapp/src/app/geosource/components/metadata-list/metadata-list.component.html b/webapp/src/app/geosource/components/metadata-list/metadata-list.component.html index b9025dad39f3e79391c84e83f10cbe25c10b5b28..842f6a85c16a224c37dc61a4cb46a4f7d6b331c3 100644 --- a/webapp/src/app/geosource/components/metadata-list/metadata-list.component.html +++ b/webapp/src/app/geosource/components/metadata-list/metadata-list.component.html @@ -1,6 +1,6 @@ <div class="columns"> <div class="column is-3 has-text-danger" i18n="@@global.resultsFound"> - {{ metadata_total }} results found + {{ paginator.length }} results found </div> <div class="column is-9"> <app-suggestion></app-suggestion> @@ -9,105 +9,104 @@ <div class="columns"> <div class="column is-3"> <div class="sort-container"> - <app-sort></app-sort> + <app-sort></app-sort> </div> <div> - <app-filter-list></app-filter-list> + <app-filter-list></app-filter-list> </div> </div> <div class="column is-9"> - <div class="columns" *ngFor="let dataset of datasetList"> - <div class="column is-12"> - <div class="card"> - <div class="columns"> - <div class="column is-9"> - <header class="header"> - <p class="card-header-title is-size-4"> - <a [routerLink]="[dataset.dataset_id]">{{ dataset.metadata.title }}</a> - </p> + <div *ngFor="let dataset of datasetList" class="card"> + <div class="columns"> + <div class="column is-9"> + <header class="header"> + <p class="card-header-title is-size-4"> + <a [routerLink]="[dataset.dataset_id]">{{ dataset.metadata.title }}</a> + </p> - <p> - <span>Occurences trouvées: {{ dataset.metadata.total_documents}}</span> - <br> - <strong class="category has-text-warning is-size-6" *ngFor="let topic of dataset.metadata.topic_category"> - {{ topic }} - </strong> - </p> - </header> - <div class="card-content"> - <div class="content"> - <p class="block-with-text" - [innerHTML]="dataset.highlights.highlightedAbstract != null ? dataset.highlights.highlightedAbstract : dataset.metadata.abstract"></p> - <p class="protocol-list"> - <strong class="is-size-7"> - FORMATS: - </strong> - <span>{{ dataset.metadata.uri ? formatProtocols(dataset.metadata.uri) : '-' }}</span> - </p> - <p> - <u i18n="@@global.keywords">Keywords :</u> {{ dataset.metadata.keyword ? dataset.metadata.keyword.join(', ') : '-'}}</p> - </div> - </div> - </div> - <div class="column is-3"> - <div class="content"> - <p *ngIf="dataset.metadata.contact && dataset.metadata.contact.length > 0"> - <span class="icon"> - <i class="material-icons">perm_identity</i> - </span> - {{ dataset.metadata.contact ? dataset.metadata.contact[0].organization : '-' }} - </p> - <p> - <span class="icon"> - <i class="material-icons">copyright</i> - </span> - {{ dataset.metadata.use_limitation ? dataset.metadata.use_limitation[0] : '-' }} - </p> - <p> - <span class="icon"> - <i class="material-icons">update</i> - </span> - {{ dataset.metadata.date_publication | date: 'dd MMMM yyyy' }} - </p> - <p> - <span class="icon"> - <i class="material-icons">autorenew</i> - </span> - - - </p> - <p> - <span class="icon"> - <i class="material-icons">visibility</i> - </span> - - - </p> - </div> + <p> + <span>Occurences trouvées: {{ dataset.metadata.total_documents}}</span> + <br> + <strong class="category has-text-warning is-size-6" *ngFor="let topic of dataset.metadata.topic_category"> + {{ topic }} + </strong> + </p> + </header> + <div class="card-content"> + <div class="content"> + <p class="block-with-text" [innerHTML]="dataset.highlights.highlightedAbstract != null ? dataset.highlights.highlightedAbstract : dataset.metadata.abstract"></p> + <p class="protocol-list"> + <strong class="is-size-7"> + FORMATS: + </strong> + <span>{{ dataset.metadata.uri ? formatProtocols(dataset.metadata.uri) : '-' }}</span> + </p> + <p> + <u i18n="@@global.keywords">Keywords :</u> {{ dataset.metadata.keyword ? dataset.metadata.keyword.join(', ') : '-'}}</p> </div> </div> - <div class="columns" *ngIf="dataset.highlights.metadata.length > 0 || dataset.highlights.data.length > 0" - style="padding-left: 1.5em; "> - <div class="column"> - <div class="content"> - <ng-container *ngIf="dataset.highlights.metadata.length > 0"> - <strong i18n> - {dataset.highlights.metadata.length, plural, =1 {Found occurence} other {Found occurences}} in metadata - </strong> - <span class="item-found" *ngFor="let e of dataset.highlights.metadata" [innerHTML]="formatFoundItem(e)"></span> - </ng-container> - <ng-container *ngIf="dataset.highlights.data.length > 0"> - <strong i18n> - {dataset.highlights.metadata.length, plural, =1 {Found occurence} other {Found occurences}} in data - </strong> - <span class="item-found" *ngFor="let e of dataset.highlights.data" [innerHTML]="formatFoundItem(e)"></span> - </ng-container> - </div> - </div> + </div> + <div class="column is-3"> + <div class="content"> + <p *ngIf="dataset.metadata.contact && dataset.metadata.contact.length > 0"> + <span class="icon"> + <i class="material-icons">perm_identity</i> + </span> + {{ dataset.metadata.contact ? dataset.metadata.contact[0].organization : '-' }} + </p> + <p> + <span class="icon"> + <i class="material-icons">copyright</i> + </span> + {{ dataset.metadata.use_limitation ? dataset.metadata.use_limitation[0] : '-' }} + </p> + <p> + <span class="icon"> + <i class="material-icons">update</i> + </span> + {{ dataset.metadata.date_publication | date: 'dd MMMM yyyy' }} + </p> + <p> + <span class="icon"> + <i class="material-icons">autorenew</i> + </span> + - + </p> + <p> + <span class="icon"> + <i class="material-icons">visibility</i> + </span> + - + </p> </div> </div> </div> + <div class="columns" *ngIf="dataset.highlights.metadata.length > 0 || dataset.highlights.data.length > 0" style="padding-left: 1.5em; "> + <div class="column"> + <div class="content"> + <ng-container *ngIf="dataset.highlights.metadata.length > 0"> + <strong i18n> + {dataset.highlights.metadata.length, plural, =1 {Found occurence} other {Found occurences}} in metadata + </strong> + <span class="item-found" *ngFor="let e of dataset.highlights.metadata" [innerHTML]="formatFoundItem(e)"></span> + </ng-container> + <ng-container *ngIf="dataset.highlights.data.length > 0"> + <strong i18n> + {dataset.highlights.metadata.length, plural, =1 {Found occurence} other {Found occurences}} in data + </strong> + <span class="item-found" *ngFor="let e of dataset.highlights.data" [innerHTML]="formatFoundItem(e)"></span> + </ng-container> + </div> + </div> + </div> + </div> + <div class="columns"> + <div class="column"> + <app-paginator *ngIf="paginator.length > 0" [length]="paginator.length" [pageSize]="paginator.pageSize" [pageSizeOptions]="paginator.pageSizeOptions" + [pageIndex]="paginator.pageIndex" [pagesToShow]="5" [loading]="loading" [showFirstLastButtons]="true" (page)="changePagination($event)" + (pageSizeChanged)="changePageSize($event)"> + </app-paginator> + </div> </div> - <mat-paginator color="primary" #paginator [length]="metadata_total" [pageSize]="paginator.pageSize" [pageIndex]="paginator.pageIndex" - [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="true" (page)="changePagination($event)"> - </mat-paginator> </div> -</div> +</div> \ No newline at end of file diff --git a/webapp/src/app/geosource/components/metadata-list/metadata-list.component.ts b/webapp/src/app/geosource/components/metadata-list/metadata-list.component.ts index 1bb61bcb461be154b24e46cb872a86f5778af361..204c1f4e6268078ef3e081449ad9dd64dbff88a8 100644 --- a/webapp/src/app/geosource/components/metadata-list/metadata-list.component.ts +++ b/webapp/src/app/geosource/components/metadata-list/metadata-list.component.ts @@ -4,6 +4,12 @@ import { Dataset, IMetadataUri } from '../../models'; import { Subscription } from 'rxjs/Subscription'; import { MatPaginator } from '@angular/material'; +interface PaginatorOptions { + pageIndex: number; + length: number; + pageSize: number; + pageSizeOptions: number[]; +} @Component({ selector: 'app-metadata-list', @@ -11,30 +17,31 @@ import { MatPaginator } from '@angular/material'; styleUrls: ['./metadata-list.component.scss'] }) export class MetadataListComponent implements OnInit, OnDestroy { - @ViewChild('paginator') paginator: MatPaginator; + // @ViewChild('paginator') paginator: MatPaginator; datasetList: Dataset[]; searchChangeSub: Subscription; - pageSizeOptions: number[]; - metadata_total: number; - showProgressBar: boolean; + showProgressBar = false; + loading = false; + paginator: PaginatorOptions = { + pageIndex: 0, + length: 0, + pageSize: 5, + pageSizeOptions: [3, 5, 10] + }; constructor( private metadataService: MetadataService - ) { - this.metadata_total = 0; - this.pageSizeOptions = [3, 5, 10]; - this.showProgressBar = false; - } + ) { } ngOnInit() { - this.paginator.pageIndex = this.metadataService.pageIndex; + this.loading = true; + this.paginator.pageIndex = this.metadataService.pageIndex + 1; this.paginator.pageSize = this.metadataService.pageSize; this.search(); this.searchChangeSub = this.metadataService.searchChange$.subscribe( (value) => { this.showProgressBar = true; - this.paginator.pageIndex = 0; this.search(); } ); @@ -45,21 +52,28 @@ export class MetadataListComponent implements OnInit, OnDestroy { } search() { + this.loading = true; this.metadataService.getDatasetList().subscribe( (res) => { this.datasetList = res; this.paginator.pageSize = this.metadataService.pageSize; - this.paginator.pageIndex = this.metadataService.pageIndex; - this.metadata_total = this.metadataService.resultsCount; + this.paginator.pageIndex = this.metadataService.pageIndex + 1; + this.paginator.length = this.metadataService.resultsCount; this.showProgressBar = false; + this.loading = false; }, (err) => { + this.loading = false; } ); } // When pagination is changed by user, we update metadata with new pagination options - changePagination(event) { - this.metadataService.paginationChanged(this.paginator.pageSize, event.pageIndex); + changePagination(pageIndex) { + this.metadataService.paginationChanged(this.paginator.pageSize, pageIndex - 1 ); + } + + changePageSize(pageSize) { + this.metadataService.paginationChanged(pageSize, this.paginator.pageIndex - 1 ); } formatFoundItem(e) { diff --git a/webapp/src/app/geosource/geosource.module.ts b/webapp/src/app/geosource/geosource.module.ts index 981da9f4d01ccf8204b96460c48c1238ce61083a..ed6d5a99b1a4ab4ad53e9297e239d0df4a3fd4ae 100644 --- a/webapp/src/app/geosource/geosource.module.ts +++ b/webapp/src/app/geosource/geosource.module.ts @@ -5,13 +5,15 @@ import { GeosourceRoutingModule } from './geosource-routing.module'; import { GeosourceComponents } from './components'; import { GeosourceServices } from './services'; import { AppMaterialModule } from '../app.material.module'; +import { SharedModule } from '../shared/shared.module'; @NgModule({ imports: [ CommonModule, GeosourceRoutingModule, AppMaterialModule, - FormsModule + FormsModule, + SharedModule ], declarations: [...GeosourceComponents], providers: [ diff --git a/webapp/src/app/geosource/models/elasticsearch-options.model.ts b/webapp/src/app/geosource/models/elasticsearch-options.model.ts index a8902ef2791ed12edddb2d5a6ed0fd871267ad1f..52eb42f78908afad83363e5ab4f175163b5a70cd 100644 --- a/webapp/src/app/geosource/models/elasticsearch-options.model.ts +++ b/webapp/src/app/geosource/models/elasticsearch-options.model.ts @@ -16,7 +16,7 @@ export class ElasticsearchOptions { '_filters': Array<IFilter>; constructor(data?) { - this._pageSize = (data && data.pageSize != null) ? data.pageSize : 5; + this._pageSize = (data && data.pageSize != null) ? data.pageSize : 3; this._pageIndex = (data && data.pageIndex != null) ? data.pageIndex : 0; this._searchString = (data && data.searchString != null) ? data.searchString : ''; this._sortOptions = (data && data.sortOptions != null) ? data.sortOptions : { diff --git a/webapp/src/app/geosource/services/elasticsearch.service.ts b/webapp/src/app/geosource/services/elasticsearch.service.ts index 1966e52b7e0045bf6060efe69f1f8ba54650693a..8a6e060c374b848b2d15ad2d703a1059cb3330cb 100644 --- a/webapp/src/app/geosource/services/elasticsearch.service.ts +++ b/webapp/src/app/geosource/services/elasticsearch.service.ts @@ -99,6 +99,7 @@ export class ElasticsearchService { } constructElasticsearchRequest(options: ElasticsearchOptions) { + console.log(options) const from = options.pageSize * options.pageIndex; const escapedString = options.searchString.replace(/([<>*()?])/g, '\\$1'); diff --git a/webapp/src/app/shared/components/paginator/paginator.component.html b/webapp/src/app/shared/components/paginator/paginator.component.html new file mode 100644 index 0000000000000000000000000000000000000000..b00e087d91d27b39e745146ed6e948985e6b99d9 --- /dev/null +++ b/webapp/src/app/shared/components/paginator/paginator.component.html @@ -0,0 +1,80 @@ +<div class="columns"> + <div class="column is-narrow"> + <!-- Dropdown list of pageSize number --> + <div class="dropdown" [ngClass]="{'is-active': pageSizeDropdownToggle}" (click)="pageSizeDropdownToggle=!pageSizeDropdownToggle"> + <div class="dropdown-trigger"> + <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu"> + <span>{{ pageSize }}</span> + <span class="icon is-small"> + <i class="fas fa-angle-down" aria-hidden="true"></i> + </span> + </button> + </div> + <div class="dropdown-menu" id="dropdown-menu" role="menu"> + <div class="dropdown-content"> + <a class="dropdown-item" [ngClass]="{'is-active': nb === pageSize}" *ngFor="let nb of pageSizeOptions" (click)="changePageSize(nb)"> + {{ nb }} + </a> + </div> + </div> + </div> + </div> + <div class="column"> + <div class="pagination is-centered is-small" role="navigation" aria-label="pagination" *ngIf="length > 0"> + <!-- First button --> + <a class="pagination-previous button" *ngIf="pageIndex === 1 || loading; else activeFirstPageLink" disabled> + <i class="fas fa-angle-double-left"></i> + </a> + <ng-template #activeFirstPageLink> + <a class="pagination-previous button" (click)="onPage(1)"> + <i class="fas fa-angle-double-left"></i> + </a> + </ng-template> + + <!-- Previous button --> + <a class="pagination-previous button" *ngIf="pageIndex === 1 || loading; else activePreviousLink" disabled> + <i class="fas fa-angle-left"></i> + </a> + <ng-template #activePreviousLink> + <a class="pagination-previous button" (click)="onPrev()"> + <i class="fas fa-angle-left"></i> + </a> + </ng-template> + + <!-- List of pages number --> + <ul class="pagination-list"> + <ng-container *ngFor="let pageNum of getPages(); let i = index"> + <li *ngIf="displayEllipsis(i)"> + <span class="pagination-ellipsis">…</span> + </li> + <li> + <a *ngIf="!loading; else pageNumberDisabled" (click)="onPage(pageNum)" class="pagination-link button" [ngClass]="{'is-current': pageNum === pageIndex}">{{ pageNum }}</a> + <ng-template #pageNumberDisabled> + <a class="pagination-link button" [ngClass]="{'is-current': pageNum === pageIndex}" disabled>{{ pageNum }}</a> + </ng-template> + </li> + </ng-container> + </ul> + + <!-- Next button --> + <a class="pagination-next button" *ngIf="lastPage() || loading; else activeNextLink" disabled> + <i class="fas fa-angle-right"></i> + </a> + <ng-template #activeNextLink> + <a class="pagination-next button" (click)="onNext()"> + <i class="fas fa-angle-right"></i> + </a> + </ng-template> + + <!-- Last button --> + <a class="pagination-next button" *ngIf="lastPage() || loading; else activeLastPageLink" disabled> + <i class="fas fa-angle-double-right"></i> + </a> + <ng-template #activeLastPageLink> + <a class="pagination-next button" (click)="onPage(totalPages())"> + <i class="fas fa-angle-double-right"></i> + </a> + </ng-template> + </div> + </div> +</div> \ No newline at end of file diff --git a/webapp/src/app/shared/components/paginator/paginator.component.scss b/webapp/src/app/shared/components/paginator/paginator.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..0f7429047d94d3c68b915ff4a4c96fdbc4536ef1 --- /dev/null +++ b/webapp/src/app/shared/components/paginator/paginator.component.scss @@ -0,0 +1,3 @@ +.dropdown-menu { + min-width: unset; +} \ No newline at end of file diff --git a/webapp/src/app/shared/components/paginator/paginator.component.spec.ts b/webapp/src/app/shared/components/paginator/paginator.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..cabc63d031cba30eeb59b8c7a22a16563eea0ca0 --- /dev/null +++ b/webapp/src/app/shared/components/paginator/paginator.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PaginatorComponent } from './paginator.component'; + +describe('PaginatorComponent', () => { + let component: PaginatorComponent; + let fixture: ComponentFixture<PaginatorComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PaginatorComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PaginatorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/webapp/src/app/shared/components/paginator/paginator.component.ts b/webapp/src/app/shared/components/paginator/paginator.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..5b9b6a1f5e7c67f4b4f772132cdc2b21f9b89cb0 --- /dev/null +++ b/webapp/src/app/shared/components/paginator/paginator.component.ts @@ -0,0 +1,128 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'app-paginator', + templateUrl: './paginator.component.html', + styleUrls: ['./paginator.component.scss'] +}) +export class PaginatorComponent implements OnInit { + + @Input() pageIndex: number; // the current page + @Input() length: number; // how many total items there are in all pages + @Input() pageSize: number; // how many items we want to show per page + @Input() pageSizeOptions: number[]; // possible values forpageSize + @Input() pagesToShow: number; // how many pages between next/prev + @Input() showFirstLastButtons: boolean; // show next/prev bbttons + @Input() loading: boolean; // check if content is being loaded + + @Output() page = new EventEmitter<number>(); + @Output() pageSizeChanged = new EventEmitter<number>(); + + pageSizeDropdownToggle = false; + + constructor() { } + + ngOnInit() { + } + + onPrev() { + if (this.pageIndex - 1 > 0) { + this.page.emit(this.pageIndex - 1); + } + } + + onNext() { + if (this.pageIndex + 1 <= this.totalPages()) { + this.page.emit(this.pageIndex + 1); + } + } + + onPage(n: number): void { + this.page.emit(n); + } + + totalPages(): number { + return Math.ceil(this.length / this.pageSize) || 0; + } + + lastPage(): boolean { + return this.pageSize * this.pageIndex >= this.length; + } + + changePageSize(size: number) { + this.pageSize = size; + this.pageSizeChanged.emit(this.pageSize); + } + + getPages(): number[] { + const totalP = Math.ceil(this.length / this.pageSize); // Total number of page + const p = this.pageIndex || 1; // Current page index + const pagesToShow = this.pagesToShow || 5; // Total number of pages to be displayed in the paginator + const pages: number[] = []; // Page number to be displayed + pages.push(p); // Push the current page index + let times = pagesToShow - 1; // Number of page to be added to the displayed page + if (p !== 1) { + times--; // If current page is different from the first page remove one (first page automatically added to the array at the end of the function) + } + if (p !== totalP) { + times--; // If current page is different from the last page remove one (last page automatically added to the array at the end of the function) + } + for (let i = 0; i < times; i++) { + let added = 0; // Count the number of page added in this loop + // Take the min number in the array and add (n-1) to the array if n > 1 + if (pages.length < pagesToShow) { + if (Math.min.apply(null, pages) > 1) { + if (Math.min.apply(null, pages) - 1 > 1) { + pages.push(Math.min.apply(null, pages) - 1); + added++; + } + } + } + // Take the max number in the array and add (n+1) to the array if n > total number of pages + if (pages.length < pagesToShow) { + if (Math.max.apply(null, pages) < totalP) { + if (Math.max.apply(null, pages) + 1 < totalP) { + pages.push(Math.max.apply(null, pages) + 1); + added++; + } + } + } + // If more than one page has been added then increase i by one more + if (added === 2) { + i++; + } + } + // Adding first page if not already in the array + if (pages.indexOf(1) === -1) { + pages.push(1); + } + // Adding last page if not already in the array + if (pages.indexOf(totalP) === -1) { + pages.push(totalP); + } + // Reordering the array + pages.sort((a, b) => a - b); + return pages; + } + + // Return true if ellipsis has to be displayed + displayEllipsis(i: number) { + const pages = this.getPages(); + let result = false; + // If second page (index start at 0) + if (i === 1) { + // If the two consecutive number are not separated by one need to add the elipsis + if (pages[0] + 1 !== pages[1]) { + result = true; + } + } + // If last page + if (i > 1 && i === pages.length - 1) { + if (pages[i] - 1 !== pages[i - 1]) { + result = true; + } + } + + return result; + } +} diff --git a/webapp/src/app/shared/shared.module.ts b/webapp/src/app/shared/shared.module.ts index ac8873c23f0c3e23679ad5e268ec5e70e2aadb45..806f8703f55f63f422a91040a1a495a0d67a04fe 100644 --- a/webapp/src/app/shared/shared.module.ts +++ b/webapp/src/app/shared/shared.module.ts @@ -1,16 +1,20 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { EscapeHtmlPipe } from './pipes/keep-html.pipe'; +import { PaginatorComponent } from './components/paginator/paginator.component'; +import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ CommonModule ], declarations: [ - EscapeHtmlPipe + EscapeHtmlPipe, + PaginatorComponent ], exports: [ - EscapeHtmlPipe + EscapeHtmlPipe, + PaginatorComponent ] }) export class SharedModule { } diff --git a/webapp/src/scss/mystyles.scss b/webapp/src/scss/mystyles.scss index b42b1cdf621cfe80a4f8dd2318365a968e4a4390..8ff0e92b28d321a47eec772dc51035e225a6e957 100644 --- a/webapp/src/scss/mystyles.scss +++ b/webapp/src/scss/mystyles.scss @@ -29,6 +29,9 @@ $primary: $main; // Use the new serif family $family-primary: $family-sans-serif; +$pagination-current-background-color: $yellow; +$pagination-current-border-color: $yellow; + // 6. Import the rest of Bulma @import "sass/utilities/_all"; @import "sass/base/_all";