|
1 | 1 | <div> |
2 | | - <div class="card"> |
3 | | - <div class = "row d-flex justify-content-center"> |
| 2 | + <div class="card p-3"> |
| 3 | + <div class="d-flex flex-wrap flex-row justify-content-around gap-4"> |
4 | 4 | <div *ngIf="isLoading$ | async"> |
5 | 5 | <ds-loading message="{{'loading.default' | translate}}"></ds-loading> |
6 | 6 | </div> |
7 | | - <div *ngFor="let counter of (counterData$ | async)" |
8 | | - class="px-4 py-1 d-flex flex-column" style="flex: 1 0 100px"> |
9 | | - <div (click)="goToLink(counter.link)" |
10 | | - [ngStyle]="{'cursor': counter.link? 'pointer' : 'inherit'}" |
11 | | - class="col d-flex justify-content-center text-center align-items-center"> |
12 | | - <i [ngClass]="counter.icon"></i> |
| 7 | + <ng-container *ngFor="let counter of (counterData$ | async)"> |
| 8 | + <ng-container *ngIf="counter.link; else countersSectionContent"> |
| 9 | + <a class="text-decoration-none" *ngIf="internalLinkService.isLinkInternal(counter.link)" [routerLink]="internalLinkService.getRelativePath(counter.link)"> |
| 10 | + <ng-container *ngTemplateOutlet="countersSectionContent"></ng-container> |
| 11 | + </a> |
| 12 | + <a class="text-decoration-none" *ngIf="!internalLinkService.isLinkInternal(counter.link)" [href]="counter.link" [target]="'_blank'"> |
| 13 | + <ng-container *ngTemplateOutlet="countersSectionContent"></ng-container> |
| 14 | + </a> |
| 15 | + </ng-container> |
| 16 | + <ng-template #countersSectionContent> |
| 17 | + <div class="d-flex flex-wrap flex-column justify-content-between align-items-center gapy-1 counters-section"> |
| 18 | + <i class="d-block mb-2" [ngClass]="counter.icon"></i> |
| 19 | + <div class="counters-label text-center"> |
| 20 | + {{ 'explore.counters-section.' + counter.label | translate }} |
| 21 | + </div> |
| 22 | + <div class="text-center font-weight-bold"> |
| 23 | + <b>{{ counter.count }}</b> |
| 24 | + </div> |
13 | 25 | </div> |
14 | | - <div (click)="goToLink(counter.link)" |
15 | | - [ngStyle]="{'cursor': counter.link? 'pointer' : 'inherit'}" |
16 | | - class="col d-flex justify-content-center text-center align-items-center"> |
17 | | - {{'explore.counters-section.' + counter.label | translate}} |
18 | | - </div> |
19 | | - <div (click)="goToLink(counter.link)" |
20 | | - [ngStyle]="{'cursor': counter.link? 'pointer' : 'inherit'}" |
21 | | - class="col d-flex justify-content-center text-center align-items-center"> |
22 | | - <b>{{counter.count}}</b> |
23 | | - </div> |
24 | | - </div> |
| 26 | + </ng-template> |
| 27 | + </ng-container> |
25 | 28 | </div> |
26 | 29 | </div> |
27 | 30 | </div> |
0 commit comments