jank/angular-hotel-manager
1
0
Fork 0
Code Issues 1 Pull Requests 6 Actions Packages Projects Releases Wiki Activity

update styling and fix search to include lowercase #15

Merged
jank merged 1 commits from styling_lowercase_search into main 2024-11-19 07:43:39 +00:00
Conversation 0 Commits 1 Files Changed 5 +21 -22
5 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 85dbe967ee - Show all commits

2
src/app/Button/button.component.html
View File

@ -1 +1 @@
<button type="button">{{ text }}</button> <button type="button" class="px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">{{ text }}</button>

8
src/app/Child/child.component.html
View File

@ -1,4 +1,4 @@
<h1>Child</h1> <h1 class="text-2xl font-bold mb-4">Child</h1>
<p>Balance: {{balance}}</p> <p class="text-lg mb-2">Balance: {{balance}}</p>
<p [class.hidden]="!isBroke">Im broke. Now im about as poor as Jan-Marlon.</p> <p [class.hidden]="!isBroke" class="text-red-500 mb-4">I'm broke. Now I'm about as poor as Jan-Marlon.</p>
<button type="button" (click)=takeMoney() class="button">Take Money</button> <button type="button" (click)="takeMoney()" class="px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">Take Money</button>

17
src/app/HotelItem/HotelItem.component.html
View File

@ -1,11 +1,8 @@
<p>Name: {{hotel.hotelName}}</p> <p class="text-2xl font-bold text-gray-800 mb-2">Name: {{hotel.hotelName}}</p>
<p>Description: {{hotel.description}}</p> <p class="text-base text-gray-600 mb-4">Description: {{hotel.description}}</p>
<p>Price: {{hotel.price | currency : getCurrencyCode(selectedLanguage) : "symbol" : "2.2-2" : selectedLanguage}}</p> <p class="text-lg font-medium text-green-600 mb-4">Price: {{hotel.price | currency : getCurrencyCode(selectedLanguage) : "symbol" : "2.2-2" : selectedLanguage}}</p>
<select [ngModel]="selectedLanguage" (ngModelChange)="languageChange($event)"> <select [ngModel]="selectedLanguage" (ngModelChange)="languageChange($event)" class="block w-full p-2 border border-gray-300 rounded-md mb-4 focus:border-blue-500 focus:ring focus:ring-blue-200">
@for (lang of langs; track lang.lang) { <option *ngFor="let lang of langs" [value]="lang.code" [selected]="lang.lang == 'de'">{{lang.lang}}</option>
<option value="{{lang.code}}" [selected]="lang.lang == 'de'">{{lang.lang}}</option>
}
</select> </select>
<img src="{{hotel.imageUrl}}" alt="Hotel"> <img src="{{hotel.imageUrl}}" alt="Hotel" class="w-full h-auto rounded-lg shadow-lg mb-4">
<a *ngIf="!isDetail" routerLink="/hotels/{{hotel.id}}">Details</a> <a *ngIf="!isDetail" routerLink="/hotels/{{hotel.id}}" class="text-blue-600 hover:text-blue-800 hover:underline mb-4 block">Details</a>
<app-star-rating [rating]="hotel.rating"></app-star-rating>

2
src/app/Search/search.component.html
View File

@ -1 +1 @@
<input [(ngModel)]="input" (ngModelChange)="update($event)" class="border border-black" type="search"> <input [(ngModel)]="input" (ngModelChange)="update($event)" class="border border-gray-300 rounded-md p-2 w-full focus:border-blue-500 focus:ring focus:ring-blue-200" type="search">

14
src/app/hotel-list/hotel-list.component.html
View File

@ -1,7 +1,9 @@
<h1>{{'hello' | uppercase | text}}</h1> <div class="container p-4 mx-auto max-w-4xl">
<app-search [(input)]="search"></app-search> <h1>{{'hello' | uppercase | text}}</h1>
@if (hotels[0].hotelName) { <app-search [(input)]="search"></app-search>
<div *ngFor="let hotel of hotels"> @if (hotels[0].hotelName) {
<app-hotel-item *ngIf="hotel.hotelName.includes(search)" [hotel]="hotel"></app-hotel-item> <div *ngFor="let hotel of hotels">
<app-hotel-item *ngIf="hotel.hotelName.toLowerCase().includes(search.toLowerCase())" [hotel]="hotel"></app-hotel-item>
</div>
}
</div> </div>
}