Skip to content

Commit

Permalink
refactor: control flow syntax (#102)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DaveSkender
DaveSkender authored Nov 11, 2023
1 parent 4d9aa57 commit cf49ab8
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 35 deletions.
11 changes: 7 additions & 4 deletions src/app/components/site-card/site-card.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,18 @@ <h2 class="usa-card__heading">{{ card.title }}</h2>
<div class="usa-card__img">

<!-- design pattern thumbnails -->
<img *ngIf="!card.imageType" class="easeload" onload="this.style.opacity=1"
ngSrc="{{ card.image }}" width="605" height="454" priority="{{(i<6)?true:false}}" alt="" />
@if (!card.imageType) {
<img class="easeload" onload="this.style.opacity=1" ngSrc="{{ card.image }}" width="605" height="454" priority="{{(i<6)?true:false}}" alt="" />
}

<!-- if icon is used instead (and for suggestion card) -->
<div *ngIf="card.imageType==='usa-icon'" class="icon-container">
<svg class="usa-icon" alt="">
@if (card.imageType === 'usa-icon') {
<div class="icon-container">
<svg class="usa-icon" alt="">
<use [attr.href]="'/assets/uswds/img/sprite.svg#'+card.image"></use>
</svg>
</div>
}
</div>
</div>
<div class="usa-card__body">
Expand Down
26 changes: 14 additions & 12 deletions src/app/pages/bubbles/bubbles.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,17 @@
<!-- FLOATING BUBBLES DESIGN PATTERN -->
<section class="usa-section bubbles-section">

<div class="bubble" *ngFor="let card of cards; index as i">
<a type=button class="usa-button" href="{{ card.link }}" aria-label=""
[attr.style]="'background-image: url(' + card.image + ');'"
target="_blank" rel="noopener noreferrer nofollow">
<div class="bubble-overlay">
<div class="bubble-label">{{ card.title }}</div>
</div>
</a>
</div>
@for (card of cards; track card; let i = $index) {
<div class="bubble">
<a type=button class="usa-button" href="{{ card.link }}" aria-label=""
[attr.style]="'background-image: url(' + card.image + ');'"
target="_blank" rel="noopener noreferrer nofollow">
<div class="bubble-overlay">
<div class="bubble-label">{{ card.title }}</div>
</div>
</a>
</div>
}

</section>

Expand All @@ -40,8 +42,8 @@

It'd be difficult to do this using the standard
<a class="usa-link usa-link--external"
href="https://designsystem.digital.gov/utilities/layout-grid/"
target="_blank"
rel="noopener noreferrer nofollow">Layout grid</a>.
href="https://designsystem.digital.gov/utilities/layout-grid/"
target="_blank"
rel="noopener noreferrer nofollow">Layout grid</a>.
</p>
</app-pattern-footer>
52 changes: 35 additions & 17 deletions src/app/pages/card-catalog/card-catalog.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@
<div class="grid-container">

<ul class="usa-card-group">
<li class="usa-card tablet:grid-col-6 tablet-lg:grid-col-4" *ngFor="let card of cards; index as i">
@for (card of cards; track card; let i = $index) {
<li class="usa-card tablet:grid-col-6 tablet-lg:grid-col-4">
<a class="usa-card__container" id="{{ card.id }}" href="{{ card.link }}" type="button" target="_blank"
rel="noreferrer">
<div class="usa-card__header">
Expand All @@ -38,13 +39,16 @@ <h2 class="usa-card__heading">{{ card.title }}</h2>
</div>
</a>
</li>
}
</ul>
</div>

<!-- "See more" pagination in standard button group -->
<div class="grid-container" *ngIf="!classic">
@if (!classic) {
<div class="grid-container">
<p class="text-center">Showing {{ cards.length }} of {{ totalCards }} cards</p>
<ul class="usa-button-group" *ngIf="cards.length < totalCards">
@if (cards.length < totalCards) {
<ul class="usa-button-group">
<li class="usa-button-group__item">
<button class="usa-button" (click)="showPage(page+1)">
Show {{ pageSize }} more
Expand All @@ -56,17 +60,21 @@ <h2 class="usa-card__heading">{{ card.title }}</h2>
</button>
</li>
</ul>
}
</div>
}

<!-- "Classic" pagination numbered index -->
<!-- https://designsystem.digital.gov/components/pagination/ -->
<div class="grid-container" *ngIf="classic">
@if (classic) {
<div class="grid-container">

<p class="text-center">Showing {{cardStart}}-{{cardEnd}} of {{totalCards}} cards</p>

<nav aria-label="Pagination" class="usa-pagination">
<ul class="usa-pagination__list">
<li class="usa-pagination__item usa-pagination__arrow" *ngIf="pages>3 && page>1">
@if (pages>3 && page>1) {
<li class="usa-pagination__item usa-pagination__arrow">
<a role="button" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page"
(click)="showPage(page-1)">
<svg class="usa-icon" aria-hidden="true" role="img">
Expand All @@ -75,34 +83,42 @@ <h2 class="usa-card__heading">{{ card.title }}</h2>
<span class="usa-pagination__link-text">Previous</span>
</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no" *ngIf="pages>3 && page>=3">
}
@if (pages>3 && page>=3) {
<li class="usa-pagination__item usa-pagination__page-no">
<a role="button" class="usa-pagination__button" aria-label="First page, page 1" (click)="showPage(1)">1</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" aria-label="ellipsis indicating non-visible pages"
*ngIf="pages>3 && page>=3">
<li class="usa-pagination__item usa-pagination__overflow" aria-label="ellipsis indicating non-visible pages">
<span>…</span>
</li>
<li class="usa-pagination__item usa-pagination__page-no" *ngIf="page>1">
}
@if (page>1) {
<li class="usa-pagination__item usa-pagination__page-no">
<a role="button" class="usa-pagination__button" attr.aria-label="Page {{page-1}}"
(click)="showPage(page-1)">{{page-1}}</a>
</li>
}
<li class="usa-pagination__item usa-pagination__page-no">
<a role="button" class="usa-pagination__button usa-current" attr.aria-label="Page {{page}}"
aria-current="page" (click)="u.scrollToStart('top')">{{page}}</a>
</li>
<li class="usa-pagination__item usa-pagination__page-no" *ngIf="page+1<=pages">
<a role="button" class="usa-pagination__button" attr.aria-label="Page {{page+1}}"
(click)="showPage(page+1)">{{page+1}}</a>
@if (page+1<=pages) {
<li class="usa-pagination__item usa-pagination__page-no">
<a role="button" class="usa-pagination__button" attr.aria-label="Page {{page+1}}"
(click)="showPage(page+1)">{{page+1}}</a>
</li>
<li class="usa-pagination__item usa-pagination__overflow" aria-label="ellipsis indicating non-visible pages"
*ngIf="pages>3 && page<=pages-2">
<span>…</span>
}
@if (pages>3 && page<=pages-2) {
<li class="usa-pagination__item usa-pagination__overflow" aria-label="ellipsis indicating non-visible pages">
<span>…</span>
</li>
<li class="usa-pagination__item usa-pagination__page-no" *ngIf="pages>3 && page<=pages-2">
<li class="usa-pagination__item usa-pagination__page-no">
<a role="button" class="usa-pagination__button" attr.aria-label="Last page, page {{pages}}"
(click)="showPage(pages)">{{pages}}</a>
</li>
<li class="usa-pagination__item usa-pagination__arrow" *ngIf="pages>3 && page!=pages">
}
@if (pages>3 && page!=pages) {
<li class="usa-pagination__item usa-pagination__arrow">
<a role="button" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page"
(click)="showPage(page+1)">
<span class="usa-pagination__link-text">Next </span>
Expand All @@ -111,9 +127,11 @@ <h2 class="usa-card__heading">{{ card.title }}</h2>
</svg>
</a>
</li>
}
</ul>
</nav>
</div>
}

</section>

Expand Down
8 changes: 6 additions & 2 deletions src/app/pages/home/home.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,11 @@ <h1>
<ul class="usa-card-group padding-top-4" id="design-patterns">

<!-- cards -->
<li class="tablet:grid-col-6 tablet-lg:grid-col-4" *ngFor="let card of cards; index as i">
@for (card of cards; track card; let i = $index) {
<li class="tablet:grid-col-6 tablet-lg:grid-col-4">
<app-site-card [card]="card" [i]=i />
</li>
}

<!-- suggest more -->
<li class="tablet:grid-col-6 tablet-lg:grid-col-4">
Expand All @@ -40,14 +42,16 @@ <h1>
<section class="usa-section usa-dark-background site-dark padding-top-2">
<div class="grid-container">

<ul class="usa-button-group padding-left-2 margin-bottom-4" *ngIf="cards.length>9">
@if (cards.length > 9) {
<ul class="usa-button-group padding-left-2 margin-bottom-4">
<li class="usa-button-group__item">
<button class="usa-button usa-button--outline usa-button--inverse usa-button--unstyled"
(click)="u.scrollToStart('top')">
Return to top
</button>
</li>
</ul>
}

<!-- about us -->
<h2 class="margin-top-8">About us</h2>
Expand Down

0 comments on commit cf49ab8

Please sign in to comment.