Skip to content

Commit

Permalink
closes #14
Browse files Browse the repository at this point in the history
  • Loading branch information
@seiyria
seiyria committed Apr 24, 2024
1 parent 098eaab commit 489fdf2
Show file tree
Hide file tree
Showing 7 changed files with 46 additions and 131 deletions.
8 changes: 6 additions & 2 deletions src/app/_shared/components/card-display/card-display.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
@if(card) {
<div class="card-image-container" *ngIf="display === 'images'">
@if(display === 'images') {
<div class="card-image-container">
<ion-img [src]="card.image" class="card-image" [ngClass]="[size]"></ion-img>
</div>
}

<div class="card-text-container" *ngIf="display === 'text'">
@if(display === 'text') {
<div class="card-text-container">
<ion-card class="card-info">
<ion-card-content>
<ion-list>
Expand All @@ -17,4 +20,5 @@
</ion-card-content>
</ion-card>
</div>
}
}
128 changes: 14 additions & 114 deletions src/app/_shared/components/search-cards/search-cards.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,139 +1,40 @@
<div class="no-results ion-text-center" *ngIf="displayTotal === 0">
@if(displayTotal === 0) {
<div class="no-results ion-text-center">
<h2>No results found</h2>
<p>For help using the search tool, check the <a target="_blank" [routerLink]="['/syntax']">help guide</a>.</p>
</div>
}

<ng-container *ngIf="displayTotal > 0">
@if(displayTotal > 0) {
<ng-container>
<ng-container *ngTemplateOutlet="cardSwitches"></ng-container>

<ion-grid class="info">
<ion-row>
<ion-col>
<span *ngIf="queryDisplay !== 'checklist'">{{ displayCurrent | number }} - {{ displayMaximum | number }}
<span>{{ displayCurrent | number }} - {{ displayMaximum | number }}
of&nbsp;</span> {{ displayTotal | number }} {{ queryDesc }}
</ion-col>
</ion-row>
</ion-grid>

<div class="page-container">
<ion-grid class="cards" *ngIf="queryDisplay !== 'checklist'">
<ion-grid class="cards">
<ion-row>
<ion-col class="card-container" [sizeMd]="3" [sizeSm]="6" [sizeXs]="12" *ngFor="let card of visibleCards">
@for(card of visibleCards; track card.id) {
<ion-col class="card-container" [sizeMd]="3" [sizeSm]="6" [sizeXs]="12">
<a [routerLink]="['/card', card.id]">
<app-card-display class="card" [cardCode]="card.id" [display]="queryDisplay"></app-card-display>
</a>
</ion-col>
}
</ion-row>
</ion-grid>

<div class="table-container" [class.hidden]="queryDisplay !== 'checklist'">

<!-- mobile table -->
<ngx-datatable class="striped dark ion-hide-md-up" [selected]="selected" [selectionType]="checkboxSelectionType"
[selectAllRowsOnPage]="false" (select)="select($event)" [columnMode]="'flex'" [headerHeight]="50"
[footerHeight]="50" [rowHeight]="75" [limit]="10" [sorts]="[{ prop: 'name', dir: 'asc' }]"
[rows]="queriedCards">

<ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false" [draggable]="false"
[resizeable]="false" [headerCheckboxable]="true" [checkboxable]="true">
</ngx-datatable-column>

<ngx-datatable-column name="Name" [flexGrow]="3">
<ng-template let-row="row" ngx-datatable-cell-template>
<div class="cell" [ngClass]="['color-' + row.color]">
<a [routerLink]="['/card', row.id]">{{ row.name }}</a>
<br>
{{ row.id }}
</div>
</ng-template>
</ngx-datatable-column>

</ngx-datatable>

<!-- desktop table -->
<ngx-datatable #table class="striped dark ion-hide-md-down" [selected]="selected"
[selectionType]="checkboxSelectionType" [selectAllRowsOnPage]="false" (select)="select($event)"
[columnMode]="'flex'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="75" [limit]="10"
[sorts]="[{ prop: 'name', dir: 'asc' }]" [rows]="queriedCards">

<ngx-datatable-row-detail [rowHeight]="getDetailHeight()">
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
<div class="ability" *ngFor="let ability of row.ability">
{{ ability }}
</div>
</ng-template>
</ngx-datatable-row-detail>

<ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false" [draggable]="false"
[resizeable]="false" [headerCheckboxable]="true" [checkboxable]="true">
</ngx-datatable-column>

<ngx-datatable-column [width]="50" [resizeable]="false" [sortable]="false" [draggable]="false"
[canAutoResize]="false">
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
<a class="cursor" [class.datatable-icon-right]="!expanded" [class.datatable-icon-down]="expanded"
(click)="table.rowDetail.toggleExpandRow(row)" (keypress)="table.rowDetail.toggleExpandRow(row)"
tabindex="0">
</a>
</ng-template>
</ngx-datatable-column>

<ngx-datatable-column name="Name" [flexGrow]="3">
<ng-template let-row="row" ngx-datatable-cell-template>
<div class="cell" [ngClass]="['color-' + row.color]">
<a [routerLink]="['/card', row.id]">{{ row.name }}</a>
<br>
{{ row.id }}
</div>
</ng-template>
</ngx-datatable-column>

<ngx-datatable-column name="Rarity" [flexGrow]="1">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row.rarity }}
</ng-template>
</ngx-datatable-column>

<ngx-datatable-column name="Expansion" [flexGrow]="2">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row.expansion }}
</ng-template>
</ngx-datatable-column>

<ngx-datatable-column name="Type" [flexGrow]="1">
<ng-template let-row="row" ngx-datatable-cell-template>
{{ row.type }}
</ng-template>
</ngx-datatable-column>

<ngx-datatable-column name="Stats" [flexGrow]="2" [sortable]="false">
<ng-template let-row="row" ngx-datatable-cell-template>
<div *ngIf="row.type === 'Character'">
<div class="trigger-icons character">
{{ row.level }}/{{ row.cost }} <app-cardicon *ngFor="let icon of row.trigger" [type]="icon"
[size]="16"></app-cardicon>
</div>
<div>
{{ row.power }} Power
</div>
</div>

<div *ngIf="row.type === 'Climax'" class="trigger-icons climax">
<app-cardicon *ngFor="let icon of row.trigger" [type]="icon" [size]="24"></app-cardicon>
</div>

<div *ngIf="row.type === 'Event'">
{{ row.level }}/{{ row.cost }}
</div>
</ng-template>
</ngx-datatable-column>

</ngx-datatable>
</div>
<ng-container *ngTemplateOutlet="cardSwitches"></ng-container>
</div>

<ng-container *ngTemplateOutlet="cardSwitches"></ng-container>
</ng-container>
}

<ng-template #cardSwitches>
<ion-grid class="switches">
Expand All @@ -147,7 +48,7 @@ <h2>No results found</h2>
</ion-select>
</ion-col>

<ion-col [sizeXs]="12" [sizeMd]="4" *ngIf="queryDisplay !== 'checklist'">
<ion-col [sizeXs]="12" [sizeMd]="4">
<div class="text-display">Sorted by</div>
<ion-select class="themed" [(ngModel)]="querySort" interface="popover" placeholder="Sort Prop"
(ionChange)="redoCurrentSearch()">
Expand All @@ -163,8 +64,7 @@ <h2>No results found</h2>
</ion-select>
</ion-col>

<ion-col [sizeXs]="12" [sizeMd]="6" class="pagination ion-justify-content-center"
*ngIf="queryDisplay !== 'checklist'">
<ion-col [sizeXs]="12" [sizeMd]="6" class="pagination ion-justify-content-center">
<ion-button fill="outline" color="secondary" [disabled]="page <= 0" (click)="changePage(0)">
<span class="symbol">&laquo;</span>
</ion-button>
Expand Down
17 changes: 12 additions & 5 deletions src/app/_shared/components/topbar/topbar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,15 @@
<ion-img src="assets/favicon/android-chrome-192x192.png"></ion-img>
</a>

<ion-title *ngIf="title">
@if(title) {
<ion-title>
{{ title }}
</ion-title>
}

<app-omnisearch *ngIf="showSearch" (type)="type.emit($event)" (enter)="enter.emit($event)"
[initialQuery]="query"></app-omnisearch>
@if(showSearch) {
<app-omnisearch (type)="type.emit($event)" (enter)="enter.emit($event)" [initialQuery]="query"></app-omnisearch>
}
</ion-col>

<ion-col size-xs="2" size-sm="2" size-md="8" size-lg="6">
Expand All @@ -28,7 +31,8 @@
<ng-content select="[slot='buttons-mobile']"></ng-content>
</div>

<ng-container *ngIf="!buttonsMobile.hasChildNodes()">
@if(!buttonsMobile.hasChildNodes()) {
<ng-container>
<ion-item [routerLink]="['/advanced']" detail="false">
<ion-icon slot="start" name="funnel-outline"></ion-icon>
Advanced
Expand All @@ -44,6 +48,7 @@
Products
</ion-item>
</ng-container>
}

</ion-list>
</ion-content>
Expand All @@ -56,7 +61,8 @@
<ng-content select="[slot='buttons-desktop']"></ng-content>
</div>

<ng-container *ngIf="!buttonsDesktop.hasChildNodes()">
@if(!buttonsDesktop.hasChildNodes()) {
<ng-container>
<ion-button fill="clear" color="light" [routerLink]="['/advanced']">
<ion-icon slot="start" name="funnel-outline"></ion-icon>
Advanced
Expand All @@ -72,6 +78,7 @@
Products
</ion-button>
</ng-container>
}
</div>
</ion-col>
</ion-row>
Expand Down
4 changes: 3 additions & 1 deletion src/app/advanced/advanced.page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@

<ion-content>
<div class="page-container">
<ion-grid class="search-grid" *ngIf="searchQuery">
@if(searchQuery) {
<ion-grid class="search-grid">

<!-- card name -->
<ion-row>
Expand Down Expand Up @@ -71,6 +72,7 @@
</ion-row>

</ion-grid>
}
</div>

<app-below-the-fold></app-below-the-fold>
Expand Down
4 changes: 2 additions & 2 deletions src/app/search/search.page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@

<ion-content>
<div class="container">
<app-search-cards *ngIf="!isDeckSearch" [query]="query" [queryDisplay]="queryDisplay" [querySort]="querySort"
[querySortBy]="querySortBy" [page]="page"></app-search-cards>
<app-search-cards [query]="query" [queryDisplay]="queryDisplay" [querySort]="querySort" [querySortBy]="querySortBy"
[page]="page"></app-search-cards>
</div>

<app-below-the-fold></app-below-the-fold>
Expand Down
4 changes: 0 additions & 4 deletions src/app/search/search.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,6 @@ export class SearchPage {
public querySortBy: 'asc' | 'desc' = 'asc';
public page = 0;

public get isDeckSearch() {
return this.query.includes('is:deck');
}

ionViewDidEnter() {
this.query = this.route.snapshot.queryParamMap.get('q') || '';
this.queryDisplay =
Expand Down
12 changes: 9 additions & 3 deletions src/app/syntax/syntax.page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,20 @@ <h5>Lederlight includes a large set of keywords and filters you can use to filte
</ion-row>

<ion-row>
<ion-col [sizeXs]="12" [sizeMd]="4" *ngFor="let operator of allOperators">
@for(operator of allOperators; track $index) {
<ion-col [sizeXs]="12" [sizeMd]="4">
<ion-button shape="round" expand="full" fill="outline" (click)="navigateTo(operator.id)">
<ion-icon [name]="operator.icon" slot="start"></ion-icon>
{{ operator.name }}
</ion-button>
</ion-col>
}
</ion-row>
</ion-grid>

<ion-grid class="reference-list">
<ion-row class="reference-row" *ngFor="let operator of allOperators" [style.--accent-color]="operator.color">
@for(operator of allOperators; track $index) {
<ion-row class="reference-row" [style.--accent-color]="operator.color">
<ion-col [sizeXs]="12" [sizeMd]="6">
<h3 class="operator-title" [id]="operator.id">
<ion-icon [name]="operator.icon" [style.color]="operator.color"></ion-icon>
Expand All @@ -35,7 +38,8 @@ <h3 class="operator-title" [id]="operator.id">
</ion-col>

<ion-col>
<ion-row *ngFor="let example of operator.examples">
@for(example of operator.examples; track $index) {
<ion-row>
<ion-col size="12">
<ion-card class="example">
<ion-card-content>
Expand All @@ -45,8 +49,10 @@ <h4 class="example-syntax" [innerHTML]="formatText(example.example)"></h4>
</ion-card>
</ion-col>
</ion-row>
}
</ion-col>
</ion-row>
}
</ion-grid>
</div>

Expand Down

0 comments on commit 489fdf2

Please sign in to comment.