Skip to content

Commit

Permalink
Merge pull request #4221 from rldhont/fix-css-pointer-coarse-docks
Browse files Browse the repository at this point in the history 
[Bugfix] CSS: display docks with pointer: coarse
  • Loading branch information
@rldhont
rldhont authored Feb 20, 2024
2 parents d36b652 + 759700d commit 519bb4e
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 10 deletions.
7 changes: 3 additions & 4 deletions lizmap/www/assets/css/media.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,8 +287,7 @@ only screen and ( max-device-height : 640px) {

#docks-wrapper{
left: -1px;
width: 80%;
padding-top: 45px;
width: 100%;
box-sizing: border-box;
}

Expand Down Expand Up @@ -412,8 +411,8 @@ only screen and ( max-device-height : 640px) {
background-image: url(images/glyphicons-halflings-white.png);
}

#right-dock{
margin: 0;
#dock{
margin-top: 45px;
}

.digitizing .btn {
Expand Down
64 changes: 58 additions & 6 deletions tests/end2end/playwright/viewport.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ test.describe('Viewport devicePixelRatio 1', () => {
// Check that the WMS Max Size has been well overwrite
expect(await page.evaluate(() => lizMap.mainLizmap.initialConfig.options.wmsMaxHeight)).toBe(950);
expect(await page.evaluate(() => window.devicePixelRatio)).toBe(1);
expect(await page.evaluate(() => lizMap.mainLizmap.map.getSize())).toStrictEqual([870,575]);
expect(await page.evaluate(() => lizMap.mainLizmap.map.getSize())).toStrictEqual([870, 575]);
await page.unroute('**/service/getProjectConfig*')

// Catch GetMaps request;
Expand All @@ -46,7 +46,7 @@ test.describe('Viewport devicePixelRatio 1', () => {
if (request.url().includes('GetMap')) {
GetMaps.push(request.url());
}
}, {times: 4});
}, { times: 4 });

// Activate world layer
await page.getByLabel('world').check();
Expand All @@ -56,7 +56,7 @@ test.describe('Viewport devicePixelRatio 1', () => {

// Check GetMap requests
expect(GetMaps).toHaveLength(4);
for(const GetMap of GetMaps) {
for (const GetMap of GetMaps) {
expect(GetMap).toContain('&WIDTH=790&')
expect(GetMap).toContain('&HEIGHT=575&')
expect(GetMap).toContain('&DPI=96&')
Expand Down Expand Up @@ -105,7 +105,7 @@ test.describe('Viewport devicePixelRatio 2', () => {
// Check that the WMS Max Size has been well overwrite
expect(await page.evaluate(() => lizMap.mainLizmap.initialConfig.options.wmsMaxHeight)).toBe(1900);
expect(await page.evaluate(() => window.devicePixelRatio)).toBe(2);
expect(await page.evaluate(() => lizMap.mainLizmap.map.getSize())).toStrictEqual([870,620]);
expect(await page.evaluate(() => lizMap.mainLizmap.map.getSize())).toStrictEqual([870, 620]);
await page.unroute('**/service/getProjectConfig*')

// Catch GetMaps request;
Expand All @@ -115,7 +115,7 @@ test.describe('Viewport devicePixelRatio 2', () => {
if (request.url().includes('GetMap')) {
GetMaps.push(request.url());
}
}, {times: 4});
}, { times: 4 });

// Activate world layer
await page.getByLabel('world').check();
Expand All @@ -125,11 +125,63 @@ test.describe('Viewport devicePixelRatio 2', () => {

// Check GetMap requests
expect(GetMaps).toHaveLength(4);
for(const GetMap of GetMaps) {
for (const GetMap of GetMaps) {
expect(GetMap).toContain('&WIDTH=870&')
expect(GetMap).toContain('&HEIGHT=620&')
expect(GetMap).toContain('&DPI=180&')
}
await page.unroute('**/service*')
})
})

test.describe('Viewport mobile', () => {
test.use({
hasTouch: true,
isMobile: true,
});
test('Display docks', async ({ page }) => {
// atlas project
const url = '/index.php/view/map/?repository=testsrepository&project=atlas'
// Go to the map
await page.goto(url, { waitUntil: 'networkidle' });

// Check menu and menu toggle button
await expect(await page.locator('#mapmenu')).not.toBeInViewport();
await expect(await page.locator('#menuToggle')).toBeVisible();
await expect(await page.locator('#menuToggle')).not.toHaveClass('opened');
await page.locator('#menuToggle').click();

// Open menu
await expect(await page.locator('#menuToggle')).toHaveClass('opened');
await expect(await page.locator('#mapmenu')).toBeInViewport();
await expect(await page.getByRole('link', { name: 'atlas' })).toBeVisible();

// Open atlas
await page.getByRole('link', { name: 'atlas', exact: true }).click();
await expect(await page.locator('#menuToggle')).not.toHaveClass('opened');
await expect(await page.locator('#mapmenu')).not.toBeInViewport();
await expect(await page.locator('#right-dock')).toBeVisible();
await expect(await page.locator('#right-dock')).toBeInViewport();

// Choose a feature and check getFeatureInfo
let getFeatureInfoRequestPromise = page.waitForRequest(request => request.method() === 'POST' && request?.postData().includes('GetFeatureInfo'));
await page.locator('#liz-atlas-select').selectOption('2');
let getFeatureInfoRequest = await getFeatureInfoRequestPromise;
let getFeatureInfoResponse = await getFeatureInfoRequest.response();
await expect(await getFeatureInfoResponse.headerValue('content-type')).toContain('text/html');
await expect(await page.locator('#liz-atlas-item-detail .lizmapPopupContent')).toBeInViewport();
await expect(await page.locator('#liz-atlas-item-detail .lizmapPopupContent')).toContainText('MOSSON');
// Close atlas
await page.locator('#right-dock-close').click();
await expect(await page.locator('#right-dock')).not.toBeInViewport();
await expect(await page.locator('#right-dock')).not.toBeVisible();

// Test permalink (mini-dock)
await expect(await page.locator('#permalink')).not.toBeVisible();
await page.locator('#menuToggle').click();
await page.getByRole('link', { name: 'Permalink' }).click();
await expect(await page.locator('#permalink')).toBeVisible();
await expect(await page.locator('#permalink')).toBeInViewport();
await expect(await page.locator('#tab-share-permalink')).toBeVisible();
})
})

0 comments on commit 519bb4e

Please sign in to comment.