diff --git a/frontend/src/app/pages/landing-page/embedded-federations/embedded-federations.component.html b/frontend/src/app/pages/landing-page/embedded-federations/embedded-federations.component.html index 9bd33c9..9f69f08 100644 --- a/frontend/src/app/pages/landing-page/embedded-federations/embedded-federations.component.html +++ b/frontend/src/app/pages/landing-page/embedded-federations/embedded-federations.component.html @@ -1,7 +1,7 @@

MIP network map

-

Active Federations

+

Federations

Access global pathology research networks. Connect with decentralized datasets across leading institutions for secure, collaborative analysis. diff --git a/frontend/src/app/pages/shared/footer/footer.component.css b/frontend/src/app/pages/shared/footer/footer.component.css index 6c17f8b..24ba7eb 100644 --- a/frontend/src/app/pages/shared/footer/footer.component.css +++ b/frontend/src/app/pages/shared/footer/footer.component.css @@ -129,8 +129,8 @@ } .chuv-link { - opacity: 0.62; - filter: grayscale(1) brightness(0.9) contrast(1.05); + opacity: 0.72; + filter: none; } .chuv-link:hover, @@ -147,8 +147,8 @@ } .chuv-logo { - max-height: 42px; - max-width: 54px; + max-height: 24px; + max-width: 132px; } .athena-logo { @@ -158,14 +158,54 @@ max-height: 28px; } -.footer-funding-badge { - display: flex; - align-items: center; - gap: 16px; +.footer-funding-section { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); } +.footer-funding-title { + margin-bottom: 16px; +} + +.footer-funding-logos { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 18px; +} + +.footer-funding-item { + position: relative; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; + min-width: 0; +} + +.footer-funding-item:focus-visible { + outline: 2px solid rgba(127, 156, 232, 0.48); + outline-offset: 6px; + border-radius: 8px; +} + +.footer-funding-visual { + display: inline-flex; + align-items: center; + justify-content: flex-start; + gap: 12px; + width: auto; + min-height: 0; + padding: 0; + border: none; + border-radius: 0; + background: transparent; + box-shadow: none; +} + +.footer-funding-visual-seri { + align-items: flex-start; +} + .footer-funding-flag { width: 56px; height: 38px; @@ -177,26 +217,96 @@ box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22); } -.footer-funding { +.footer-funding-box-name { + display: block; margin: 0; - display: flex; - flex-direction: column; - gap: 2px; - line-height: 1.45; + max-width: 17ch; + font-size: 0.84rem; + font-weight: 600; + line-height: 1.35; + color: rgba(255, 255, 255, 0.92); +} + +.footer-funding-box-name-seri { + max-width: 16ch; + font-size: 0.78rem; + line-height: 1.32; } -.footer-funding span:first-child { - font-size: 0.72rem; +.footer-funding-item:hover .footer-funding-box-name, +.footer-funding-item:focus-visible .footer-funding-box-name { + color: #fff; +} + +.seri-mark { + display: inline-flex; + align-items: center; + gap: 0; + min-width: 0; + flex-shrink: 0; +} + +.seri-mark-flag { + width: 24px; + height: 24px; + border-radius: 6px; + background: + linear-gradient(90deg, transparent 39%, #fff 39%, #fff 61%, transparent 61%), + linear-gradient(180deg, transparent 39%, #fff 39%, #fff 61%, transparent 61%), + #d52b1e; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 12px rgba(0, 0, 0, 0.14); +} + +.footer-funding-tooltip { + position: absolute; + left: 0; + bottom: calc(100% + 12px); + width: min(420px, calc(100vw - 48px)); + padding: 16px 18px; + border: 1px solid rgba(127, 156, 232, 0.24); + border-radius: 14px; + background: rgba(7, 13, 24, 0.98); + box-shadow: 0 18px 36px rgba(0, 0, 0, 0.36); + opacity: 0; + pointer-events: none; + transform: translateY(6px); + transition: opacity 0.18s ease, transform 0.18s ease; + z-index: 3; +} + +.footer-tooltip-title { + margin: 0 0 8px; + font-size: 0.67rem; font-weight: 700; - letter-spacing: 0.14em; + letter-spacing: 0.12em; text-transform: uppercase; - color: rgba(255, 255, 255, 0.46); + color: rgba(127, 156, 232, 0.86); } -.footer-funding span:last-child { - font-size: 0.98rem; - font-weight: 600; - color: rgba(255, 255, 255, 0.92); +.footer-tooltip-text { + margin: 0; + color: rgba(255, 255, 255, 0.9); + font-size: 0.83rem; + line-height: 1.6; +} + +.footer-funding-tooltip::after { + content: ''; + position: absolute; + left: 24px; + top: 100%; + width: 12px; + height: 12px; + background: rgba(7, 13, 24, 0.98); + border-right: 1px solid rgba(127, 156, 232, 0.24); + border-bottom: 1px solid rgba(127, 156, 232, 0.24); + transform: rotate(45deg) translateY(-6px); +} + +.footer-funding-item:hover .footer-funding-tooltip, +.footer-funding-item:focus-visible .footer-funding-tooltip { + opacity: 1; + transform: translateY(0); } .footer-bottom { @@ -224,6 +334,10 @@ border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.08); } + + .footer-funding-logos { + grid-template-columns: 1fr; + } } @media (max-width: 768px) { @@ -241,11 +355,15 @@ border-top: 1px solid rgba(255, 255, 255, 0.08); } - .footer-funding-badge { - align-items: center; + .footer-funding-visual { + gap: 10px; } .footer-bottom { padding: 20px 24px 28px; } + + .footer-funding-tooltip { + width: min(320px, calc(100vw - 56px)); + } } diff --git a/frontend/src/app/pages/shared/footer/footer.component.html b/frontend/src/app/pages/shared/footer/footer.component.html index ae6544a..682a1af 100644 --- a/frontend/src/app/pages/shared/footer/footer.component.html +++ b/frontend/src/app/pages/shared/footer/footer.component.html @@ -24,21 +24,51 @@

Powered by

- + - + - +
-
- European Union flag -

- Co-funded by - the European Union -

+
+

Co-funded by

+
+
+
+ European Union flag + European Union +
+ +
+
+
+ + + State Secretariat for Education, Research and Innovation + +
+ +
+
diff --git a/frontend/src/app/pages/shared/footer/footer.component.spec.ts b/frontend/src/app/pages/shared/footer/footer.component.spec.ts index 5dfaea8..75fef4d 100644 --- a/frontend/src/app/pages/shared/footer/footer.component.spec.ts +++ b/frontend/src/app/pages/shared/footer/footer.component.spec.ts @@ -40,22 +40,34 @@ describe('FooterComponent', () => { expect(fixture.nativeElement.textContent).not.toContain('Terms of Use'); }); - it('should render the EU co-funding badge instead of the old Horizon copy', () => { - const fundingFlag = fixture.nativeElement.querySelector('.footer-funding-flag') as HTMLImageElement | null; - const fundingText = fixture.nativeElement.querySelector('.footer-funding') as HTMLElement | null; + it('should render the EU co-funding item with the shared acknowledgement tooltip', () => { + const fundingFlag = fixture.nativeElement.querySelector('.footer-funding-item-eu .footer-funding-flag') as HTMLImageElement | null; + const fundingText = fixture.nativeElement.querySelector('.footer-funding-item-eu .footer-funding-box-name') as HTMLElement | null; + const fundingTooltip = fixture.nativeElement.querySelector('.footer-funding-item-eu .footer-funding-tooltip') as HTMLElement | null; - expect(fundingFlag?.getAttribute('src')).toBe('assets/home/eu-fund-logo.png'); + expect(fundingFlag?.getAttribute('src')).toBe('assets/footer/eu-flag.svg'); expect(fundingFlag?.getAttribute('alt')).toBe('European Union flag'); - expect(fundingText?.textContent).toContain('Co-funded by'); - expect(fundingText?.textContent).toContain('the European Union'); - expect(fixture.nativeElement.textContent).not.toContain('Horizon 2020 Framework Programme'); + expect(fundingText?.textContent).toContain('European Union'); + expect(fundingTooltip?.textContent).toContain('Human Brain Project'); + expect(fundingTooltip?.textContent).toContain('EBRAINS 2.0'); + expect(fundingTooltip?.textContent).toContain('23.00638'); + }); + + it('should render the SERI co-funding item with the shared acknowledgement tooltip', () => { + const seriFlag = fixture.nativeElement.querySelector('.footer-funding-item-seri .seri-mark-flag') as HTMLElement | null; + const seriText = fixture.nativeElement.querySelector('.footer-funding-item-seri .footer-funding-box-name-seri') as HTMLElement | null; + const seriTooltip = fixture.nativeElement.querySelector('.footer-funding-item-seri .footer-funding-tooltip') as HTMLElement | null; + + expect(seriFlag).toBeTruthy(); + expect(seriText?.textContent).toContain('State Secretariat for Education, Research and Innovation'); + expect(seriTooltip?.textContent).toContain('SERI contract No. 23.00638'); }); it('should use the updated CHUV mark in the partner row', () => { const chuvLogo = fixture.nativeElement.querySelector('.chuv-logo') as HTMLImageElement | null; - expect(chuvLogo?.getAttribute('src')).toBe('assets/home/logo_chuv_mark.svg'); + expect(chuvLogo?.getAttribute('src')).toBe('assets/footer/CHUV_Logo_Simple_BLANC.png'); expect(chuvLogo?.getAttribute('alt')).toBe('CHUV logo'); }); }); diff --git a/frontend/src/app/pages/shared/footer/footer.component.ts b/frontend/src/app/pages/shared/footer/footer.component.ts index 6b7645c..39ae9bf 100644 --- a/frontend/src/app/pages/shared/footer/footer.component.ts +++ b/frontend/src/app/pages/shared/footer/footer.component.ts @@ -1,13 +1,16 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; @Component({ selector: 'app-footer', standalone: true, imports: [], templateUrl: './footer.component.html', - styleUrl: './footer.component.css' + styleUrl: './footer.component.css', + changeDetection: ChangeDetectionStrategy.OnPush, }) export class FooterComponent { - currentYear = new Date().getFullYear(); + readonly currentYear = new Date().getFullYear(); + readonly fundingAcknowledgement = + 'This work was co-funded by the European Union’s Horizon 2020 Framework Partnership Agreement (No. 650003) for the Human Brain Project, and by the Horizon Europe research and innovation programme through the EBRAINS 2.0 project (grant agreement No. 101147319; SERI contract No. 23.00638).'; } diff --git a/frontend/src/assets/footer/CHUV_Logo_Simple_BLANC.png b/frontend/src/assets/footer/CHUV_Logo_Simple_BLANC.png new file mode 100644 index 0000000..28205b9 Binary files /dev/null and b/frontend/src/assets/footer/CHUV_Logo_Simple_BLANC.png differ diff --git a/frontend/src/assets/footer/athenarc.png b/frontend/src/assets/footer/athenarc.png new file mode 100644 index 0000000..ba62783 Binary files /dev/null and b/frontend/src/assets/footer/athenarc.png differ diff --git a/frontend/src/assets/footer/eu-flag.svg b/frontend/src/assets/footer/eu-flag.svg new file mode 100644 index 0000000..b23b36e --- /dev/null +++ b/frontend/src/assets/footer/eu-flag.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/footer/logo_ebrains.png b/frontend/src/assets/footer/logo_ebrains.png new file mode 100644 index 0000000..65def5e Binary files /dev/null and b/frontend/src/assets/footer/logo_ebrains.png differ diff --git a/frontend/src/assets/home/logo_chuv.png b/frontend/src/assets/home/logo_chuv.png index c27289f..28205b9 100644 Binary files a/frontend/src/assets/home/logo_chuv.png and b/frontend/src/assets/home/logo_chuv.png differ diff --git a/frontend/src/assets/home/logo_chuv_mark.svg b/frontend/src/assets/home/logo_chuv_mark.svg deleted file mode 100644 index 857ffa3..0000000 --- a/frontend/src/assets/home/logo_chuv_mark.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - -