fix(core/basic-navigation): increase content width to 100% (#571)

siemens · Jun 2, 2023 · adbb655 · adbb655
1 parent 9a37cff
commit adbb655
Show file tree

Hide file tree

Showing 10 changed files with 137 additions and 2 deletions.
diff --git a/packages/core/src/components/basic-navigation/basic-navigation.scss b/packages/core/src/components/basic-navigation/basic-navigation.scss
@@ -22,7 +22,7 @@
   .content {
     display: flex;
     height: calc(100% - 2.75rem);
-    width: calc(100% - 4rem);
+    width: calc(100% - 3.25rem);
     position: relative;
     margin-left: 3.25rem;
     overflow: auto;

diff --git a/packages/core/src/components/my-component/my-component.scss b/packages/core/src/components/my-component/my-component.scss
@@ -14,5 +14,5 @@
   position: relative;
   width: 100vw;
   height: 100vh;
-  padding: 1rem 0rem 0rem 1rem;
+  padding: 0rem 0rem 0rem 0rem;
 }
diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts
@@ -16,6 +16,11 @@ regressionTest.describe('basic navigation', () => {
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
 
+  regressionTest('content width', async ({ page }) => {
+    await page.goto('basic-navigation/content-width');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
   regressionTest('expanded', async ({ page }) => {
     await page.goto('basic-navigation/basic');
     await page.locator('ix-menu ix-burger-menu').click();

diff --git a/...pshots/basic-navigation-content-width-1-chromium---theme-classic-dark-linux.png b/...pshots/basic-navigation-content-width-1-chromium---theme-classic-dark-linux.png
diff --git a/...shots/basic-navigation-content-width-1-chromium---theme-classic-light-linux.png b/...shots/basic-navigation-content-width-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/basic-navigation/content-width/index.html b/packages/core/src/tests/basic-navigation/content-width/index.html
@@ -0,0 +1,60 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <style>
+    main {
+      position: relative;
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: red;
+    }
+  </style>
+  <body>
+    <ix-basic-navigation application-name="Test application!">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 184.567 138"
+        slot="logo"
+      >
+        <defs>
+          <linearGradient
+            id="x05mhzd7ga"
+            x1=".5"
+            x2=".5"
+            y2="1"
+            gradientUnits="objectBoundingBox"
+          >
+            <stop offset="0" stop-color="#00ffb9" />
+            <stop offset="1" stop-color="#0cc" />
+          </linearGradient>
+        </defs>
+        <path
+          data-name="Vereinigungsmenge 41"
+          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"
+          style="fill: url(#x05mhzd7ga)"
+        />
+      </svg>
+      <ix-menu>
+        <ix-menu-item tab-icon="star">Item 1</ix-menu-item>
+        <ix-menu-item tab-icon="print">Item 2</ix-menu-item>
+      </ix-menu>
+      <main>Example content</main>
+    </ix-basic-navigation>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/map-navigation/content-width/index.html b/packages/core/src/tests/map-navigation/content-width/index.html
@@ -0,0 +1,65 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+    <style>
+      .main {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 100%;
+        background-color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <ix-map-navigation
+      application-name="Test Application"
+      navigation-title="Some other content"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 184.567 138"
+        slot="logo"
+      >
+        <defs>
+          <linearGradient
+            id="x05mhzd7ga"
+            x1=".5"
+            x2=".5"
+            y2="1"
+            gradientUnits="objectBoundingBox"
+          >
+            <stop offset="0" stop-color="#00ffb9" />
+            <stop offset="1" stop-color="#0cc" />
+          </linearGradient>
+        </defs>
+        <path
+          data-name="Vereinigungsmenge 41"
+          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"
+          style="fill: url(#x05mhzd7ga)"
+        />
+      </svg>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
+        <ix-menu-item>Item 3</ix-menu-item>
+      </ix-menu>
+      <div slot="sidebar-content">Sidebar content</div>
+      <div class="main">Sidebar content</div>
+    </ix-map-navigation>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/map-navigation/map-navigation.e2e.ts b/packages/core/src/tests/map-navigation/map-navigation.e2e.ts
@@ -15,4 +15,9 @@ regressionTest.describe('map-navigation', () => {
     await page.goto('map-navigation/basic');
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
+
+  regressionTest('content-width', async ({ page }) => {
+    await page.goto('map-navigation/content-width');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
 });
diff --git a/...napshots/map-navigation-content-width-1-chromium---theme-classic-dark-linux.png b/...napshots/map-navigation-content-width-1-chromium---theme-classic-dark-linux.png
diff --git a/...apshots/map-navigation-content-width-1-chromium---theme-classic-light-linux.png b/...apshots/map-navigation-content-width-1-chromium---theme-classic-light-linux.png