feat(grid): add container query option (#1074)

* feat: container query on grid layout component * feat: container queries in grid * fix: commit missing file * chore: bit of cleanup * fix: spacing issues * feat: add container query example * fix: run prettier * fix: unit tests * fix: resolve PR comments * chore: resolve PR comments * chore: enhance docs stylesheet --------- Co-authored-by: malin-klingsell <[email protected]>
allianz · Nov 28, 2023 · 017bad2 · 017bad2
1 parent 50272e9
commit 017bad2
Show file tree

Hide file tree

Showing 18 changed files with 782 additions and 26 deletions.
diff --git a/.gitignore b/.gitignore
@@ -31,6 +31,9 @@ speed-measure-plugin*.json
 !.vscode/extensions.json
 .history/*
 
+# IDE - IntelliJ
+*.iml
+
 # misc
 /.angular/cache
 /.sass-cache

diff --git a/projects/ng-aquila/documentation/examples/grid/grid-examples.module.ts b/projects/ng-aquila/documentation/examples/grid/grid-examples.module.ts
@@ -13,6 +13,7 @@ import { GridMultiInputs2ExampleComponent } from './grid-multi-inputs-2/grid-mul
 import { GridNogutterExampleComponent } from './grid-nogutter/grid-nogutter-example';
 import { GridOffsetExampleComponent } from './grid-offset/grid-offset-example';
 import { GridOneInputExampleComponent } from './grid-one-input/grid-one-input-example';
+import { GridQueryComparisonComponent } from './grid-query-comparison/grid-query-comparison-example';
 
 const EXAMPLES = [
     GridAlignContentExampleComponent,
@@ -27,6 +28,7 @@ const EXAMPLES = [
     GridOffsetExampleComponent,
     GridOneInputExampleComponent,
     GridInGridExampleComponent,
+    GridQueryComparisonComponent,
 ];
 
 @NgModule({
@@ -49,6 +51,7 @@ export class GridExamplesModule {
             'grid-offset': GridOffsetExampleComponent,
             'grid-one-input': GridOneInputExampleComponent,
             'grid-in-grid': GridInGridExampleComponent,
+            'grid-query-comparison': GridQueryComparisonComponent,
         };
     }
 }
diff --git a/projects/ng-aquila/documentation/examples/grid/grid-one-input/grid-one-input-example.html b/projects/ng-aquila/documentation/examples/grid/grid-one-input/grid-one-input-example.html
@@ -1,4 +1,4 @@
-<div nxLayout="grid" class="docs-grid-colored-grid">
+<div nxLayout="grid" queryType="media" class="docs-grid-colored-grid">
     <div nxRow class="docs-grid-colored-row">
         <div nxCol="6" class="docs-grid-colored-col">50%</div>
         <div nxCol="6" class="docs-grid-colored-col">50%</div>

diff --git a/...uila/documentation/examples/grid/grid-query-comparison/grid-query-comparison-example.html b/...uila/documentation/examples/grid/grid-query-comparison/grid-query-comparison-example.html
@@ -0,0 +1,71 @@
+<div nxLayout="grid">
+    <div nxRow class="docs-grid-colored-row">
+        <div nxCol="6" style="align-content: center">
+            <h3>Media Query Sub Grid</h3>
+        </div>
+        <div nxCol="6" style="align-content: center">
+            <h3>Container Query Sub Grid</h3>
+        </div>
+    </div>
+
+    <div nxRow>
+        <div nxCol="6">
+            <div
+                nxLayout="grid"
+                [containerQuery]="false"
+                class="docs-grid-colored-grid"
+            >
+                <div nxRow class="docs-grid-colored-row">
+                    <div nxCol="12,8" class="docs-grid-colored-col">
+                        nxCol="12,8"
+                    </div>
+                </div>
+                <div nxRow class="docs-grid-colored-row">
+                    <div nxCol="12,8,2" class="docs-grid-colored-col">
+                        nxCol="12,8,2"
+                    </div>
+                </div>
+                <div nxRow class="docs-grid-colored-row">
+                    <div nxCol="12,6" class="docs-grid-colored-col">
+                        nxCol="12,6"
+                    </div>
+                    <div nxCol="12,6,2" class="docs-grid-colored-col">
+                        nxCol="12,6,2"
+                    </div>
+                    <div nxCol="12,6,2" class="docs-grid-colored-col">
+                        nxCol="12,6,2"
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div nxCol="6" class="docs-container-inline-size">
+            <div
+                nxLayout="grid"
+                [containerQuery]="true"
+                class="docs-grid-colored-grid-container"
+            >
+                <div nxRow class="docs-grid-colored-row">
+                    <div nxCol="12,8" class="docs-grid-colored-col-container">
+                        nxCol="12,8"
+                    </div>
+                </div>
+                <div nxRow class="docs-grid-colored-row">
+                    <div nxCol="12,8,2" class="docs-grid-colored-col-container">
+                        nxCol="12,8,2"
+                    </div>
+                </div>
+                <div nxRow class="docs-grid-colored-row">
+                    <div nxCol="12,6" class="docs-grid-colored-col-container">
+                        nxCol="12,6"
+                    </div>
+                    <div nxCol="12,6,2" class="docs-grid-colored-col-container">
+                        nxCol="12,6,2"
+                    </div>
+                    <div nxCol="12,6,2" class="docs-grid-colored-col-container">
+                        nxCol="12,6,2"
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/...uila/documentation/examples/grid/grid-query-comparison/grid-query-comparison-example.scss b/...uila/documentation/examples/grid/grid-query-comparison/grid-query-comparison-example.scss
@@ -0,0 +1,244 @@
+$color-tiny: #dbd3d8;
+$color-small: #fac748;
+$color-medium: #87d68d;
+$color-large: #27abd6;
+$color-xlarge: #e18335;
+$color-2xlarge: #db4c40;
+$color-3xlarge: #8d6a9f;
+$dotted-border-color: #414141;
+
+body {
+    background: #0f2a3d;
+    font-family: 'Public Sans', sans-serif; // Aquila font
+    font-size: 16px !important;
+    line-height: 24px !important;
+    padding: 24px;
+}
+
+.docs-inverse-container {
+    background: #e5e7e6;
+    padding: 24px;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        color: #0f2a3d;
+    }
+}
+
+.docs-container-inline-size {
+    // not required for container queries -> just for coloring the example
+    container-type: inline-size;
+}
+
+// GRID STYLES
+@container (min-width: 0) and (max-width: 319px) {
+    .docs-grid-colored-grid-container {
+        background-color: darken($color-tiny, 40%);
+    }
+}
+
+@container (min-width: 320px) and (max-width: 703px) {
+    .docs-grid-colored-grid-container {
+        background-color: darken($color-small, 40%);
+    }
+}
+
+@container (min-width: 704px) and (max-width: 991px) {
+    .docs-grid-colored-grid-container {
+        background-color: darken($color-medium, 40%);
+    }
+}
+
+@container (min-width: 992px) and (max-width: 1279px) {
+    .docs-grid-colored-grid-container {
+        background-color: darken($color-large, 30%);
+    }
+}
+
+@container (min-width: 1280px) and (max-width: 1471px) {
+    .docs-grid-colored-grid-container {
+        background-color: darken($color-xlarge, 30%);
+    }
+}
+
+@container (min-width: 1472px) and (max-width: 1759px) {
+    .docs-grid-colored-grid-container {
+        background-color: darken($color-2xlarge, 40%);
+    }
+}
+
+@container (min-width: 1760px) {
+    .docs-grid-colored-grid-container {
+        background-color: darken($color-3xlarge, 40%);
+    }
+}
+
+.docs-grid-colored-col-container {
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background-clip: content-box, padding-box;
+    outline: 2px dotted $dotted-border-color;
+
+    @container (min-width: 0) and (max-width: 319px) {
+        background-image: linear-gradient(
+                to bottom,
+                var(--ui-01) 0%,
+                var(--ui-01) 100%
+            ),
+            linear-gradient(to bottom, $color-tiny 0%, $color-tiny 100%);
+    }
+
+    @container (min-width: 320px) and (max-width: 703px) {
+        background-image: linear-gradient(
+                to bottom,
+                var(--ui-01) 0%,
+                var(--ui-01) 100%
+            ),
+            linear-gradient(to bottom, $color-small 0%, $color-small 100%);
+    }
+
+    @container (min-width: 704px) and (max-width: 991px) {
+        background-image: linear-gradient(
+                to bottom,
+                var(--ui-01) 0%,
+                var(--ui-01) 100%
+            ),
+            linear-gradient(to bottom, $color-medium 0%, $color-medium 100%);
+    }
+
+    @container (min-width: 992px) and (max-width: 1279px) {
+        background-image: linear-gradient(
+                to bottom,
+                var(--ui-01) 0%,
+                var(--ui-01) 100%
+            ),
+            linear-gradient(to bottom, $color-large 0%, $color-large 100%);
+    }
+
+    @container (min-width: 1280px) and (max-width: 1471px) {
+        background-image: linear-gradient(
+                to bottom,
+                var(--ui-01) 0%,
+                var(--ui-01) 100%
+            ),
+            linear-gradient(to bottom, $color-xlarge 0%, $color-xlarge 100%);
+    }
+
+    @container (min-width: 1472px) and (max-width: 1759px) {
+        background-image: linear-gradient(
+                to bottom,
+                var(--ui-01) 0%,
+                var(--ui-01) 100%
+            ),
+            linear-gradient(to bottom, $color-2xlarge 0%, $color-2xlarge 100%);
+    }
+
+    @container (min-width: 1760px) {
+        background-image: linear-gradient(
+                to bottom,
+                var(--ui-01) 0%,
+                var(--ui-01) 100%
+            ),
+            linear-gradient(to bottom, $color-3xlarge 0%, $color-3xlarge 100%);
+    }
+
+    outline-offset: -1px;
+}
+
+.docs-grid-colored-offset-container {
+    @container (min-width: 0) and (max-width: 319px) {
+        background: linear-gradient(
+            to right,
+            darken($color-tiny, 20%) 50%,
+            transparent 50%
+        );
+    }
+
+    @container (min-width: 320px) and (max-width: 703px) {
+        background: linear-gradient(
+            to right,
+            darken($color-small, 20%) 50%,
+            transparent 50%
+        );
+    }
+
+    @container (min-width: 704px) and (max-width: 991px) {
+        background: linear-gradient(
+            to right,
+            darken($color-medium, 20%) 50%,
+            transparent 50%
+        );
+    }
+
+    @container (min-width: 992px) and (max-width: 1279px) {
+        background: linear-gradient(
+            to right,
+            darken($color-large, 20%) 50%,
+            transparent 50%
+        );
+    }
+
+    @container (min-width: 1280px) and (max-width: 1471px) {
+        background: linear-gradient(
+            to right,
+            darken($color-xlarge, 20%) 50%,
+            transparent 50%
+        );
+    }
+
+    @container (min-width: 1472px) and (max-width: 1759px) {
+        background: linear-gradient(
+            to right,
+            darken($color-2xlarge, 20%) 50%,
+            transparent 50%
+        );
+    }
+
+    @container (min-width: 1760px) {
+        background: linear-gradient(
+            to right,
+            darken($color-3xlarge, 20%) 50%,
+            transparent 50%
+        );
+    }
+}
+
+.docs-grid-text-tiny {
+    font-weight: 700;
+    color: $color-tiny;
+}
+
+.docs-grid-text-small {
+    font-weight: 700;
+    color: $color-small;
+}
+
+.docs-grid-text-medium {
+    font-weight: 700;
+    color: $color-medium;
+}
+
+.docs-grid-text-large {
+    font-weight: 700;
+    color: $color-large;
+}
+
+.docs-grid-text-xlarge {
+    font-weight: 700;
+    color: $color-xlarge;
+}
+
+.docs-grid-text-2xlarge {
+    font-weight: 700;
+    color: $color-2xlarge;
+}
+
+.docs-grid-text-3xlarge {
+    font-weight: 700;
+    color: $color-3xlarge;
+}
diff --git a/...aquila/documentation/examples/grid/grid-query-comparison/grid-query-comparison-example.ts b/...aquila/documentation/examples/grid/grid-query-comparison/grid-query-comparison-example.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+/**
+ * @title Container Query Example
+ */
+@Component({
+    selector: 'grid-query-comparison-example',
+    templateUrl: './grid-query-comparison-example.html',
+    styleUrls: ['./grid-query-comparison-example.scss'],
+})
+export class GridQueryComparisonComponent {}
diff --git a/projects/ng-aquila/src/grid/col.component.scss b/projects/ng-aquila/src/grid/col.component.scss
@@ -1,8 +1,15 @@
 @import './mixins.scss';
 
-@include make-grid-columns-bem-style();
+:host(.nx-grid__column--media-query) {
+    @include make-grid-columns-bem-style();
+    @include make-col-variations();
+}
+
+:host(.nx-grid__column--container-query) {
+    @include make-grid-columns-bem-style-by-container-query();
+    @include make-col-variations-by-container-query();
+}
 
 /**
  * COL VARIATIONS
  */
-@include make-col-variations();