Skip to content

Commit 0b4abd9

Browse files
daniellerouxdanielleroux
committed
fix(core/basic-navigation): increase content width to 100% (#571)
1 parent 79489fc commit 0b4abd9

10 files changed

+137
-2
lines changed

‎packages/core/src/components/basic-navigation/basic-navigation.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
.content {
2323
display: flex;
2424
height: calc(100% - 2.75rem);
25-
width: calc(100% - 4rem);
25+
width: calc(100% - 3.25rem);
2626
position: relative;
2727
margin-left: 3.25rem;
2828
overflow: auto;

‎packages/core/src/components/my-component/my-component.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,5 @@
1414
position: relative;
1515
width: 100vw;
1616
height: 100vh;
17-
padding: 1rem 0rem 0rem 1rem;
17+
padding: 0rem 0rem 0rem 0rem;
1818
}

‎packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts

+5
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ regressionTest.describe('basic navigation', () => {
1616
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
1717
});
1818

19+
regressionTest('content width', async ({ page }) => {
20+
await page.goto('basic-navigation/content-width');
21+
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
22+
});
23+
1924
regressionTest('expanded', async ({ page }) => {
2025
await page.goto('basic-navigation/basic');
2126
await page.locator('ix-menu ix-burger-menu').click();

‎packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-dark-linux.png

11.2 KB
Loading

‎packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-light-linux.png

11 KB
Loading

‎packages/core/src/tests/basic-navigation/content-width/index.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!--
2+
SPDX-FileCopyrightText: 2023 Siemens AG
3+
4+
SPDX-License-Identifier: MIT
5+
-->
6+
7+
<html>
8+
<head>
9+
<meta charset="utf-8" />
10+
<meta
11+
name="viewport"
12+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
13+
/>
14+
<title>Stencil Component Starter</title>
15+
</head>
16+
<style>
17+
main {
18+
position: relative;
19+
display: block;
20+
width: 100%;
21+
height: 100%;
22+
background-color: red;
23+
}
24+
</style>
25+
<body>
26+
<ix-basic-navigation application-name="Test application!">
27+
<svg
28+
xmlns="http://www.w3.org/2000/svg"
29+
width="32"
30+
height="32"
31+
viewBox="0 0 184.567 138"
32+
slot="logo"
33+
>
34+
<defs>
35+
<linearGradient
36+
id="x05mhzd7ga"
37+
x1=".5"
38+
x2=".5"
39+
y2="1"
40+
gradientUnits="objectBoundingBox"
41+
>
42+
<stop offset="0" stop-color="#00ffb9" />
43+
<stop offset="1" stop-color="#0cc" />
44+
</linearGradient>
45+
</defs>
46+
<path
47+
data-name="Vereinigungsmenge 41"
48+
d="M0 126c0-.337.014-.67.041-1H0V60a12 12 0 1 1 24 0v65h-.042c.027.329.042.663.042 1a12 12 0 0 1-24 0zm50.944 8.052a12 12 0 0 1 0-16.969L99.027 69 50.944 20.919A12 12 0 0 1 67.915 3.947L116 52.03l48.083-48.084a12 12 0 0 1 16.969 16.971L132.969 69l48.084 48.084a12 12 0 0 1-16.969 16.971L116 85.971l-48.085 48.082a12 12 0 0 1-16.971 0zM0 12a12 12 0 1 1 12 12A12 12 0 0 1 0 12z"
49+
style="fill: url(#x05mhzd7ga)"
50+
/>
51+
</svg>
52+
<ix-menu>
53+
<ix-menu-item tab-icon="star">Item 1</ix-menu-item>
54+
<ix-menu-item tab-icon="print">Item 2</ix-menu-item>
55+
</ix-menu>
56+
<main>Example content</main>
57+
</ix-basic-navigation>
58+
<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
59+
</body>
60+
</html>

‎packages/core/src/tests/map-navigation/content-width/index.html

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!--
2+
SPDX-FileCopyrightText: 2023 Siemens AG
3+
4+
SPDX-License-Identifier: MIT
5+
-->
6+
7+
<html>
8+
<head>
9+
<meta charset="utf-8" />
10+
<meta
11+
name="viewport"
12+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
13+
/>
14+
<title>Stencil Component Starter</title>
15+
<style>
16+
.main {
17+
position: relative;
18+
display: block;
19+
width: 100%;
20+
height: 100%;
21+
background-color: red;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<ix-map-navigation
27+
application-name="Test Application"
28+
navigation-title="Some other content"
29+
>
30+
<svg
31+
xmlns="http://www.w3.org/2000/svg"
32+
width="32"
33+
height="32"
34+
viewBox="0 0 184.567 138"
35+
slot="logo"
36+
>
37+
<defs>
38+
<linearGradient
39+
id="x05mhzd7ga"
40+
x1=".5"
41+
x2=".5"
42+
y2="1"
43+
gradientUnits="objectBoundingBox"
44+
>
45+
<stop offset="0" stop-color="#00ffb9" />
46+
<stop offset="1" stop-color="#0cc" />
47+
</linearGradient>
48+
</defs>
49+
<path
50+
data-name="Vereinigungsmenge 41"
51+
d="M0 126c0-.337.014-.67.041-1H0V60a12 12 0 1 1 24 0v65h-.042c.027.329.042.663.042 1a12 12 0 0 1-24 0zm50.944 8.052a12 12 0 0 1 0-16.969L99.027 69 50.944 20.919A12 12 0 0 1 67.915 3.947L116 52.03l48.083-48.084a12 12 0 0 1 16.969 16.971L132.969 69l48.084 48.084a12 12 0 0 1-16.969 16.971L116 85.971l-48.085 48.082a12 12 0 0 1-16.971 0zM0 12a12 12 0 1 1 12 12A12 12 0 0 1 0 12z"
52+
style="fill: url(#x05mhzd7ga)"
53+
/>
54+
</svg>
55+
<ix-menu>
56+
<ix-menu-item>Item 1</ix-menu-item>
57+
<ix-menu-item>Item 2</ix-menu-item>
58+
<ix-menu-item>Item 3</ix-menu-item>
59+
</ix-menu>
60+
<div slot="sidebar-content">Sidebar content</div>
61+
<div class="main">Sidebar content</div>
62+
</ix-map-navigation>
63+
<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
64+
</body>
65+
</html>

‎packages/core/src/tests/map-navigation/map-navigation.e2e.ts

+5
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,9 @@ regressionTest.describe('map-navigation', () => {
1515
await page.goto('map-navigation/basic');
1616
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
1717
});
18+
19+
regressionTest('content-width', async ({ page }) => {
20+
await page.goto('map-navigation/content-width');
21+
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
22+
});
1823
});

‎packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-content-width-1-chromium---theme-classic-dark-linux.png

18.1 KB
Loading

‎packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-content-width-1-chromium---theme-classic-light-linux.png

17.7 KB
Loading

0 commit comments

Comments
 (0)