Add id in bottom. Change container of general form. Edit stakholder: Make grid large and fix some alignment issues of upload.

This commit is contained in:
Konstantinos Triantafyllou 2022-03-30 20:52:56 +03:00
parent 5df716ca5f
commit d9466d7fd0
6 changed files with 27 additions and 63 deletions

View File

@ -13,7 +13,7 @@
<router-outlet></router-outlet>
</main>
</div>
<bottom *ngIf="isFrontPage" [darkBackground]="false"
<bottom id="bottom" *ngIf="isFrontPage" [darkBackground]="false"
[centered]="true" [properties]="properties" [showMenuItems]="true"></bottom>
<role-verification *ngIf="stakeholder"
[id]="stakeholder.alias" [name]="stakeholder.name" [type]="stakeholder.type"></role-verification>

View File

@ -20,9 +20,8 @@ declare var UIkit;
@Component({
selector: 'edit-stakeholder',
template: `
<div class="uk-overflow-auto">
<form *ngIf="stakeholderFb" [formGroup]="stakeholderFb">
<div class="uk-grid uk-margin-bottom" uk-grid>
<div class="uk-grid uk-grid-large" uk-grid>
<div class="uk-width-1-2@m">
<div input id="name" [formInput]="stakeholderFb.get('name')"
placeholder="Name"></div>
@ -47,78 +46,43 @@ declare var UIkit;
<div input [type]="'textarea'" placeholder="Description"
[rows]="4" [formInput]="stakeholderFb.get('description')"></div>
</div>
<div class="uk-width-1-1 uk-flex uk-flex-wrap">
<div class="uk-width-1-1">
<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
<div *ngIf="!stakeholderFb.get('isUpload').value" style="margin-top: 7px;" class="uk-width-1-2@m">
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-1-2@l uk-width-1-1 uk-flex uk-flex-center">
<button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap"
(click)="file.click()">
<icon name="cloud_upload" [flex]="true"></icon>
<span class="uk-margin-small-left">Upload a file</span>
</button>
</div>
<div class="uk-text-center uk-text-bold uk-width-expand">
OR
</div>
</div>
</div>
<div *ngIf="!stakeholderFb.get('isUpload').value" class="uk-grid uk-child-width-1-2@m uk-child-width-1-1" uk-grid>
<div class="uk-margin-small-top">
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-1-2@l uk-width-1-1 uk-flex uk-flex-center">
<button class="uk-button uk-button-primary uk-flex uk-flex-middle uk-flex-wrap"
(click)="file.click()">
<icon name="cloud_upload" [flex]="true"></icon>
<span class="uk-margin-small-left">Upload a file</span>
</button>
</div>
<div class="uk-text-center uk-text-bold uk-width-expand">
OR
</div>
</div>
</div>
<div input type="logoURL" [placeholder]="'Link to the logo'" [formInput]="stakeholderFb.get('logoUrl')"></div>
</div>
<div *ngIf="stakeholderFb.get('isUpload').value" class="uk-width-1-1 uk-flex uk-flex-middle">
<div class="uk-card uk-card-default uk-text-center uk-border-circle">
<img class="uk-position-center uk-blend-multiply" [src]="photo">
</div>
<div class="uk-margin-left">
<button (click)="remove()" class="uk-button-secondary outlined uk-icon-button">
<button (click)="remove()" class="uk-button-default uk-icon-button">
<icon name="remove"></icon>
</button>
</div>
<div class="uk-margin-small-left">
<button class="uk-button-secondary uk-icon-button" (click)="file.click()">
<button class="uk-button-default uk-icon-button" (click)="file.click()">
<icon name="edit"></icon>
</button>
</div>
</div>
<div input class="uk-width-1-2@m" type="logoURL" flex="top" *ngIf="!stakeholderFb.get('isUpload').value"
[placeholder]="'Link to the logo'" [formInput]="stakeholderFb.get('logoUrl')"></div>
<!-- Full width error message -->
<div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div>
</div>
<!-- <div class="uk-width-1-1">
<input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
<div input class="uk-width-1-1" type="logoURL" flex="top" [hideControl]="stakeholderFb.get('isUpload').value"
[placeholder]="'Link to the logo'" [formInput]="stakeholderFb.get('logoUrl')">
<div *ngIf="!stakeholderFb.get('isUpload').value" style="margin-top: 7px;" class="uk-width-2-5@l uk-width-1-1">
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
<div class="uk-width-3-4@l uk-width-1-1 uk-flex uk-flex-center">
<button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap"
(click)="file.click()">
<icon name="cloud_upload" [flex]="true"></icon>
<span class="uk-margin-small-left">Upload a file</span>
</button>
</div>
<div class="uk-text-center uk-text-bold uk-width-expand">
OR
</div>
</div>
</div>
<div *ngIf="stakeholderFb.get('isUpload').value" class="uk-width-1-1 uk-flex uk-flex-middle">
<div class="uk-card uk-card-default uk-text-center uk-border-circle">
<img class="uk-position-center uk-blend-multiply" [src]="photo">
</div>
<div class="uk-margin-left">
<button (click)="remove()" class="uk-button-secondary outlined uk-icon-button">
<icon name="remove"></icon>
</button>
</div>
<div class="uk-margin-small-left">
<button class="uk-button-secondary uk-icon-button" (click)="file.click()">
<icon name="edit"></icon>
</button>
</div>
</div>
</div>
<div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div>
</div> -->
<div [class]="canChooseType ? 'uk-width-1-3@m' : 'uk-width-1-2@m'">
<div input [formInput]="stakeholderFb.get('visibility')"
[placeholder]="'Select a status'"
@ -139,7 +103,7 @@ declare var UIkit;
</div>
</form>
<div #notify notify-form class="uk-width-1-1 uk-margin-large-top uk-margin-medium-bottom"></div>
</div>`,
`,
styleUrls: ['edit-stakeholder.component.css']
})
export class EditStakeholderComponent implements OnDestroy {

View File

@ -21,7 +21,7 @@
</div>
</div>
<div inner>
<div *ngIf="stakeholder" class="uk-section">
<div *ngIf="stakeholder" class="uk-section uk-container uk-container-small">
<div class="uk-position-relative" style="min-height: 60vh">
<div [class.hidden]="loading">
<edit-stakeholder #editStakeholderComponent [disableAlias]="true"></edit-stakeholder>

@ -1 +1 @@
Subproject commit d26f56e260a01fdcca40a5fa495c1f67f6b19b9b
Subproject commit da6f220ae077f8f62cb11a65b33d7091efea486f

@ -1 +1 @@
Subproject commit 776ba07197e4cf73e98890bd4213a32183ea19d2
Subproject commit bbad5016c9a712348c5056c3b2709e4baaf27d69

@ -1 +1 @@
Subproject commit 60b581dc8e8aa393cd3b7e604375132e015acaf8
Subproject commit ca92c36bad13d0be11514abf7786f1e476ae7f5e