DGNum/demarches-normaliennes
14
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

fix(table): adjust border size depending on devicePixelRatio [which depends on page zoom level] so we do not lose table cell borders

Browse source
This commit is contained in:
mfo 2024-11-25 17:08:23 +01:00
parent 0c6dbc86f0
commit 16ee0ca934
No known key found for this signature in database
GPG key ID: 7CE3E1F5B794A8EC
2 changed files with 21 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
app/javascript/controllers/fix_table_border_controller.ts Normal file
View file

@ -0,0 +1,20 @@
import { ApplicationController } from './application_controller';
export class FixTableBorderController extends ApplicationController {
connect() {
const pixelSize = Math.round((1 / window.devicePixelRatio) * 100) / 100;
// Safari does not support devicePixelRatio
if (navigator.userAgent.indexOf('Safari') > -1) {
return;
}
const fix = document.createElement('style');
fix.innerText = `
.fr-table.fr-table--bordered .fr-table__content th,
.fr-table.fr-table--bordered .fr-table__content td {
background-size: 100% ${pixelSize}px, ${pixelSize}px 100%}
}`;
document.body.appendChild(fix);
}
}

2
app/views/layouts/application.html.haml
View file

@ -31,7 +31,7 @@
= yield(:invisible_captcha_styles)
= render partial: 'layouts/setup_theme'
%body{ { id: content_for(:page_id), class: browser.platform.ios? ? 'ios' : nil, data: { controller: 'turbo number-input' } }.compact }
%body{ { id: content_for(:page_id), class: browser.platform.ios? ? 'ios' : nil, data: { controller: 'turbo number-input fix-table-border' } }.compact }
= render partial: 'layouts/skiplinks'
= render partial: 'layouts/display_theme_modal'