feat: update page and split view components to support docking conten…

…t to the available viewport (#688)

apps/code-examples/src/app/app-routing.module.ts

@@ -85,6 +85,11 @@ const routes: Routes = [
         (m) => m.ProgressIndicatorFeatureModule
       ),
   },
+  {
+    path: 'split-view',
+    loadChildren: () =>
+      import('./features/split-view.module').then((m) => m.SplitViewModule),
+  },
   {
     path: 'datetime',
     loadChildren: () =>

apps/code-examples/src/app/app.component.html

@@ -1,4 +1,10 @@
-<div id="controls" *ngIf="router.url !== '/'">
+<div
+  *ngIf="router.url !== '/'"
+  id="controls"
+  [ngStyle]="{
+    'height.px': height
+  }"
+>
   <div>
     <button class="sky-btn sky-btn-primary" id="home-btn" routerLink="/">
       Go home
@@ -231,6 +237,12 @@
           <li><a routerLink="layout/format">Format</a></li>
         </ul>
       </li>
+      <li>
+        Page
+        <ul>
+          <li><a routerLink="layout/page">Fit layout</a></li>
+        </ul>
+      </li>
       <li>
         Text expand
         <ul>
@@ -354,7 +366,7 @@
   </li>
 
   <li>
-    Progress Indicators
+    Progress indicators
     <ul>
       <li>
         <a routerLink="progress-indicator/waterfall">Waterfall</a>
@@ -378,6 +390,18 @@
     </ul>
   </li>
 
+  <li>
+    Split view
+    <ul>
+      <li>
+        <a routerLink="split-view/basic">Basic</a>
+      </li>
+      <li>
+        <a routerLink="split-view/page-bound">Page-bound</a>
+      </li>
+    </ul>
+  </li>
+
   <li>
     Tabs
     <ul>

apps/code-examples/src/app/app.component.ts

@@ -1,13 +1,20 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
+import { SkyAppViewportService } from '@skyux/theme';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  title = 'code-examples';
+  public height = 60;
 
-  constructor(public router: Router) {}
+  constructor(public router: Router, viewportSvc: SkyAppViewportService) {
+    viewportSvc.reserveSpace({
+      id: 'controls',
+      position: 'top',
+      size: this.height,
+    });
+  }
 }

apps/code-examples/src/app/code-examples/layout/page/layout-fit/page-demo.component.html

@@ -0,0 +1,33 @@
+<sky-page layout="fit">
+  <div class="layout-fit-demo">
+    <div class="layout-fit-demo-header">
+      <sky-fluid-grid>
+        <sky-row>
+          <sky-column>
+            <h1>Fit layout demo</h1>
+          </sky-column>
+        </sky-row>
+        <sky-row>
+          <sky-column>
+            <p class="sky-margin-stacked-xl">
+              Elements in a page with a layout of "fit" can be absolutely
+              positioned inside it. This is especially powerful when combined
+              with content that uses
+              <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox"
+                >CSS flexbox</a
+              >. This example uses flexbox to display a header with a variable
+              height and content that fills the rest of the available viewport.
+            </p>
+          </sky-column>
+        </sky-row>
+      </sky-fluid-grid>
+    </div>
+    <div class="layout-fit-demo-content">
+      <div class="anchored-item anchored-item-left">Left</div>
+      <div class="anchored-item anchored-item-top">Top</div>
+      <div class="anchored-item anchored-item-right">Right</div>
+      <div class="anchored-item anchored-item-bottom">Bottom</div>
+      <div class="anchored-item anchored-item-center">Center</div>
+    </div>
+  </div>
+</sky-page>

apps/code-examples/src/app/code-examples/layout/page/layout-fit/page-demo.component.scss

@@ -0,0 +1,49 @@
+.layout-fit-demo {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  &-header {
+    flex-grow: 0;
+  }
+
+  &-content {
+    background-color: var(--sky-background-color-info-light);
+    flex-grow: 1;
+    position: relative;
+  }
+}
+
+.anchored-item {
+  position: absolute;
+  padding: var(--sky-padding-even-md);
+
+  &-left {
+    left: 0;
+    top: 50%;
+  }
+
+  &-top {
+    top: 0;
+    left: 50%;
+  }
+
+  &-right {
+    top: 50%;
+    right: 0;
+  }
+
+  &-bottom {
+    bottom: 0;
+    left: 50%;
+  }
+
+  &-center {
+    top: 50%;
+    left: 50%;
+  }
+}

apps/code-examples/src/app/code-examples/layout/page/layout-fit/page-demo.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-demo',
+  templateUrl: './page-demo.component.html',
+  styleUrls: ['./page-demo.component.scss'],
+})
+export class PageDemoComponent {}

apps/code-examples/src/app/code-examples/layout/page/layout-fit/page-demo.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SkyFluidGridModule, SkyPageModule } from '@skyux/layout';
+
+import { PageDemoComponent } from './page-demo.component';
+
+@NgModule({
+  declarations: [PageDemoComponent],
+  imports: [CommonModule, SkyFluidGridModule, SkyPageModule],
+  exports: [PageDemoComponent],
+})
+export class PageDemoModule {}