fix(attestation): sticky header don't overlap above preview

This commit is contained in:
Colin Darie 2024-06-20 11:08:05 +02:00
parent 666b51fa9c
commit 617c0e4c8f
No known key found for this signature in database
GPG key ID: 4FB865FDBCA4BCC4
2 changed files with 44 additions and 1 deletions

View file

@ -0,0 +1,43 @@
import { ApplicationController } from './application_controller';
export class StickyTopController extends ApplicationController {
// Ajusts top of sticky top components when there is a sticky header.
connect(): void {
const header = document.getElementById('sticky-header');
if (!header) {
return;
}
this.adjustTop(header);
window.addEventListener('resize', () => this.adjustTop(header));
this.listenHeaderMutations(header);
}
private listenHeaderMutations(header: HTMLElement) {
const config = { childList: true, subtree: true };
const callback: MutationCallback = (mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
this.adjustTop(header);
break;
}
}
};
const observer = new MutationObserver(callback);
observer.observe(header, config);
}
private adjustTop(header: HTMLElement) {
const headerHeight = header.clientHeight;
if (headerHeight > 0) {
(this.element as HTMLElement).style.top = `${headerHeight + 8}px`;
}
}
}

View file

@ -120,7 +120,7 @@
- c.with_hint { "Exemple: 20 avenue de Ségur, 75007 Paris" } - c.with_hint { "Exemple: 20 avenue de Ségur, 75007 Paris" }
#preview-column.fr-col-12.fr-col-lg-5.fr-background-alt--blue-france #preview-column.fr-col-12.fr-col-lg-5.fr-background-alt--blue-france
.sticky--top.fr-px-1w .sticky--top.fr-px-1w{ data: { controller: "sticky-top" } }
.flex.justify-between.align-center .flex.justify-between.align-center
%h2.fr-h4 Aperçu %h2.fr-h4 Aperçu
%p= link_to 'Prévisualiser en taille réelle', admin_procedure_attestation_template_v2_path(@procedure, format: :pdf), class: 'fr-link', target: '_blank', rel: 'noopener' %p= link_to 'Prévisualiser en taille réelle', admin_procedure_attestation_template_v2_path(@procedure, format: :pdf), class: 'fr-link', target: '_blank', rel: 'noopener'