From b486e2619d3b25919536a7b344e7efb66e78b2ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Can=20Y=C4=B1lmaz?=
 <30300440+bariscanyilmaz@users.noreply.github.com>
Date: Thu, 2 Feb 2023 18:00:09 +0300
Subject: [PATCH] use cardClass

---
 .../dev-app/src/app/home/home.component.html  | 144 ++++++++++++------
 1 file changed, 96 insertions(+), 48 deletions(-)

diff --git a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
index ae646f2b6b..7024ab69e5 100644
--- a/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
+++ b/npm/ng-packs/apps/dev-app/src/app/home/home.component.html
@@ -10,8 +10,15 @@
 
     <p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>
 
-    <abp-button *ngIf="!hasLoggedIn" [loading]="loading" (click)="login()" [disabled]="loading" class="px-4 ml-1"
-      role="button" iconClass="fa fa-sign-in">
+    <abp-button
+      *ngIf="!hasLoggedIn"
+      [loading]="loading"
+      (click)="login()"
+      [disabled]="loading"
+      class="px-4 ml-1"
+      role="button"
+      iconClass="fa fa-sign-in"
+    >
       {{ 'AbpAccount::Login' | abpLocalization }}
     </abp-button>
   </div>
@@ -19,11 +26,11 @@
     <h3>Let's improve your application!</h3>
     <p>Here are some links to help you get started:</p>
   </div>
-  <abp-card class="mt-4 mb-5">
-
+  <abp-card cardClass="mt-4 mb-5">
     <abp-card-body>
       <div class="row text-center justify-content-md-center">
-        <ng-container *ngTemplateOutlet="
+        <ng-container
+          *ngTemplateOutlet="
             starterLinkTemplate;
             context: {
               $implicit: {
@@ -38,9 +45,11 @@
                 ]
               }
             }
-          "></ng-container>
+          "
+        ></ng-container>
 
-        <ng-container *ngTemplateOutlet="
+        <ng-container
+          *ngTemplateOutlet="
             starterLinkTemplate;
             context: {
               $implicit: {
@@ -54,9 +63,11 @@
                 ]
               }
             }
-          "></ng-container>
+          "
+        ></ng-container>
 
-        <ng-container *ngTemplateOutlet="
+        <ng-container
+          *ngTemplateOutlet="
             starterLinkTemplate;
             context: {
               $implicit: {
@@ -74,10 +85,12 @@
                 ]
               }
             }
-          "></ng-container>
+          "
+        ></ng-container>
       </div>
       <div class="row text-center mt-lg-3 justify-content-md-center">
-        <ng-container *ngTemplateOutlet="
+        <ng-container
+          *ngTemplateOutlet="
             starterLinkTemplate;
             context: {
               $implicit: {
@@ -91,11 +104,13 @@
                 ]
               }
             }
-          "></ng-container>
+          "
+        ></ng-container>
 
         <ng-template #githubButtonsTemplate>
           <p class="mb-1">
-            <iframe scrolling="no"
+            <iframe
+              scrolling="no"
               src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp&amp;title=&amp;aria-label=Star%20tabalinas%2Fjsgrid%20on%20GitHub&amp;data-icon=octicon-star&amp;data-text=Star&amp;data-size=large&amp;data-show-count=true"
               style="
                 width: 122px;
@@ -103,8 +118,10 @@
                 border: none;
                 display: inline-block;
                 margin-right: 4px;
-              "></iframe>
-            <iframe scrolling="no"
+              "
+            ></iframe>
+            <iframe
+              scrolling="no"
               src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp%2Fissues&amp;title=&amp;aria-label=Issue%20tabalinas%2Fjsgrid%20on%20GitHub&amp;data-icon=octicon-issue-opened&amp;data-text=Issue&amp;data-size=large"
               style="
                 width: 72px;
@@ -112,15 +129,19 @@
                 border: none;
                 display: inline-block;
                 margin-right: 4px;
-              "></iframe>
+              "
+            ></iframe>
 
-            <iframe scrolling="no"
+            <iframe
+              scrolling="no"
               src="https://buttons.github.io/buttons.html#href=https%3A%2F%2Fgithub.com%2Fabpframework%2Fabp%2Ffork&amp;title=&amp;aria-label=Fork%20tabalinas%2Fjsgrid%20on%20GitHub&amp;data-icon=octicon-repo-forked&amp;data-text=Fork&amp;data-size=large&amp;"
-              style="width: 72px; height: 28px; border: none; display: inline-block"></iframe>
+              style="width: 72px; height: 28px; border: none; display: inline-block"
+            ></iframe>
           </p>
         </ng-template>
 
-        <ng-container *ngTemplateOutlet="
+        <ng-container
+          *ngTemplateOutlet="
             starterLinkTemplate;
             context: {
               $implicit: {
@@ -136,9 +157,11 @@
                 customTemplate: githubButtonsTemplate
               }
             }
-          "></ng-container>
+          "
+        ></ng-container>
 
-        <ng-container *ngTemplateOutlet="
+        <ng-container
+          *ngTemplateOutlet="
             starterLinkTemplate;
             context: {
               $implicit: {
@@ -156,7 +179,8 @@
                 ]
               }
             }
-          "></ng-container>
+          "
+        ></ng-container>
       </div>
     </abp-card-body>
   </abp-card>
@@ -165,7 +189,7 @@
     <h3>Meet the ABP Commercial</h3>
     <p>A Complete Web Application Platform Built on the ABP Framework</p>
   </div>
-  <abp-card class="mt-4 mb-5">
+  <abp-card cardClass="mt-4 mb-5">
     <abp-card-body>
       <p class="px-lg-5 mx-lg-5 py-3 text-center">
         <a href="https://commercial.abp.io/" target="_blank">ABP Commercial</a> is a platform based
@@ -174,7 +198,8 @@
       </p>
 
       <div class="row text-center justify-content-md-center">
-        <ng-container *ngTemplateOutlet="
+        <ng-container
+          *ngTemplateOutlet="
             featuresTemplate;
             context: {
               $implicit: {
@@ -182,9 +207,11 @@
                 href: 'https://commercial.abp.io/startup-templates?ref=tmpl'
               }
             }
-          "></ng-container>
+          "
+        ></ng-container>
 
-        <ng-container *ngTemplateOutlet="
+        <ng-container
+          *ngTemplateOutlet="
             featuresTemplate;
             context: {
               $implicit: {
@@ -192,9 +219,11 @@
                 href: 'https://commercial.abp.io/modules?ref=tmpl'
               }
             }
-          "></ng-container>
+          "
+        ></ng-container>
 
-        <ng-container *ngTemplateOutlet="
+        <ng-container
+          *ngTemplateOutlet="
             featuresTemplate;
             context: {
               $implicit: {
@@ -202,9 +231,11 @@
                 href: 'https://commercial.abp.io/tools?ref=tmpl'
               }
             }
-          "></ng-container>
+          "
+        ></ng-container>
 
-        <ng-container *ngTemplateOutlet="
+        <ng-container
+          *ngTemplateOutlet="
             featuresTemplate;
             context: {
               $implicit: {
@@ -212,9 +243,11 @@
                 href: 'https://commercial.abp.io/themes?ref=tmpl'
               }
             }
-          "></ng-container>
+          "
+        ></ng-container>
 
-        <ng-container *ngTemplateOutlet="
+        <ng-container
+          *ngTemplateOutlet="
             featuresTemplate;
             context: {
               $implicit: {
@@ -222,9 +255,11 @@
                 href: 'https://support.abp.io/QA/Questions?ref=tmpl'
               }
             }
-          "></ng-container>
+          "
+        ></ng-container>
 
-        <ng-container *ngTemplateOutlet="
+        <ng-container
+          *ngTemplateOutlet="
             featuresTemplate;
             context: {
               $implicit: {
@@ -232,19 +267,23 @@
                 href: 'https://commercial.abp.io/additional-services?ref=tmpl'
               }
             }
-          "></ng-container>
+          "
+        ></ng-container>
       </div>
     </abp-card-body>
   </abp-card>
-  
+
   <div class="mb-5 text-center">
     <p class="align-middle">
-      <a href="https://twitter.com/abpframework" target="_blank" class="mx-2"><i class="fa fa-twitter"></i><span
-          class="text-secondary"> Abp Framework</span></a>
-      <a href="https://twitter.com/abpcommercial" target="_blank" class="mx-2"><i class="fa fa-twitter"></i><span
-          class="text-secondary"> Abp Commercial</span></a>
-      <a href="https://github.com/abpframework/abp" target="_blank" class="mx-2"><i class="fa fa-github"></i><span
-          class="text-secondary"> abpframework</span></a>
+      <a href="https://twitter.com/abpframework" target="_blank" class="mx-2"
+        ><i class="fa fa-twitter"></i><span class="text-secondary"> Abp Framework</span></a
+      >
+      <a href="https://twitter.com/abpcommercial" target="_blank" class="mx-2"
+        ><i class="fa fa-twitter"></i><span class="text-secondary"> Abp Commercial</span></a
+      >
+      <a href="https://github.com/abpframework/abp" target="_blank" class="mx-2"
+        ><i class="fa fa-github"></i><span class="text-secondary"> abpframework</span></a
+      >
     </p>
   </div>
 </div>
@@ -256,9 +295,17 @@
         <i class="fas fa-cubes text-secondary d-block my-3 fa-2x"></i> {{ context.title }}
       </h5>
       <p [innerHTML]="context.description"></p>
-      <ng-container *ngIf="context.customTemplate" [ngTemplateOutlet]="context.customTemplate"></ng-container>
-      <a *ngFor="let link of context.links" [href]="link.href" target="_blank" class="btn btn-link px-1">{{ link.label
-        }} <i class="fas fa-chevron-right"></i></a>
+      <ng-container
+        *ngIf="context.customTemplate"
+        [ngTemplateOutlet]="context.customTemplate"
+      ></ng-container>
+      <a
+        *ngFor="let link of context.links"
+        [href]="link.href"
+        target="_blank"
+        class="btn btn-link px-1"
+        >{{ link.label }} <i class="fas fa-chevron-right"></i
+      ></a>
     </div>
   </div>
 </ng-template>
@@ -269,8 +316,9 @@
       <h6>
         <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i>
         <span [innerHTML]="context.title"></span>
-        <a [href]="context.href" target="_blank" class="d-block mt-2 btn btn-sm btn-link">Details <i
-            class="fas fa-chevron-right"></i></a>
+        <a [href]="context.href" target="_blank" class="d-block mt-2 btn btn-sm btn-link"
+          >Details <i class="fas fa-chevron-right"></i
+        ></a>
       </h6>
     </div>
   </div>
@@ -290,4 +338,4 @@
       border-left: 0 !important;
     }
   }
-</style>
\ No newline at end of file
+</style>