fix(experimental): CardLarge with headless Cell list

taiga-family · Sep 23, 2024 · c4d03b6 · c4d03b6
1 parent 98e0509
commit c4d03b6
Show file tree

Hide file tree

Showing 12 changed files with 133 additions and 54 deletions.
diff --git a/projects/demo/src/modules/experimental/card-large/card-large.component.ts b/projects/demo/src/modules/experimental/card-large/card-large.component.ts
@@ -70,4 +70,9 @@ export class ExampleTuiCardLargeComponent {
     readonly example12: TuiDocExample = {
         HTML: import('./examples/12/index.html?raw'),
     };
+
+    readonly example13: TuiDocExample = {
+        HTML: import('./examples/13/index.html?raw'),
+        LESS: import('./examples/11/index.less?raw'),
+    };
 }
diff --git a/projects/demo/src/modules/experimental/card-large/card-large.module.ts b/projects/demo/src/modules/experimental/card-large/card-large.module.ts
@@ -46,6 +46,7 @@ import {TuiCardLargeExample9} from './examples/9';
 import {TuiCardLargeExample10} from './examples/10';
 import {TuiCardLargeExample11} from './examples/11';
 import {TuiCardLargeExample12} from './examples/12';
+import {TuiCardLargeExample13} from './examples/13';
 
 @NgModule({
     imports: [
@@ -94,6 +95,7 @@ import {TuiCardLargeExample12} from './examples/12';
         TuiCardLargeExample10,
         TuiCardLargeExample11,
         TuiCardLargeExample12,
+        TuiCardLargeExample13,
     ],
     exports: [ExampleTuiCardLargeComponent],
 })

diff --git a/projects/demo/src/modules/experimental/card-large/card-large.template.html b/projects/demo/src/modules/experimental/card-large/card-large.template.html
@@ -62,18 +62,17 @@
         </tui-doc-example>
 
         <tui-doc-example
-            id="align"
-            heading="Footer alignment"
+            id="cell-list-headless-2"
+            heading="Cell List (headless)"
             [content]="example8"
         >
             <tui-card-large-example-8></tui-card-large-example-8>
         </tui-doc-example>
 
         <tui-doc-example
-            id="map"
-            heading="Map"
+            id="align"
+            heading="Footer alignment"
             [content]="example9"
-            [fullsize]="true"
         >
             <tui-card-large-example-9></tui-card-large-example-9>
         </tui-doc-example>
@@ -101,6 +100,15 @@
         >
             <tui-card-large-example-12></tui-card-large-example-12>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="map"
+            heading="Map"
+            [content]="example12"
+            [fullsize]="true"
+        >
+            <tui-card-large-example-13></tui-card-large-example-13>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab="Setup">

diff --git a/projects/demo/src/modules/experimental/card-large/examples/13/index.html b/projects/demo/src/modules/experimental/card-large/examples/13/index.html
@@ -0,0 +1,33 @@
+<div
+    tuiCardLarge
+    tuiSurface="elevated"
+>
+    <header tuiHeader>
+        <h1 tuiTitle>
+            Title
+            <span tuiSubtitle>Subtitle</span>
+        </h1>
+    </header>
+
+    <section>
+        <iframe
+            height="450"
+            loading="lazy"
+            src="https://yandex.ru/map-widget/v1/?um=constructor%3A0ff7188173ceeea1b3c1d5b2ebeaca63ceb70dc60ebc79513c51bb855356a6ac&amp;source=constructor"
+            title="map"
+            width="100%"
+            class="map"
+        ></iframe>
+    </section>
+
+    <footer>
+        <button
+            appearance="secondary"
+            size="m"
+            tuiButton
+            type="button"
+        >
+            Label
+        </button>
+    </footer>
+</div>
diff --git a/projects/demo/src/modules/experimental/card-large/examples/13/index.less b/projects/demo/src/modules/experimental/card-large/examples/13/index.less
diff --git a/projects/demo/src/modules/experimental/card-large/examples/13/index.ts b/projects/demo/src/modules/experimental/card-large/examples/13/index.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-card-large-example-13',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiCardLargeExample13 {}
diff --git a/projects/demo/src/modules/experimental/card-large/examples/8/index.html b/projects/demo/src/modules/experimental/card-large/examples/8/index.html
@@ -2,11 +2,10 @@
     tuiCardLarge
     tuiSurface="elevated"
 >
-    <header tuiHeader>
-        <h2 tuiTitle>Title</h2>
-    </header>
-
-    <div tuiCell>
+    <div
+        *tuiRepeatTimes="let index of 3"
+        tuiCell="l"
+    >
         <tui-avatar
             appearance="primary"
             src="tuiIconStar"
@@ -16,36 +15,28 @@ <h2 tuiTitle>Title</h2>
             <div tuiSubtitle>Description</div>
         </div>
     </div>
-
-    <footer>
-        <button
-            appearance="secondary"
-            size="m"
-            tuiButton
-            type="button"
-        >
-            Label
-        </button>
-    </footer>
 </div>
+
 <div
     tuiCardLarge
     tuiSurface="elevated"
 >
-    <header tuiHeader>
-        <h2 tuiTitle>Title</h2>
-    </header>
-
-    Some text
-
-    <footer>
-        <button
-            appearance="secondary"
-            size="m"
-            tuiButton
-            type="button"
-        >
-            Label
-        </button>
-    </footer>
+    <div tuiCell="l">
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconStar"
+        ></tui-avatar>
+        <div tuiTitle>
+            Title
+            <div tuiSubtitle>Description</div>
+        </div>
+    </div>
+    <button
+        appearance="secondary"
+        size="m"
+        tuiButton
+        type="button"
+    >
+        Label
+    </button>
 </div>
diff --git a/projects/demo/src/modules/experimental/card-large/examples/8/index.less b/projects/demo/src/modules/experimental/card-large/examples/8/index.less
@@ -1,6 +1,5 @@
 :host {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-    width: 30rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
 }
diff --git a/projects/demo/src/modules/experimental/card-large/examples/9/index.html b/projects/demo/src/modules/experimental/card-large/examples/9/index.html
@@ -3,22 +3,40 @@
     tuiSurface="elevated"
 >
     <header tuiHeader>
-        <h1 tuiTitle>
+        <h2 tuiTitle>Title</h2>
+    </header>
+
+    <div tuiCell>
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconStar"
+        ></tui-avatar>
+        <div tuiTitle>
             Title
-            <span tuiSubtitle>Subtitle</span>
-        </h1>
+            <div tuiSubtitle>Description</div>
+        </div>
+    </div>
+
+    <footer>
+        <button
+            appearance="secondary"
+            size="m"
+            tuiButton
+            type="button"
+        >
+            Label
+        </button>
+    </footer>
+</div>
+<div
+    tuiCardLarge
+    tuiSurface="elevated"
+>
+    <header tuiHeader>
+        <h2 tuiTitle>Title</h2>
     </header>
 
-    <section>
-        <iframe
-            height="450"
-            loading="lazy"
-            src="https://yandex.ru/map-widget/v1/?um=constructor%3A0ff7188173ceeea1b3c1d5b2ebeaca63ceb70dc60ebc79513c51bb855356a6ac&amp;source=constructor"
-            title="map"
-            width="100%"
-            class="map"
-        ></iframe>
-    </section>
+    Some text
 
     <footer>
         <button

diff --git a/projects/demo/src/modules/experimental/card-large/examples/9/index.less b/projects/demo/src/modules/experimental/card-large/examples/9/index.less
@@ -0,0 +1,6 @@
+:host {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    inline-size: 30rem;
+}
diff --git a/projects/demo/src/modules/experimental/card-large/examples/9/index.ts b/projects/demo/src/modules/experimental/card-large/examples/9/index.ts
@@ -5,6 +5,7 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 @Component({
     selector: 'tui-card-large-example-9',
     templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })

diff --git a/projects/experimental/directives/card/card.styles.less b/projects/experimental/directives/card/card.styles.less
@@ -103,6 +103,10 @@
         padding: 0.5rem;
         margin: -0.5rem -0.5rem -0.75rem;
         border-radius: var(--tui-radius-l);
+
+        &:last-of-type {
+            margin-bottom: -0.5rem;
+        }
     }
 
     > [tuiLink]:last-child {