[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:
k.triantafyllou 2019-07-11 12:06:41 +00:00
parent 3616991444
commit 95a664287e
2 changed files with 95 additions and 97 deletions

View File

@ -5,8 +5,8 @@
<div id="wrapper" class="uk-section uk-margin-top uk-padding-remove-bottom"> <div id="wrapper" class="uk-section uk-margin-top uk-padding-remove-bottom">
<div class="uk-grid" uk-height-viewport="expand: true"> <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> <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':''" <div class="uk-width-expand uk-margin-large-top" [ngClass]="(!wellcome)?'uk-container uk-container-large uk-overflow-auto':''"
[ngStyle]="{maxHeight: (!wellcome)?'85vh':''}"> [ngStyle]="{height: (!wellcome)?'85vh':''}">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
<!-- <!--

View File

@ -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-primary" (click)="resetMessages(); updateCurator()">Save</button>
<button *ngIf="!enabled || (!hasChanged && !affiliationsChanged)" class="uk-button uk-button-default" disabled>Save</button> <button *ngIf="!enabled || (!hasChanged && !affiliationsChanged)" class="uk-button uk-button-default" disabled>Save</button>
</ng-template> </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-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 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">
<div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert"> <span class="loading-gif uk-align-center"></span>
<span class="loading-gif uk-align-center"></span> </div>
</div> <table *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-2@m uk-width-1-1@s uk-align-center">
<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">
<tbody class="uk-table uk-align-center"> <tr *ngIf="curator.email != null" >
<tr *ngIf="curator.email != null" > <td for="email" class="uk-text-bold uk-text-right">E-mail:</td>
<td for="email" class="uk-text-bold uk-text-right">E-mail:</td> <td class="uk-text-left">
<td class="uk-text-left"> {{curator.email}}
{{curator.email}} </td>
</td> </tr>
</tr> <tr *ngIf="curator.name != null">
<tr *ngIf="curator.name != null"> <td for="name" class="uk-text-bold uk-text-right">
<td for="name" class="uk-text-bold uk-text-right"> Name
Name <span class="uk-text-danger uk-text-bold">
<span class="uk-text-danger uk-text-bold"> *
* </span>
</span> :
: </td>
</td> <td class="uk-text-left uk-width-1-1">
<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>
<div *ngIf="!curator.name || curator.name === ''" class=" uk-text-danger uk-text-small style=display:none"> Please add name. </div> <input type="text"
<input type="text" class="form-control uk-input" id="name"
class="form-control uk-input" id="name" [(ngModel)]="curator.name" (input)="resetMessages(); onNameChange()" #name="ngModel" required>
[(ngModel)]="curator.name" (input)="resetMessages(); onNameChange()" #name="ngModel" required> </td>
</td> </tr>
</tr> <tr *ngIf="photo != null">
<tr *ngIf="photo != null"> <td for="photo" class="uk-text-bold uk-align-right">Photo:</td>
<td for="photo" class="uk-text-bold uk-align-right">Photo:</td> <td class="uk-text-left">
<td class="uk-text-left"> <div class="uk-flex uk-flex-middle" uk-grid>
<div class="uk-flex uk-flex-middle" uk-grid> <div class="uk-width-auto@l">
<div class="uk-width-1-3@l"> <img class="uk-border-circle curator-photo" src="{{photo}}" alt="Curator Photo">
<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>
<div class="uk-width-expand@l" uk-grid> <div *ngIf="photo !== 'assets/common-assets/curator-default.png'" class="uk-width-auto">
<div uk-form-custom class="uk-width-1-2"> <button class="uk-button uk-button-danger" type="button" (click)="resetMessages(); removePhotoModal.open()">
<input id="photo" type="file" (change)="fileChangeEvent($event)" (input)="resetMessages(); change()"/> Remove
<button class="uk-button portal-button" type="button" tabindex="-1"> </button>
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> </div>
</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> </div>
</td> <div class="uk-margin-small-top uk-text-warning">
</tr> Maximum photo resolution is 256x256 pixels.
<tr> </div>
<td class="uk-text-right"></td> </td>
<td> </tr>
<div *ngIf="!newCurator && !curatorsEnabled" class="uk-alert uk-alert-warning" role="alert"> <tr *ngIf="curator.bio != null">
<span class="uk-margin-small-right uk-icon" uk-icon="warning"> <td for="bio" class="uk-text-bold uk-text-right">Biography:</td>
</span> <td class="uk-text-left">
Community's Curators page is disabled. Please enable it <a routerLink="/pages" routerLinkActive="router-link-active" [queryParams]="{communityId: communityId, type: 'other'}">here</a>. <textarea placeholder={{curator.bio}} type="text"
</div> class="form-control uk-textarea" rows="6"
<div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div> id="bio"
<div *ngIf="successfulSaveMessage" class="uk-alert uk-alert-success" role="alert">{{successfulSaveMessage}}</div> [(ngModel)]="curator.bio"
</tr> (input)="resetMessages(); change()">
</tbody> </textarea>
</table> </td>
<div *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-2@m uk-width-1-1@s"> </tr>
<affiliations [curatorAffiliations]="true" [affiliations]="curator.affiliations" <tr *ngIf="curator.bio != null">
(affiliationsChange)="affiliationsChanged = $event" <td class="uk-text-right"></td>
(resetCuratorMessages)="resetMessages();"> <td class="uk-text-left">
</affiliations> <div class="uk-text-danger uk-text-bold">
</div> * Required fields
</div> </div>
<div class="uk-float-right uk-visible@m" style="z-index: 100; bottom: 45px; position: fixed; right: 45px;"> </td>
<ng-container *ngTemplateOutlet="buttons"></ng-container> </tr>
</div> <tr>
<div class="uk-float-right uk-margin-bottom uk-hidden@m"> <td class="uk-text-right"></td>
<ng-container *ngTemplateOutlet="buttons"></ng-container> <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> </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()"> <modal-alert #removePhotoModal (alertOutput)="removePhoto()">
Your photo will be removed after you save your data. Are you sure you want to proceed? Your photo will be removed after you save your data. Are you sure you want to proceed?
</modal-alert> </modal-alert>