aknuth/bizmatch-project
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 5 Releases Wiki Activity

landing page finished

Browse Source
This commit is contained in:
Andreas Knuth
2024-07-29 21:23:26 +02:00
parent 6348af8862
commit 55e800009e
8 changed files with 164 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
bizmatch/src/app/pages/home/home.component.html
View File

@@ -77,18 +77,18 @@
</ul>
</div>
@if(criteria){
<div class="w-full max-w-3xl mx-auto bg-white rounded-lg flex flex-col md:flex-row border border-gray-300">
<div class="md:flex-none md:w-40 flex-1 border-r border-gray-300 overflow-hidden">
<div class="relative">
<div class="w-full max-w-3xl mx-auto bg-white rounded-lg flex flex-col md:flex-row md:border md:border-gray-300">
<div class="md:flex-none md:w-48 flex-1 md:border-r border-gray-300 overflow-hidden mb-2 md:mb-0">
<div class="relative max-sm:border border-gray-300 rounded-md">
<select
class="appearance-none bg-transparent w-full py-3 px-4 pr-8 focus:outline-none"
class="appearance-none bg-transparent w-full py-3 px-4 pr-8 focus:outline-none md:border-none rounded-md md:rounded-none"
[ngModel]="criteria.types"
(ngModelChange)="onTypesChange($event)"
[ngClass]="{ 'placeholder-selected': criteria.types.length === 0 }"
>
<option [value]="[]">Business Type</option>
@for(tob of selectOptions.typesOfBusiness; track tob){
<option [value]="tob.value">{{ tob.name }}</option>
<option [value]="[]">{{ getPlaceholderLabel() }}</option>
@for(type of getTypes(); track type){
<option [value]="type.value">{{ type.name }}</option>
}
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
@@ -96,29 +96,34 @@
</div>
</div>
</div>
<div class="md:flex-auto md:w-36 lex-grow border-b md:border-b-0 md:border-r border-gray-300">
<ng-select
class="custom"
[multiple]="false"
[hideSelected]="true"
[trackByFn]="trackByFn"
[minTermLength]="2"
[loading]="cityLoading"
typeToSearchText="Please enter 2 or more characters"
[typeahead]="cityInput$"
[ngModel]="cityOrState"
(ngModelChange)="setCity($event)"
placeholder="Enter City or State ..."
>
@for (city of cities$ | async; track city.id) {
<ng-option [value]="city">{{ city.city }} - {{ selectOptions.getStateInitials(city.state) }}</ng-option>
}
</ng-select>
<div class="md:flex-auto md:w-36 flex-grow md:border-r border-gray-300 mb-2 md:mb-0">
<div class="relative max-sm:border border-gray-300 rounded-md">
<ng-select
class="custom md:border-none rounded-md md:rounded-none"
[multiple]="false"
[hideSelected]="true"
[trackByFn]="trackByFn"
[minTermLength]="2"
[loading]="cityLoading"
typeToSearchText="Please enter 2 or more characters"
[typeahead]="cityInput$"
[ngModel]="cityOrState"
(ngModelChange)="setCityOrState($event)"
placeholder="Enter City or State ..."
groupBy="type"
>
@for (city of cities$ | async; track city.id) {
<ng-option [value]="city">{{ city.name }} - {{ city.state_code }}</ng-option>
}
</ng-select>
</div>
</div>
<div class="md:flex-none md:w-36 flex-1 border-b md:border-b-0 md:border-r border-gray-300">
<div class="relative">
@if (criteria.radius){
<div class="md:flex-none md:w-36 flex-1 md:border-r border-gray-300 mb-2 md:mb-0">
<div class="relative max-sm:border border-gray-300 rounded-md">
<select
class="appearance-none bg-transparent w-full py-3 px-4 pr-8 focus:outline-none"
class="appearance-none bg-transparent w-full py-3 px-4 pr-8 focus:outline-none md:border-none rounded-md md:rounded-none"
(ngModelChange)="onRadiusChange($event)"
[ngModel]="criteria.radius"
[ngClass]="{ 'placeholder-selected': !criteria.radius }"
@@ -133,9 +138,13 @@
</div>
</div>
</div>
<div class="bg-blue-600 hover:bg-blue-500 transition-colors duration-200">
<button class="w-full h-full text-white font-semibold py-3 px-6 focus:outline-none" (click)="search()">Suchen</button>
}
<div class="bg-blue-600 hover:bg-blue-500 transition-colors duration-200 max-sm:rounded-md">
@if(getNumberOfFiltersSet()>0 && numberOfResults$){
<button class="w-full h-full text-white font-semibold py-3 px-6 focus:outline-none rounded-md md:rounded-none" (click)="search()">Search ({{ numberOfResults$ | async }})</button>
}@else {
<button class="w-full h-full text-white font-semibold py-3 px-6 focus:outline-none rounded-md md:rounded-none" (click)="search()">Search</button>
}
</div>
</div>
}