taiga-family · splincode · Feb 1, 2024 · Jan 31, 2024
@@ -0,0 +1,42 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+tui-block-status {
+    padding: 2rem;
+
+    .t-block-image {
+        margin-bottom: 1.5rem;
+    }
+
+    .t-block-text:not(:empty) {
+        margin-bottom: 1.5rem;
+    }
+
+    &._card {
+        padding: 1.25rem;
+
+        & .t-block-image {
+            margin-top: 0.75rem;
+            margin-bottom: 1rem;
+        }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font: var(--tui-font-heading-5);
+        margin-bottom: 0.5rem;
+    }
+
+    img {
+        width: 8rem;
+        height: 8rem;
+    }
+
+    a:not(:last-child),
+    button:not(:last-child) {
+        margin-bottom: 0.5rem;
+    }
+}
@@ -19,6 +19,7 @@
 [data-platform='ios'] {
     @import './common/badge';
     @import './common/badge-notification';
+    @import './common/block-status';
     @import './common/button';
     @import './common/title';
 }
@@ -33,5 +33,11 @@ export class ExampleTuiBlockStatusComponent {
         LESS: import('./examples/4/index.less?raw'),
     };
 
+    readonly example5: TuiDocExample = {
+        TypeScript: import('./examples/5/index.ts?raw'),
+        HTML: import('./examples/5/index.html?raw'),
+        LESS: import('./examples/5/index.less?raw'),
+    };
+
     card = false;
 }
@@ -3,6 +3,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
+import {TuiPlatformModule} from '@taiga-ui/cdk';
 import {TuiButtonModule, TuiLinkModule} from '@taiga-ui/core';
 import {TuiAvatarModule} from '@taiga-ui/kit';
 import {TuiBlockStatusModule} from '@taiga-ui/layout';
@@ -12,6 +13,7 @@ import {TuiBlockStatusExample1} from './examples/1';
 import {TuiBlockStatusExample2} from './examples/2';
 import {TuiBlockStatusExample3} from './examples/3';
 import {TuiBlockStatusExample4} from './examples/4';
+import {TuiBlockStatusExample5} from './examples/5';
 
 @NgModule({
     imports: [
@@ -24,13 +26,15 @@ import {TuiBlockStatusExample4} from './examples/4';
         TuiButtonModule,
         TuiAvatarModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiBlockStatusComponent)),
+        TuiPlatformModule,
     ],
     declarations: [
         ExampleTuiBlockStatusComponent,
         TuiBlockStatusExample1,
         TuiBlockStatusExample2,
         TuiBlockStatusExample3,
         TuiBlockStatusExample4,
+        TuiBlockStatusExample5,
     ],
     exports: [ExampleTuiBlockStatusComponent],
 })

@@ -41,6 +41,15 @@
         >
             <tui-block-status-example-4></tui-block-status-example-4>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="mobile"
+            heading="Mobile"
+            [content]="example5"
+            [fullsize]="true"
+        >
+            <tui-block-status-example-5></tui-block-status-example-5>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

@@ -0,0 +1,48 @@
+<div
+    tuiPlatform="ios"
+    class="container"
+>
+    <tui-block-status
+        class="card"
+        [card]="true"
+    >
+        <img
+            alt="hidden content"
+            src="./assets/images/camping.svg"
+            tuiSlot="top"
+            class="image"
+        />
+
+        We hide the unwanted block
+
+        <button
+            appearance="secondary"
+            size="m"
+            tuiButton
+        >
+            Return
+        </button>
+    </tui-block-status>
+    <tui-block-status
+        tuiPlatform="ios"
+        class="card"
+        [card]="true"
+    >
+        <img
+            alt="something wrong"
+            src="./assets/images/cancel.svg"
+            tuiSlot="top"
+            class="image"
+        />
+
+        Something happened in this block
+
+        <button
+            appearance="secondary"
+            size="m"
+            tuiButton
+        >
+            Try again
+        </button>
+    </tui-block-status>
+</div>
@@ -0,0 +1,10 @@
+.container {
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+}
+
+.card {
+    background-color: var(--tui-base-02);
+    height: auto;
+}
@@ -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-block-status-example-5',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiBlockStatusExample5 {}
@@ -11,32 +11,20 @@ tui-block-status {
     width: 100%;
     height: 100%;
 
-    tui-root._mobile & {
-        padding: 2rem;
-    }
-
     &._card {
         border-radius: var(--tui-radius-xl);
         padding: 2rem;
     }
 
     .t-block-image {
         margin-bottom: 2rem;
-
-        tui-root._mobile & {
-            margin-bottom: 1.5rem;
-        }
     }
 
     .t-block-text:not(:empty) {
         font: var(--tui-font-text-m);
         color: var(--tui-text-02);
         margin-bottom: 2rem;
         white-space: pre-line;
-
-        tui-root._mobile & {
-            margin-bottom: 1.5rem;
-        }
     }
 
     .t-block-actions:not(:empty) {
@@ -55,29 +43,15 @@ tui-block-status {
         font: var(--tui-font-heading-4);
         margin-top: 0;
         margin-bottom: 1rem;
-
-        tui-root._mobile & {
-            font: var(--tui-font-heading-5);
-            margin-bottom: 0.5rem;
-        }
     }
 
     img {
         width: 9rem;
         height: 9rem;
-
-        tui-root._mobile & {
-            width: 8rem;
-            height: 8rem;
-        }
     }
 
     a:not(:last-child),
     button:not(:last-child) {
         margin-bottom: 0.75rem;
-
-        tui-root._mobile & {
-            margin-bottom: 0.5rem;
-        }
     }
 }