Skip to content

Commit 7510868

Browse files
seiyriaseiyria
committed
make search bar more usable
1 parent b1017b5 commit 7510868

File tree

2 files changed

+39
-50
lines changed

2 files changed

+39
-50
lines changed

‎package-lock.json

+1-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/home/home.page.html

+38-44
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,32 @@
11
<ion-header>
22
<ion-toolbar>
3-
<ion-buttons slot="start">
3+
<ion-buttons *ngIf="!showSearch" slot="start">
44
<ion-menu-button></ion-menu-button>
55
</ion-buttons>
66

77
<ion-title *ngIf="!showSearch">
88
<span class="title-container">
99
<span class="title-text ion-hide-sm-down">{{ 'App.RootPrefix' | translate }}</span>
1010
<img class="title-logo" src="assets/logo.png" />
11-
</span>
11+
</span>
1212
</ion-title>
1313

14-
<ion-searchbar *ngIf="showSearch"
15-
color="primary"
16-
showCancelButton="true"
17-
debounce="300"
18-
(ionCancel)="setSearchValue(null)"
19-
(ionClear)="setSearchValue(null)"
20-
(ionChange)="setSearchValue($event.detail.value)"
21-
[placeholder]="'App.SearchPlaceholder' | translate"></ion-searchbar>
14+
<ion-searchbar *ngIf="showSearch" color="primary" showCancelButton="true" debounce="300"
15+
(ionCancel)="setSearchValue(null)" (ionClear)="setSearchValue(null)"
16+
(ionChange)="setSearchValue($event.detail.value)"
17+
[placeholder]="'App.SearchPlaceholder' | translate"></ion-searchbar>
2218

2319
<ion-buttons slot="end">
2420
<ion-button (click)="toggleSearch()" [title]="'App.Titles.Search' | translate">
2521
<ion-icon name="search"></ion-icon>
2622
</ion-button>
27-
<ion-button (click)="openFAQ()" [title]="'App.Titles.FAQ' | translate">
23+
<ion-button *ngIf="!showSearch" (click)="openFAQ()" [title]="'App.Titles.FAQ' | translate">
2824
<ion-icon name="help-circle"></ion-icon>
2925
</ion-button>
30-
<ion-button (click)="openReach()" [title]="'App.Titles.Reach' | translate">
26+
<ion-button *ngIf="!showSearch" (click)="openReach()" [title]="'App.Titles.Reach' | translate">
3127
<ion-icon name="calculator"></ion-icon>
3228
</ion-button>
33-
<ion-button (click)="openMaps()" [title]="'App.Titles.Map' | translate">
29+
<ion-button *ngIf="!showSearch" (click)="openMaps()" [title]="'App.Titles.Map' | translate">
3430
<ion-icon name="map"></ion-icon>
3531
</ion-button>
3632
</ion-buttons>
@@ -47,75 +43,73 @@
4743

4844
<div id="top"></div>
4945

50-
<div *ngFor="let rule of rulesService.rules; let majorIndex = index"
51-
class="rule-container major"
52-
[style.border-color]="rule.color"
53-
[class.ion-hide]="!isVisible([majorIndex + 1])">
46+
<div *ngFor="let rule of rulesService.rules; let majorIndex = index" class="rule-container major"
47+
[style.border-color]="rule.color" [class.ion-hide]="!isVisible([majorIndex + 1])">
5448

5549
<!-- no text at this level -->
5650

5751
<div class="rule major" [id]="rulesService.indexesToRules[rule.index]">
58-
<span class="index major">{{ rule.index }}</span>
52+
<span class="index major">{{ rule.index }}</span>
5953
<a [innerHTML]="rule.formattedName | highlight:searchTerm:rule.index"
60-
[href]="'#' + rulesService.indexesToRules[rule.index]"></a>
54+
[href]="'#' + rulesService.indexesToRules[rule.index]"></a>
6155
</div>
6256

6357
<div class="pretext" [innerHTML]="rule.pretext | highlight:searchTerm:rule.index"></div>
6458

65-
<div *ngFor="let childRule of rule.children; let minorIndex = index"
66-
class="rule-container minor"
67-
[class.ion-hide]="!isVisible([majorIndex + 1, minorIndex + 1])">
59+
<div *ngFor="let childRule of rule.children; let minorIndex = index" class="rule-container minor"
60+
[class.ion-hide]="!isVisible([majorIndex + 1, minorIndex + 1])">
6861

6962
<!-- no text at this level -->
7063

7164
<div class="rule minor" [id]="rulesService.indexesToRules[childRule.index]">
72-
<span class="index minor">{{ childRule.index }}</span>
73-
<a [innerHTML]="childRule.formattedName | highlight:searchTerm:childRule.index"
74-
[href]="'#' + rulesService.indexesToRules[childRule.index]"></a>
65+
<span class="index minor">{{ childRule.index }}</span>
66+
<a [innerHTML]="childRule.formattedName | highlight:searchTerm:childRule.index"
67+
[href]="'#' + rulesService.indexesToRules[childRule.index]"></a>
7568
</div>
7669

7770
<div class="pretext" [innerHTML]="childRule.pretext | highlight:searchTerm:childRule.index"></div>
7871

79-
<div *ngFor="let grandchildRule of childRule.children; let childIndex = index"
80-
class="rule-container child"
81-
[class.ion-hide]="!isVisible([majorIndex + 1, minorIndex + 1, childIndex + 1])">
82-
72+
<div *ngFor="let grandchildRule of childRule.children; let childIndex = index" class="rule-container child"
73+
[class.ion-hide]="!isVisible([majorIndex + 1, minorIndex + 1, childIndex + 1])">
74+
8375
<!-- no pretext at this level -->
84-
76+
8577
<div class="rule child" [id]="rulesService.indexesToRules[grandchildRule.index]">
86-
<span class="index child">{{ grandchildRule.index }}</span>
78+
<span class="index child">{{ grandchildRule.index }}</span>
8779
<span class="desc child">
8880
<a class="name child" [innerHTML]="grandchildRule.formattedName | highlight:searchTerm:grandchildRule.index"
89-
[href]="'#' + rulesService.indexesToRules[grandchildRule.index]"></a>
90-
<span class="text child" [innerHTML]="grandchildRule.text | highlight:searchTerm:grandchildRule.index"></span>
81+
[href]="'#' + rulesService.indexesToRules[grandchildRule.index]"></a>
82+
<span class="text child"
83+
[innerHTML]="grandchildRule.text | highlight:searchTerm:grandchildRule.index"></span>
9184

9285
<!-- please never go deeper -->
9386
<ol class="romanized-list list" *ngIf="grandchildRule.subchildren">
9487
<li *ngFor="let descRule of grandchildRule.subchildren; let descIndex = index"
95-
[class.ion-hide]="!isVisible([majorIndex + 1, minorIndex + 1, childIndex + 1, descIndex + 1])">
96-
<a class="name child" [id]="rulesService.indexesToRules[descRule.index]"
97-
[innerHTML]="descRule.formattedName | highlight:searchTerm:descRule.index"
98-
[href]="'#' + rulesService.indexesToRules[descRule.index]"></a>
88+
[class.ion-hide]="!isVisible([majorIndex + 1, minorIndex + 1, childIndex + 1, descIndex + 1])">
89+
<a class="name child" [id]="rulesService.indexesToRules[descRule.index]"
90+
[innerHTML]="descRule.formattedName | highlight:searchTerm:descRule.index"
91+
[href]="'#' + rulesService.indexesToRules[descRule.index]"></a>
9992
<span class="text child" [innerHTML]="descRule.text | highlight:searchTerm:descRule.index"></span>
10093

10194
<!-- I said please :( -->
10295
<ol class="alphabeta-list list sublist" *ngIf="descRule.subchildren">
10396
<li *ngFor="let descDescRule of descRule.subchildren; let descDescIndex = index"
104-
[class.ion-hide]="!isVisible([majorIndex + 1, minorIndex + 1, childIndex + 1, descIndex + 1, descDescIndex + 1])">
105-
<a class="name child" [id]="rulesService.indexesToRules[descDescRule.index]"
106-
[innerHTML]="descDescRule.formattedName | highlight:searchTerm:descDescRule.index"
107-
[href]="'#' + rulesService.indexesToRules[descDescRule.index]"></a>
108-
<span class="text child" [innerHTML]="descDescRule.text | highlight:searchTerm:descDescRule.index"></span>
97+
[class.ion-hide]="!isVisible([majorIndex + 1, minorIndex + 1, childIndex + 1, descIndex + 1, descDescIndex + 1])">
98+
<a class="name child" [id]="rulesService.indexesToRules[descDescRule.index]"
99+
[innerHTML]="descDescRule.formattedName | highlight:searchTerm:descDescRule.index"
100+
[href]="'#' + rulesService.indexesToRules[descDescRule.index]"></a>
101+
<span class="text child"
102+
[innerHTML]="descDescRule.text | highlight:searchTerm:descDescRule.index"></span>
109103
</li>
110104
</ol>
111105
</li>
112106
</ol>
113107
</span>
114108
</div>
115-
109+
116110
</div>
117111

118112
</div>
119113

120114
</div>
121-
</ion-content>
115+
</ion-content>

0 commit comments

Comments
 (0)