[Library | Trunk]: Grow loading stoke

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59719 d315682c-612b-4755-9ff5-7f18f6832af3

dashboard/users/dashboard-users.component.html

@@ -1,5 +1,5 @@
 <div>
-  <ul class="uk-tab customTabs admin" uk-tab>
+  <ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab>
     <li [class.uk-active]="tab === 'managers'"><a (click)="changeTab('managers')"><span class="title">Managers</span></a></li>
     <li [class.uk-active]="tab === 'members'"><a (click)="changeTab('members')"><span class="title">Members</span></a></li>
   </ul>

dashboard/users/managers/managers.component.html

@@ -5,8 +5,8 @@
       {{error}}
     </div>
   </div>
-  <div class="uk-grid" uk-grid>
+  <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
-    <div class="uk-width-expand">
+    <div class="uk-width-expand uk-flex uk-flex-left@m uk-flex-center">
       <ul class="uk-subnav uk-subnav-pill">
         <li [class.uk-active]="showManagers" (click)="showManagers = true">
           <a>Managers</a>
@@ -16,7 +16,7 @@
         </li>
       </ul>
     </div>
-    <div class="uk-width-1-5 uk-flex uk-flex-right">
+    <div class="uk-width-1-5@l uk-width-1-3@m uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center">
       <a class="uk-text-uppercase uk-flex uk-flex-middle" (click)="openInviteModal()">
         <button class="uk-icon-button large uk-button-secondary">
           <icon name="person_add"></icon>
@@ -30,7 +30,7 @@
   </div>
   <div *ngIf="!loadManagers && !loadPending" class="uk-margin-medium-top uk-padding-small">
     <div *ngIf="(showManagers && managers.length == 0) || (!showManagers && pending.length == 0)"
-         class="uk-card uk-card-default uk-padding-large uk-card-body uk-text-center uk-margin-bottom uk-text-bold">
+         class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
       <div *ngIf="showManagers">No managers for {{name}}</div>
       <div *ngIf="!showManagers">No pending manager invitations for {{name}}</div>
     </div>
@@ -38,14 +38,14 @@
          class="uk-overflow-auto uk-height-max-large">
       <div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom" *ngFor="let item of (showManagers)?managers:pending">
         <div class="uk-grid uk-grid-divider uk-flex uk-flex-middle" uk-grid>
-          <div class="uk-width-3-4">
+          <div class="uk-width-3-4@l uk-width-1-2@m">
             <div class="uk-padding-small uk-padding-remove-horizontal">
               <span class="uk-text-muted">Email: </span>
               <span class="uk-text-bold">{{(showManagers) ? item.email : item}}</span>
             </div>
           </div>
-          <div *ngIf="properties.environment === 'development'" class="uk-width-expand uk-text-center">
+          <div *ngIf="properties.environment === 'development'" class="uk-width-expand">
-            <div class="uk-padding-small uk-padding-remove-horizontal">
+            <div class="uk-padding-small uk-padding-remove-horizontal uk-flex uk-flex-center">
               <a (click)="openDeleteModal(item)" class="uk-button action uk-flex uk-flex-middle">
                 <icon name="remove_circle_outline" ratio="0.7" [flex]="true"></icon>
                 <span class="uk-margin-small-left">{{showManagers?'Remove manager':'Cancel invitation'}}</span>
@@ -64,12 +64,12 @@
   </div>
 </modal-alert>
 <modal-alert #deleteManagerModal (alertOutput)="deleteManager()">
-  <div *ngIf="selectedUser" class="uk-padding uk-padding-remove-horizontal">
+  <div *ngIf="selectedUser" class="uk-padding-small uk-padding-remove-horizontal">
     Are you sure you want to remove  <span class="uk-text-bold">{{selectedUser}}</span> from managers?
   </div>
 </modal-alert>
 <modal-alert #deletePendingModal (alertOutput)="deletePendingManager()">
-  <div *ngIf="selectedUser" class="uk-padding uk-padding-remove-horizontal">
+  <div *ngIf="selectedUser" class="uk-padding-small uk-padding-remove-horizontal">
     Are you sure you want to cancel manager invitation of <span class="uk-text-bold">{{selectedUser}}</span>?
   </div>
 </modal-alert>

dashboard/users/members/members.component.html

@@ -6,7 +6,7 @@
     </div>
   </div>
   <div class="uk-grid" uk-grid>
-    <div class="uk-width-expand">
+    <div class="uk-width-expand uk-flex uk-flex-left@m uk-flex-center">
       <ul class="uk-subnav uk-subnav-pill">
         <li [class.uk-active]="showMembers" (click)="showMembers = true">
           <a>Members</a>
@@ -16,7 +16,7 @@
         </li>
       </ul>
     </div>
-    <div class="uk-width-1-4 uk-flex uk-flex-right">
+    <div class="uk-width-1-5@l uk-width-1-3@m uk-flex uk-flex-right@m uk-flex-center">
       <a class="uk-text-uppercase uk-flex uk-flex-middle" (click)="openInviteModal()">
         <button class="uk-icon-button large uk-button-secondary">
           <icon name="person_add"></icon>
@@ -30,7 +30,7 @@
   </div>
   <div *ngIf="!loadMembers && !loadPending" class="uk-margin-medium-top">
     <div *ngIf="(showMembers && members.length == 0) || (!showMembers && pending.length == 0)"
-         class="uk-card uk-card-default uk-padding-large uk-card-body uk-text-center uk-margin-bottom uk-text-bold">
+         class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
       <div *ngIf="showMembers">No members for {{name}}</div>
       <div *ngIf="!showMembers">No pending member invitations for {{name}}</div>
     </div>
@@ -38,14 +38,14 @@
          class="uk-overflow-auto uk-height-max-large uk-padding-small">
       <div class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom" *ngFor="let item of (showMembers)?members:pending">
         <div class="uk-grid uk-grid-divider uk-flex uk-flex-middle" uk-grid>
-          <div class="uk-width-3-4">
+          <div class="uk-width-3-4@l uk-width-1-2@m">
             <div class="uk-padding-small uk-padding-remove-horizontal">
               <span class="uk-text-muted">Email: </span>
               <span class="uk-text-bold">{{(showMembers) ? item.email : item}}</span>
             </div>
           </div>
-          <div *ngIf="properties.environment === 'development'" class="uk-width-expand uk-text-center">
+          <div *ngIf="properties.environment === 'development'" class="uk-width-expand">
-            <div class="uk-padding-small uk-padding-remove-horizontal">
+            <div class="uk-padding-small uk-padding-remove-horizontal  uk-flex uk-flex-center">
               <a (click)="openDeleteModal(item)" class="uk-button action uk-flex uk-flex-middle">
                 <icon name="remove_circle_outline" ratio="0.7" [flex]="true"></icon>
                 <span class="uk-margin-small-left">{{showMembers ? 'Remove member' : 'Cancel invitation'}}</span>

utils/loading/loading.component.ts

@@ -4,12 +4,10 @@ import {Component, Input} from "@angular/core";
   selector: 'loading',
   template: `
     <div class="uk-flex uk-flex-center uk-margin-small-top">
-      <!--<div class="md-preloader" [ngClass]="(color)?('md-preloader-' + color):''">
+      <span class="portal-color uk-icon uk-spinner">
-        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="48" width="48" viewBox="0 0 75 75">
+        <svg width="60" height="60" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" data-svg="spinner"><circle
-          <circle cx="37.5" cy="37.5" r="33.5" stroke-width="4"></circle>
+            fill="none" stroke="#000" cx="15" cy="15" r="14" style="stroke-width: 2px;"></circle></svg>
-        </svg>
+      </span>
-      </div>-->
-      <span class="portal-color" uk-spinner="ratio: 2"></span>
     </div>`
 })
 export class LoadingComponent {
@@ -17,7 +15,7 @@ export class LoadingComponent {
    * Possible values '': blue, 'success': green, 'warning': orange and 'danger': red
    */
   @Input() color: 'success' | 'warning' | 'danger' = null;
-
+  
   constructor() {
   }
 }