feat(components): adding full width attribute to the appshell (#2143)

Teradata · Apr 12, 2024 · 5c37982 · 5c37982
1 parent 434f2ad
commit 5c37982
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 3 deletions.
diff --git a/libs/components/src/app-shell/app-shell.scss b/libs/components/src/app-shell/app-shell.scss
@@ -70,6 +70,17 @@
   overflow: auto;
   transition: margin 200ms ease-in-out;
 
+  .main-wrapper {
+    margin: 0 auto;
+    max-width: 1200px;
+
+    .cov-content--full-width & {
+      margin: 0;
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+
   cv-card {
     margin: 0 12px 12px;
     display: block;
@@ -94,6 +105,12 @@
       margin-right: 320px;
     }
   }
+
+  @media only screen and (max-width: 1600px) {
+    .main-wrapper {
+      max-width: 960px;
+    }
+  }
 }
 
 .help {

diff --git a/libs/components/src/app-shell/app-shell.stories.js b/libs/components/src/app-shell/app-shell.stories.js
@@ -21,6 +21,7 @@ export default {
   title: 'Patterns/App Shell',
   args: {
     contained: true,
+    fullWidth: false,
   },
   argTypes: {
     navClick: { action: 'clicked' },
@@ -51,6 +52,7 @@ const Template = ({
   sectionTitle = '',
   forcedOpen = false,
   contained = true,
+  fullWidth = false,
 }) => {
   document.addEventListener(
     'DOMContentLoaded',
@@ -99,6 +101,7 @@ const Template = ({
     ${sectionTitle ? `sectionName="${sectionTitle}"` : ''}
     ${forcedOpen ? `forcedOpen open` : ''}
     ${contained ? `contained` : ''}
+    ${fullWidth ? `fullWidth` : ''}
     >
 
       <cv-icon-button slot="section-action" icon="arrow_back"></cv-icon-button>
@@ -304,3 +307,8 @@ export const forcedOpen = Template.bind({});
 forcedOpen.args = {
   forcedOpen: true,
 };
+
+export const fullWidth = Template.bind({});
+fullWidth.args = {
+  fullWidth: true,
+};
diff --git a/libs/components/src/app-shell/app-shell.ts b/libs/components/src/app-shell/app-shell.ts
@@ -67,6 +67,12 @@ export class CovalentAppShell extends DrawerBase {
   @property({ type: Boolean, reflect: true })
   forcedOpen = false;
 
+  /**
+   * Make the content area full width
+   */
+  @property({ type: Boolean, reflect: true })
+  fullWidth = false;
+
   private hovered = false;
 
   constructor() {
@@ -127,7 +133,7 @@ export class CovalentAppShell extends DrawerBase {
 
   resizeEvent() {
     // TODO should be configurable outside appshell
-    const mql = window.matchMedia('(max-width: 800px)');
+    const mql = window.matchMedia('(max-width: 767px)');
     if (mql.matches && this.type !== 'modal') {
       this.type = 'modal';
     } else if (!mql.matches && this.type !== 'dismissible') {
@@ -172,6 +178,7 @@ export class CovalentAppShell extends DrawerBase {
       'cov-drawer--hovered': this.hovered,
       'cov-help--open': this.helpOpen,
       'cov-help--closed': !this.helpOpen,
+      'cov-content--full-width': this.fullWidth,
     };
     const drawerClasses = {
       'mdc-drawer--dismissible': dismissible,
@@ -217,8 +224,10 @@ export class CovalentAppShell extends DrawerBase {
         ${scrim}
         <slot name="mini-list"></slot>
         <div class="main mdc-drawer-app-content">
-          <slot name="user-menu"></slot>
-          ${this.renderMain()}
+          <div class="main-wrapper">
+            <slot name="user-menu"></slot>
+            ${this.renderMain()}
+          </div>
         </div>
         <div class="help">
           <slot name="help"></slot>