tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

use abp-card component instead of card class

pull/15584/head
Barış Can Yılmaz 4 years ago
parent
bb9f29a5a7
commit
efc71e3ec7
1 changed files with 54 additions and 102 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 156
      npm/ng-packs/apps/dev-app/src/app/home/home.component.html

156
npm/ng-packs/apps/dev-app/src/app/home/home.component.html
View File

@ -10,15 +10,8 @@
<p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p> <p class="lead px-lg-5 mx-lg-5">{{ '::LongWelcomeMessage' | abpLocalization }}</p>
<abp-button <abp-button *ngIf="!hasLoggedIn" [loading]="loading" (click)="login()" [disabled]="loading" class="px-4 ml-1"
*ngIf="!hasLoggedIn" role="button" iconClass="fa fa-sign-in">
[loading]="loading"
(click)="login()"
[disabled]="loading"
class="px-4 ml-1"
role="button"
iconClass="fa fa-sign-in"
>
{{ 'AbpAccount::Login' | abpLocalization }} {{ 'AbpAccount::Login' | abpLocalization }}
</abp-button> </abp-button>
</div> </div>
@ -26,11 +19,11 @@
<h3>Let's improve your application!</h3> <h3>Let's improve your application!</h3>
<p>Here are some links to help you get started:</p> <p>Here are some links to help you get started:</p>
</div> </div>
<div class="card mt-4 mb-5"> <abp-card class="mt-4 mb-5">
<div class="card-body">
<abp-card-body>
<div class="row text-center justify-content-md-center"> <div class="row text-center justify-content-md-center">
<ng-container <ng-container *ngTemplateOutlet="
*ngTemplateOutlet="
starterLinkTemplate; starterLinkTemplate;
context: { context: {
$implicit: { $implicit: {
@ -45,11 +38,9 @@
] ]
} }
} }
" "></ng-container>
></ng-container>
<ng-container <ng-container *ngTemplateOutlet="
*ngTemplateOutlet="
starterLinkTemplate; starterLinkTemplate;
context: { context: {
$implicit: { $implicit: {
@ -63,11 +54,9 @@
] ]
} }
} }
" "></ng-container>
></ng-container>
<ng-container <ng-container *ngTemplateOutlet="
*ngTemplateOutlet="
starterLinkTemplate; starterLinkTemplate;
context: { context: {
$implicit: { $implicit: {
@ -85,12 +74,10 @@
] ]
} }
} }
" "></ng-container>
></ng-container>
</div> </div>
<div class="row text-center mt-lg-3 justify-content-md-center"> <div class="row text-center mt-lg-3 justify-content-md-center">
<ng-container <ng-container *ngTemplateOutlet="
*ngTemplateOutlet="
starterLinkTemplate; starterLinkTemplate;
context: { context: {
$implicit: { $implicit: {
@ -104,13 +91,11 @@
] ]
} }
} }
" "></ng-container>
></ng-container>
<ng-template #githubButtonsTemplate> <ng-template #githubButtonsTemplate>
<p class="mb-1"> <p class="mb-1">
<iframe <iframe scrolling="no"
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" 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=" style="
width: 122px; width: 122px;
@ -118,10 +103,8 @@
border: none; border: none;
display: inline-block; display: inline-block;
margin-right: 4px; 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%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" 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=" style="
width: 72px; width: 72px;
@ -129,19 +112,15 @@
border: none; border: none;
display: inline-block; display: inline-block;
margin-right: 4px; margin-right: 4px;
" "></iframe>
></iframe>
<iframe <iframe scrolling="no"
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;" 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" style="width: 72px; height: 28px; border: none; display: inline-block"></iframe>
></iframe>
</p> </p>
</ng-template> </ng-template>
<ng-container <ng-container *ngTemplateOutlet="
*ngTemplateOutlet="
starterLinkTemplate; starterLinkTemplate;
context: { context: {
$implicit: { $implicit: {
@ -157,11 +136,9 @@
customTemplate: githubButtonsTemplate customTemplate: githubButtonsTemplate
} }
} }
" "></ng-container>
></ng-container>
<ng-container <ng-container *ngTemplateOutlet="
*ngTemplateOutlet="
starterLinkTemplate; starterLinkTemplate;
context: { context: {
$implicit: { $implicit: {
@ -179,19 +156,17 @@
] ]
} }
} }
" "></ng-container>
></ng-container>
</div> </div>
</div> </abp-card-body>
</div> </abp-card>
<div class="mt-5 my-3 text-center"> <div class="mt-5 my-3 text-center">
<h3>Meet the ABP Commercial</h3> <h3>Meet the ABP Commercial</h3>
<p>A Complete Web Application Platform Built on the ABP Framework</p> <p>A Complete Web Application Platform Built on the ABP Framework</p>
</div> </div>
<abp-card class="mt-4 mb-5">
<div class="card mt-4 mb-5"> <abp-card-body>
<div class="card-body">
<p class="px-lg-5 mx-lg-5 py-3 text-center"> <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 <a href="https://commercial.abp.io/" target="_blank">ABP Commercial</a> is a platform based
on the open source ABP framework. It provides pre-built application modules, rapid on the open source ABP framework. It provides pre-built application modules, rapid
@ -199,8 +174,7 @@
</p> </p>
<div class="row text-center justify-content-md-center"> <div class="row text-center justify-content-md-center">
<ng-container <ng-container *ngTemplateOutlet="
*ngTemplateOutlet="
featuresTemplate; featuresTemplate;
context: { context: {
$implicit: { $implicit: {
@ -208,11 +182,9 @@
href: 'https://commercial.abp.io/startup-templates?ref=tmpl' href: 'https://commercial.abp.io/startup-templates?ref=tmpl'
} }
} }
" "></ng-container>
></ng-container>
<ng-container <ng-container *ngTemplateOutlet="
*ngTemplateOutlet="
featuresTemplate; featuresTemplate;
context: { context: {
$implicit: { $implicit: {
@ -220,11 +192,9 @@
href: 'https://commercial.abp.io/modules?ref=tmpl' href: 'https://commercial.abp.io/modules?ref=tmpl'
} }
} }
" "></ng-container>
></ng-container>
<ng-container <ng-container *ngTemplateOutlet="
*ngTemplateOutlet="
featuresTemplate; featuresTemplate;
context: { context: {
$implicit: { $implicit: {
@ -232,11 +202,9 @@
href: 'https://commercial.abp.io/tools?ref=tmpl' href: 'https://commercial.abp.io/tools?ref=tmpl'
} }
} }
" "></ng-container>
></ng-container>
<ng-container <ng-container *ngTemplateOutlet="
*ngTemplateOutlet="
featuresTemplate; featuresTemplate;
context: { context: {
$implicit: { $implicit: {
@ -244,11 +212,9 @@
href: 'https://commercial.abp.io/themes?ref=tmpl' href: 'https://commercial.abp.io/themes?ref=tmpl'
} }
} }
" "></ng-container>
></ng-container>
<ng-container <ng-container *ngTemplateOutlet="
*ngTemplateOutlet="
featuresTemplate; featuresTemplate;
context: { context: {
$implicit: { $implicit: {
@ -256,11 +222,9 @@
href: 'https://support.abp.io/QA/Questions?ref=tmpl' href: 'https://support.abp.io/QA/Questions?ref=tmpl'
} }
} }
" "></ng-container>
></ng-container>
<ng-container <ng-container *ngTemplateOutlet="
*ngTemplateOutlet="
featuresTemplate; featuresTemplate;
context: { context: {
$implicit: { $implicit: {
@ -268,22 +232,19 @@
href: 'https://commercial.abp.io/additional-services?ref=tmpl' href: 'https://commercial.abp.io/additional-services?ref=tmpl'
} }
} }
" "></ng-container>
></ng-container>
</div> </div>
</div> </abp-card-body>
</div> </abp-card>
<div class="mb-5 text-center"> <div class="mb-5 text-center">
<p class="align-middle"> <p class="align-middle">
<a href="https://twitter.com/abpframework" target="_blank" class="mx-2" <a href="https://twitter.com/abpframework" target="_blank" class="mx-2"><i class="fa fa-twitter"></i><span
><i class="fa fa-twitter"></i><span class="text-secondary"> Abp Framework</span></a 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
<a href="https://twitter.com/abpcommercial" target="_blank" class="mx-2" class="text-secondary"> Abp Commercial</span></a>
><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://github.com/abpframework/abp" target="_blank" class="mx-2"
><i class="fa fa-github"></i><span class="text-secondary"> abpframework</span></a
>
</p> </p>
</div> </div>
</div> </div>
@ -295,17 +256,9 @@
<i class="fas fa-cubes text-secondary d-block my-3 fa-2x"></i> {{ context.title }} <i class="fas fa-cubes text-secondary d-block my-3 fa-2x"></i> {{ context.title }}
</h5> </h5>
<p [innerHTML]="context.description"></p> <p [innerHTML]="context.description"></p>
<ng-container <ng-container *ngIf="context.customTemplate" [ngTemplateOutlet]="context.customTemplate"></ng-container>
*ngIf="context.customTemplate" <a *ngFor="let link of context.links" [href]="link.href" target="_blank" class="btn btn-link px-1">{{ link.label
[ngTemplateOutlet]="context.customTemplate" }} <i class="fas fa-chevron-right"></i></a>
></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>
</div> </div>
</ng-template> </ng-template>
@ -316,9 +269,8 @@
<h6> <h6>
<i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i> <i class="fas fa-plus d-block mb-3 fa- 2x text-secondary"></i>
<span [innerHTML]="context.title"></span> <span [innerHTML]="context.title"></span>
<a [href]="context.href" target="_blank" class="d-block mt-2 btn btn-sm btn-link" <a [href]="context.href" target="_blank" class="d-block mt-2 btn btn-sm btn-link">Details <i
>Details <i class="fas fa-chevron-right"></i class="fas fa-chevron-right"></i></a>
></a>
</h6> </h6>
</div> </div>
</div> </div>
@ -338,4 +290,4 @@
border-left: 0 !important; border-left: 0 !important;
} }
} }
</style> </style>
Write Preview
Loading…
Cancel
Save