ui feedback updates
This commit is contained in:
parent
5fd0cd0eaa
commit
a541e3788b
@ -6,6 +6,7 @@ import { provideClientHydration, withEventReplay } from '@angular/platform-brows
|
||||
import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
|
||||
import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
|
||||
import { AuthInterceptor } from './core/interceptors/auth.interceptor';
|
||||
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
@ -16,5 +17,6 @@ export const appConfig: ApplicationConfig = {
|
||||
provideHttpClient(withInterceptorsFromDi()),
|
||||
provideCharts(withDefaultRegisterables()),
|
||||
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
|
||||
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { subscriptSizing: 'dynamic' } }
|
||||
]
|
||||
};
|
||||
|
||||
@ -11,6 +11,10 @@
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
|
||||
mat-card-content {
|
||||
padding: inherit 0;
|
||||
}
|
||||
|
||||
.loading-shade {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
.goods-container {
|
||||
padding: 16px;
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
@ -29,14 +28,14 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
color: var(--mat-sys-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
@ -58,9 +57,8 @@
|
||||
}
|
||||
|
||||
.table-container {
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 16px;
|
||||
// position: relative;
|
||||
// overflow-x: auto;
|
||||
|
||||
.loading-shade {
|
||||
position: absolute;
|
||||
@ -139,6 +137,7 @@
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
align-items: start;
|
||||
|
||||
mat-form-field {
|
||||
flex: 1;
|
||||
@ -164,6 +163,6 @@
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 24px;
|
||||
margin-top: 0.9rem;
|
||||
}
|
||||
}
|
||||
@ -186,6 +186,7 @@ export class GoodsComponent {
|
||||
weight: 0,
|
||||
value: 0
|
||||
});
|
||||
this.itemForm.markAsUntouched();
|
||||
}
|
||||
|
||||
// Edit existing item
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
<mat-label>Company Name</mat-label>
|
||||
<input matInput formControlName="companyName" required>
|
||||
<mat-error *ngIf="shippingForm.get('address.companyName')?.errors?.['required']">
|
||||
Address is required
|
||||
Company name is required
|
||||
</mat-error>
|
||||
<mat-error *ngIf="shippingForm.get('address.companyName')?.errors?.['maxlength']">
|
||||
Maximum 100 characters allowed
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
.shipping-container {
|
||||
padding: 16px;
|
||||
padding-top: 0.5rem;
|
||||
|
||||
.section {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 1rem;
|
||||
padding: 16px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
|
||||
h3 {
|
||||
margin: 0px 0px 16px 0px;
|
||||
margin: 0 0 0.9rem 0;
|
||||
color: var(--mat-sys-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -33,12 +33,14 @@
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 0.5rem;
|
||||
align-items: start;
|
||||
|
||||
mat-form-field {
|
||||
flex: 1;
|
||||
@ -58,7 +60,7 @@
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
margin-top: 0.9rem;
|
||||
}
|
||||
|
||||
.presaved-address {
|
||||
@ -66,6 +68,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
font-size: 0.875rem;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
|
||||
@ -413,7 +413,7 @@ export class ShippingComponent {
|
||||
notes: shipping.contact?.notes,
|
||||
})
|
||||
}
|
||||
|
||||
this.shippingForm.markAsUntouched();
|
||||
this.completed.emit(this.shippingForm.valid);
|
||||
}
|
||||
|
||||
|
||||
@ -20,6 +20,7 @@ mat-card-header {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
font-size: 0.875rem;
|
||||
|
||||
h3 {
|
||||
color: var(--mat-sys-primary);
|
||||
|
||||
@ -8,6 +8,18 @@
|
||||
// max-width: 300px;
|
||||
// }
|
||||
|
||||
|
||||
.form-row {
|
||||
// display: flex;
|
||||
// gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
//align-items: start;
|
||||
|
||||
// mat-form-field {
|
||||
// flex: 1;
|
||||
// }
|
||||
}
|
||||
|
||||
.usa-entries {
|
||||
width: 300px;
|
||||
}
|
||||
@ -32,7 +44,7 @@
|
||||
|
||||
h3 {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 16px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@ -99,6 +111,7 @@
|
||||
.totals-section {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
font-size: 0.875rem;
|
||||
|
||||
.total-item {
|
||||
display: flex;
|
||||
|
||||
@ -104,6 +104,7 @@
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
|
||||
mat-form-field {
|
||||
flex: 1;
|
||||
@ -155,7 +156,7 @@
|
||||
|
||||
.readonly-value {
|
||||
padding: 0.25rem;
|
||||
font-size: 0.9375rem;
|
||||
font-size: 0.875rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.page-header {
|
||||
margin: 0.5rem 0px;
|
||||
margin: 0.5rem 0 0;
|
||||
color: var(--mat-sys-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -38,6 +38,7 @@
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.9rem;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
@ -63,6 +64,11 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
mat-slide-toggle {
|
||||
transform: scale(0.8);
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.selected-holder {
|
||||
color: #28a745;
|
||||
font-weight: 500;
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
.label {
|
||||
padding-right: 1rem;
|
||||
padding-bottom: 2rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.control {
|
||||
|
||||
@ -13,4 +13,28 @@ body {
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
|
||||
/*form field*/
|
||||
@include mat.form-field-overrides((container-text-size: 0.875rem,
|
||||
container-text-line-height:1.7, // line height should be atleast 1.5 times text size
|
||||
outlined-label-text-size:0.875rem));
|
||||
|
||||
/* stepper */
|
||||
@include mat.stepper-overrides((header-height:50px));
|
||||
|
||||
/* list */
|
||||
@include mat.list-overrides((list-item-label-text-size:0.875rem,
|
||||
list-item-label-text-line-height:1.7, // line height should be atleast 1.5 times text size
|
||||
));
|
||||
|
||||
/*select*/
|
||||
@include mat.select-overrides((trigger-text-size:0.875rem,
|
||||
trigger-text-line-height:1.7, // line height should be atleast 1.5 times text size
|
||||
));
|
||||
|
||||
/*select options*/
|
||||
--mat-option-label-text-size: 0.875rem;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user