feat(core/application): application full height (#1613)

Co-authored-by: Lukas Maurer <[email protected]>
siemens · Dec 11, 2024 · b3846c9 · b3846c9
1 parent 5e7ba49
commit b3846c9
Show file tree

Hide file tree

Showing 66 changed files with 8 additions and 595 deletions.
diff --git a/.changeset/silly-carrots-complain.md b/.changeset/silly-carrots-complain.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix": major
+---
+
+__ix-application__ now utilizes full viewport height and full viewport width
diff --git a/packages/angular-test-app/src/preview-examples/about-and-legal.css b/packages/angular-test-app/src/preview-examples/about-and-legal.css
diff --git a/packages/angular-test-app/src/preview-examples/about-and-legal.ts b/packages/angular-test-app/src/preview-examples/about-and-legal.ts
@@ -12,7 +12,6 @@ import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './about-and-legal.html',
-  styleUrls: ['./about-and-legal.css'],
 })
 export default class AboutAndLegal implements AfterViewInit {
   @ViewChild('menu', { read: ElementRef })

diff --git a/packages/angular-test-app/src/preview-examples/application-app-switch.css b/packages/angular-test-app/src/preview-examples/application-app-switch.css
diff --git a/packages/angular-test-app/src/preview-examples/application-app-switch.ts b/packages/angular-test-app/src/preview-examples/application-app-switch.ts
@@ -13,7 +13,6 @@ import { AppSwitchConfiguration } from '@siemens/ix';
 @Component({
   selector: 'app-example',
   templateUrl: './application-app-switch.html',
-  styleUrls: ['./application-app-switch.css'],
 })
 export default class ApplicationAppSwitchExample {
   appSwitchConfig: AppSwitchConfiguration = {

diff --git a/packages/angular-test-app/src/preview-examples/application-breakpoints.css b/packages/angular-test-app/src/preview-examples/application-breakpoints.css
diff --git a/packages/angular-test-app/src/preview-examples/application-breakpoints.ts b/packages/angular-test-app/src/preview-examples/application-breakpoints.ts
@@ -11,7 +11,6 @@ import { Breakpoint } from '@siemens/ix';
 
 @Component({
   selector: 'app-example',
-  styleUrls: ['./application-breakpoints.css'],
   templateUrl: './application-breakpoints.html',
 })
 export default class ApplicationBreakpointExample {

diff --git a/packages/angular-test-app/src/preview-examples/application.css b/packages/angular-test-app/src/preview-examples/application.css
diff --git a/packages/angular-test-app/src/preview-examples/application.ts b/packages/angular-test-app/src/preview-examples/application.ts
@@ -12,6 +12,5 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './application.html',
-  styleUrls: ['./application.css'],
 })
 export default class ApplicationExample {}
diff --git a/packages/angular-test-app/src/preview-examples/menu-category.css b/packages/angular-test-app/src/preview-examples/menu-category.css
diff --git a/packages/angular-test-app/src/preview-examples/menu-category.ts b/packages/angular-test-app/src/preview-examples/menu-category.ts
@@ -12,6 +12,5 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './menu-category.html',
-  styleUrls: ['./menu-category.css'],
 })
 export default class MenuCategory {}
diff --git a/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.css b/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.css
diff --git a/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.ts b/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.ts
@@ -17,6 +17,5 @@ import { Component } from '@angular/core';
       <ix-menu-item tab-icon="info" slot="bottom"> Bottom tab </ix-menu-item>
     </ix-menu>
   `,
-  styleUrls: ['./menu-with-bottom-tabs.css'],
 })
 export default class VerticalTabs {}
diff --git a/packages/angular-test-app/src/preview-examples/popover-news.css b/packages/angular-test-app/src/preview-examples/popover-news.css
diff --git a/packages/angular-test-app/src/preview-examples/popover-news.ts b/packages/angular-test-app/src/preview-examples/popover-news.ts
@@ -12,6 +12,5 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './popover-news.html',
-  styleUrls: ['./popover-news.css'],
 })
 export default class PopoverNews {}
diff --git a/packages/angular-test-app/src/preview-examples/settings.css b/packages/angular-test-app/src/preview-examples/settings.css
diff --git a/packages/angular-test-app/src/preview-examples/settings.ts b/packages/angular-test-app/src/preview-examples/settings.ts
@@ -12,7 +12,6 @@ import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './settings.html',
-  styleUrls: ['./settings.css'],
 })
 export default class Settings implements AfterViewInit {
   @ViewChild('menu', { read: ElementRef })

diff --git a/packages/core/src/components/application/application.scss b/packages/core/src/components/application/application.scss
@@ -14,8 +14,8 @@
 
   display: flex;
   position: relative;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
 
   flex-direction: column;
 

diff --git a/packages/html-test-app/src/preview-examples/about-and-legal.css b/packages/html-test-app/src/preview-examples/about-and-legal.css
diff --git a/packages/html-test-app/src/preview-examples/about-and-legal.html b/packages/html-test-app/src/preview-examples/about-and-legal.html
@@ -13,7 +13,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>About and legal example</title>
-    <link rel="stylesheet" href="./about-and-legal.css" />
   </head>
   <body>
     <ix-application>

diff --git a/packages/html-test-app/src/preview-examples/application-app-switch.css b/packages/html-test-app/src/preview-examples/application-app-switch.css
diff --git a/packages/html-test-app/src/preview-examples/application-app-switch.html b/packages/html-test-app/src/preview-examples/application-app-switch.html
@@ -13,7 +13,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Application app switch example</title>
-    <link rel="stylesheet" href="./application-app-switch.css" />
   </head>
   <body>
     <ix-application>

diff --git a/packages/html-test-app/src/preview-examples/application-breakpoints.css b/packages/html-test-app/src/preview-examples/application-breakpoints.css
diff --git a/packages/html-test-app/src/preview-examples/application-breakpoints.html b/packages/html-test-app/src/preview-examples/application-breakpoints.html
@@ -13,7 +13,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Application breakpoints example</title>
-    <link rel="stylesheet" href="./application-breakpoints.css" />
   </head>
   <body>
     <ix-application application-name="Application name">

diff --git a/packages/html-test-app/src/preview-examples/application.css b/packages/html-test-app/src/preview-examples/application.css
diff --git a/packages/html-test-app/src/preview-examples/application.html b/packages/html-test-app/src/preview-examples/application.html
@@ -13,7 +13,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Application example</title>
-    <link rel="stylesheet" href="./application.css" />
   </head>
   <body>
     <ix-application>

diff --git a/packages/html-test-app/src/preview-examples/menu-category.css b/packages/html-test-app/src/preview-examples/menu-category.css
diff --git a/packages/html-test-app/src/preview-examples/menu-category.html b/packages/html-test-app/src/preview-examples/menu-category.html
@@ -13,7 +13,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Menu category example</title>
-    <link rel="stylesheet" href="./menu-category.css" />
   </head>
   <body>
     <ix-application force-breakpoint="lg">

diff --git a/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.css b/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.css
diff --git a/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.html b/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.html
@@ -13,7 +13,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Menu with bottom tabs example</title>
-    <link rel="stylesheet" href="./menu-with-bottom-tabs.css" />
   </head>
   <body>
     <ix-menu>

diff --git a/packages/html-test-app/src/preview-examples/popover-news.css b/packages/html-test-app/src/preview-examples/popover-news.css