chore(demo): fix SwipeActions examples (#6664)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Feb 5, 2024 · 020033b · 020033b
1 parent bdd144d
commit 020033b
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 75 deletions.
diff --git a/projects/core/styles/mixins/mixins.scss b/projects/core/styles/mixins/mixins.scss
@@ -392,9 +392,7 @@
 
     &::-webkit-scrollbar,
     &::-webkit-scrollbar-thumb {
-        background: transparent;
-        width: 0;
-        height: 0;
+        display: none;
     }
 }
 

diff --git a/projects/demo/src/modules/experimental/surface/examples/7/index.html b/projects/demo/src/modules/experimental/surface/examples/7/index.html
@@ -88,6 +88,7 @@ <h3 class="heading">Gas</h3>
 </div>
 
 <div
+    tuiCardLarge="compact"
     tuiSurface="elevated"
     class="reviews"
 >

diff --git a/projects/demo/src/modules/experimental/surface/examples/7/surface.less b/projects/demo/src/modules/experimental/surface/examples/7/surface.less
@@ -28,6 +28,7 @@
 .blur {
     background-image: url(/assets/images/restaurant-2.jpg);
     border-radius: 0;
+    padding: 1.25rem;
     clip-path: inset(0 round 5rem); // for crisp edges of blurred background
 
     &:before {

diff --git a/projects/demo/src/modules/experimental/surface/surface.module.ts b/projects/demo/src/modules/experimental/surface/surface.module.ts
@@ -17,6 +17,7 @@ import {
     TuiAvatarModule,
     TuiBadgeModule,
     TuiButtonModule,
+    TuiCardModule,
     TuiSurfaceModule,
 } from '@taiga-ui/experimental';
 
@@ -41,6 +42,7 @@ import {ExampleTuiSurfaceComponent} from './surface.component';
         TuiScrollbarModule,
         TuiButtonModule,
         TuiLinkModule,
+        TuiCardModule,
         TuiAvatarModule,
         TuiLabelModule,
         TuiModeModule,

diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/1/index.html b/projects/demo/src/modules/experimental/swipe-action/examples/1/index.html
@@ -1,14 +1,16 @@
 <tui-swipe-actions>
-    <div tuiSurface="elevated">
-        <div tuiCell>
-            <tui-avatar
-                appearance="primary"
-                src="tuiIconDollarSignLarge"
-            ></tui-avatar>
-            <div tuiTitle>
-                <strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
-                <div tuiSubtitle>Dollar account</div>
-            </div>
+    <div
+        tuiCardLarge
+        tuiCell
+        tuiSurface="elevated"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconDollarSignLarge"
+        ></tui-avatar>
+        <div tuiTitle>
+            <strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
+            <div tuiSubtitle>Dollar account</div>
         </div>
     </div>
 
@@ -34,16 +36,18 @@
 </tui-swipe-actions>
 
 <tui-swipe-actions>
-    <div tuiSurface="elevated">
-        <div tuiCell>
-            <tui-avatar
-                appearance="primary"
-                src="tuiIconGift"
-            ></tui-avatar>
-            <div tuiTitle>
-                <strong>{{ 23000 | tuiAmount: 'EUR' | async }}</strong>
-                <div tuiSubtitle>Goal</div>
-            </div>
+    <div
+        tuiCardLarge
+        tuiCell
+        tuiSurface="elevated"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconGift"
+        ></tui-avatar>
+        <div tuiTitle>
+            <strong>{{ 23000 | tuiAmount: 'EUR' | async }}</strong>
+            <div tuiSubtitle>Goal</div>
         </div>
     </div>
 
@@ -59,16 +63,18 @@
     [style.--tui-action-gap]="16"
     [style.--tui-item-size]="32"
 >
-    <div tuiSurface="elevated">
-        <div tuiCell>
-            <tui-avatar
-                appearance="primary"
-                src="tuiIconBriefcase"
-            ></tui-avatar>
-            <div tuiTitle>
-                <strong>{{ 5000 | tuiAmount: 'EUR' | async }}</strong>
-                <div tuiSubtitle>Vacations</div>
-            </div>
+    <div
+        tuiCardLarge
+        tuiCell
+        tuiSurface="elevated"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconBriefcase"
+        ></tui-avatar>
+        <div tuiTitle>
+            <strong>{{ 5000 | tuiAmount: 'EUR' | async }}</strong>
+            <div tuiSubtitle>Vacations</div>
         </div>
     </div>
 

diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/2/index.less b/projects/demo/src/modules/experimental/swipe-action/examples/2/index.less
@@ -5,6 +5,7 @@
 .blur {
     background-image: url('/assets/images/restaurant-2.jpg');
     border-radius: 1rem;
+    padding: 1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;

diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/3/index.html b/projects/demo/src/modules/experimental/swipe-action/examples/3/index.html
@@ -1,14 +1,16 @@
 <tui-swipe-actions [autoClose]="true">
-    <div tuiSurface="elevated">
-        <div tuiCell>
-            <tui-avatar
-                appearance="primary"
-                src="tuiIconDollarSignLarge"
-            ></tui-avatar>
-            <div tuiTitle>
-                <strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
-                <div tuiSubtitle>Dollar account</div>
-            </div>
+    <div
+        tuiCardLarge
+        tuiCell
+        tuiSurface="elevated"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconDollarSignLarge"
+        ></tui-avatar>
+        <div tuiTitle>
+            <strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
+            <div tuiSubtitle>Dollar account</div>
         </div>
     </div>
 
@@ -34,16 +36,18 @@
 </tui-swipe-actions>
 
 <tui-swipe-actions [autoClose]="true">
-    <div tuiSurface="elevated">
-        <div tuiCell>
-            <tui-avatar
-                appearance="primary"
-                src="tuiIconGift"
-            ></tui-avatar>
-            <div tuiTitle>
-                <strong>{{ 23000 | tuiAmount: 'EUR' | async }}</strong>
-                <div tuiSubtitle>Goal</div>
-            </div>
+    <div
+        tuiCardLarge
+        tuiCell
+        tuiSurface="elevated"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconGift"
+        ></tui-avatar>
+        <div tuiTitle>
+            <strong>{{ 23000 | tuiAmount: 'EUR' | async }}</strong>
+            <div tuiSubtitle>Goal</div>
         </div>
     </div>
 

diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/4/index.html b/projects/demo/src/modules/experimental/swipe-action/examples/4/index.html
@@ -1,14 +1,16 @@
 <tui-swipe-actions>
-    <div tuiSurface="elevated">
-        <div tuiCell>
-            <tui-avatar
-                appearance="primary"
-                src="tuiIconDollarSignLarge"
-            ></tui-avatar>
-            <div tuiTitle>
-                <strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
-                <div tuiSubtitle>Dollar account</div>
-            </div>
+    <div
+        tuiCardLarge
+        tuiCell
+        tuiSurface="elevated"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconDollarSignLarge"
+        ></tui-avatar>
+        <div tuiTitle>
+            <strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
+            <div tuiSubtitle>Dollar account</div>
         </div>
     </div>
 

diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/5/index.html b/projects/demo/src/modules/experimental/swipe-action/examples/5/index.html
@@ -1,14 +1,16 @@
 <tui-swipe-actions>
-    <div tuiSurface="elevated">
-        <div tuiCell>
-            <tui-avatar
-                appearance="primary"
-                src="tuiIconDollarSignLarge"
-            ></tui-avatar>
-            <div tuiTitle>
-                <strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
-                <div tuiSubtitle>Dollar account</div>
-            </div>
+    <div
+        tuiCardLarge
+        tuiCell
+        tuiSurface="elevated"
+    >
+        <tui-avatar
+            appearance="primary"
+            src="tuiIconDollarSignLarge"
+        ></tui-avatar>
+        <div tuiTitle>
+            <strong>{{ 10000 | tuiAmount: 'USD' | async }}</strong>
+            <div tuiSubtitle>Dollar account</div>
         </div>
     </div>
 

diff --git a/projects/demo/src/modules/experimental/swipe-action/swipe-actions.module.ts b/projects/demo/src/modules/experimental/swipe-action/swipe-actions.module.ts
@@ -14,6 +14,7 @@ import {
     TuiBadgedContentModule,
     TuiBadgeModule,
     TuiButtonModule,
+    TuiCardModule,
     TuiCellModule,
     TuiCheckboxModule,
     TuiIconModule,
@@ -36,6 +37,7 @@ import {ExampleTuiSwipeActionsComponent} from './swipe-actions.component';
         TuiAddonDocModule,
         TuiAvatarModule,
         TuiCellModule,
+        TuiCardModule,
         TuiSurfaceModule,
         TuiSwipeActionsModule,
         TuiAmountPipeModule,

diff --git a/projects/kit/components/carousel/carousel.style.less b/projects/kit/components/carousel/carousel.style.less
@@ -52,8 +52,6 @@
     display: flex;
     overflow: auto;
     overscroll-behavior-x: none;
-    padding-bottom: 2rem;
-    margin-bottom: -2rem;
 
     &:before,
     &:after {
-Original file line number
+Diff line change
@@ Expand Up / @@ -88,6 +88,7 @@ <h3 class="heading">Gas</h3> @@
     </div>
     <div
+        tuiCardLarge="compact"
         tuiSurface="elevated"
         class="reviews"
     >
@@ Expand Down @@