UI Changes

This commit is contained in:
venbatechnologies@gmail.com 2019-01-11 17:36:17 +05:30
parent 8543eb5bf9
commit 7f31639c51
2 changed files with 14 additions and 16 deletions

View File

@ -20,14 +20,11 @@
<mat-card> <mat-card>
<mat-card-content class="matcard"> <mat-card-content class="matcard">
<div fxLayout="row wrap"> <div fxLayout="row wrap">
<div fxFlex="33"> <mat-form-field style="width: 64%">
<mat-form-field style="width: 80%">
<input matInput placeholder="Loan Amount Applied for ? " formControlName="loan_amount" (keypress)="keyPress($event)" (keyup)="inWords($event,1)" (change)="loanCalc()" autocomplete="off"> <input matInput placeholder="Loan Amount Applied for ? " formControlName="loan_amount" (keypress)="keyPress($event)" (keyup)="inWords($event,1)" (change)="loanCalc()" autocomplete="off">
<mat-hint align="start" style="font-size:70%" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{loanAmtInWords}} Only</mat-hint> <mat-hint align="start" style="font-size:90%" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{loanAmtInWords}} Only</mat-hint>
</mat-form-field> </mat-form-field>
</div> <mat-form-field style="width: 28%">
<div fxFlex="33">
<mat-form-field style="width: 80%">
<mat-select multiple (selectionChange)="endUserChange($event.value)" placeholder="What is the end use" formControlName="end_use" > <mat-select multiple (selectionChange)="endUserChange($event.value)" placeholder="What is the end use" formControlName="end_use" >
<mat-option *ngFor="let enduse of m_endUseofLoad" [value]="enduse.subproduct_id">{{ enduse.name }}</mat-option> <mat-option *ngFor="let enduse of m_endUseofLoad" [value]="enduse.subproduct_id">{{ enduse.name }}</mat-option>
</mat-select> </mat-select>
@ -43,12 +40,9 @@
<mat-option value="other">Other purpose</mat-option> <mat-option value="other">Other purpose</mat-option>
</mat-select>--> </mat-select>-->
</mat-form-field> </mat-form-field>
</div> <mat-form-field *ngIf="isOtherPurpose" style="width: 28%">
<div fxFlex="33">
<mat-form-field *ngIf="isOtherPurpose" style="width: 80%">
<input matInput placeholder="Specify End Use" formControlName="end_use_other" autocomplete="off"> <input matInput placeholder="Specify End Use" formControlName="end_use_other" autocomplete="off">
</mat-form-field> </mat-form-field>
</div>
</div> </div>
<div fxLayout="row wrap"> <div fxLayout="row wrap">
@ -68,7 +62,7 @@
<div *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes' && loanDetailsForm.controls['is_transfer'].value != ''"> <div *ngIf="loanDetailsForm.controls['is_transfer'].value == 'yes' && loanDetailsForm.controls['is_transfer'].value != ''">
<mat-form-field style="width: 60%"> <mat-form-field style="width: 60%">
<input matInput placeholder="What is the amount for Balance Transfer ? " (keypress)="keyPress($event)" formControlName="balance_transfer_amount" (keyup)="inWords($event,2)" (change)="loanCalc()" autocomplete="off"> <input matInput placeholder="What is the amount for Balance Transfer ? " (keypress)="keyPress($event)" formControlName="balance_transfer_amount" (keyup)="inWords($event,2)" (change)="loanCalc()" autocomplete="off">
<mat-hint align="start" style="font-size:70%" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{balTxrfAmtInWords}} Only</mat-hint> <mat-hint align="start" style="font-size:90%" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{balTxrfAmtInWords}} Only</mat-hint>
</mat-form-field> </mat-form-field>
<mat-form-field style="width:30%"> <mat-form-field style="width:30%">
<mat-select placeholder="Is there a Top Up" <mat-select placeholder="Is there a Top Up"
@ -90,7 +84,7 @@
<mat-form-field *ngIf="loanDetailsForm.controls['is_topup'].value == 'yes' && loanDetailsForm.controls['is_topup'].value != '' " style="width: 60%"> <mat-form-field *ngIf="loanDetailsForm.controls['is_topup'].value == 'yes' && loanDetailsForm.controls['is_topup'].value != '' " style="width: 60%">
<input matInput placeholder="Top Up Amount" (keypress)="keyPress($event)" formControlName="topup_amount" (keyup)="inWords($event,5)" autocomplete="off"> <input matInput placeholder="Top Up Amount" (keypress)="keyPress($event)" formControlName="topup_amount" (keyup)="inWords($event,5)" autocomplete="off">
<mat-hint align="start" style="font-size:70%" *ngIf="loanDetailsForm.controls['topup_amount'].value != ''">{{"&#8377;"}} {{topUpAmtInWords}} Only</mat-hint> <mat-hint align="start" style="font-size:90%" *ngIf="loanDetailsForm.controls['topup_amount'].value != ''">{{"&#8377;"}} {{topUpAmtInWords}} Only</mat-hint>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="loanDetailsForm.controls['is_topup'].value == 'yes' && loanDetailsForm.controls['is_topup'].value != '' " style="width: 30%"> <mat-form-field *ngIf="loanDetailsForm.controls['is_topup'].value == 'yes' && loanDetailsForm.controls['is_topup'].value != '' " style="width: 30%">
@ -101,7 +95,7 @@
<mat-form-field style="width: 30%"> <mat-form-field style="width: 30%">
<input matInput placeholder="Amount of Own Contribution" formControlName="own_contribution" (keypress)="keyPress($event)" (keyup)="inWords($event,4)" autocomplete="off"> <input matInput placeholder="Amount of Own Contribution" formControlName="own_contribution" (keypress)="keyPress($event)" (keyup)="inWords($event,4)" autocomplete="off">
<mat-hint align="start" style="font-size:70%" *ngIf="loanDetailsForm.controls['own_contribution'].value != ''">{{"&#8377;"}} {{ownContributionInWords}} Only</mat-hint> <mat-hint align="start" style="font-size:90%" *ngIf="loanDetailsForm.controls['own_contribution'].value != ''">{{"&#8377;"}} {{ownContributionInWords}} Only</mat-hint>
</mat-form-field> </mat-form-field>
<mat-form-field style="width: 30%"> <mat-form-field style="width: 30%">
@ -137,7 +131,7 @@
<mat-form-field style="width: 60%"> <mat-form-field style="width: 60%">
<input matInput placeholder="EMI Amount Comfortable Paying" formControlName="emi_level" (keypress)="keyPress($event)" (keyup)="inWords($event,6)" autocomplete="off"> <input matInput placeholder="EMI Amount Comfortable Paying" formControlName="emi_level" (keypress)="keyPress($event)" (keyup)="inWords($event,6)" autocomplete="off">
<mat-hint align="start" style="font-size:70%" *ngIf="loanDetailsForm.controls['emi_level'].value != ''">{{"&#8377;"}} {{emiAmtInWords}} Only</mat-hint> <mat-hint align="start" style="font-size:90%" *ngIf="loanDetailsForm.controls['emi_level'].value != ''">{{"&#8377;"}} {{emiAmtInWords}} Only</mat-hint>
</mat-form-field> </mat-form-field>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
@ -204,12 +198,12 @@
<mat-form-field> <mat-form-field>
<input matInput placeholder="Estimate Market Value as Per Customer" <input matInput placeholder="Estimate Market Value as Per Customer"
formControlName="emv_per_customer" (keypress)="keyPress($event)" (keyup)="inWords($event,7)" autocomplete="off"> formControlName="emv_per_customer" (keypress)="keyPress($event)" (keyup)="inWords($event,7)" autocomplete="off">
<mat-hint align="start" style="font-size:70%" *ngIf="loanDetailsForm.controls['emv_per_customer'].value != ''">{{"&#8377;"}} {{emvAmtInWords}} Only</mat-hint> <mat-hint align="start" style="font-size:90%" *ngIf="loanDetailsForm.controls['emv_per_customer'].value != ''">{{"&#8377;"}} {{emvAmtInWords}} Only</mat-hint>
</mat-form-field> </mat-form-field>
<!-- <mat-form-field> <!-- <mat-form-field>
<input matInput placeholder="Value as Per Agreement" <input matInput placeholder="Value as Per Agreement"
formControlName="value_per_agreement" (keypress)="keyPress($event)" (keyup)="inWords($event,3)"> formControlName="value_per_agreement" (keypress)="keyPress($event)" (keyup)="inWords($event,3)">
<mat-hint align="start" style="font-size:70%" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{valAsPerAgmtInWords}} Only</mat-hint> <mat-hint align="start" style="font-size:90%" *ngIf="loanDetailsForm.controls['loan_amount'].value != ''">{{"&#8377;"}} {{valAsPerAgmtInWords}} Only</mat-hint>
</mat-form-field> --> </mat-form-field> -->
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>

View File

@ -10,6 +10,10 @@
.matcard > * { .matcard > * {
width: 80%; width: 80%;
} }
.mat-form-field-appearance-legacy .mat-hint{
color:rgba(0, 0, 0, 0.8) !important;
}
.matcard mat-form-field { .matcard mat-form-field {
margin: 0 2%; margin: 0 2%;
width:26%; width:26%;