[Trunk|Admin]: Fix some responsive issues on home page.
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-admin-portal/trunk@56490 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
3616991444
commit
95a664287e
|
@ -5,8 +5,8 @@
|
|||
<div id="wrapper" class="uk-section uk-margin-top uk-padding-remove-bottom">
|
||||
<div class="uk-grid" uk-height-viewport="expand: true">
|
||||
<sidebar *ngIf="showSidebar && !wellcome" [menuItems]="sideMenuItems" class="uk-width-1-5 uk-light sidebar uk-margin-top uk-margin-left"></sidebar>
|
||||
<div class="uk-width-expand uk-margin-large-top" [ngClass]="(!wellcome)?'uk-container uk-overflow-auto':''"
|
||||
[ngStyle]="{maxHeight: (!wellcome)?'85vh':''}">
|
||||
<div class="uk-width-expand uk-margin-large-top" [ngClass]="(!wellcome)?'uk-container uk-container-large uk-overflow-auto':''"
|
||||
[ngStyle]="{height: (!wellcome)?'85vh':''}">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<!--
|
||||
|
|
|
@ -3,107 +3,105 @@
|
|||
<button *ngIf="enabled && (hasChanged || affiliationsChanged)" class="uk-button uk-button-primary" (click)="resetMessages(); updateCurator()">Save</button>
|
||||
<button *ngIf="!enabled || (!hasChanged && !affiliationsChanged)" class="uk-button uk-button-default" disabled>Save</button>
|
||||
</ng-template>
|
||||
<div class="uk-container uk-container-large">
|
||||
<div class="uk-padding uk-padding-remove-top uk-text-large uk-text-center uk-width">Edit Personal Info</div>
|
||||
<div class="uk-margin-large-bottom uk-flex uk-grid-divider" uk-grid>
|
||||
<div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert">
|
||||
<span class="loading-gif uk-align-center"></span>
|
||||
</div>
|
||||
<table *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-2@m uk-width-1-1@s uk-align-center">
|
||||
<tbody class="uk-table uk-align-center">
|
||||
<tr *ngIf="curator.email != null" >
|
||||
<td for="email" class="uk-text-bold uk-text-right">E-mail:</td>
|
||||
<td class="uk-text-left">
|
||||
{{curator.email}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngIf="curator.name != null">
|
||||
<td for="name" class="uk-text-bold uk-text-right">
|
||||
Name
|
||||
<span class="uk-text-danger uk-text-bold">
|
||||
*
|
||||
</span>
|
||||
:
|
||||
</td>
|
||||
<td class="uk-text-left uk-width-1-1">
|
||||
<div *ngIf="!curator.name || curator.name === ''" class=" uk-text-danger uk-text-small style=display:none"> Please add name. </div>
|
||||
<input type="text"
|
||||
class="form-control uk-input" id="name"
|
||||
[(ngModel)]="curator.name" (input)="resetMessages(); onNameChange()" #name="ngModel" required>
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngIf="photo != null">
|
||||
<td for="photo" class="uk-text-bold uk-align-right">Photo:</td>
|
||||
<td class="uk-text-left">
|
||||
<div class="uk-flex uk-flex-middle" uk-grid>
|
||||
<div class="uk-width-1-3@l">
|
||||
<img class="uk-border-circle curator-photo" src="{{photo}}" alt="Curator Photo">
|
||||
<div class="uk-padding uk-padding-remove-top uk-text-large uk-text-center uk-width">Edit Personal Info</div>
|
||||
<div class="uk-margin-large-bottom uk-flex uk-grid-divider" uk-grid>
|
||||
<div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert">
|
||||
<span class="loading-gif uk-align-center"></span>
|
||||
</div>
|
||||
<table *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-2@m uk-width-1-1@s uk-align-center">
|
||||
<tbody class="uk-table uk-align-center">
|
||||
<tr *ngIf="curator.email != null" >
|
||||
<td for="email" class="uk-text-bold uk-text-right">E-mail:</td>
|
||||
<td class="uk-text-left">
|
||||
{{curator.email}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngIf="curator.name != null">
|
||||
<td for="name" class="uk-text-bold uk-text-right">
|
||||
Name
|
||||
<span class="uk-text-danger uk-text-bold">
|
||||
*
|
||||
</span>
|
||||
:
|
||||
</td>
|
||||
<td class="uk-text-left uk-width-1-1">
|
||||
<div *ngIf="!curator.name || curator.name === ''" class=" uk-text-danger uk-text-small style=display:none"> Please add name. </div>
|
||||
<input type="text"
|
||||
class="form-control uk-input" id="name"
|
||||
[(ngModel)]="curator.name" (input)="resetMessages(); onNameChange()" #name="ngModel" required>
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngIf="photo != null">
|
||||
<td for="photo" class="uk-text-bold uk-align-right">Photo:</td>
|
||||
<td class="uk-text-left">
|
||||
<div class="uk-flex uk-flex-middle" uk-grid>
|
||||
<div class="uk-width-auto@l">
|
||||
<img class="uk-border-circle curator-photo" src="{{photo}}" alt="Curator Photo">
|
||||
</div>
|
||||
<div class="uk-width-expand@l uk-grid-margin-small" uk-grid>
|
||||
<div uk-form-custom class="uk-width-auto">
|
||||
<input id="photo" type="file" (change)="fileChangeEvent($event)" (input)="resetMessages(); change()"/>
|
||||
<button class="uk-button portal-button" type="button" tabindex="-1">
|
||||
Upload a photo
|
||||
</button>
|
||||
</div>
|
||||
<div class="uk-width-expand@l" uk-grid>
|
||||
<div uk-form-custom class="uk-width-1-2">
|
||||
<input id="photo" type="file" (change)="fileChangeEvent($event)" (input)="resetMessages(); change()"/>
|
||||
<button class="uk-button portal-button" type="button" tabindex="-1">
|
||||
Upload
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="photo !== 'assets/common-assets/curator-default.png'" class="uk-width-1-2">
|
||||
<button class="uk-button uk-button-danger" type="button" (click)="resetMessages(); removePhotoModal.open()">
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="photo !== 'assets/common-assets/curator-default.png'" class="uk-width-auto">
|
||||
<button class="uk-button uk-button-danger" type="button" (click)="resetMessages(); removePhotoModal.open()">
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-margin-small-top uk-text-warning">
|
||||
Maximum photo resolution is 256x256 pixels.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngIf="curator.bio != null">
|
||||
<td for="bio" class="uk-text-bold uk-text-right">Biography:</td>
|
||||
<td class="uk-text-left">
|
||||
<textarea placeholder={{curator.bio}} type="text"
|
||||
class="form-control uk-textarea" rows="6"
|
||||
id="bio"
|
||||
[(ngModel)]="curator.bio"
|
||||
(input)="resetMessages(); change()">
|
||||
</textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngIf="curator.bio != null">
|
||||
<td class="uk-text-right"></td>
|
||||
<td class="uk-text-left">
|
||||
<div class="uk-text-danger uk-text-bold">
|
||||
* Required fields
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="uk-text-right"></td>
|
||||
<td>
|
||||
<div *ngIf="!newCurator && !curatorsEnabled" class="uk-alert uk-alert-warning" role="alert">
|
||||
<span class="uk-margin-small-right uk-icon" uk-icon="warning">
|
||||
</span>
|
||||
Community's Curators page is disabled. Please enable it <a routerLink="/pages" routerLinkActive="router-link-active" [queryParams]="{communityId: communityId, type: 'other'}">here</a>.
|
||||
</div>
|
||||
<div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
|
||||
<div *ngIf="successfulSaveMessage" class="uk-alert uk-alert-success" role="alert">{{successfulSaveMessage}}</div>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-2@m uk-width-1-1@s">
|
||||
<affiliations [curatorAffiliations]="true" [affiliations]="curator.affiliations"
|
||||
(affiliationsChange)="affiliationsChanged = $event"
|
||||
(resetCuratorMessages)="resetMessages();">
|
||||
</affiliations>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-float-right uk-visible@m" style="z-index: 100; bottom: 45px; position: fixed; right: 45px;">
|
||||
<ng-container *ngTemplateOutlet="buttons"></ng-container>
|
||||
</div>
|
||||
<div class="uk-float-right uk-margin-bottom uk-hidden@m">
|
||||
<ng-container *ngTemplateOutlet="buttons"></ng-container>
|
||||
<div class="uk-margin-small-top uk-text-warning">
|
||||
Maximum photo resolution is 256x256 pixels.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngIf="curator.bio != null">
|
||||
<td for="bio" class="uk-text-bold uk-text-right">Biography:</td>
|
||||
<td class="uk-text-left">
|
||||
<textarea placeholder={{curator.bio}} type="text"
|
||||
class="form-control uk-textarea" rows="6"
|
||||
id="bio"
|
||||
[(ngModel)]="curator.bio"
|
||||
(input)="resetMessages(); change()">
|
||||
</textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr *ngIf="curator.bio != null">
|
||||
<td class="uk-text-right"></td>
|
||||
<td class="uk-text-left">
|
||||
<div class="uk-text-danger uk-text-bold">
|
||||
* Required fields
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="uk-text-right"></td>
|
||||
<td>
|
||||
<div *ngIf="!newCurator && !curatorsEnabled" class="uk-alert uk-alert-warning" role="alert">
|
||||
<span class="uk-margin-small-right uk-icon" uk-icon="warning">
|
||||
</span>
|
||||
Community's Curators page is disabled. Please enable it <a routerLink="/pages" routerLinkActive="router-link-active" [queryParams]="{communityId: communityId, type: 'other'}">here</a>.
|
||||
</div>
|
||||
<div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
|
||||
<div *ngIf="successfulSaveMessage" class="uk-alert uk-alert-success" role="alert">{{successfulSaveMessage}}</div>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-2@m uk-width-1-1@s">
|
||||
<affiliations [curatorAffiliations]="true" [affiliations]="curator.affiliations"
|
||||
(affiliationsChange)="affiliationsChanged = $event"
|
||||
(resetCuratorMessages)="resetMessages();">
|
||||
</affiliations>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-float-right uk-visible@m" style="z-index: 100; bottom: 45px; position: fixed; right: 45px;">
|
||||
<ng-container *ngTemplateOutlet="buttons"></ng-container>
|
||||
</div>
|
||||
<div class="uk-float-right uk-margin-bottom uk-hidden@m">
|
||||
<ng-container *ngTemplateOutlet="buttons"></ng-container>
|
||||
</div>
|
||||
<modal-alert #removePhotoModal (alertOutput)="removePhoto()">
|
||||
Your photo will be removed after you save your data. Are you sure you want to proceed?
|
||||
</modal-alert>
|
||||
|
|
Loading…
Reference in New Issue