Refactor to ordered list

apps/client/src/app/pages/portfolio/analysis/analysis-page.html

@@ -41,31 +41,33 @@
           >
         </mat-card-header>
         <mat-card-content>
-          <div *ngFor="let position of top3; let i = index" class="py-1">
-            <a
-              class="d-flex"
-              [queryParams]="{
+          <ol class="mb-0 ml-1 pl-3">
+            <li *ngFor="let position of top3" class="py-1">
+              <a
+                class="d-flex"
+                [queryParams]="{
                 dataSource: position.dataSource,
                 positionDetailDialog: true,
                 symbol: position.symbol
               }"
-              [routerLink]="[]"
-            >
-              <div class="flex-grow-1 mr-2 text-truncate">
-                {{ i + 1 }}. {{ position.name }}
-              </div>
-              <div class="d-flex justify-content-end">
-                <gf-value
-                  class="justify-content-end"
-                  position="end"
-                  [colorizeSign]="true"
-                  [isPercent]="true"
-                  [locale]="user?.settings?.locale"
-                  [value]="position.netPerformancePercentage"
-                ></gf-value>
-              </div>
-            </a>
-          </div>
+                [routerLink]="[]"
+              >
+                <div class="flex-grow-1 mr-2 text-truncate">
+                  {{ position.name }}
+                </div>
+                <div class="d-flex justify-content-end">
+                  <gf-value
+                    class="justify-content-end"
+                    position="end"
+                    [colorizeSign]="true"
+                    [isPercent]="true"
+                    [locale]="user?.settings?.locale"
+                    [value]="position.netPerformancePercentage"
+                  ></gf-value>
+                </div>
+              </a>
+            </li>
+          </ol>
           <div>
             <ngx-skeleton-loader
               *ngIf="!top3"
@@ -87,31 +89,33 @@
           >
         </mat-card-header>
         <mat-card-content>
-          <div *ngFor="let position of bottom3; let i = index" class="py-1">
-            <a
-              class="d-flex"
-              [queryParams]="{
+          <ol class="mb-0 ml-1 pl-3">
+            <li *ngFor="let position of bottom3" class="py-1">
+              <a
+                class="d-flex"
+                [queryParams]="{
                 dataSource: position.dataSource,
                 positionDetailDialog: true,
                 symbol: position.symbol
               }"
-              [routerLink]="[]"
-            >
-              <div class="flex-grow-1 mr-2 text-truncate">
-                {{ i + 1 }}. {{ position.name }}
-              </div>
-              <div class="d-flex justify-content-end">
-                <gf-value
-                  class="justify-content-end"
-                  position="end"
-                  [colorizeSign]="true"
-                  [isPercent]="true"
-                  [locale]="user?.settings?.locale"
-                  [value]="position.netPerformancePercentage"
-                ></gf-value>
-              </div>
-            </a>
-          </div>
+                [routerLink]="[]"
+              >
+                <div class="flex-grow-1 mr-2 text-truncate">
+                  {{ position.name }}
+                </div>
+                <div class="d-flex justify-content-end">
+                  <gf-value
+                    class="justify-content-end"
+                    position="end"
+                    [colorizeSign]="true"
+                    [isPercent]="true"
+                    [locale]="user?.settings?.locale"
+                    [value]="position.netPerformancePercentage"
+                  ></gf-value>
+                </div>
+              </a>
+            </li>
+          </ol>
           <div>
             <ngx-skeleton-loader
               *ngIf="!bottom3"