@unifylib/ui-lib 1.0.3 → 1.1.3

package/src/lib/components/base-form/base-form.component.html

@@ -1,58 +1,59 @@
-<div fxLayout="column" fxFlex="2" fxHide.lt-sm [ngStyle]="{'height':isMatchHeight() ? '30vh' : '88vh' }">
-
-</div>
-
-<div fxLayout="column" style="width: 100%">
-  <div fxLayout="row" fxLayoutAlign="start start" style="margin-top: 2vh; width: 100%">
-    <div fxLayout="column" fxFlex="100">
-      <app-title-bar [pageTitle]="getTitle()" [newAction]="false" [hideBackButton]="hideBackButton"></app-title-bar>
-    </div>
-  </div>
-  <app-base-form-canvas
-    [pageInfo]="pageInfo"
-    [fields]="fields"
-    [editable]="editable"
-    [errors]="errors"
-    [item]="item"
-    (formUpdated)="updateForm($event)"
-  ></app-base-form-canvas>
-
-  <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start start" fxLayoutAlign.lt-sm="center start"
-       class="main-form-canvas"
-       style="margin-top: 3vh; width: 100%">
-
-    <div fxLayout="column" fxFlex="49">
-      <div fxLayout="row" fxLayoutAlign="start center" fxFlex="100" >
-        <button *ngIf="hasWfPositivePermission()" color="primary" mat-flat-button (click)="doSaveApproveAction()"
-                [disabled]="disabledSaveButton(item)"
-                style="font-weight: bold;min-width: 140px; max-width: 200px; margin: 0 10px;">
-          {{ getPositiveWfActionKey(item?.stateType) | translate }}
-        </button>
-        <button *ngIf="hasWfNegativePermission()" color="second" mat-raised-button (click)="doCancelRejectAction()"
-                [disabled]="disabledSaveButton(item)"
-                style="font-weight: bold;min-width: 140px ;max-width: 200px;">
-          {{ getNegativeWfActionKey(item?.stateType) | translate }}
-        </button>
-
-        <button *ngIf="pageInfo.hideExtractButton === false && itemId > 0 && editable"  color="primary" mat-raised-button (click)="doExtraAction()"
-                style="font-weight: bold;min-width: 140px; max-width: 200px; margin: 0 10px;">
-          {{ pageInfo.labelsSection + "." + "EXTRA_BUTTON_NAME" | translate }}
-        </button>
-
-      </div>
-    </div>
-    <div fxLayout="column" fxFlex="49"></div>
-
-  </div>
-  <ng-container *ngIf="!pageInfo.hideAuditLog">
-    <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start start" fxLayoutAlign.lt-sm="center start"
-         class="main-form-canvas" style="padding-top: 4vh; padding-bottom: 5vh; width: 100%">
-      <div fxLayout="column" fxFlex="95">
-        <app-audit-log [pageInfo]="pageInfo" [fields]="fields"></app-audit-log>
-      </div>
-      <!--  ></app-audit-log>-->
-    </div>
-  </ng-container>
-</div>
-
-
+<div class="page-container">
+
+  <div class="row full-width mt-2vh">
+    <div class="column full-width">
+      <app-title-bar
+        [pageTitle]="getTitle()"
+        [newAction]="false"
+        [hideBackButton]="hideBackButton">
+      </app-title-bar>
+    </div>
+  </div>
+
+  <app-base-form-canvas
+    [pageInfo]="pageInfo"
+    [fields]="fields"
+    [editable]="editable"
+    [errors]="errors"
+    [item]="item"
+    (formUpdated)="updateForm($event)">
+  </app-base-form-canvas>
+
+  <div class="row main-form-canvas mt-3vh">
+    <div class="column flex-49">
+      <div class="row row-center-start">
+        <button *ngIf="hasWfPositivePermission()" color="primary" mat-flat-button
+                (click)="doSaveApproveAction()"
+                [disabled]="disabledSaveButton(item)"
+                class="action-button"
+                id="base-form-positive-btn">
+          {{ getPositiveWfActionKey(item?.stateType) | translate }}
+        </button>
+        <button *ngIf="hasWfNegativePermission()" color="second" mat-raised-button
+                (click)="doCancelRejectAction()"
+                [disabled]="disabledSaveButton(item)"
+                class="action-button"
+                id="base-form-negative-btn">
+          {{ getNegativeWfActionKey(item?.stateType) | translate }}
+        </button>
+        <button *ngIf="pageInfo.hideExtractButton === false && itemId > 0 && editable" color="primary" mat-raised-button
+                (click)="doExtraAction()"
+                class="action-button"
+                id="base-form-extra-btn">
+          {{ pageInfo.labelsSection + "." + "EXTRA_BUTTON_NAME" | translate }}
+        </button>
+      </div>
+    </div>
+    <div class="column flex-49"></div>
+  </div>
+
+
+  <ng-container *ngIf="!pageInfo.hideAuditLog">
+    <div class="row main-form-canvas mt-4vh pb-5vh">
+      <div class="column flex-95">
+        <app-audit-log [pageInfo]="pageInfo" [fields]="fields"></app-audit-log>
+      </div>
+    </div>
+  </ng-container>
+
+</div>

package/src/lib/components/base-form/base-form.component.scss

@@ -0,0 +1,68 @@
+
+.page-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.flex-49 {
+  flex: 0 0 49%;
+}
+
+.flex-95 {
+  flex: 0 0 95%;
+}
+
+.row-center-start {
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.mt-2vh { margin-top: 2vh; }
+.mt-3vh { margin-top: 3vh; }
+.mt-4vh { margin-top: 4vh; }
+.pb-5vh { padding-bottom: 5vh; }
+
+
+.action-button {
+  font-weight: bold;
+  min-width: 140px;
+  max-width: 200px;
+  margin: 0 10px;
+}
+
+
+@media (max-width: 960px) {
+  .flex-49, .flex-95 {
+    flex: 1 1 100%;
+  }
+}
+
+@media (max-width: 600px) {
+  .row {
+    flex-direction: column;
+    align-items: center;
+  }
+  .action-button {
+    width: 100%;
+    max-width: 300px;
+    margin: 5px 0;
+  }
+}

package/src/lib/components/base-form/base-form.component.spec.ts

@@ -1,25 +1,25 @@
-import {ComponentFixture, TestBed} from '@angular/core/testing';
-
-import {BaseFormComponent} from './base-form.component';
-
-describe('BaseFormComponent', () => {
-  let component: BaseFormComponent;
-  let fixture: ComponentFixture<BaseFormComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ BaseFormComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(BaseFormComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {BaseFormComponent} from './base-form.component';
+
+describe('BaseFormComponent', () => {
+  let component: BaseFormComponent;
+  let fixture: ComponentFixture<BaseFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BaseFormComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BaseFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});