Skip to content

Commit 584c3d4

Browse files
bt1142msstatebt1142msstate
committed
Polish tablet display filters sheet
1 parent de005ab commit 584c3d4

4 files changed

Lines changed: 69 additions & 4 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<meta http-equiv="Expires" content="0">
1212
<title>Library Item Reports</title>
1313
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
14-
<link href="styles/app.css?v=88" rel="stylesheet">
14+
<link href="styles/app.css?v=89" rel="stylesheet">
1515
<link rel="icon" href="data:,">
1616
</head>
1717
<body class="relative min-h-screen overflow-x-hidden overflow-y-auto pt-16 px-6 pb-6" id="page-body">

‎styles/app.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@import url("./base.css?v=11");
33
@import url("./help.css?v=6");
44
@import url("./bubbles.css?v=4");
5-
@import url("./filters.css?v=25");
5+
@import url("./filters.css?v=26");
66
@import url("./form-mode.css?v=32");
77
@import url("./table.css?v=48");
88
@import url("./controls.css?v=5");

‎styles/filters.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1505,4 +1505,53 @@
15051505
width: 2.35rem;
15061506
height: 2.35rem;
15071507
}
1508+
1509+
}
1510+
1511+
@media (min-width: 700px) and (max-width: 1180px) {
1512+
body.mobile-filter-panel-open #filter-side-panel {
1513+
max-width: min(58rem, calc(100vw - 1.5rem));
1514+
margin-inline: auto;
1515+
}
1516+
1517+
#filter-panel-body {
1518+
display: grid;
1519+
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
1520+
grid-template-rows: minmax(0, 1fr);
1521+
align-items: stretch;
1522+
overflow: hidden;
1523+
}
1524+
1525+
#filter-panel-body .fp-section {
1526+
align-self: stretch;
1527+
height: 100%;
1528+
max-height: 100%;
1529+
min-height: 0;
1530+
overflow-y: auto;
1531+
overscroll-behavior: contain;
1532+
-webkit-overflow-scrolling: touch;
1533+
}
1534+
1535+
#filter-panel-body .fp-display-section {
1536+
grid-column: 1;
1537+
grid-row: 1;
1538+
}
1539+
1540+
#filter-panel-body .fp-filters-section {
1541+
grid-column: 2;
1542+
grid-row: 1;
1543+
}
1544+
1545+
#filter-panel-body .fp-section-divider {
1546+
display: none;
1547+
}
1548+
1549+
.fp-section-header {
1550+
position: sticky;
1551+
top: 0;
1552+
z-index: 1;
1553+
padding-bottom: 0.45rem;
1554+
background: rgba(255, 255, 255, 0.96);
1555+
backdrop-filter: blur(12px);
1556+
}
15081557
}

‎tests/browser/browserSmoke.mjs‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1936,17 +1936,30 @@ async function exerciseTabletLandscapeMobileParity(page, queryApiStub) {
19361936
await page.locator('[data-mobile-table-action="fields-panel"]').click();
19371937
await page.waitForFunction(() => document.body.classList.contains('mobile-filter-panel-open'), null, { timeout: 5000 });
19381938
await expectElementWithinViewport(page, '#filter-side-panel', 'Tablet landscape display and filters sheet');
1939-
await expectOverlayConsumesScroll(page, '#filter-panel-body', 'Tablet landscape display and filters sheet');
1939+
await expectOverlayConsumesScroll(page, '#filter-panel-body .fp-display-section', 'Tablet landscape display and filters sheet');
19401940
await expectNoHorizontalOverflow(page, 'Tablet landscape display and filters sheet');
19411941
const filterSheetMetrics = await page.locator('#filter-side-panel').evaluate(element => {
19421942
const rect = element.getBoundingClientRect();
1943-
const bodyRect = document.querySelector('#filter-panel-body')?.getBoundingClientRect();
1943+
const body = document.querySelector('#filter-panel-body');
1944+
const bodyRect = body?.getBoundingClientRect();
1945+
const bodyStyle = body ? window.getComputedStyle(body) : null;
1946+
const sections = Array.from(body?.querySelectorAll('.fp-section') || []).map(section => {
1947+
const sectionRect = section.getBoundingClientRect();
1948+
return {
1949+
height: sectionRect.height,
1950+
overflowY: window.getComputedStyle(section).overflowY,
1951+
scrollHeight: section.scrollHeight
1952+
};
1953+
});
19441954
return {
19451955
bodyHeight: bodyRect?.height || 0,
1956+
bodyColumns: bodyStyle ? bodyStyle.gridTemplateColumns.split(' ').filter(Boolean).length : 0,
19461957
bottomGap: Math.abs(window.innerHeight - rect.bottom),
19471958
left: rect.left,
19481959
position: window.getComputedStyle(element).position,
19491960
right: rect.right,
1961+
sectionCount: sections.length,
1962+
sections,
19501963
top: rect.top,
19511964
viewportHeight: window.innerHeight,
19521965
viewportWidth: window.innerWidth
@@ -1959,6 +1972,9 @@ async function exerciseTabletLandscapeMobileParity(page, queryApiStub) {
19591972
|| filterSheetMetrics.top < 48
19601973
|| filterSheetMetrics.bottomGap > 24
19611974
|| filterSheetMetrics.bodyHeight < filterSheetMetrics.viewportHeight * 0.46
1975+
|| filterSheetMetrics.bodyColumns !== 2
1976+
|| filterSheetMetrics.sectionCount < 2
1977+
|| filterSheetMetrics.sections.some(section => section.overflowY === 'visible' || section.height < filterSheetMetrics.bodyHeight * 0.82)
19621978
) {
19631979
throw new Error(`Tablet landscape display and filters should remain a usable mobile sheet: ${JSON.stringify(filterSheetMetrics)}`);
19641980
}

0 commit comments

Comments
 (0)