diff --git a/src/app/portal/components/results/publications2/publications2.component.html b/src/app/portal/components/results/publications2/publications2.component.html index 71ed10e8c..d60c31565 100644 --- a/src/app/portal/components/results/publications2/publications2.component.html +++ b/src/app/portal/components/results/publications2/publications2.component.html @@ -600,8 +600,24 @@

Julkaisut - {{total$ | async}}

-
- +
+ + + +
+
+ +
+
+ +
+ +
diff --git a/src/app/portal/components/results/publications2/publications2.component.scss b/src/app/portal/components/results/publications2/publications2.component.scss index fab46f952..f4cf6dc24 100644 --- a/src/app/portal/components/results/publications2/publications2.component.scss +++ b/src/app/portal/components/results/publications2/publications2.component.scss @@ -97,14 +97,21 @@ cdk-table { } /* Add some spacing and border to the cells */ -cdk-header-cell, cdk-cell { - // padding: 16px; +cdk-cell { padding: 1rem 0.5rem; + display: table-cell; + text-align: start; +} - // border-bottom: 1px solid #e0e0e0; - display: table-cell; /* This ensures they behave like traditional table cells */ - +cdk-header-cell { + padding: 0.25rem 0.5rem 1rem 0.5rem; + display: table-cell; text-align: start; + + position: sticky; + top: 0; + background: white; + z-index: 1; } /* Define the header row and data row to behave like traditional table rows */ @@ -112,6 +119,8 @@ cdk-header-row, cdk-row { display: table-row; } + + /* Define columns to ensure they take equal widths - adjust as required */ /*[cdkColumnDef="publicationName"] { width: 35%; diff --git a/src/app/portal/components/results/publications2/publications2.component.ts b/src/app/portal/components/results/publications2/publications2.component.ts index 381c0ea6a..812984f38 100644 --- a/src/app/portal/components/results/publications2/publications2.component.ts +++ b/src/app/portal/components/results/publications2/publications2.component.ts @@ -37,7 +37,7 @@ import { FirstDigitPipe } from '@shared/pipes/first-digit.pipe'; import { FirstLetterPipe } from '@shared/pipes/first-letter.pipe'; import { BreakpointObserver, LayoutModule } from '@angular/cdk/layout'; import { ColumnSorterComponent } from '@shared/components/column-sorter/column-sorter.component'; -import { faSlidersH } from '@fortawesome/free-solid-svg-icons'; +import { faChartBar, faSlidersH } from '@fortawesome/free-solid-svg-icons'; import { Dialog, DialogRef } from '@angular/cdk/dialog'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; @@ -61,7 +61,6 @@ export class Publications2Component implements OnDestroy { breakpointObserver = inject(BreakpointObserver); dialog = inject(Dialog); - keywords = ""; page = 1; size = 10; @@ -72,20 +71,6 @@ export class Publications2Component implements OnDestroy { @ViewChild('searchDialog') dialogTemplate: TemplateRef; - openDialog() { - this.dialogRef = this.dialog.open(this.dialogTemplate, { - panelClass: 'fullscreen-panel', - }); - - this.dialogRef.closed.subscribe(() => { - console.log('The dialog2 was closed'); - }); - } - - closeDialog() { - this.dialogRef?.close(); - } - labelText = { yearOfPublication: $localize`:@@yearOfPublication:Julkaisuvuosi`, organization: $localize`:@@organization:Organisaatio`, @@ -115,10 +100,26 @@ export class Publications2Component implements OnDestroy { {id: "I", text: $localize`:@@publicationClassI:Audiovisuaaliset julkaisut ja tieto- ja viestintätekniset sovellukset`}, ]; - filterCount$ = new BehaviorSubject(0); filterCountLookup: Record = {}; + faSlidersH = faSlidersH; + faChartBar = faChartBar; + + openDialog() { + this.dialogRef = this.dialog.open(this.dialogTemplate, { + panelClass: 'fullscreen-panel', + }); + + this.dialogRef.closed.subscribe(() => { + console.log('The dialog2 was closed'); + }); + } + + closeDialog() { + this.dialogRef?.close(); + } + updateFilterCount(key: string, value: number) { this.filterCountLookup[key] = value; const count = Object.values(this.filterCountLookup).reduce((a, b) => a + b, 0); @@ -565,8 +566,6 @@ export class Publications2Component implements OnDestroy { clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), max); } - - faSlidersH = faSlidersH; } export class PublicationDataSource extends DataSource {