MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Library | Trunk]: Fix loading width 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60455 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2021-02-19 17:55:44 +00:00
parent e8774312f5
commit 64e032ce0c
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
utils/loading/loading.component.ts
View File

@ -11,33 +11,36 @@ import {Component, Input, OnInit} from "@angular/core";
</div> </div>
</ng-template> </ng-template>
<ng-template #loading> <ng-template #loading>
<div [class]="'uk-flex uk-flex-center '+(top_margin ? 'uk-margin-small-top' : '')" [ngStyle]="style"> <div [class]="'uk-flex uk-flex-center '+(top_margin ? 'uk-margin-small-top' : '')">
<div [ngStyle]="style">
<span class="uk-icon uk-spinner" [ngClass]="color"> <span class="uk-icon uk-spinner" [ngClass]="color">
<svg width="60" height="60" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" data-svg="spinner"><circle <svg width="60" height="60" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" data-svg="spinner"><circle
fill="none" stroke="#000" cx="15" cy="15" r="14" style="stroke-width: 2px;"></circle></svg> fill="none" stroke="#000" cx="15" cy="15" r="14" style="stroke-width: 2px;"></circle></svg>
</span> </span>
</div> </div>
</div>
</ng-template>` </ng-template>`
}) })
export class LoadingComponent implements OnInit{ export class LoadingComponent implements OnInit {
@Input() color: string = 'portal-color'; @Input() color: string = 'portal-color';
@Input() full: boolean = false; @Input() full: boolean = false;
@Input() top_margin: boolean = true; @Input() top_margin: boolean = true;
@Input() size: "small" | "medium" | "large" = "large"; @Input() size: "small" | "medium" | "large" = "large";
public style; public style;
constructor() { constructor() {
} }
ngOnInit() { ngOnInit() {
let size = 1; let size = 1;
if(this.size === 'medium') { if (this.size === 'medium') {
size = 2; size = 2;
} else if(this.size === "large") { } else if (this.size === "large") {
size = 3; size = 3;
} }
this.style = { this.style = {
width: size*20 + 'px', width: size * 20 + 'px',
height: size*20 + 'px' height: size * 20 + 'px'
}; };
} }
} }