Index: modules/uoa-repository-dashboard-gui/trunk/app/pages/adminPg/adminPg-metrics.component.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/app/pages/adminPg/adminPg-metrics.component.ts	(revision 50289)
+++ modules/uoa-repository-dashboard-gui/trunk/app/pages/adminPg/adminPg-metrics.component.ts	(revision 50290)
@@ -34,51 +34,6 @@
 
   /* NEEDS TO CALL GET PIWIK INFO INSTEAD!! */
   getPiwiks(){
-    this.piwiks = [
-      {
-        'repositoryId': 'repo_id',
-        'openaireId': 'oa_id',
-        'repositoryName': 'the repo name',
-        'country': 'Greece',
-        'siteId': '123',
-        'authenticationToken': '32846584f571be9b57488bf4088f30ea',
-        'creationDate':  new Date(2018, 1, 3),
-        'requestorName': 'Bla blabla',
-        'requestorEmail': 'blabla@gmail.com',
-        'validated': false,
-        'validationDate':  new Date(2018, 1, 3),
-        'comment' : ''
-      },
-      {
-        'repositoryId': 'repo_id2',
-        'openaireId': 'oa_id2',
-        'repositoryName': 'the repo name2',
-        'country': 'Greece',
-        'siteId': '123',
-        'authenticationToken': '32846584f88f30easdfasdfa',
-        'creationDate':  new Date(2018, 1, 4),
-        'requestorName': 'Bla blabla',
-        'requestorEmail': 'blabla2@gmail.com',
-        'validated': true,
-        'validationDate':  new Date(2018, 1, 4),
-        'comment' : ''
-      },
-      {
-        'repositoryId': 'repo_id3',
-        'openaireId': 'oa_id',
-        'repositoryName': 'the repo name',
-        'country': 'Greece',
-        'siteId': '123',
-        'authenticationToken': '32846584f571be9b57488bf4088f30ea',
-        'creationDate': new Date(2018, 1, 3),
-        'requestorName': 'Bla blabla',
-        'requestorEmail': 'blabla2@gmail.com',
-        'validated': false,
-        'validationDate': new Date(2018, 1, 3),
-        'comment' : ''
-      }
-    ]
-/*
     this.showSpinner = true;
     this.loadingMessage = loadingReposMessage;
     this.repoService.getPiwikSitesForRepos()
@@ -103,7 +58,6 @@
           this.loadingMessage = '';
         }
       );
-*/
   }
 
   /*NOT SURE IF THESE PARAMETERS ARE THE CORRECT ONES*/
Index: modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/update-datasource-interface-form.component.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/update-datasource-interface-form.component.ts	(revision 50289)
+++ modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/update-datasource-interface-form.component.ts	(revision 50290)
@@ -10,11 +10,13 @@
 export class UpdateDatasourceInterfaceFormComponent extends MyGroup {
   successMessage: string;
   errorMessage: string;
+  existingValSet: boolean;
 
   readonly groupDefinition = {
     baseUrl: ['', Validators.required],
     selectValidationSet: [''],
-    customValidationSet: ['']
+    customValidationSet: [''],
+    compatibilityLevel: ['', Validators.required]
   };
 
 
@@ -21,6 +23,8 @@
   ngOnInit(){
     super.ngOnInit();
     console.log(this.group,this.parentGroup);
+
+    this.existingValSet = true;
     this.getMyControl('customValidationSet').disable();
   }
 
@@ -27,9 +31,11 @@
 
   chooseValSet(existingValSet: boolean) {
      if(existingValSet) {
+       this.existingValSet = true;
        this.getMyControl('selectValidationSet').enable();
        this.getMyControl('customValidationSet').disable();
      }  else {
+       this.existingValSet = false;
        this.getMyControl('selectValidationSet').disable();
        this.getMyControl('customValidationSet').enable();
      }
@@ -37,9 +43,10 @@
 
   saveInterface(){
     console.log("saved  something!");
+    if (this.existingValSet){
+      console.log(this.getMyControl('selectValidationSet').value);
+    } else {
+      console.log(this.getMyControl('customValidationSet').value);
+    }
   }
-
-  removeInterface(){
-    console.log("removed  something!");
-  }
 }
Index: modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/sources-update.component.html
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/sources-update.component.html	(revision 50289)
+++ modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/sources-update.component.html	(revision 50290)
@@ -4,7 +4,6 @@
       <h1 class="uk-article-title">Update your datasource</h1>
     </div>
     <div class="">
-      <a [routerLink]="['repo']" class="btn btn-primary">DELETE ME LATER !!</a>
       <repository-tiles [parent]="parent_id">
         Choose the Datasource you would like to manage</repository-tiles>
       <div class="row openAIRECompliantLogoDownload">
Index: modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/sources-update-repo.component.html
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/sources-update-repo.component.html	(revision 50289)
+++ modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/sources-update-repo.component.html	(revision 50290)
@@ -22,7 +22,7 @@
                     Basic information
                   </h4>
                 </div>
-                <div class="uk-alert uk-alert-warning">
+                <div class="alert alert-warning">
                   The following fields are completed by OpenDOAR.<br>
                   If you want to edit them, you can do it by using this
                   <a href="http://www.opendoar.org/suggest.php?rID=2893" target="_blank">OpenDOAR link</a>
@@ -106,16 +106,14 @@
           </li>
           <li class="el-item">
             <div class="uk-width-1-1@m uk-first-column">
-              <div class="interfacesForm">
-                <form [formGroup]="group">
-                  <!--<update-datasource-interface-form #datasourceForm [name]="'myname'" [parentGroup]="group"></update-datasource-interface-form>-->
-                  <form-repeat [component]="updateDatasource"
-                               [parentGroup]="group"
-                               [description]="interfaceFormDesc"
-                               [name]="'repeat'">
-                  </form-repeat>
-                </form>
-              </div>
+              <form [formGroup]="group">
+                <!--<update-datasource-interface-form #datasourceForm [name]="'myname'" [parentGroup]="group"></update-datasource-interface-form>-->
+                <form-repeat [component]="updateDatasource"
+                             [parentGroup]="group"
+                             [description]="interfaceFormDesc"
+                             [name]="'repeat'">
+                </form-repeat>
+              </form>
             </div>
           </li>
         </ul>
Index: modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/sources-update-repo.component.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/sources-update-repo.component.ts	(revision 50289)
+++ modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/sources-update-repo.component.ts	(revision 50290)
@@ -15,7 +15,6 @@
   updateDatasource : Type<any> = UpdateDatasourceInterfaceFormComponent;
 
   constructor(private fb: FormBuilder) {
-    this.group = fb.group({});
   }
 
   // use for the other tab
@@ -23,6 +22,7 @@
   // datasourceForm : UpdateDatasourceInterfaceFormComponent;
 
   ngOnInit() {
+    this.group = this.fb.group({});
     // console.log("DATASOURCE",this.datasourceForm);
   }
 
Index: modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/update-datasource-interface-form.component.html
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/update-datasource-interface-form.component.html	(revision 50289)
+++ modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/update-datasource-interface-form.component.html	(revision 50290)
@@ -1,4 +1,3 @@
-<div>
   <div>
     <div class="interfaceActionsPanel">
       <a (click)="saveInterface()"><i class="fa fa-save fa-lg"></i></a>
@@ -7,46 +6,46 @@
       <h5>OpenDOAR Interface (non-removable)</h5>
     </div>
   </div>
-  <div [formGroup]="group">
-    <div *ngIf="successMessage" class="uk-alert uk-alert-success" style="display:none;" aria-hidden="true">{{ successMessage }}</div>
-    <div *ngIf="errorMessage" class="uk-alert uk-alert-danger" style="display:none;" aria-hidden="true">{{ errorMessage }}</div>
-    <div class="uk-fieldset">
-      <label class="uk-form-controls-text control-label">Base URL (*)
-        <input type="text" class="uk-input" formControlName="baseUrl" disabled="">
-      </label>
-    </div>
-    <div class="uk-fieldset">
-      <label class="uk-form-controls-text control-label">Validation Set</label>
-      <div>
-        <label class="uk-button uk-button-link validationSetRadio disabled">
-          <input value="select" name="validationSet" type="radio" class="uk-radio" (change)="chooseValSet(true)">
-          <span>choose existing</span>
+  <div>
+    <div [formGroup]="group">
+      <div *ngIf="successMessage" class="uk-alert uk-alert-success" style="display:none;" aria-hidden="true">{{ successMessage }}</div>
+      <div *ngIf="errorMessage" class="uk-alert uk-alert-danger" style="display:none;" aria-hidden="true">{{ errorMessage }}</div>
+      <div class="uk-fieldset">
+        <label class="uk-form-controls-text control-label">Base OAI-PMH URL (*)
+          <input type="text" class="uk-input" formControlName="baseUrl" disabled="">
         </label>
-        <div class="uk-margin">
-          <select formControlName="selectValidationSet" class="uk-select">
-            <option value="noneSelected">-- none selected --</option>
+      </div>
+      <div class="uk-fieldset">
+        <label class="uk-form-controls-text control-label">Validation Set</label>
+        <div>
+          <label class="uk-button uk-button-link validationSetRadio">
+            <input value="select" name="validationSet" type="radio" class="uk-radio" (change)="chooseValSet(true)">
+            <span>choose existing</span>
+          </label>
+          <div class="uk-margin">
+            <select formControlName="selectValidationSet" class="uk-select">
+              <option value="">-- none selected --</option>
+            </select>
+          </div>
+          <label class="uk-button uk-button-link validationSetRadio control-label">
+            <input value="custom" name="validationSet" type="radio" class="uk-radio" (change)="chooseValSet(false)">
+            <span>or a custom one</span>
+          </label>
+          <div class="uk-margin">
+            <input formControlName="customValidationSet" class="uk-input" type="text">
+          </div>
+        </div>
+      </div>
+      <div class="uk-fieldset">
+        <label class="uk-form-controls-select control-label">Desired Compatibility Level (*)
+          <select class="uk-select" #compLvl name="compatibilityLevel" formControlname="compatibilityLevel">
+            <option value="">-- none selected --</option>
           </select>
-        </div>
-        <label class="uk-button uk-button-link validationSetRadio disabled">
-          <input value="custom" name="validationSet" type="radio" class="uk-radio" (change)="chooseValSet(false)">
-          <span>or a custom one</span>
         </label>
-        <div class="uk-margin">
-          <input formControlName="customValidationSet" class="uk-input" type="text">
-        </div>
       </div>
+      <div>
+        <label class="uk-form-controls-text control-label">Current Compatibility Level</label>
+        <div *ngIf="compLvl.value == ''">not available</div>
+      </div>
     </div>
-    <div class="uk-fieldset">
-      <label class="uk-form-controls-select control-label">Desired Compatibility Level (*)
-        <select class="uk-select" name="compatibilityLevel" formControlname="compatibilityLevel">
-          <option value="">-- none selected --</option>
-        </select>
-      </label>
-    </div>
-    <div>
-      <label class="uk-form-controls-text control-label">Current Compatibility Level
-        <!-- SHOW CURRENT LEVEL -->
-      </label>
-    </div>
   </div>
-</div>
Index: modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/sources.routing.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/sources.routing.ts	(revision 50289)
+++ modules/uoa-repository-dashboard-gui/trunk/app/pages/sources/sources.routing.ts	(revision 50290)
@@ -49,7 +49,7 @@
             component: SourcesUpdateComponent
           },
           {
-            path: 'repo',
+            path: ':repo',
             component: SourcesUpdateRepoComponent
           }
         ]
Index: modules/uoa-repository-dashboard-gui/trunk/app/pages/metrics/metrics.routing.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/app/pages/metrics/metrics.routing.ts	(revision 50289)
+++ modules/uoa-repository-dashboard-gui/trunk/app/pages/metrics/metrics.routing.ts	(revision 50290)
@@ -12,7 +12,7 @@
 const metricsRoutes: Routes = [
   {
     path: 'getImpact',
-//    canActivate: [AuthGuardService],
+    canActivate: [AuthGuardService],
     children: [
       {
         path: '',
Index: modules/uoa-repository-dashboard-gui/trunk/app/shared/reusablecomponents/repository-tiles.component.html
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/app/shared/reusablecomponents/repository-tiles.component.html	(revision 50289)
+++ modules/uoa-repository-dashboard-gui/trunk/app/shared/reusablecomponents/repository-tiles.component.html	(revision 50290)
@@ -23,9 +23,8 @@
       </div>
 
       <!--TILES VIEW-->
-      <div class="uk-grid-large uk-grid-margin-large uk-grid repos-grid" *ngIf="layoutChoice == 'tiles'">
+      <div class="uk-grid-large uk-grid-margin-large uk-grid repos-grid" *ngIf="tilesView">
         <div *ngFor="let repo of reposOfUser" class="uk-width-1-3@m uk-first-column uk-margin-small-bottom">
-          {{ setPropertiesForRepo(repo) }}
           <div class="uk-margin uk-grid-match uk-child-width-1-1 uk-grid-small uk-grid-divider uk-grid uk-scrollspy-inview uk-animation-slide-top-medium uk-grid-stack">
             <div class="uk-first-column">
               <div>
@@ -32,7 +31,7 @@
                 <div class="el-item uk-panel uk-scrollspy-inview uk-animation-slide-top-medium" uk-scrollspy-class="">
                   <div class="uk-child-width-expand uk-grid-medium uk-flex-middle uk-grid" uk-grid="">
                     <div class="uk-width-1-3@m uk-first-column">
-                      <a class="el-link" href="{{ linkToNext }}">
+                      <a class="el-link" [routerLink]="[getLinkToNext(repo)]">
                         <img *ngIf="!repo.logoUrl" class="el-image uk-border-rounded" src="/assets/imgs/yourLogoHere.jpg" alt="">
                         <img *ngIf="repo.logoUrl" class="el-image uk-border-rounded" src="{{ repo.logoUrl }}" alt="">
                       </a>
@@ -39,9 +38,9 @@
                     </div>
                     <div>
                       <h3 class="el-title uk-margin uk-h5 uk-margin-remove-adjacent uk-margin-small-bottom">{{ repo.officialName }}</h3>
-                      <div class="{{ badgeCSS }}">
+                      <div class="{{ getBadgeCSS(repo) }}">
                         <span *ngIf="parent == 'contentEvents'">(</span>
-                        {{ badgeText }}
+                        {{ getBadgeText(repo) }}
                         <span *ngIf="parent == 'contentEvents'"> events)</span>
                       </div>
                     </div>
@@ -54,7 +53,7 @@
       </div>
 
       <!-- LIST VIEW -->
-      <div class="uk-grid-large uk-grid-margin-large uk-grid repos-list" *ngIf="layoutChoice == 'list'">
+      <div class="uk-grid-large uk-grid-margin-large uk-grid repos-list" *ngIf="!tilesView">
         <div class="uk-width-1-1@m uk-first-column">
           <div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium">
             <div>
@@ -70,24 +69,23 @@
                 </thead>
                 <tbody>
                   <tr class="el-item" *ngFor="let repo of reposOfUser">
-                    {{ setPropertiesForRepo(repo) }}
                     <!-- SHARED FIELDS -->
                     <td class="uk-table-shrink">
+                      <img *ngIf="repo.logoUrl" class="el-image uk-preserve-width" src="{{ repo.logoUrl }}" style="height: 45px;">
                       <img *ngIf="!repo.logoUrl" class="el-image uk-preserve-width" src="assets/imgs/yourLogoHere.jpg" alt="[Repo Logo]" style="height: 45px;">
-                      <img *ngIf="repo.logoUrl" class="el-image uk-preserve-width" src="{{ repo.logoUrl }}" style="height: 45px;">
                     </td>
                     <td class="uk-text-nowrap uk-table-shrink">{{ repo.officialName }}</td>
 
                     <!-- SET STATUS OR EVENTS -->
-                    <td *ngIf="parent=='metrics'" class="uk-text-nowrap uk-table-shrink">
-                      <div class="{{ badgeCSS }}">{{ badgeText }}</div>
+                    <td *ngIf="parent == 'metrics'" class="uk-text-nowrap uk-table-shrink">
+                      <div class="{{ getBadgeCSS(repo) }}">{{ getBadgeText(repo) }}</div>
                     </td>
                     <td *ngIf="parent=='contentEvents'" class="uk-text-nowrap uk-table-shrink">
-                      {{ badgeText }}</td>
+                      {{ getBadgeText(repo) }}</td>
 
                     <!--SET ACTIONS-->
                     <td class="uk-text-nowrap uk-table-shrink">
-                      <a href="{{ linkToNext }}">
+                      <a [routerLink]="[getLinkToNext(repo)]">
                         <i *ngIf="parent !== 'sourcesUpdate'" class="fa fa-eye" aria-hidden="true"></i>
                         <i *ngIf="parent == 'sourcesUpdate'"class="fa fa-pencil" aria-hidden="true"></i>
                       </a>
Index: modules/uoa-repository-dashboard-gui/trunk/app/shared/reusablecomponents/repository-tiles.component.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/app/shared/reusablecomponents/repository-tiles.component.ts	(revision 50289)
+++ modules/uoa-repository-dashboard-gui/trunk/app/shared/reusablecomponents/repository-tiles.component.ts	(revision 50290)
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { PiwikInfo, Repository } from '../../domain/typeScriptClasses';
+import { Repository } from '../../domain/typeScriptClasses';
 import { RepositoryService } from '../../services/repository.service';
 import { AuthenticationService } from '../../services/authentication.service';
 import { loadingReposMessage, reposRetrievalError } from '../../domain/shared-messages';
@@ -12,10 +12,7 @@
 export class RepositoryTilesComponent implements OnInit {
   reposOfUser: Repository[] = [];
   showSpinner: boolean;
-  layoutChoice: string;
-  badgeCSS: string;
-  badgeText: string;
-  linkToNext: string;
+  tilesView: boolean;
   errorMessage: string;
   loadingMessage: string;
 
@@ -26,7 +23,7 @@
 
   ngOnInit() {
     this.getReposOfUser();
-    this.layoutChoice = 'tiles';
+    this.tilesView = true;
   }
 
   getReposOfUser(): void {
@@ -56,45 +53,64 @@
       );
   }
 
-  setPropertiesForRepo(repo: Repository): void {
-    if(this.parent=='metrics'){
-      this.goToValidationLink(repo.piwikInfo, repo.id);
+  getLinkToNext(repo): string {
+    if (this.parent == 'metrics') {
+      if (repo.piwikInfo) {
+        if (repo.piwikInfo.validated === true) {
+          return `show_metrics/${repo.id}`;
+        } else if (repo.piwikInfo.validated === false) {
+          return `instructions/${repo.id}`;
+        }
+      } else {
+        return `enable/${repo.id}`;
+      }
+    } else if(this.parent == 'sourcesUpdate'){
+      return repo.id;
+    } else if(this.parent=='contentEvents'){
+      return repo.officialName;
+    }
+  }
 
+  getBadgeCSS(repo): string {
+    if (this.parent == 'metrics') {
+      if (repo.piwikInfo) {
+        if (repo.piwikInfo.validated === true) {
+          return 'uk-badge uk-badge-success';
+        } else if (repo.piwikInfo.validated === false) {
+          return 'uk-badge uk-badge-warning';
+        }
+      } else {
+        return 'uk-badge uk-badge-danger';
+      }
+    } else if (this.parent == 'sourcesUpdate') {
+      return repo.id;
     } else if(this.parent=='contentEvents'){
-      this.badgeCSS = 'el-meta uk-margin uk-text-meta';
-      this.badgeText = '0';
-      this.linkToNext = `/contact/events/${repo.officialName}`;
-
-    } else if(this.parent=='sourcesUpd') {
-      console.log("got repo id!!");
-      this.linkToNext = `/sources/update/${repo.id}`;
+      return 'el-meta uk-margin uk-text-meta';
     }
   }
 
-  goToValidationLink(piwik: PiwikInfo, id: string) {
-    if(piwik){
-      if(piwik.validated === true){
-        this.badgeCSS = 'uk-badge uk-badge-success';
-        this.badgeText = 'enabled';
-        this.linkToNext = `/getImpact/show_metrics/${id}`;
+  getBadgeText(repo): string {
+    if(this.parent=='metrics'){
+      if(repo.piwikInfo){
+        if(repo.piwikInfo.validated === true){
+          return 'enabled';
+        } else if ( repo.piwikInfo.validated === false ) {
+          return 'enabling in progress';
+        }
+      } else {
+        return 'not enabled';
+      }
 
-      } else if ( piwik.validated === false ) {
-        this.badgeCSS = 'uk-badge uk-badge-warning';
-        this.badgeText = 'enabling in progress';
-        this.linkToNext = `/getImpact/instructions/${id}`;
-      }
-    } else {
-      this.badgeCSS = 'uk-badge uk-badge-danger';
-      this.badgeText = 'not enabled';
-      this.linkToNext = `/getImpact/enable/${id}`;
+    } else if(this.parent=='contentEvents') {
+      return '0';
     }
   }
 
   showTiles(){
-    this.layoutChoice = 'tiles';
+    this.tilesView = true;
   }
 
   showList(){
-    this.layoutChoice = 'list';
+    this.tilesView = false;
   }
 }
Index: modules/uoa-repository-dashboard-gui/trunk/app/shared/reusablecomponents/forms/my-array.interface.ts
===================================================================
--- modules/uoa-repository-dashboard-gui/trunk/app/shared/reusablecomponents/forms/my-array.interface.ts	(revision 50289)
+++ modules/uoa-repository-dashboard-gui/trunk/app/shared/reusablecomponents/forms/my-array.interface.ts	(revision 50290)
@@ -13,17 +13,17 @@
 @Component({
   selector : 'form-repeat',
   template : `
-  <div [formGroup]="parentGroup" class="uk-margin uk-grid-match uk-child-width-1-2@m uk-grid-small uk-grid uk-scrollspy-inview uk-animation-fade">
+  <div [formGroup]="parentGroup" class="interfacesForm uk-margin uk-grid-match uk-child-width-1-1 uk-child-width-1-2@m uk-grid-small uk-grid uk-scrollspy-inview uk-animation-fade">
       <!--<div formArrayName="{{name}}">-->
-          <ng-template my-form></ng-template>
+      <ng-template my-form></ng-template>
       <!--</div>-->
+      <div class="el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade">
+        <div class="interface-box new" style="text-align: center">
+          <a class="add-new-element add-new-group" (click)="push()"><i class="fa fa-plus-square-o" aria-hidden="true"></i>
+            <span class="info">Add New {{ description.label }}</span></a>
+        </div>
+      </div>
   </div>
-  <div class="uk-margin uk-grid-match uk-child-width-1-2@m uk-grid-small uk-grid uk-scrollspy-inview uk-animation-fade">
-    <div class="interface-box new" style="text-align: center">
-        <a class="add-new-element add-new-group" (click)="push()"><i class="fa fa-plus-square-o" aria-hidden="true"></i>
-          <span class="info">Add New {{ description.label }}</span></a>
-    </div>
-  </div>
 `
 
 })
@@ -143,20 +143,7 @@
 @Component({
   selector : 'form-repeat-wrapper',
   template : `
-    <div class="group">
-<!--
-        <div class="uk-grid">
-            <div class="uk-width-1-5"></div>
-            <div class="uk-width-expand\@m">
-                <label class="">
-                    {{description.label}}
-                    <a *ngIf="canDelete" class="remove-element" (click)="remove()">
-                        <i class="fa fa-times" aria-hidden="true"></i>
-                    </a>
-                </label>
-            </div>
-        </div>
--->
+    <div class="el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade">
       <div class="interfaceActionsPanel" style="margin-left: 5px;">
         <a (click)="remove()"><i class="fa fa-remove fa-lg"></i></a>
       </div>
