[O2B-1639] Adapt the pagination to phones and tablets

lib/public/app.css

@@ -1073,6 +1073,54 @@ label {
     }
 }
 
+.pagination-bar {
+    font-size: 0.875rem;
+}
+
+/*
+ * Pagination on phones: everything stays on one line, the buttons to jump to the first and last pages and the page numbers far from
+ * the current one are removed, the other buttons are compacted to fit and the rows count is shortened to "first-last/total"
+ */
+.pagination-count-short {
+    display: none;
+}
+
+@media screen and (max-width: 767px) {
+    .pagination-count-long {
+        display: none;
+    }
+
+    .pagination-count-short {
+        display: inline;
+    }
+
+    .pagination-bar > .pagination-count {
+        gap: 0;
+    }
+
+    .pagination-bar > .pagination-amount {
+        width: auto;
+        white-space: nowrap;
+    }
+
+    .pagination-bar #pageMoveFirst,
+    .pagination-bar #pageMoveLast,
+    .pagination-bar #pageSelector .btn-tab:not(.near-page) {
+        display: none;
+    }
+
+    .pagination-bar #pageSelector .btn {
+        margin: 0 1px;
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
+    }
+
+    .pagination-bar > .pagination-amount .btn {
+        padding-left: 0.6em;
+        padding-right: 0.6em;
+    }
+}
+
 /* xl */
 @media screen and (min-width: 1920px) {
     .columns-3-xl {

lib/public/components/Pagination/amountSelector.js

@@ -143,7 +143,7 @@ const amountSelector = (paginationModel) =>
                         paginationModel.toggleAmountDropdownVisibility();
                     },
                 },
-                `Rows per page: ${paginationModel.isInfiniteScrollEnabled ? 'Infinite' : paginationModel.itemsPerPage} `,
+                `Rows: ${paginationModel.isInfiniteScrollEnabled ? 'Infinite' : paginationModel.itemsPerPage} `,
                 iconCaretTop(),
             ),
             h('.dropup-menu', mapAmounts(paginationModel)),

lib/public/components/Pagination/pageSelector.js

@@ -16,18 +16,30 @@ import { iconArrowThickLeft, iconArrowThickRight } from '/js/src/icons.js';
 
 const MAX_VISIBLE_PAGES = 5;
 
+const NEAR_PAGES_COUNT = 3;
+
 /**
  * Render the page buttons
+ *
+ * The buttons of the pages near the current one are flagged, to be the only ones displayed on small screens
+ *
  * @param {Array} pages An array of the page numbers that require buttons
  * @param {number} currentPage Index of the current page
+ * @param {number} pagesCount The total amount of pages available
  * @param {Function} onPageChange Function called when switching to a new page with its index as argument
  * @return {Array} A collection of vnodes containing the individual page buttons
  */
-const getPageButtons = (pages, currentPage, onPageChange) => pages.map((page) => h(
-    `button.btn.btn-tab.mh1${page === currentPage ? ' selected' : ''}#page${page}`,
-    { onclick: () => onPageChange(page) },
-    page,
-));
+const getPageButtons = (pages, currentPage, pagesCount, onPageChange) => {
+    const firstNearPage = Math.max(1, Math.min(currentPage - 1, pagesCount - NEAR_PAGES_COUNT + 1));
+    const lastNearPage = firstNearPage + NEAR_PAGES_COUNT - 1;
+
+    return pages.map((page) => {
+        const selectedClass = page === currentPage ? '.selected' : '';
+        const nearPageClass = page >= firstNearPage && page <= lastNearPage ? '.near-page' : '';
+
+        return h(`button.btn.btn-tab.mh1${selectedClass}${nearPageClass}#page${page}`, { onclick: () => onPageChange(page) }, page);
+    });
+};
 
 /**
  * Render the page selector component
@@ -42,11 +54,11 @@ const pageSelector = (currentPage, pagesCount, onPageChange) => {
 
     let pageButtons;
     if (pagesCount <= MAX_VISIBLE_PAGES) {
-        pageButtons = getPageButtons(pages, currentPage, onPageChange);
+        pageButtons = getPageButtons(pages, currentPage, pagesCount, onPageChange);
     } else {
         const frontBound = Math.min(Math.max(0, currentPage - MAX_VISIBLE_PAGES + 2), pagesCount - MAX_VISIBLE_PAGES);
         const rearBound = Math.min(Math.max(MAX_VISIBLE_PAGES, currentPage + MAX_VISIBLE_PAGES - 3), pagesCount);
-        pageButtons = getPageButtons(pages.slice(frontBound, rearBound), currentPage, onPageChange);
+        pageButtons = getPageButtons(pages.slice(frontBound, rearBound), currentPage, pagesCount, onPageChange);
     }
     return h(
         '.btn-group#pageSelector',

lib/public/components/Pagination/paginationComponent.js

@@ -68,19 +68,24 @@ export const paginationComponent = (pagination) => {
     // Trigger scroll once if the component has been loaded in infinite mode and the current scroll need more elements
     scrollListener();
 
+    // On small screens the message is shortened to "first-last/total"
     const itemsCountMessage = [
-        'Rows',
+        h('span.pagination-count-long', 'Rows'),
         // +1 because users expect indexing to start from 1
         h('strong#firstRowIndex', pagination.firstItemOffset + 1),
         '-',
         h('strong#lastRowIndex', Math.min(pagination.firstItemOffset + pagination.itemsPerPage, pagination.itemsCount)),
     ];
     if (pagination.itemsCount) {
-        itemsCountMessage.push('of', h('strong#totalRowsCount', pagination.itemsCount));
+        itemsCountMessage.push(
+            h('span.pagination-count-long', 'of'),
+            h('span.pagination-count-short', '/'),
+            h('strong#totalRowsCount', pagination.itemsCount),
+        );
     }
 
     return h(
-        '.flex-row.justify-between.pv3',
+        '.flex-row.justify-between.pv3.pagination-bar',
         {
 
             /**
@@ -118,7 +123,7 @@ export const paginationComponent = (pagination) => {
             },
         },
         [
-            h('.w-15', amountSelector(pagination)),
+            h('.w-15.pagination-amount', amountSelector(pagination)),
             !isInfiniteScrollEnabled && [
                 pageSelector(
                     currentPage,
@@ -127,7 +132,7 @@ export const paginationComponent = (pagination) => {
                         pagination.currentPage = page;
                     },
                 ),
-                h('.gray-darker.flex-row.g1', itemsCountMessage),
+                h('.gray-darker.flex-row.g1.pagination-count', itemsCountMessage),
             ],
         ],
     );

test/public/dataPasses/overviewPerLhcPeriod.test.js

@@ -149,7 +149,7 @@ module.exports = () => {
         await goToPage(page, 'data-passes-per-lhc-period-overview', { queryParameters: { lhcPeriodId: 2 } });
 
         // Expect the amount selector to currently be set to 9 (because of the defined page height)
-        await expectInnerText(page, '.dropup button', 'Rows per page: 9 ');
+        await expectInnerText(page, '.dropup button', 'Rows: 9 ');
 
         // Expect the dropdown options to be visible when it is selected
         await pressElement(page, '.dropup button');

test/public/dataPasses/overviewPerSimulationPass.test.js

@@ -89,7 +89,7 @@ module.exports = () => {
         await goToPage(page, 'data-passes-per-simulation-pass-overview', { queryParameters: { simulationPassId: 1 } });
 
         // Expect the amount selector to currently be set to 9 (because of the defined page height)
-        await expectInnerText(page, '.dropup button', 'Rows per page: 9 ');
+        await expectInnerText(page, '.dropup button', 'Rows: 9 ');
 
         // Expect the dropdown options to be visible when it is selected
         await pressElement(page, '.dropup button');

test/public/envs/overview.test.js

@@ -166,28 +166,34 @@ module.exports = () => {
     });
 
     it('dynamically switches between visible pages in the page selector', async () => {
-        // Override the amount of runs visible per page manually
-        await page.evaluate(() => {
-            // eslint-disable-next-line no-undef
-            model.envs.overviewModel.pagination.itemsPerPage = 1;
-        });
-        await waitForTableLength(page, 1);
-
-        // Expect the page five button to now be visible, but no more than that
-        await page.waitForSelector('#page5');
-        await page.waitForSelector('#page6', { hidden: true });
-
-        // Expect the page one button to have fallen away when clicking on page five button
-        await pressElement(page, '#page5');
-        await page.waitForSelector('#page1', { hidden: true });
-
-        await page.evaluate(() => {
-            // eslint-disable-next-line no-undef
-            model.envs.overviewModel.pagination.reset();
-            // eslint-disable-next-line no-undef
-            model.envs.overviewModel.pagination.notify();
-        });
-    });
+        // The page selector of phones (screens narrower than 768px) only displays the three page buttons nearest to the current one
+        const viewport = page.viewport();
+        await page.setViewport({ ...viewport, width: 800 });
+        try {
+            // Override the amount of runs visible per page manually
+            await page.evaluate(() => {
+                // eslint-disable-next-line no-undef
+                model.envs.overviewModel.pagination.itemsPerPage = 1;
+            });
+            await waitForTableLength(page, 1);
+
+            // Expect the page five button to now be visible, but no more than that
+            await page.waitForSelector('#page5');
+            await page.waitForSelector('#page6', { hidden: true });
+
+            // Expect the page one button to have fallen away when clicking on page five button
+            await pressElement(page, '#page5');
+            await page.waitForSelector('#page1', { hidden: true });
+
+            await page.evaluate(() => {
+                // eslint-disable-next-line no-undef
+                model.envs.overviewModel.pagination.reset();
+                // eslint-disable-next-line no-undef
+                model.envs.overviewModel.pagination.notify();
+            });
+        } finally {
+            await page.setViewport(viewport);
+        }    });
 
     it('should successfully display the list of related runs as hyperlinks to their details page', async () => {
         await waitForNavigation(page, () => pressElement(page, 'a#env-overview', true));

test/public/flps/overview.test.js

@@ -135,7 +135,7 @@ module.exports = () => {
 
     it('can set how many flps are available per page', async () => {
         // Expect the amount selector to currently be set to Infinite (after the previous test)
-        await expectInnerText(page, `${amountSelectorSelector} button`, 'Rows per page: Infinite ');
+        await expectInnerText(page, `${amountSelectorSelector} button`, 'Rows: Infinite ');
 
         await pressElement(page, `${amountSelectorSelector} button`);
         await page.waitForSelector(`${amountSelectorSelector} .dropup-menu`);
@@ -146,20 +146,26 @@ module.exports = () => {
     });
 
     it('dynamically switches between visible pages in the page selector', async () => {
-        await pressElement(page, amountSelectorButtonSelector);
-        await fillInput(page, `${amountSelectorSelector} input`, '1', ['input', 'change']);
-        await waitForTableLength(page, 1);
-
-        // Expect the page five button to now be visible, but no more than that
-        const pageFiveButton = await page.$('#page5');
-        expect(Boolean(pageFiveButton)).to.be.true;
-        const pageSixButton = await page.$('#page6');
-        expect(Boolean(pageSixButton)).to.be.false;
-
-        // Expect the page one button to have fallen away when clicking on page five button
-        await pressElement(page, '#page5');
-        await page.waitForSelector('#page1', { hidden: true });
-    });
+        // The page selector of phones (screens narrower than 768px) only displays the three page buttons nearest to the current one
+        const viewport = page.viewport();
+        await page.setViewport({ ...viewport, width: 800 });
+        try {
+            await pressElement(page, amountSelectorButtonSelector);
+            await fillInput(page, `${amountSelectorSelector} input`, '1', ['input', 'change']);
+            await waitForTableLength(page, 1);
+
+            // Expect the page five button to now be visible, but no more than that
+            const pageFiveButton = await page.$('#page5');
+            expect(Boolean(pageFiveButton)).to.be.true;
+            const pageSixButton = await page.$('#page6');
+            expect(Boolean(pageSixButton)).to.be.false;
+
+            // Expect the page one button to have fallen away when clicking on page five button
+            await pressElement(page, '#page5');
+            await page.waitForSelector('#page1', { hidden: true });
+        } finally {
+            await page.setViewport(viewport);
+        }    });
 
     it('notifies if table loading returned an error', async () => {
         await pressElement(page, amountSelectorButtonSelector);

test/public/lhcFills/overview.test.js

@@ -210,29 +210,35 @@ module.exports = () => {
     });
 
     it('dynamically switches between visible pages in the page selector', async () => {
-        await goToPage(page, 'lhc-fill-overview');
-
-        // turn off Stable Beams Only filter
-        await pressElement(page, '.slider.round');
-
+        // The page selector of phones (screens narrower than 768px) only displays the three page buttons nearest to the current one
+        const viewport = page.viewport();
+        await page.setViewport({ ...viewport, width: 800 });
+        try {
+            await goToPage(page, 'lhc-fill-overview');
 
-        // Override the amount of lhc fills visible per page manually
-        await page.evaluate(() => {
-            // eslint-disable-next-line no-undef
-            model.lhcFills.overviewModel.pagination.itemsPerPage = 1;
-        });
-        await waitForTableLength(page, 1);
+            // turn off Stable Beams Only filter
+            await pressElement(page, '.slider.round');
 
-        // Expect the page five button to now be visible, but no more than that
-        const pageFiveButton = await page.$('#page5');
-        expect(pageFiveButton).to.be.not.null;
-        const pageSixButton = await page.$('#page6');
-        expect(pageSixButton).to.be.null;
 
-        // Expect the page one button to have fallen away when clicking on page five button
-        await pressElement(page, '#page5');
-        await page.waitForSelector('#page1', { hidden: true });
-    });
+            // Override the amount of lhc fills visible per page manually
+            await page.evaluate(() => {
+                // eslint-disable-next-line no-undef
+                model.lhcFills.overviewModel.pagination.itemsPerPage = 1;
+            });
+            await waitForTableLength(page, 1);
+
+            // Expect the page five button to now be visible, but no more than that
+            const pageFiveButton = await page.$('#page5');
+            expect(pageFiveButton).to.be.not.null;
+            const pageSixButton = await page.$('#page6');
+            expect(pageSixButton).to.be.null;
+
+            // Expect the page one button to have fallen away when clicking on page five button
+            await pressElement(page, '#page5');
+            await page.waitForSelector('#page1', { hidden: true });
+        } finally {
+            await page.setViewport(viewport);
+        }    });
 
     it('should successfully navigate to the LHC fill details page', async () => {
         await goToPage(page, 'lhc-fill-overview');

test/public/lhcPeriods/overview.test.js

@@ -86,7 +86,7 @@ module.exports = () => {
         await goToPage(page, 'lhc-period-overview');
 
         // Expect the amount selector to currently be set to 11 (because of the defined page height)
-        await expectInnerText(page, '.dropup button', 'Rows per page: 11 ');
+        await expectInnerText(page, '.dropup button', 'Rows: 11 ');
 
         // Expect the dropdown options to be visible when it is selected
         await pressElement(page, '.dropup button');
@@ -96,7 +96,7 @@ module.exports = () => {
 
         // Expect the amount selector to currently be set to 5 when the first option (5) is selected
         await pressElement(page, '.dropup .menu-item');
-        await expectInnerText(page, '.dropup button', 'Rows per page: 5 ');
+        await expectInnerText(page, '.dropup button', 'Rows: 5 ');
         await waitForTableLength(page, 3);
 
         // Expect the custom per page input to have red border and text color if wrong value typed