chore: change nft component

taiga-family · Aug 28, 2024 · a3a84e2 · a3a84e2
1 parent 89b6d67
commit a3a84e2
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 54 deletions.
diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.html b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.html
@@ -1,60 +1,64 @@
 <div class="info">
     <h3 class="row-title tui-space_top-0 tui-space_bottom-0">Top NFTs</h3>
-    <div class="list">
-        @for (nft of nfts; track $index) {
-            <button
-                tuiCardLarge
-                tuiSurface="elevated"
-                class="card-nft"
-                (click)="updateItem($index)"
-            >
-                <tui-avatar
-                    class="logo-nft"
-                    [src]="nft.src"
-                />
-                <div
-                    class="text"
-                    [style.margin-top]="0"
+    <tui-scrollbar>
+        <div class="list">
+            @for (nft of nfts; track $index) {
+                <button
+                    tuiCardLarge
+                    tuiSurface="elevated"
+                    class="card-nft"
+                    (click)="updateItem($index)"
                 >
-                    <p class="nft-name tui-space_top-1 tui-space_bottom-0">{{ nft.name }}</p>
-                    <p
-                        tuiSubtitle
-                        class="tui-space_top-0 tui-space_bottom-0"
+                    <tui-avatar
+                        class="logo-nft"
+                        [src]="nft.src"
+                    />
+                    <div
+                        class="text"
+                        [style.margin-top]="0"
                     >
-                        {{ nft.price | tuiAmount: 'USD' | async }}
-                    </p>
-                </div>
-            </button>
-        }
-    </div>
+                        <p class="nft-name tui-space_top-1 tui-space_bottom-0">{{ nft.name }}</p>
+                        <p
+                            tuiSubtitle
+                            class="tui-space_top-0 tui-space_bottom-0"
+                        >
+                            {{ nft.price | tuiAmount: 'USD' | async }}
+                        </p>
+                    </div>
+                </button>
+            }
+        </div>
+    </tui-scrollbar>
 </div>
 <div class="info">
     <h3 class="row-title tui-space_top-0 tui-space_bottom-0">Recent bought NFTs</h3>
-    <div class="list">
-        @for (nft of nfts; track $index) {
-            <button
-                tuiCardLarge
-                tuiSurface="elevated"
-                class="card-nft"
-                (click)="updateItem($index)"
-            >
-                <tui-avatar
-                    class="logo-nft"
-                    [src]="nft.src"
-                />
-                <div
-                    class="text"
-                    [style.margin-top]="0"
+    <tui-scrollbar>
+        <div class="list">
+            @for (nft of nfts; track $index) {
+                <button
+                    tuiCardLarge
+                    tuiSurface="elevated"
+                    class="card-nft"
+                    (click)="updateItem($index)"
                 >
-                    <p class="nft-name tui-space_top-1 tui-space_bottom-0">{{ nft.name }}</p>
-                    <p
-                        tuiSubtitle
-                        class="tui-space_top-0 tui-space_bottom-0"
+                    <tui-avatar
+                        class="logo-nft"
+                        [src]="nft.src"
+                    />
+                    <div
+                        class="text"
+                        [style.margin-top]="0"
                     >
-                        {{ nft.price | tuiAmount: 'USD' | async }}
-                    </p>
-                </div>
-            </button>
-        }
-    </div>
+                        <p class="nft-name tui-space_top-1 tui-space_bottom-0">{{ nft.name }}</p>
+                        <p
+                            tuiSubtitle
+                            class="tui-space_top-0 tui-space_bottom-0"
+                        >
+                            {{ nft.price | tuiAmount: 'USD' | async }}
+                        </p>
+                    </div>
+                </button>
+            }
+        </div>
+    </tui-scrollbar>
 </div>
diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.less b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.less
@@ -9,13 +9,11 @@
     justify-content: space-around;
     padding: 1rem;
     gap: 0.5rem;
-    overflow: visible;
     max-width: 100%;
 }
 
 .info {
     display: flex;
-    overflow: scroll;
     flex-direction: column;
     gap: 0.5rem;
 }
@@ -27,7 +25,6 @@
 }
 
 .card-nft[tuiCardLarge][data-space] {
-    overflow: hidden;
     padding: 0;
     height: 9rem;
     width: 7.5rem;

diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.ts b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft-list/nft-list.component.ts
@@ -7,7 +7,7 @@ import {
     Output,
 } from '@angular/core';
 import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
-import {TuiAppearance, TuiSurface, TuiTitle} from '@taiga-ui/core';
+import {TuiAppearance, TuiScrollbar, TuiSurface, TuiTitle} from '@taiga-ui/core';
 import {TuiAvatar} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 
@@ -24,6 +24,7 @@ import {NftService} from '../nft.service';
         TuiAvatar,
         TuiCardLarge,
         TuiHeader,
+        TuiScrollbar,
         TuiSurface,
         TuiTitle,
     ],

diff --git a/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.ts b/apps/taiga-lumbermill/src/dashboards/crypto/components/nft/nft.component.ts
@@ -20,6 +20,7 @@ import {NftListComponent} from './nft-list/nft-list.component';
         TuiTitle,
     ],
     templateUrl: './nft.component.html',
+    styleUrl: './nft.component.less',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NFTComponent {