francescoalbano/tripweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 Trip creation modal: update grid layout

Browse Source
This commit is contained in:
itskovacs 2025-10-21 19:00:12 +02:00
parent 4f7b320841
commit ad28fbe345
1 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/src/app/modals/trip-create-modal/trip-create-modal.component.html
View File

@ -1,24 +1,27 @@
<div pFocusTrap class="grid md:grid-cols-4 items-center gap-4" [formGroup]="tripForm"> <div pFocusTrap class="grid md:grid-cols-4 gap-4" [formGroup]="tripForm">
<p-floatlabel class="md:col-span-3" variant="in"> <div class="grid md:col-span-3 md:grid-cols-3 gap-4">
<input id="name" formControlName="name" autofocus pInputText fluid (keyup.enter)="closeDialog()" /> <p-floatlabel class="md:col-span-3" variant="in">
<label for="name">Name</label> <input id="name" formControlName="name" autofocus pInputText fluid (keyup.enter)="closeDialog()" />
</p-floatlabel> <label for="name">Name</label>
<p-floatlabel variant="in">
<input id="currency" formControlName="currency" pInputText fluid />
<label for="currency">Currency</label>
</p-floatlabel>
@if (tripForm.get("id")?.value === -1) {
<div class="md:col-span-full">
<p-floatlabel variant="in">
<p-datepicker id="daterange" formControlName="daterange" [iconDisplay]="'input'" [showIcon]="true" selectionMode="range" appendTo="body" fluid />
<label for="daterange">Date Range</label>
</p-floatlabel> </p-floatlabel>
</div>
}
<div class="md:col-span-4 grid place-items-center"> <p-floatlabel class="md:col-1" variant="in">
<input id="currency" formControlName="currency" pInputText fluid />
<label for="currency">Currency</label>
</p-floatlabel>
@if (tripForm.get("id")?.value === -1) {
<div class="md:col-span-2">
<p-floatlabel variant="in">
<p-datepicker id="daterange" formControlName="daterange" [iconDisplay]="'input'" [showIcon]="true"
selectionMode="range" appendTo="body" fluid />
<label for="daterange">Date Range</label>
</p-floatlabel>
</div>
}
</div>
<div class="grid place-items-center md:col-span-1">
@if (tripForm.get("image_id")?.value) { @if (tripForm.get("image_id")?.value) {
<div class="max-w-80 max-h-80 relative group cursor-pointer" (click)="fileInput.click()"> <div class="max-w-80 max-h-80 relative group cursor-pointer" (click)="fileInput.click()">
<img [src]="tripForm.get('image')?.value" <img [src]="tripForm.get('image')?.value"
@ -56,4 +59,4 @@
<div class="mt-4 text-right"> <div class="mt-4 text-right">
<p-button (click)="closeDialog()" [disabled]="!tripForm.dirty || !tripForm.valid">{{ tripForm.get("id")?.value <p-button (click)="closeDialog()" [disabled]="!tripForm.dirty || !tripForm.valid">{{ tripForm.get("id")?.value
!== -1 ? "Update" : "Create" }}</p-button> !== -1 ? "Update" : "Create" }}</p-button>
</div> </div>