Index: modules/uoa-services-portal/trunk/portal-2/src/app/utils/entities/metrics.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/utils/entities/metrics.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/utils/entities/metrics.ts	(revision 45390)
@@ -1,5 +1,5 @@
 export class Metrics {
     totalDownloads: string;
     totalViews: string;
-    infos: Map<string, {"url": string, "numOfDownloads": string, "numOfViews": string}>;
+    infos: Map<string, {"name": string, "url": string, "numOfDownloads": string, "numOfViews": string}>;
 }
Index: modules/uoa-services-portal/trunk/portal-2/src/app/utils/properties/openaireProperties.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/utils/properties/openaireProperties.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/utils/properties/openaireProperties.ts	(revision 45390)
@@ -36,7 +36,7 @@
 
 
     // private static searchAPIURL = "http://rudie.di.uoa.gr:8080/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2/api/";
-     private static searchAPIURLLAst = "http://astero.di.uoa.gr:8080/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2/api/";
+    private static searchAPIURLLAst = "http://astero.di.uoa.gr:8080/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2/api/";
     // private searchAPIURL     = "http://rudie.di.uoa.gr:8080/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2.0/api/";
     // private static searchAPIURL     = "http://scoobydoo.di.uoa.gr:8181/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2/api/";
 
@@ -43,10 +43,13 @@
     // private static searchAPIURLLAst     = "http://rudie.di.uoa.gr:8080/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2/api/";
 
     //private static searchAPIURLLAst     = "http://scoobydoo.di.uoa.gr:8181/dnet-functionality-services-2.0.0-SNAPSHOT-new/rest/v2/api/";
+    //private static searchAPIURLLAst = "http://scoobydoo.di.uoa.gr:8080/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2/api/";
 
     // private static searchResourcesAPIURL     = "http://rudie.di.uoa.gr:8080/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2/api/resources";
-    private static searchResourcesAPIURL     = "http://scoobydoo.di.uoa.gr:8181/dnet-functionality-services-2.0.0-SNAPSHOT-new/rest/v2/api/resources";
+    //private static searchResourcesAPIURL     = "http://scoobydoo.di.uoa.gr:8181/dnet-functionality-services-2.0.0-SNAPSHOT-new/rest/v2/api/resources";
+    private static searchResourcesAPIURL     = "http://astero.di.uoa.gr:8080/dnet-functionality-services-2.0.0-SNAPSHOT/rest/v2/api/resources";
 
+
     //private static searchServiveURL     = "http://astero.di.uoa.gr:8080/dnet-functionality-services-2.0.0-SNAPSHOT/";
     private static searchServiveURL  = "http://scoobydoo.di.uoa.gr:8181/dnet-functionality-services-2.0.0-SNAPSHOT/";
     // private static searchServiveURL  = "http://services.openaire.eu:8380/search/";
Index: modules/uoa-services-portal/trunk/portal-2/src/app/utils/showDataProviders.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/utils/showDataProviders.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/utils/showDataProviders.component.ts	(revision 45390)
@@ -15,7 +15,7 @@
 
             <div role="separator" class="divider" *ngFor="let item of dataProviders">
                 <p *ngIf="item['url'] != undefined && item['url']">
-                    <a href="{{item['url']}}" target="_blank">
+                    <a href="{{item['url']}}" target="_blank" class="uk-icon-external-link">
                         {{item['name']}}
                     </a>
                 </p>
@@ -25,7 +25,7 @@
 
                 <p>
                     <span *ngFor="let item of dataProviders.organizations">
-                        <a *ngIf="item['url']!=''" href="{{item['url']}}" target="_blank">
+                        <a *ngIf="item['url']!=''" href="{{item['url']}}" target="_blank" class="uk-icon-external-link">
                             {{item['name']}}
                         </a>
                         <p *ngIf="item['url']==''">
@@ -41,7 +41,7 @@
 
                 <p *ngIf="item['websiteUrl'] != null && item['websiteUrl'] != ''">
                     Website URL:
-                    <a href="{{item['websiteUrl']}}" target="_blank">
+                    <a href="{{item['websiteUrl']}}" target="_blank" class="uk-icon-external-link" >
                         {{item['websiteUrl']}}
                     </a>
                 </p>
Index: modules/uoa-services-portal/trunk/portal-2/src/app/services/organization.service.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/services/organization.service.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/services/organization.service.ts	(revision 45390)
@@ -34,7 +34,7 @@
 
 
     }
-
+/*
     getMetrics (id: string):any {
         console.info("getOrganizationMetrics in service");
         //let url = OpenaireProperties. getSearchAPIURLLast() + 'publications/' +id+"?format=json";
@@ -50,7 +50,7 @@
                       this._cache.set(key, res);
                     });
     }
-
+*/
     private handleError (error: Response) {
     // in a real world app, we may send the error to some remote logging infrastructure
     // instead of just logging it to the console
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/project/project.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/project/project.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/project/project.component.ts	(revision 45390)
@@ -22,7 +22,7 @@
 
   private projectId : string ;
   public projectInfo: ProjectInfo;
-  private metrics: string;
+  private projectName: string;
   private metricsClicked: boolean;
   private viewsFrameUrl: string;
 
@@ -119,8 +119,9 @@
       data => {
           this.projectInfo = data;
           this.project= { funderId: "", funderName: this.projectInfo.funder, projectId: this.projectId, projectName: this.projectInfo.title, projectAcronym: this.projectInfo.acronym, startDate: this.projectInfo.startDate, endDate: this.projectInfo.endDate };
-          console.log(this.project);
 
+          this.projectName = (this.projectInfo.acronym != undefined && this.projectInfo.acronym != '') ? this.projectInfo.acronym : this.projectInfo.title;
+          this.viewsFrameUrl = ('http://vaggelas.athenarc.gr/stats/merge.php?com=query&data=[{"table":"project_stats_monthly","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":-30,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Number of views for project '+this.projectName+'","yaxisheaders":["sum of views"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"id","values":["'+this.projectId+'"],"to":"-1"}]}]&info_types=["spline"]&stacking=&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(124, 181, 236, 1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true');
       },
       err => {
 		console.log(err);
@@ -129,22 +130,6 @@
     );
    }
 
-   getMetrics() {
-       this.metricsClicked = true;
-       let projectName: string = (this.projectInfo.acronym != undefined && this.projectInfo.acronym != '') ? this.projectInfo.acronym : this.projectInfo.title;
-       this.viewsFrameUrl = ('http://vaggelas.athenarc.gr/stats/merge.php?com=query&data=[{"table":"project_stats_monthly","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":-30,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Number of views for project '+projectName+'","yaxisheaders":["sum of views"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"id","values":["'+this.projectId+'"],"to":"-1"}]}]&info_types=["spline"]&stacking=&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(124, 181, 236, 1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true');
-
-       console.info("getProjectMetrics: component");
-       this._projectService.getMetrics(this.projectId).subscribe(
-        data => {
-            this.metrics = data;
-        },
-        err => {
-          console.log(err);
-        }
-      );
-   }
-
       /*
       ********* Methods for Inline Claim  of results *****
         */
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/showSubjects.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/showSubjects.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/showSubjects.component.ts	(revision 45390)
@@ -29,26 +29,23 @@
                 </div>
             </dd>
 
-            <dd class="uk-grid"
-                *ngIf="classifiedSubjects != undefined && classifiedSubjects.size > 0">
-                <div uk-push-4-5>
-                    <a (click)="showClassifiedSbj = !showClassifiedSbj;">
-                        <div *ngIf="!showClassifiedSbj">
-                            Show additional classifications
-                          <i class="uk-icon-plus"></i>
-                        </div>
-                        <div *ngIf="showClassifiedSbj">
-                            Hide additional classifications
-                            <i class="uk-icon-minus"></i>
-                        </div>
-                    </a>
+            <dd *ngIf="classifiedSubjects != undefined && classifiedSubjects.size > 0">
+                <a (click)="showClassifiedSbj = !showClassifiedSbj;">
+                    <div *ngIf="!showClassifiedSbj">
+                        Show additional classifications
+                      <i class="uk-icon-plus"></i>
+                    </div>
+                    <div *ngIf="showClassifiedSbj">
+                        Hide additional classifications
+                        <i class="uk-icon-minus"></i>
+                    </div>
+                </a>
 
-                    <div class="uk-block" *ngIf="showClassifiedSbj">
-                        <div *ngFor="let key of classifiedSubjects.keys()">
-                            Classified by OpenAIRE into
-                            <div>
-                                {{key}}: {{classifiedSubjects.get(key)}}
-                            </div>
+                <div class="uk-panel uk-panel-box" *ngIf="showClassifiedSbj">
+                    <div *ngFor="let key of classifiedSubjects.keys()">
+                        Classified by OpenAIRE into
+                        <div>
+                            {{key}}: {{classifiedSubjects.get(key)}}
                         </div>
                     </div>
                 </div>
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/showAuthors.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/showAuthors.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/showAuthors.component.ts	(revision 45390)
@@ -8,7 +8,7 @@
                 <a class="uk-text-muted" (click)="showAll = !showAll;">View less authors</a>
             </div>
             <span *ngFor="let item of authors.slice(0,30)">
-                <a class="custom-external" href="{{item['url']}}" target="_blank">
+                <a href="{{item['url']}}">
                     {{item['name']}};
                 </a>
             </span>
@@ -15,7 +15,7 @@
             <span *ngIf="!showAll && authors.length > 30">	... </span>
             <span *ngIf="showAll">
                 <span *ngFor="let item of authors.slice(30)">
-                    <a class="custom-external" href="{{item['url']}}" target="_blank">
+                    <a href="{{item['url']}}">
                         {{item['name']}};
                     </a>
                 </span>
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/landing.module.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/landing.module.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/landing.module.ts	(revision 45390)
@@ -1,4 +1,4 @@
-
+//import {MaterialModule} from '@angular/material';
 import { NgModule}            from '@angular/core';
 import { CommonModule }        from '@angular/common';
 import { FormsModule }         from '@angular/forms';
@@ -15,6 +15,7 @@
 import {ShowAuthorsComponent} from './showAuthors.component';
 import {ShowIdentifiersComponent} from './showIdentifiers.component';
 import {ShowSubjectsComponent} from './showSubjects.component';
+import {MetricsComponent} from './metrics.component';
 
 import {PublicationsTabComponent} from './dataProvider/publicationsTab.component';
 import {DatasetsTabComponent} from './dataProvider/datasetsTab.component';
@@ -25,7 +26,6 @@
 import {RelatedDatasourcesTabComponent} from './dataProvider/relatedDatasourcesTab.component';
 import {TabsComponent} from './dataProvider/tabs.component';
 
-
 import {DataProviderComponent} from './dataProvider/dataProvider.component';
 import { PersonComponent } from './person/person.component';
 import { ProjectComponent } from './project/project.component';
@@ -37,6 +37,7 @@
 
 @NgModule({
   imports: [
+    //MaterialModule.forRoot(),
     CommonModule, FormsModule,
     UtilsModule,
     ClaimModule,
@@ -46,7 +47,7 @@
 
   ],
   declarations: [
-    TabPagingComponent, TabTableComponent, ShowTitleComponent, ShowAuthorsComponent,ShowIdentifiersComponent,ShowSubjectsComponent,
+    TabPagingComponent, TabTableComponent, ShowTitleComponent, ShowAuthorsComponent,ShowIdentifiersComponent,ShowSubjectsComponent, MetricsComponent,
     PublicationsTabComponent, DatasetsTabComponent, StatisticsTabComponent, ProjectsTabComponent, DatasourcesTabComponent, OrganizationsTabComponent, RelatedDatasourcesTabComponent, TabsComponent,
     DataProviderComponent, PersonComponent, ProjectComponent, PublicationComponent, OrganizationComponent, DatasetComponent,
   ],
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataset/dataset.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataset/dataset.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataset/dataset.component.ts	(revision 45390)
@@ -2,7 +2,6 @@
 import {Observable}       from 'rxjs/Observable';
 import {DatasetService} from '../../services/dataset.service';
 import {DatasetInfo} from '../../utils/entities/datasetInfo';
-import {Metrics} from '../../utils/entities/metrics';
 import {ActivatedRoute} from '@angular/router';
 import {OpenaireProperties} from '../../utils/properties/openaireProperties'
 import {InlineClaimContextComponent} from '../../claimPages/inlineClaims/inlineClaimContext.component';
@@ -28,11 +27,10 @@
         }
       });
 
+      this.metricsClicked = false;
     }
 
     public datasetInfo: DatasetInfo;
-    private metrics: Metrics;
-
     private showStyle: boolean = false;
     private showAllReferences: boolean = false;
     private showAllRelResData: boolean = false;
@@ -40,8 +38,8 @@
     private showAllBioentities: boolean = false;
     private datasetId : string ;
     private result ;
+    private metricsClicked: boolean;
 
-
     @ViewChild (InlineClaimProjectComponent) inlineClaimProject : InlineClaimProjectComponent ;
     @ViewChild (InlineClaimContextComponent) inlineClaimContext : InlineClaimContextComponent ;
     @ViewChild (InlineClaimResultComponent) inlineClaimResult : InlineClaimResultComponent ;
@@ -74,18 +72,6 @@
 
     }
 
-    getMetrics() {
-        console.info("getDatasetMetrics: component");
-        this._datasetService.getMetrics(this.datasetId).subscribe(
-         data => {
-             this.metrics = data;
-         },
-         err => {
-           console.log(err);
-         }
-       );
-    }
-
     /********** Methods for Inline Claim  of project / dataset ******/
     toggleClaimProject(){
         this.inlineClaimProject.toggle();
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/showIdentifiers.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/showIdentifiers.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/showIdentifiers.component.ts	(revision 45390)
@@ -10,12 +10,14 @@
                 <span *ngFor="let key of identifiers.keys() let i=index">
                     <span *ngFor="let item of identifiers.get(key) let j=index">
                         <span *ngIf="i>0 || j>0">, </span>
-                        <a *ngIf="key=='doi'" class="custom-external" href="{{doiURL}}{{item}}" target="_blank">
-                            {{key}}: {{item}}
-                        </a>
-                        <a *ngIf="key=='pmc'" class="custom-external" href="{{pmcURL}}{{item}}" target="_blank">
-                            {{key}}: {{item}}
-                        </a>
+                        <span class="uk-icon-external-link">
+                            <a *ngIf="key=='doi'" href="{{doiURL}}{{item}}" target="_blank">
+                                {{key}}: {{item}}
+                            </a>
+                            <a *ngIf="key=='pmc'" href="{{pmcURL}}{{item}}" target="_blank">
+                                {{key}}: {{item}}
+                            </a>
+                        </span>
                     </span>
                 </span>
             </dd>
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/organization/organization.component.html
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/organization/organization.component.html	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/organization/organization.component.html	(revision 45390)
@@ -1,158 +1,161 @@
-<div>
-    <div class="container organization">
-        <div class="container-header" >
-            <div *ngIf="organizationInfo != null">
-                <h3 *ngIf="organizationInfo.title != undefined">
-                    <a *ngIf="organizationInfo.title['url'] != ''"
-                        href="{{organizationInfo.title['url']}}" target="_blank">
-                        {{organizationInfo.title['name']}}
-                    </a>
-                    <p *ngIf="organizationInfo.title['url'] == ''">
-                        {{organizationInfo.title['name']}}
-                    </p>
-                </h3>
-            </div>
-            <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" role="alert">{{warningMessage}}</div>
-            <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
+<div class="uk-container organization">
+    <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" role="alert">{{warningMessage}}</div>
+    <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
+
+    <!--div class="container-header" >
+        <div *ngIf="organizationInfo != null">
+            <h3 *ngIf="organizationInfo.title != undefined">
+                <a *ngIf="organizationInfo.title['url'] != ''"
+                    href="{{organizationInfo.title['url']}}"
+                    target="_blank" class="uk-icon-external-link">
+                    {{organizationInfo.title['name']}}
+                </a>
+                <p *ngIf="organizationInfo.title['url'] == ''">
+                    {{organizationInfo.title['name']}}
+                </p>
+            </h3>
         </div>
+        </div>
 
-        <div class="uk-grid">
+    <div class="uk-grid"-->
+    <div *ngIf="organizationInfo != null" class="uk-grid">
+        <div class="uk-width-7-10">
+            <showTitle [title]="organizationInfo.title"></showTitle>
 
-            <div class="uk-width-2-3" *ngIf="organizationInfo != null">
-                <dl class="uk-description-list-horizontal">
-                    <dt *ngIf="organizationInfo.name != undefined && organizationInfo.name != ''">Name: </dt>
-                    <dd *ngIf="organizationInfo.name != undefined && organizationInfo.name != ''">{{organizationInfo.name}}</dd>
-                    <dt *ngIf="organizationInfo.country != undefined && organizationInfo.country != ''">Country: </dt>
-                    <dd *ngIf="organizationInfo.country != undefined && organizationInfo.country != ''">{{organizationInfo.country}}</dd>
-                </dl>
+        <!--div class="uk-width-2-3" *ngIf="organizationInfo != null"-->
+            <dl class="uk-description-list-horizontal">
+                <dt *ngIf="organizationInfo.name != undefined && organizationInfo.name != ''">Name: </dt>
+                <dd *ngIf="organizationInfo.name != undefined && organizationInfo.name != ''">{{organizationInfo.name}}</dd>
+                <dt *ngIf="organizationInfo.country != undefined && organizationInfo.country != ''">Country: </dt>
+                <dd *ngIf="organizationInfo.country != undefined && organizationInfo.country != ''">{{organizationInfo.country}}</dd>
+            </dl>
 
-                <ul class="uk-tab" data-uk-tab="{connect:'#tab-content'}">
-                    <li class="uk-active">
-                        <a href="#projectsTab">
-                            Projects
-                            <span class="uk-badge uk-badge-notification">{{projectsNum}}</span>
-                        </a>
-                    </li>
-                    <li (click)="searchDataprovidersInit()">
-                        <a href="#dataProvidersTab">
-                            Data Providers
-                            <!--span *ngIf="organizationInfo.dataProviders == undefined" class="badge">0</span>
-                            <span *ngIf="organizationInfo.dataProviders != undefined" class="badge">
-                                {{organizationInfo.dataProviders.length}}
-                            </span-->
-                            <span class="uk-badge uk-badge-notification">
-                                {{searchDataprovidersComponent.searchUtils.totalResults}}
-                            </span>
-                        </a>
-                    </li>
-                    <li (click)="getMetrics()">
-                        <a href="#metricsTab">
-                            Metrics
-                        </a>
-                    </li>
-                </ul>
+            <ul class="uk-tab" data-uk-switcher="{connect:'#tab-content'}">
+                <li class="uk-active">
+                    <a href="#projectsTab">
+                        Projects
+                        <span class="uk-badge uk-badge-notification">{{projectsNum}}</span>
+                    </a>
+                </li>
+                <li (click)="searchDataprovidersInit()">
+                    <a href="#dataProvidersTab">
+                        Data Providers
+                        <!--span *ngIf="organizationInfo.dataProviders == undefined" class="badge">0</span>
+                        <span *ngIf="organizationInfo.dataProviders != undefined" class="badge">
+                            {{organizationInfo.dataProviders.length}}
+                        </span-->
+                        <span class="uk-badge uk-badge-notification">
+                            {{searchDataprovidersComponent.searchUtils.totalResults}}
+                        </span>
+                    </a>
+                </li>
+                <!--li (click)="getMetrics()">
+                    <a href="#metricsTab">
+                        Metrics
+                    </a>
+                </li-->
+            </ul>
 
-                <ul id="tab-content" class="uk-switcher uk-margin">
-                    <li id="projectsTab">
+            <ul id="tab-content" class="uk-switcher uk-margin">
+                <li id="projectsTab">
 
-                        <div *ngIf="organizationInfo.projects == undefined" class = "uk-alert">
-                            There are no projects
-                        </div>
+                    <div *ngIf="organizationInfo.projects == undefined" class = "uk-alert">
+                        There are no projects
+                    </div>
 
-                        <div *ngIf="organizationInfo.projects != undefined">
-                            <p>
-                                The results below are discovered through our pilot algorithms.
-                                <a href="mailto:">Let us know how we are doing!</a>
-                            </p>
+                    <div *ngIf="organizationInfo.projects != undefined">
+                        <p>
+                            The results below are discovered through our pilot algorithms.
+                            <a href="mailto:">Let us know how we are doing!</a>
+                        </p>
 
-                            <div *ngIf="organizationInfo.projects.size == 1">
-                                <div *ngFor="let key of organizationInfo.projects.keys()">
-                                    <strong>Projects funded by {{key}}</strong>
-                                </div>
+                        <div *ngIf="organizationInfo.projects.size == 1">
+                            <div *ngFor="let key of organizationInfo.projects.keys()">
+                                <strong>Projects funded by {{key}}</strong>
                             </div>
+                        </div>
 
-                            <div *ngIf="organizationInfo.projects.size > 1">
-                                <strong>Filter by Funder</strong>
+                        <div *ngIf="organizationInfo.projects.size > 1">
+                            <strong>Filter by Funder</strong>
 
-                                    <span *ngFor="let key of organizationInfo.projects.keys()" class="checkbox">
-                                        <label>
-                                            <!--input type="checkbox" (ngModelChange)="changeType(key)"-->
-                                            <input type="checkbox" (click)='handleClick(key)'>
-                                                {{key}}
-                                        </label>
-                                    </span>
-                            </div>
-
-                            <table class="uk-table uk-table-striped" *ngIf="organizationInfo.projects.size > 0">
-                                <thead>
-                                    <tr>
-                                        <th class="uk-text-center">Funder</th>
-                                        <th class="uk-text-center">Project Name</th>
-                                    </tr>
-                                </thead>
-                                <tbody *ngFor="let key of organizationInfo.projects.keys()">
-                                    <tr *ngFor="let item of organizationInfo.projects.get(key)">
-                                        <td *ngIf="fundersSet.has(key)">
+                                <span *ngFor="let key of organizationInfo.projects.keys()" class="checkbox">
+                                    <label>
+                                        <!--input type="checkbox" (ngModelChange)="changeType(key)"-->
+                                        <input type="checkbox" (click)='handleClick(key)'>
                                             {{key}}
-                                        </td>
-                                        <td *ngIf="fundersSet.has(key)">
-                                            <a *ngIf="item['url'] != '' && item['name'] != ''" class="custom-external" href="{{item['url']}}" target="_blank">
-                                                {{item['name']}}
-                                            </a>
-                                            <p *ngIf="item['url'] == '' && item['name'] != ''">{{item['name']}}</p>
-                                            <span *ngIf="item['code'] != null && item['code'] != ''"> ({{item['code']}}) </span>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-
+                                    </label>
+                                </span>
                         </div>
-                    </li>
 
-                    <li id="dataProvidersTab">
-                        <!--showDataProviders [dataProviders]="organizationInfo.dataProviders"></showDataProviders-->
-                        <div *ngIf="searchDataprovidersComponent.searchUtils.totalResults == 0" class = "uk-alert">
-                            There are no dataproviders
-                        </div>
+                        <table class="uk-table uk-table-striped" *ngIf="organizationInfo.projects.size > 0">
+                            <thead>
+                                <tr>
+                                    <th class="uk-text-center">Funder</th>
+                                    <th class="uk-text-center">Project Name</th>
+                                </tr>
+                            </thead>
+                            <tbody *ngFor="let key of organizationInfo.projects.keys()">
+                                <tr *ngFor="let item of organizationInfo.projects.get(key)">
+                                    <td *ngIf="fundersSet.has(key)">
+                                        {{key}}
+                                    </td>
+                                    <td *ngIf="fundersSet.has(key)">
+                                        <a *ngIf="item['url'] != '' && item['name'] != ''" href="{{item['url']}}">
+                                            {{item['name']}}
+                                        </a>
+                                        <p *ngIf="item['url'] == '' && item['name'] != ''">{{item['name']}}</p>
+                                        <span *ngIf="item['code'] != null && item['code'] != ''"> ({{item['code']}}) </span>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
 
-                        <div *ngIf="searchDataprovidersComponent.searchUtils.totalResults > 0">
-                            <p>
-                                The results below are discovered through our pilot algorithms.
-                                <a href="mailto:">Let us know how we are doing!</a>
-                            </p>
+                    </div>
+                </li>
 
-                            <div class = "uk-text-right" *ngIf = "searchDataprovidersComponent.searchUtils.totalResults > 10" ><a [href] = "linkToSearchDataproviders" >View all {{searchDataprovidersComponent.searchUtils.totalResults}} results</a></div>
-                            <search-result [(results)]="searchDataprovidersComponent.results" [(status)]= "searchDataprovidersComponent.status"></search-result>
-                        </div>
-                    </li>
-                    <li id="metricsTab">
-                        <div *ngIf="metrics == undefined" class = "uk-alert uk-alert-warning">
-                            Metrics are currently unavailable
-                        </div>
-                        <div class="uk-block">
-                            <b>Views: </b>{{metrics}}
-                        </div>
-                    </li>
-                </ul>
-            </div>
+                <li id="dataProvidersTab">
+                    <!--showDataProviders [dataProviders]="organizationInfo.dataProviders"></showDataProviders-->
+                    <div *ngIf="searchDataprovidersComponent.searchUtils.totalResults == 0" class = "uk-alert">
+                        There are no dataproviders
+                    </div>
 
-            <div class="uk-width-1-3" *ngIf="organizationInfo != null">
-                <ul class="uk-list uk-list-striped">
-                    <li>
-                        Share - Bookmark
-                    </li>
-                    <li></li>
-                    <div *ngIf="organizationInfo.projects != undefined">
-                        <li *ngFor="let key of organizationInfo.projects.keys()">
-                            <a (click)="exportProjects(key)">Download projects report (CSV) for {{key}}</a>
-                        </li>
+                    <div *ngIf="searchDataprovidersComponent.searchUtils.totalResults > 0">
+                        <p>
+                            The results below are discovered through our pilot algorithms.
+                            <a href="mailto:">Let us know how we are doing!</a>
+                        </p>
 
-                        <li *ngFor="let key of organizationInfo.projects.keys()">
-                            <a (click)="exportPublications(key)">Download publications report (CSV) for {{key}}</a>
-                        </li>
+                        <div class = "uk-text-right" *ngIf = "searchDataprovidersComponent.searchUtils.totalResults > 10" ><a [href] = "linkToSearchDataproviders" >View all {{searchDataprovidersComponent.searchUtils.totalResults}} results</a></div>
+                        <search-result [(results)]="searchDataprovidersComponent.results" [(status)]= "searchDataprovidersComponent.status"></search-result>
                     </div>
-                </ul>
-            </div>
+                </li>
+                <!--li id="metricsTab">
+                    <div *ngIf="metrics == undefined" class = "uk-alert uk-alert-warning">
+                        Metrics are currently unavailable
+                    </div>
+                    <div *ngIf="metrics != undefined" class="uk-panel uk-panel-box">
+                        <b>Views: </b>{{metrics}}
+                    </div>
+                </li-->
+            </ul>
         </div>
+
+        <div class="uk-width-3-10">
+            <ul class="uk-list uk-list-striped">
+                <li>
+                    Share - Bookmark
+                </li>
+                <li></li>
+                <div *ngIf="organizationInfo.projects != undefined">
+                    <li *ngFor="let key of organizationInfo.projects.keys()">
+                        <a (click)="exportProjects(key)">Download projects report (CSV) for {{key}}</a>
+                    </li>
+
+                    <li *ngFor="let key of organizationInfo.projects.keys()">
+                        <a (click)="exportPublications(key)">Download publications report (CSV) for {{key}}</a>
+                    </li>
+                </div>
+            </ul>
+        </div>
     </div>
 </div>
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/project/project.component.html
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/project/project.component.html	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/project/project.component.html	(revision 45390)
@@ -1,192 +1,183 @@
-<div>
-    <div class="container person">
-        <div class="container-header" >
-            <div *ngIf="projectInfo != null">
-                <h3 *ngIf="projectInfo.acronym != undefined && projectInfo.acronym != ''">{{projectInfo.acronym}}</h3>
-                <h3 *ngIf="projectInfo.acronym == undefined || projectInfo.acronym == ''">{{projectInfo.title}}</h3>
-            </div>
-            <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" role="alert">{{warningMessage}}</div>
-            <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
-        </div>
+<div class="uk-container person">
+    <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" role="alert">{{warningMessage}}</div>
+    <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
 
-        <div class="uk-grid" >
+    <div *ngIf="projectInfo != null" class="uk-grid">
+        <div class="uk-width-7-10">
+            <!--h3 *ngIf="projectInfo.acronym != undefined && projectInfo.acronym != ''">{{projectInfo.acronym}}</h3>
+            <h3 *ngIf="projectInfo.acronym == undefined || projectInfo.acronym == ''">{{projectInfo.title}}</h3-->
+            <h3>{{projectName}}</h3>
 
-            <div class="uk-width-2-3" *ngIf="projectInfo != null">
-
-                <dl class="uk-description-list-horizontal">
-                    <dt *ngIf="projectInfo.title != undefined && projectInfo.title != ''">Title: </dt>
-                    <dd *ngIf="projectInfo.title != undefined && projectInfo.title != ''">{{projectInfo.title}}</dd>
-                    <dt *ngIf="projectInfo.funding != undefined && projectInfo.funding != ''">Funding: </dt>
-                    <dd *ngIf="projectInfo.funding != undefined && projectInfo.funding != ''">{{projectInfo.funding}}</dd>
-                    <dt *ngIf="projectInfo.callIdentifier != undefined && projectInfo.callIdentifier != ''">Call: </dt>
-                    <dd *ngIf="projectInfo.callIdentifier != undefined && projectInfo.callIdentifier != ''">{{projectInfo.callIdentifier}}</dd>
-                    <dt *ngIf="projectInfo.contractNum != undefined && projectInfo.contractNum != ''">Contract (GA) number: </dt>
-                    <dd *ngIf="projectInfo.contractNum != undefined && projectInfo.contractNum != ''">{{projectInfo.contractNum}}</dd>
-                    <dt *ngIf="projectInfo.startDate != undefined && projectInfo.startDate != ''">Start Date: </dt>
-                    <dd *ngIf="projectInfo.startDate != undefined && projectInfo.startDate != ''">{{projectInfo.startDate}}</dd>
-                    <dt *ngIf="projectInfo.endDate != undefined && projectInfo.endDate != ''">End Date: </dt>
-                    <dd *ngIf="projectInfo.endDate != undefined && projectInfo.endDate != ''">{{projectInfo.endDate}}</dd>
-                    <dt *ngIf="projectInfo.openAccessMandate != undefined && projectInfo.openAccessMandate != ''">Open Access mandate: </dt>
-                    <dd *ngIf="projectInfo.openAccessMandate != undefined && projectInfo.openAccessMandate != ''">{{projectInfo.openAccessMandate}}</dd>
-                    <dt *ngIf="projectInfo.specialClause39 != undefined && projectInfo.specialClause39 != ''">Special Clause 39: </dt>
-                    <dd *ngIf="projectInfo.specialClause39 != undefined && projectInfo.specialClause39 != ''">{{projectInfo.specialClause39}}</dd>
-                    <dt *ngIf="projectInfo.organizations != undefined">Organizations: </dt>
-                    <dd *ngIf="projectInfo.organizations != undefined">
-                        <span *ngFor="let key of projectInfo.organizations.keys() let i=index">
-                            <a *ngIf="projectInfo.organizations.get(key) != null &&
-                                projectInfo.organizations.get(key) != ''"
-                                href="{{(projectInfo.organizations.get(key))}}" target="_blank">
-                                    {{key}}
-                            </a>
-                            <span *ngIf="projectInfo.organizations.get(key) == null ||
-                                projectInfo.organizations.get(key) == ''">
-                                    {{key}}
-                            </span>
-                            <span *ngIf="i<projectInfo.organizations.size-1">,</span>
+            <dl class="uk-description-list-horizontal">
+                <dt *ngIf="projectInfo.title != undefined && projectInfo.title != ''">Title: </dt>
+                <dd *ngIf="projectInfo.title != undefined && projectInfo.title != ''">{{projectInfo.title}}</dd>
+                <dt *ngIf="projectInfo.funding != undefined && projectInfo.funding != ''">Funding: </dt>
+                <dd *ngIf="projectInfo.funding != undefined && projectInfo.funding != ''">{{projectInfo.funding}}</dd>
+                <dt *ngIf="projectInfo.callIdentifier != undefined && projectInfo.callIdentifier != ''">Call: </dt>
+                <dd *ngIf="projectInfo.callIdentifier != undefined && projectInfo.callIdentifier != ''">{{projectInfo.callIdentifier}}</dd>
+                <dt *ngIf="projectInfo.contractNum != undefined && projectInfo.contractNum != ''">Contract (GA) number: </dt>
+                <dd *ngIf="projectInfo.contractNum != undefined && projectInfo.contractNum != ''">{{projectInfo.contractNum}}</dd>
+                <dt *ngIf="projectInfo.startDate != undefined && projectInfo.startDate != ''">Start Date: </dt>
+                <dd *ngIf="projectInfo.startDate != undefined && projectInfo.startDate != ''">{{projectInfo.startDate}}</dd>
+                <dt *ngIf="projectInfo.endDate != undefined && projectInfo.endDate != ''">End Date: </dt>
+                <dd *ngIf="projectInfo.endDate != undefined && projectInfo.endDate != ''">{{projectInfo.endDate}}</dd>
+                <dt *ngIf="projectInfo.openAccessMandate != undefined && projectInfo.openAccessMandate != ''">Open Access mandate: </dt>
+                <dd *ngIf="projectInfo.openAccessMandate != undefined && projectInfo.openAccessMandate != ''">{{projectInfo.openAccessMandate}}</dd>
+                <dt *ngIf="projectInfo.specialClause39 != undefined && projectInfo.specialClause39 != ''">Special Clause 39: </dt>
+                <dd *ngIf="projectInfo.specialClause39 != undefined && projectInfo.specialClause39 != ''">{{projectInfo.specialClause39}}</dd>
+                <dt *ngIf="projectInfo.organizations != undefined">Organizations: </dt>
+                <dd *ngIf="projectInfo.organizations != undefined">
+                    <span *ngFor="let key of projectInfo.organizations.keys() let i=index">
+                        <a *ngIf="projectInfo.organizations.get(key) != null &&
+                            projectInfo.organizations.get(key) != ''"
+                            href="{{(projectInfo.organizations.get(key))}}">
+                                {{key}}
+                        </a>
+                        <span *ngIf="projectInfo.organizations.get(key) == null ||
+                            projectInfo.organizations.get(key) == ''">
+                                {{key}}
                         </span>
-                    </dd>
-                    <dt *ngIf="projectInfo.urlInfo != undefined && projectInfo.urlInfo != ''">More information:</dt>
-                    <dd *ngIf="projectInfo.urlInfo != undefined && projectInfo.urlInfo != ''">
+                        <span *ngIf="i<projectInfo.organizations.size-1">,</span>
+                    </span>
+                </dd>
+                <dt *ngIf="projectInfo.urlInfo != undefined && projectInfo.urlInfo != ''">More information:</dt>
+                <dd *ngIf="projectInfo.urlInfo != undefined && projectInfo.urlInfo != ''">
+                    <span class="uk-icon-external-link">
                         <a target="_blank" href="{{projectInfo.url}}">
                             {{projectInfo.urlInfo}}
                         </a>
-                    </dd>
-                </dl>
-                <div class="uk-text-right">
-                	<button (click)=" toggleClaimResult()" class = "uk-button uk-button-primary uk-button-mini" >Add Research Results</button>
-                </div>
-                <inline-claim-result inlineType ="'project'" [inlineEntity]=project  (datasetAdded)="resultsAdded($event,false)"  (publicationAdded)="resultsAdded($event,true)"   ></inline-claim-result>
+                    </span>
+                </dd>
+            </dl>
+            <div class="uk-text-right">
+            	<button (click)=" toggleClaimResult()" class = "uk-button uk-button-primary uk-button-mini" >Add Research Results</button>
+            </div>
+            <inline-claim-result inlineType ="'project'" [inlineEntity]=project  (datasetAdded)="resultsAdded($event,false)"  (publicationAdded)="resultsAdded($event,true)"   ></inline-claim-result>
 
-                <ul class="uk-tab" data-uk-tab="{connect:'#tab-content'}">
-                    <li class="uk-active">
-                        <a href="#publicationsTab">
-                            Publications
-                            <span class="uk-badge uk-badge-notification">
-                                {{searchPublicationsComponent.searchUtils.totalResults}}
-                            </span>
-                        </a>
-                    </li>
-                    <li (click)="searchDatasetsInit()">
-                        <a href="#researchDataTab">
-                            Research Data
-                            <span class="uk-badge uk-badge-notification">
-                                {{searchDatasetsComponent.searchUtils.totalResults}}
-                            </span>
-                        </a>
-                    </li>
-                    <li>
-                        <a href="#statisticsTab">
-                            Statistics
-                        </a>
-                    </li>
-                    <li (click)="getMetrics()">
-                        <a href="#metricsTab">
-                            Metrics
-                        </a>
-                    </li>
-                </ul>
+            <ul class="uk-tab" data-uk-switcher="{connect:'#tab-content'}">
+                <li class="uk-active">
+                    <a href="#publicationsTab">
+                        Publications
+                        <span class="uk-badge uk-badge-notification">
+                            {{searchPublicationsComponent.searchUtils.totalResults}}
+                        </span>
+                    </a>
+                </li>
+                <li (click)="searchDatasetsInit()">
+                    <a href="#researchDataTab">
+                        Research Data
+                        <span class="uk-badge uk-badge-notification">
+                            {{searchDatasetsComponent.searchUtils.totalResults}}
+                        </span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#statisticsTab">
+                        Statistics
+                    </a>
+                </li>
+                <li (click)="metricsClicked=true;">
+                    <a href="#metricsTab">
+                        Metrics
+                    </a>
+                </li>
+            </ul>
 
-                <ul id="tab-content" class="uk-switcher uk-margin">
-                    <li id="publicationsTab">
+            <ul id="tab-content" class="uk-switcher uk-margin">
+                <li id="publicationsTab">
 
-                        <div *ngIf="searchPublicationsComponent.searchUtils.totalResults == 0" class = "uk-alert" >
-                            There are no publications
-                        </div>
+                    <div *ngIf="searchPublicationsComponent.searchUtils.totalResults == 0" class = "uk-alert" >
+                        There are no publications
+                    </div>
 
-                        <div *ngIf="searchPublicationsComponent.searchUtils.totalResults > 0">
-                            <p>
-                                The results below are discovered through our pilot algorithms.
-                                <a href="mailto:">Let us know how we are doing!</a>
-                            </p>
+                    <div *ngIf="searchPublicationsComponent.searchUtils.totalResults > 0">
+                        <p>
+                            The results below are discovered through our pilot algorithms.
+                            <a href="mailto:">Let us know how we are doing!</a>
+                        </p>
 
-                            <div class = "uk-text-right" *ngIf = "searchPublicationsComponent.searchUtils.totalResults > 10" ><a [href] = "linkToSearchPublications" >View all {{searchPublicationsComponent.searchUtils.totalResults}} results</a></div>
-                            <search-result [(results)]="searchPublicationsComponent.results" [(status)]= "searchPublicationsComponent.status"></search-result>
-                        </div>
-                    </li>
+                        <div class = "uk-text-right" *ngIf = "searchPublicationsComponent.searchUtils.totalResults > 10" ><a [href] = "linkToSearchPublications" >View all {{searchPublicationsComponent.searchUtils.totalResults}} results</a></div>
+                        <search-result [(results)]="searchPublicationsComponent.results" [(status)]= "searchPublicationsComponent.status"></search-result>
+                    </div>
+                </li>
 
-                    <li id="researchDataTab">
-                        <div *ngIf="searchDatasetsComponent.searchUtils.totalResults == 0" class = "uk-alert">
-                            There are no research data
-                        </div>
+                <li id="researchDataTab">
+                    <div *ngIf="searchDatasetsComponent.searchUtils.totalResults == 0" class = "uk-alert">
+                        There are no research data
+                    </div>
 
-                        <div *ngIf="searchDatasetsComponent.searchUtils.totalResults > 0">
-                            <p>
-                                The results below are discovered through our pilot algorithms.
-                                <a href="mailto:">Let us know how we are doing!</a>
-                            </p>
+                    <div *ngIf="searchDatasetsComponent.searchUtils.totalResults > 0">
+                        <p>
+                            The results below are discovered through our pilot algorithms.
+                            <a href="mailto:">Let us know how we are doing!</a>
+                        </p>
 
-                            <div class = "uk-text-right" *ngIf = "searchDatasetsComponent.searchUtils.totalResults > 10" ><a [href] = "linkToSearchDatasets" >View all {{searchDatasetsComponent.searchUtils.totalResults}} results</a></div>
-                            <search-result [(results)]="searchDatasetsComponent.results" [(status)]= "searchDatasetsComponent.status"></search-result>
-                        </div>
-                    </li>
+                        <div class = "uk-text-right" *ngIf = "searchDatasetsComponent.searchUtils.totalResults > 10" ><a [href] = "linkToSearchDatasets" >View all {{searchDatasetsComponent.searchUtils.totalResults}} results</a></div>
+                        <search-result [(results)]="searchDatasetsComponent.results" [(status)]= "searchDatasetsComponent.status"></search-result>
+                    </div>
+                </li>
 
-                    <li id="statisticsTab">
-                        <div *ngIf="projectInfo.statistics == undefined" class = "uk-alert">
-                            There are no statistics
-                        </div>
-                        <div *ngIf="projectInfo.statistics != undefined">
-                            <p>
-                                The results below are discovered through our pilot algorithms.
-                                <a href="mailto:">Let us know how we are doing!</a>
-                            </p>
-                        </div>
-                    </li>
-                    <li id="metricsTab">
-                        <div *ngIf="metrics == undefined" class = "uk-alert uk-alert-warning">
-                            Metrics are currently unavailable
-                        </div>
-                        <div class="uk-block">
-                            <b>Views: </b>{{metrics}}
-                        </div>
-                        <i-frame *ngIf="metricsClicked" [url]=viewsFrameUrl width="100%" height="350"></i-frame>
-                    </li>
-                </ul>
-            </div>
+                <li id="statisticsTab">
+                    <div *ngIf="projectInfo.statistics == undefined" class = "uk-alert">
+                        There are no statistics
+                    </div>
+                    <div *ngIf="projectInfo.statistics != undefined">
+                        <p>
+                            The results below are discovered through our pilot algorithms.
+                            <a href="mailto:">Let us know how we are doing!</a>
+                        </p>
+                    </div>
+                </li>
+                <li id="metricsTab">
+                    <metrics *ngIf="metricsClicked" [id]="projectId" [type]="'projects'" [name]="projectName"></metrics>
+                    <i-frame *ngIf="metricsClicked" [url]=viewsFrameUrl width="100%" height="350"></i-frame>
+                </li>
+            </ul>
+        </div>
 
-            <div class="uk-width-1-3" *ngIf="projectInfo != null">
-                <ul class="uk-list uk-list-striped">
-                    <li>
-                        Share - Bookmark
-                    </li>
-                    <li></li>
-                    <li>
-                        <a href="{{linkToSearchPublications}}">
-                            View all Project Publications
+        <div class="uk-width-3-10">
+            <ul class="uk-list uk-list-striped">
+                <li>
+                    Share - Bookmark
+                </li>
+                <li></li>
+                <li>
+                    <a href="{{linkToSearchPublications}}">
+                        View all Project Publications
+                    </a>
+                </li>
+                <li>
+                    <a href="">
+                        Dynamically incorporate publications in your site (HTML)
+                    </a>
+                </li>
+
+                <li>
+                    <a href="">
+                        View {{projectInfo.funder}} progress report (HTML)
+                    </a>
+                </li>
+                <li>
+                    <export
+                        [linkname]="'Download '+ projectInfo.funder +' progress report (CSV)'"
+                        [filename]="'publications.csv'">
+                    </export>
+                </li>
+                <!--li class="list-group-item">
+                    <div class="text-center">
+                        <a class="btn btn-primary" href="/linking">
+                            Link Research Results
                         </a>
-                    </li>
-                    <li>
-                        <a href="">
-                            Dynamically incorporate publications in your site (HTML)
+                    </div>
+                </li-->
+                <li>
+                    <div class="uk-text-center">
+                        <a class="uk-button uk-button-primary uk-button-mini" href="/deposit-publications">
+                            Deposit Publications
                         </a>
-                    </li>
-
-                    <li>
-                        <a href="">
-                            View {{projectInfo.funder}} progress report (HTML)
-                        </a>
-                    </li>
-                    <li>
-                        <export
-                            [linkname]="'Download '+ projectInfo.funder +' progress report (CSV)'"
-                            [filename]="'publications.csv'">
-                        </export>
-                    </li>
-                    <!--li class="list-group-item">
-                        <div class="text-center">
-                            <a class="btn btn-primary" href="/linking">
-                                Link Research Results
-                            </a>
-                        </div>
-                    </li-->
-                    <li>
-                        <div class="uk-text-center">
-                            <a class="uk-button uk-button-primary uk-button-mini" href="/deposit-publications">
-                                Deposit Publications
-                            </a>
-                        </div>
-                    </li>
-                </ul>
-            </div>
+                    </div>
+                </li>
+            </ul>
         </div>
     </div>
 </div>
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/showTitle.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/showTitle.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/showTitle.component.ts	(revision 45390)
@@ -5,14 +5,14 @@
     selector: 'showTitle',
     template: `
         <h2 *ngIf="title != undefined" [class] = "title['accessMode']" data-uk-tooltip [title]="title['accessMode']" >
-            <div *ngIf="title['url'] != undefined">
-                <a class="custom-external" href="{{title['url']}}" target="_blank">
-                    <div [innerHTML]="title['name']"></div>
+            <span *ngIf="title['url'] != undefined && title['url'] != null" class="uk-icon-external-link">
+                <a href="{{title['url']}}" target="_blank"
+                    [innerHTML]="title['name']">
                 </a>
-            </div>
-            <div *ngIf="title['url'] == undefined">
-                <div [innerHTML]="title['name']"></div>
-            </div>
+            </span>
+            <span *ngIf="title['url'] == undefined || title['url'] == null"
+                [innerHTML]="title['name']">
+            </span>
         </h2>
     `
 
@@ -26,5 +26,8 @@
     }
 
     ngOnInit() {
+        if(this.title['accessMode'] == undefined) {
+            this.title['accessMode'] = "";
+        }
     }
 }
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/publication/publication.component.html
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/publication/publication.component.html	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/publication/publication.component.html	(revision 45390)
@@ -1,125 +1,140 @@
-    <div class="container publication">
-        <div class="container-header" >
-            <div *ngIf="publicationInfo != null">
-                <showTitle [title]="publicationInfo.title"></showTitle>
+<div class="uk-container publication">
+    <!--div class="container-header" -->
+
+    <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" role="alert">{{warningMessage}}</div>
+    <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
+
+    <div *ngIf="publicationInfo != null" class="uk-grid">
+        <div class="uk-width-7-10">
+            <showTitle [title]="publicationInfo.title"></showTitle>
+        <!--/div-->
+    <!--/div-->
+
+    <!--div class="uk-grid"-->
+
+        <!--div class="uk-width-7-10" *ngIf="publicationInfo != null"-->
+            <div>
+                <showAuthors [authors]="publicationInfo.authors"></showAuthors>
+                <span *ngIf="publicationInfo.date != ''">({{publicationInfo.date}})</span>
             </div>
-            <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" role="alert">{{warningMessage}}</div>
-            <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
-        </div>
 
-        <div class="uk-grid">
+            <dl class="uk-description-list-horizontal">
+                <dt *ngIf="publicationInfo.publisher != undefined && publicationInfo.publisher != ''">Publisher: </dt>
+                <dd *ngIf="publicationInfo.publisher != undefined && publicationInfo.publisher != ''">{{publicationInfo.publisher}}</dd>
+                <dt *ngIf="publicationInfo.journal != undefined && publicationInfo.journal['journal'] != ''">Journal: </dt>
+                <dd *ngIf="publicationInfo.journal != undefined && publicationInfo.journal != ''">
+                    {{publicationInfo.journal['journal']}}
+                    <span *ngIf="publicationInfo.journal['issn'] != '' || publicationInfo.journal['lissn'] != ''">
+                        (
+                    </span>
+                    <span *ngIf="publicationInfo.journal['issn'] != ''">
+                        issn: {{publicationInfo.journal['issn']}}
+                    </span>
+                    <span *ngIf="publicationInfo.journal['lissn'] != ''">
+                        lissn: {{publicationInfo.journal['lissn']}}
+                    </span>
+                    <span *ngIf="publicationInfo.journal['issn'] != '' || publicationInfo.journal['lissn'] != ''">
+                        )
+                    </span>
+                </dd>
+                <dt *ngIf="publicationInfo.languages != undefined && publicationInfo.languages != 'Undetermined' && publicationInfo.languages != ''"> Languages: </dt>
+                <dd *ngIf="publicationInfo.languages != undefined && publicationInfo.languages != 'Undetermined' && publicationInfo.languages != ''">{{publicationInfo.languages}}</dd>
+                <dt *ngIf="publicationInfo.types != undefined && publicationInfo.types.length > 0"> Types: </dt>
+                <dd *ngIf="publicationInfo.types != undefined && publicationInfo.types.length > 0">{{publicationInfo.types}}</dd>
+                <dt *ngIf="publicationInfo.embargoEndDate != undefined && publicationInfo.embargoEndDate != ''">Embargo end date: </dt>
+                <dd *ngIf="publicationInfo.embargoEndDate != undefined && publicationInfo.embargoEndDate != ''">{{publicationInfo.embargoEndDate}}</dd>
 
-            <div class="uk-width-2-3" *ngIf="publicationInfo != null">
-                <div>
-                    <showAuthors [authors]="publicationInfo.authors"></showAuthors>
-                    <span *ngIf="publicationInfo.date != ''">({{publicationInfo.date}})</span>
-                </div>
+                <showIdentifiers [identifiers]="publicationInfo.identifiers"></showIdentifiers>
+                <showSubjects [subjects]="publicationInfo.subjects"
+                              [otherSubjects]="publicationInfo.otherSubjects"
+                              [classifiedSubjects]="publicationInfo.classifiedSubjects">
+                </showSubjects>
+            </dl>
 
-                <dl class="uk-description-list-horizontal">
-                    <dt *ngIf="publicationInfo.publisher != undefined && publicationInfo.publisher != ''">Publisher: </dt>
-                    <dd *ngIf="publicationInfo.publisher != undefined && publicationInfo.publisher != ''">{{publicationInfo.publisher}}</dd>
-                    <dt *ngIf="publicationInfo.journal != undefined && publicationInfo.journal['journal'] != ''">Journal: </dt>
-                    <dd *ngIf="publicationInfo.journal != undefined && publicationInfo.journal != ''">
-                        {{publicationInfo.journal['journal']}}
-                        <span *ngIf="publicationInfo.journal['issn'] != '' || publicationInfo.journal['lissn'] != ''">
-                            (
+            <blockquote *ngIf="publicationInfo.description != ''">
+                <div class="uk-text-justify" [innerHTML]="publicationInfo.description"></div>
+            </blockquote>
+            <div class="uk-text-right">
+              	<button (click)=" toggleClaimResult()" class = "uk-button uk-button-primary uk-button-mini" >Add Research Results</button>
+            </div>
+            <inline-claim-result inlineType ="publication" [inlineEntity]="result"  (datasetAdded)="resultsAdded($event,false)"  (publicationAdded)="resultsAdded($event,true)"   ></inline-claim-result>
+
+            <ul class="uk-tab" data-uk-switcher="{connect:'#tab-content'}">
+                <li class="uk-active">
+                    <a href="#citationsTab">
+                        References
+                        <span *ngIf="publicationInfo.references == undefined" class="uk-badge uk-badge-notification">0</span>
+                        <span *ngIf="publicationInfo.references != undefined" class="uk-badge uk-badge-notification">
+                            {{publicationInfo.references.length}}
                         </span>
-                        <span *ngIf="publicationInfo.journal['issn'] != ''">
-                            issn: {{publicationInfo.journal['issn']}}
+                    </a>
+                </li>
+                <li>
+                    <a href="#relatedTab">
+                        Related Research Results
+                        <span *ngIf="publicationInfo.relatedResearchResults == undefined" class="uk-badge uk-badge-notification">0</span>
+                        <span *ngIf="publicationInfo.relatedResearchResults != undefined" class="uk-badge uk-badge-notification">
+                            {{publicationInfo.relatedResearchResults.length}}
                         </span>
-                        <span *ngIf="publicationInfo.journal['lissn'] != ''">
-                            lissn: {{publicationInfo.journal['lissn']}}
+                    </a>
+                </li>
+                <li>
+                    <a href="#similarTab">
+                        Similar Research Results
+                        <span *ngIf="publicationInfo.similarResearchResults == undefined" class="uk-badge uk-badge-notification">0</span>
+                        <span *ngIf="publicationInfo.similarResearchResults != undefined" class="uk-badge uk-badge-notification">
+                            {{publicationInfo.similarResearchResults.length}}
                         </span>
-                        <span *ngIf="publicationInfo.journal['issn'] != '' || publicationInfo.journal['lissn'] != ''">
-                            )
-                        </span>
-                    </dd>
-                    <dt *ngIf="publicationInfo.languages != undefined && publicationInfo.languages != 'Undetermined' && publicationInfo.languages != ''"> Languages: </dt>
-                    <dd *ngIf="publicationInfo.languages != undefined && publicationInfo.languages != 'Undetermined' && publicationInfo.languages != ''">{{publicationInfo.languages}}</dd>
-                    <dt *ngIf="publicationInfo.types != undefined && publicationInfo.types.length > 0"> Types: </dt>
-                    <dd *ngIf="publicationInfo.types != undefined && publicationInfo.types.length > 0">{{publicationInfo.types}}</dd>
-                    <dt *ngIf="publicationInfo.embargoEndDate != undefined && publicationInfo.embargoEndDate != ''">Embargo end date: </dt>
-                    <dd *ngIf="publicationInfo.embargoEndDate != undefined && publicationInfo.embargoEndDate != ''">{{publicationInfo.embargoEndDate}}</dd>
+                    </a>
+                </li>
+                <li *ngIf="publicationInfo.bioentities != undefined">
+                    <a href="#bioentitiesTab">
+                        Bioentities
+                        <span class="uk-badge uk-badge-notification">{{bioentitiesNum}}</span>
+                    </a>
+                </li>
+                <li *ngIf="publicationInfo.software != undefined">
+                    <a href="#softwareTab">
+                        Software
+                        <span class="uk-badge uk-badge-notification">{{publicationInfo.software.length}}</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#metricsTab" (click)="metricsClicked=true;">
+                        Metrics
+                    </a>
+                </li>
+            </ul>
 
-                    <showIdentifiers [identifiers]="publicationInfo.identifiers"></showIdentifiers>
-                    <showSubjects [subjects]="publicationInfo.subjects"
-                                  [otherSubjects]="publicationInfo.otherSubjects"
-                                  [classifiedSubjects]="publicationInfo.classifiedSubjects">
-                    </showSubjects>
-                </dl>
+            <ul id="tab-content" class="uk-switcher uk-margin">
+                <li id="citationsTab">
 
-                <blockquote *ngIf="publicationInfo.description != ''">
-                    <div class="uk-text-justify" [innerHTML]="publicationInfo.description"></div>
-                </blockquote>
-                <div class="uk-text-right">
-                  	<button (click)=" toggleClaimResult()" class = "uk-button uk-button-primary uk-button-mini" >Add Research Results</button>
-                </div>
-                <inline-claim-result inlineType ="publication" [inlineEntity]="result"  (datasetAdded)="resultsAdded($event,false)"  (publicationAdded)="resultsAdded($event,true)"   ></inline-claim-result>
+                    <div *ngIf="publicationInfo.references == undefined" class = "uk-alert" >
+                        There are no references
+                    </div>
 
-                <ul class="uk-tab" data-uk-tab="{connect:'#tab-content'}" (click)="myfunct()">
-                    <li class="uk-active">
-                        <a href="#citationsTab">
-                            References
-                            <span *ngIf="publicationInfo.references == undefined" class="uk-badge uk-badge-notification">0</span>
-                            <span *ngIf="publicationInfo.references != undefined" class="uk-badge uk-badge-notification">
-                                {{publicationInfo.references.length}}
-                            </span>
-                        </a>
-                    </li>
-                    <li>
-                        <a href="#relatedTab">
-                            Related Research Results
-                            <span *ngIf="publicationInfo.relatedResearchResults == undefined" class="uk-badge uk-badge-notification">0</span>
-                            <span *ngIf="publicationInfo.relatedResearchResults != undefined" class="uk-badge uk-badge-notification">
-                                {{publicationInfo.relatedResearchResults.length}}
-                            </span>
-                        </a>
-                    </li>
-                    <li>
-                        <a href="#similarTab">
-                            Similar Research Results
-                            <span *ngIf="publicationInfo.similarResearchResults == undefined" class="uk-badge uk-badge-notification">0</span>
-                            <span *ngIf="publicationInfo.similarResearchResults != undefined" class="uk-badge uk-badge-notification">
-                                {{publicationInfo.similarResearchResults.length}}
-                            </span>
-                        </a>
-                    </li>
-                    <li *ngIf="publicationInfo.bioentities != undefined">
-                        <a href="#bioentitiesTab">
-                            Bioentities
-                            <span class="uk-badge uk-badge-notification">{{bioentitiesNum}}</span>
-                        </a>
-                    </li>
-                    <li *ngIf="publicationInfo.software != undefined">
-                        <a href="#softwareTab">
-                            Software
-                            <span class="uk-badge uk-badge-notification">{{publicationInfo.software.length}}</span>
-                        </a>
-                    </li>
-                    <li>
-                        <a id="metrtab" href="#metricsTab" (click)="getMetrics('bla')">
-                            Metrics
-                        </a>
-                    </li>
-                </ul>
-
-                <ul id="tab-content" class="uk-switcher uk-margin">
-                    <li id="citationsTab">
-
-                        <div *ngIf="publicationInfo.references == undefined" class = "uk-alert" >
-                            There are no references
+                    <div *ngIf="publicationInfo.references != undefined">
+                        <div>
+                            The results below are discovered through our pilot algorithms.
+                            <a href="mailto:">Let us know how we are doing!</a>
                         </div>
 
-                        <div *ngIf="publicationInfo.references != undefined">
-                            <tabPaging [showAll]="showAllReferences" [length]="publicationInfo.references.length" (changeShowAll)="showChange($event)"></tabPaging>
+                        <tabPaging [showAll]="showAllReferences" [length]="publicationInfo.references.length" (changeShowAll)="showChange($event)"></tabPaging>
 
-                            <p>
-                                The results below are discovered through our pilot algorithms.
-                                <a href="mailto:">Let us know how we are doing!</a>
+                        <div *ngFor="let item of publicationInfo.references.slice(0,10)">
+                            <p *ngIf=" item != undefined && item['url'] != undefined" class="uk-icon-external-link">
+                                <a href="{{item['url']}}" target="_blank">
+                                    {{item['name']}}
+                                </a>
                             </p>
+                            <p *ngIf="item['url'] == undefined">
+                                {{item['name']}}
+                            </p>
+                        </div>
 
-                            <div *ngFor="let item of publicationInfo.references.slice(0,10)">
-                                <p *ngIf=" item != undefined && item['url'] != undefined">
+                        <div *ngIf="showAllReferences">
+                            <div *ngFor="let item of publicationInfo.references.slice(10)">
+                                <p *ngIf=" item != undefined && item['url'] != undefined" class="uk-icon-external-link">
                                     <a href="{{item['url']}}" target="_blank">
                                         {{item['name']}}
                                     </a>
@@ -127,320 +142,281 @@
                                 <p *ngIf="item['url'] == undefined">
                                     {{item['name']}}
                                 </p>
-                            </div>
-
-                            <div *ngIf="showAllReferences">
-                                <div *ngFor="let item of publicationInfo.references.slice(10)">
-                                    <p *ngIf=" item != undefined && item['url'] != undefined">
-                                        <a href="{{item['url']}}" target="_blank">
-                                            {{item['name']}}
-                                        </a>
-                                    </p>
-                                    <p *ngIf="item['url'] == undefined">
-                                        {{item['name']}}
-                                    </p>
-                               </div>
-                            </div>
-
-                            <tabPaging [showAll]="showAllReferences" [length]="publicationInfo.references.length" (changeShowAll)="showChange($event)"></tabPaging>
-
+                           </div>
                         </div>
-                    </li>
 
-                    <li id="relatedTab">
-                        <div *ngIf="publicationInfo.relatedResearchResults == undefined" class = "uk-alert">
-                            There are no related research results
-                        </div>
-                        <div *ngIf="publicationInfo.relatedResearchResults != undefined">
-                            <p>
-                                The results below are discovered through our pilot algorithms.
-                                <a href="mailto:">Let us know how we are doing!</a>
-                            </p>
+                        <tabPaging [showAll]="showAllReferences" [length]="publicationInfo.references.length" (changeShowAll)="showChange($event)"></tabPaging>
 
-                            <tabTable [info]="publicationInfo.relatedResearchResults"></tabTable>
-                        </div>
-                    </li>
+                    </div>
+                </li>
 
-
-                    <li id="similarTab">
-                        <div *ngIf="publicationInfo.similarResearchResults == undefined" class = "uk-alert">
-                            There are no similar research results
-                        </div>
-                        <div *ngIf="publicationInfo.similarResearchResults != undefined">
-                            <p>
-                                The results below are discovered through our pilot algorithms.
-                                <a href="mailto:">Let us know how we are doing!</a>
-                            </p>
-
-                            <tabTable [info]="publicationInfo.similarResearchResults"></tabTable>
-                        </div>
-                    </li>
-                    <li *ngIf="publicationInfo.bioentities != undefined" id="bioentitiesTab">
+                <li id="relatedTab">
+                    <div *ngIf="publicationInfo.relatedResearchResults == undefined" class = "uk-alert">
+                        There are no related research results
+                    </div>
+                    <div *ngIf="publicationInfo.relatedResearchResults != undefined">
                         <p>
                             The results below are discovered through our pilot algorithms.
                             <a href="mailto:">Let us know how we are doing!</a>
                         </p>
-                        <table id="bioentitiesTable" class="uk-table uk-table-striped">
-                            <thead>
-                                <tr>
-                                    <th class="uk-text-center">Bio Entity</th>
-                                    <th class="uk-text-center">Site Name</th>
-                                </tr>
-                            </thead>
-                            <tbody *ngFor="let key of publicationInfo.bioentities.keys()">
-                                <tr *ngFor="let keyIn of publicationInfo.bioentities.get(key).keys()">
-                                    <td class="uk-text-center" *ngIf="keyIn != undefined">
-                                        <a href="{{publicationInfo.bioentities.get(key).get(keyIn)}}" target="_blank">
-                                            {{keyIn}}
-                                        </a>
-                                    </td>
-                                    <td class="uk-text-center">
-                                        {{key}}
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </li>
-                    <li *ngIf="publicationInfo.software != undefined" id="softwareTab">
+
+                        <tabTable [info]="publicationInfo.relatedResearchResults"></tabTable>
+                    </div>
+                </li>
+
+
+                <li id="similarTab">
+                    <div *ngIf="publicationInfo.similarResearchResults == undefined" class = "uk-alert">
+                        There are no similar research results
+                    </div>
+                    <div *ngIf="publicationInfo.similarResearchResults != undefined">
                         <p>
                             The results below are discovered through our pilot algorithms.
                             <a href="mailto:">Let us know how we are doing!</a>
                         </p>
-                        <table id="softwareTable" class="uk-table uk-table-striped">
-                            <thead>
-                                <tr>
-                                    <th class="uk-text-center">Site Name</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr *ngFor="let item of publicationInfo.software">
-                                    <td class="uk-text-center">
-                                        <a href="{{item.url}}" target="_blank">
-                                            {{item.name}}
-                                        </a>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </li>
-                    <li id="metricsTab">
-                        <div *ngIf="metrics == undefined" class = "uk-alert uk-alert-warning">
-                            Metrics are currently unavailable
-                        </div>
-                        <dl *ngIf="metrics != undefined" class="uk-description-list-horizontal uk-block">
-                            <dt>TotalDownloads: </dt>
-                            <dd>{{metrics.totalDownloads}}</dd>
-                            <dt>TotalViews: </dt>
-                            <dd>{{metrics.totalViews}}</dd>
-                        </dl>
 
-                        <table *ngIf="metrics != undefined && metrics.infos.size > 0"
-                                class="uk-table uk-table-striped">
-                            <thead>
-                                <tr>
-                                    <th class="uk-text-center">ID</th>
-                                    <th class="uk-text-center">Number Of Downloads</th>
-                                    <th class="uk-text-center">Number Of Views</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr *ngFor="let key of metrics.infos.keys()">
-                                    <td class="uk-text-center">
-                                        <a href="{{metrics.infos.get(key).url}}" target="_blank">
-                                            {{key}}
+                        <tabTable [info]="publicationInfo.similarResearchResults"></tabTable>
+                    </div>
+                </li>
+                <li *ngIf="publicationInfo.bioentities != undefined" id="bioentitiesTab">
+                    <p>
+                        The results below are discovered through our pilot algorithms.
+                        <a href="mailto:">Let us know how we are doing!</a>
+                    </p>
+                    <table id="bioentitiesTable" class="uk-table uk-table-striped">
+                        <thead>
+                            <tr>
+                                <th class="uk-text-center">Bio Entity</th>
+                                <th class="uk-text-center">Site Name</th>
+                            </tr>
+                        </thead>
+                        <tbody *ngFor="let key of publicationInfo.bioentities.keys()">
+                            <tr *ngFor="let keyIn of publicationInfo.bioentities.get(key).keys()">
+                                <td class="uk-text-center uk-icon-external-link" *ngIf="keyIn != undefined">
+                                    <a href="{{publicationInfo.bioentities.get(key).get(keyIn)}}"
+                                        target="_blank">
+                                        {{keyIn}}
+                                    </a>
+                                </td>
+                                <td class="uk-text-center">
+                                    {{key}}
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </li>
+                <li *ngIf="publicationInfo.software != undefined" id="softwareTab">
+                    <p>
+                        The results below are discovered through our pilot algorithms.
+                        <a href="mailto:">Let us know how we are doing!</a>
+                    </p>
+                    <table id="softwareTable" class="uk-table uk-table-striped">
+                        <thead>
+                            <tr>
+                                <th class="uk-text-center">Site Name</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let item of publicationInfo.software" class="uk-text-center">
+                                <td class="uk-icon-external-link">
+                                    <a href="{{item.url}}" target="_blank">
+                                        {{item.name}}
+                                    </a>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </li>
+                <li id="metricsTab">
+                    <metrics *ngIf="metricsClicked" [id]="articleId" [type]="'results'"></metrics>
+                    <!--i-frame *ngIf="metricsClicked" [url]=viewsFrameUrl width="100%" height="250"></i-frame-->
+                    <i-frame *ngIf="metricsClicked" [url]=openaireViewsFrameUrl width="100%" height="250"></i-frame>
+                </li>
+            </ul>
+        </div>
+
+        <div class="uk-width-3-10">
+
+            <ul class="uk-list uk-list-striped mainFunctionsBlock">
+                <li>
+                    <dl class="uk-description-list-line functionsSection">
+                        <dt  >Share - Bookmark</dt>
+                        <dd>
+                        </dd>
+                    </dl>
+                </li>
+                <li></li>
+                <li *ngIf="publicationInfo.collectedFrom != undefined">
+                    <dl class="uk-description-list-line functionsSection">
+                        <dt>Collected from</dt>
+                        <dd *ngIf="showAllCollectedFrom" class="uk-text-right">
+                            <a class="uk-text-muted" (click)="showAllCollectedFrom = !showAllCollectedFrom;">
+                                View less
+                            </a>
+                        </dd>
+                        <dd  *ngFor="let item of publicationInfo.collectedFrom let i=index">
+                            <a *ngIf="i<5 || showAllCollectedFrom" href="{{item['url']}}">
+                                {{item['name']}}
+                            </a>
+                        </dd>
+                        <dd *ngIf="showAllCollectedFrom" class="uk-text-right">
+                            <a class="uk-text-muted" (click)="showAllCollectedFrom = !showAllCollectedFrom;">
+                                View less
+                            </a>
+                        </dd>
+                        <dd *ngIf="!showAllCollectedFrom && publicationInfo.collectedFrom.length > 5" class="uk-text-right">
+                            <a class="uk-text-muted" (click)="showAllCollectedFrom = !showAllCollectedFrom;">
+                                View more
+                            </a>
+                        </dd>
+                    </dl>
+                </li>
+                <li *ngIf="publicationInfo.downloadFrom != undefined && publicationInfo.downloadFrom.size > 0">
+                    <dl class="uk-description-list-line functionsSection">
+                        <dt class="title">Download from</dt>
+                        <dd *ngIf="showAllDownloadFrom" class="uk-text-right">
+                            <a class="uk-text-muted" (click)="showAllDownloadFrom = !showAllDownloadFrom;">
+                                View less
+                            </a>
+                        </dd>
+                        <dd class="line {{publicationInfo.downloadFrom.get(key)['accessMode']}}"
+                            *ngFor="let key of publicationInfo.downloadFrom.keys() let i=index"
+                            [title]="publicationInfo.downloadFrom.get(key)['accessMode']">
+                            <span *ngIf="i<5 || showAllDownloadFrom" class="uk-icon-external-link">
+                                <div *ngIf="publicationInfo.downloadFrom.get(key)['url'].length > 1">
+                                    {{key}}
+                                    <span *ngFor="let url of publicationInfo.downloadFrom.get(key)['url']; let i=index;">
+                                        <a href="{{url}}" [class]="publicationInfo.downloadFrom.get(key)['accessMode']"
+                                            [title]="publicationInfo.downloadFrom.get(key)['accessMode']">
+                                            [{{i+1}}]
                                         </a>
-                                    </td>
-                                    <td class="uk-text-center">
-                                        {{metrics.infos.get(key).numOfDownloads}}
-                                    </td>
-                                    <td class="uk-text-center">
-                                        {{metrics.infos.get(key).numOfViews}}
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                        <!--i-frame *ngIf="metricsClicked" [url]=viewsFrameUrl width="100%" height="250"></i-frame-->
-                        <i-frame *ngIf="metricsClicked" [url]=openaireViewsFrameUrl width="100%" height="250"></i-frame>
-                    </li>
-                </ul>
-            </div>
-            <div class="uk-width-1-3" *ngIf="publicationInfo != null">
-
-                <ul class="uk-list uk-list-striped mainFunctionsBlock">
-                    <li>
-                        <dl class="uk-description-list-line functionsSection">
-                            <dt  >Share - Bookmark</dt>
-                            <dd>
-                            </dd>
-                        </dl>
-                    </li>
-                    <li></li>
-                    <li *ngIf="publicationInfo.collectedFrom != undefined">
-                        <dl class="uk-description-list-line functionsSection">
-                            <dt>Collected from</dt>
-                            <dd *ngIf="showAllCollectedFrom" class="uk-text-right">
-                                <a class="uk-text-muted" (click)="showAllCollectedFrom = !showAllCollectedFrom;">
-                                    View less
-                                </a>
-                            </dd>
-                            <dd  *ngFor="let item of publicationInfo.collectedFrom let i=index">
-                                <a *ngIf="i<5 || showAllCollectedFrom" href="{{item['url']}}">
-                                    {{item['name']}}
-                                </a>
-                            </dd>
-                            <dd *ngIf="showAllCollectedFrom" class="uk-text-right">
-                                <a class="uk-text-muted" (click)="showAllCollectedFrom = !showAllCollectedFrom;">
-                                    View less
-                                </a>
-                            </dd>
-                            <dd *ngIf="!showAllCollectedFrom && publicationInfo.collectedFrom.length > 5" class="uk-text-right">
-                                <a class="uk-text-muted" (click)="showAllCollectedFrom = !showAllCollectedFrom;">
-                                    View more
-                                </a>
-                            </dd>
-                        </dl>
-                    </li>
-                    <li *ngIf="publicationInfo.downloadFrom != undefined && publicationInfo.downloadFrom.size > 0">
-                        <dl class="uk-description-list-line functionsSection">
-                            <dt class="title">Download from</dt>
-                            <dd *ngIf="showAllDownloadFrom" class="uk-text-right">
-                                <a class="uk-text-muted" (click)="showAllDownloadFrom = !showAllDownloadFrom;">
-                                    View less
-                                </a>
-                            </dd>
-                            <dd class="line" *ngFor="let key of publicationInfo.downloadFrom.keys() let i=index">
-                                <div *ngIf="i<5 || showAllDownloadFrom">
-                                    <div *ngIf="publicationInfo.downloadFrom.get(key)['url'].length > 1">
-                                        {{key}}
-                                        <span *ngFor="let url of publicationInfo.downloadFrom.get(key)['url']; let i=index;">
-                                            <a href="{{url}}">
-                                                [{{i+1}}] -- accessMode={{publicationInfo.downloadFrom.get(key)['accessMode']}}
-                                            </a>
-                                        </span>
-                                    </div>
-                                    <a *ngIf="publicationInfo.downloadFrom.get(key)['url'].length == 1" href="{{publicationInfo.downloadFrom.get(key)['url']}}">
-                                        {{key}} -- accessMode={{publicationInfo.downloadFrom.get(key)['accessMode']}}
-                                    </a>
+                                    </span>
                                 </div>
-                            </dd>
-                            <dd *ngIf="showAllDownloadFrom" class="uk-text-right">
-                                <a class="uk-text-muted" (click)="showAllDownloadFrom = !showAllDownloadFrom;">
-                                    View less
+                                <a *ngIf="publicationInfo.downloadFrom.get(key)['url'].length == 1"
+                                    href="{{publicationInfo.downloadFrom.get(key)['url']}}">
+                                    {{key}}
                                 </a>
-                            </dd>
-                            <dd *ngIf="!showAllDownloadFrom && publicationInfo.downloadFrom.length > 5" class="uk-text-right">
-                                <a class="uk-text-muted" (click)="showAllDownloadFrom = !showAllDownloadFrom;">
-                                    View more
-                                </a>
-                            </dd>
-                        </dl>
-                    </li>
-                    <li *ngIf="publicationInfo.publishedIn != undefined && publicationInfo.publishedIn.size > 0">
-                        <dl class="uk-description-list-line functionsSection">
-                            <dt class="title">Published in</dt>
-                            <dd *ngIf="showAllPublishedIn" class="uk-text-right">
-                                <a class="uk-text-muted" (click)="showAllPublishedIn = !showAllPublishedIn;">
-                                    View less
-                                </a>
-                            </dd>
-                            <dd class="line" *ngFor="let key of publicationInfo.publishedIn.keys() let i=index">
-                                <div *ngIf="i<5 || showAllPublishedIn">
-                                    <div *ngIf="publicationInfo.publishedIn.get(key)['url'].length > 1">
-                                        {{key}}
-                                        <span *ngFor="let url of publicationInfo.publishedIn.get(key)['url']; let i=index">
-                                            <a href="{{url}}">
-                                                [{{i+1}}]
-                                            </a>
-                                        </span>
-                                    </div>
-                                    <a *ngIf="publicationInfo.publishedIn.get(key)['url'].length == 1" href="{{publicationInfo.publishedIn.get(key)['url']}}">
-                                        {{key}}
-                                    </a>
+                            </span>
+                        </dd>
+                        <dd *ngIf="showAllDownloadFrom" class="uk-text-right">
+                            <a class="uk-text-muted" (click)="showAllDownloadFrom = !showAllDownloadFrom;">
+                                View less
+                            </a>
+                        </dd>
+                        <dd *ngIf="!showAllDownloadFrom && publicationInfo.downloadFrom.length > 5" class="uk-text-right">
+                            <a class="uk-text-muted" (click)="showAllDownloadFrom = !showAllDownloadFrom;">
+                                View more
+                            </a>
+                        </dd>
+                    </dl>
+                </li>
+                <li *ngIf="publicationInfo.publishedIn != undefined && publicationInfo.publishedIn.size > 0">
+                    <dl class="uk-description-list-line functionsSection">
+                        <dt class="title">Published in</dt>
+                        <dd *ngIf="showAllPublishedIn" class="uk-text-right">
+                            <a class="uk-text-muted" (click)="showAllPublishedIn = !showAllPublishedIn;">
+                                View less
+                            </a>
+                        </dd>
+                        <dd class="line" *ngFor="let key of publicationInfo.publishedIn.keys() let i=index">
+                            <div *ngIf="i<5 || showAllPublishedIn" class="uk-icon-external-link">
+                                <div *ngIf="publicationInfo.publishedIn.get(key)['url'].length > 1">
+                                    {{key}}
+                                    <span *ngFor="let url of publicationInfo.publishedIn.get(key)['url']; let i=index">
+                                        <a href="{{url}}">
+                                            [{{i+1}}]
+                                        </a>
+                                    </span>
                                 </div>
-                            </dd>
-                            <dd *ngIf="showAllPublishedIn" class="uk-text-right">
-                                <a class="uk-text-muted" (click)="showAllPublishedIn = !showAllPublishedIn;">
-                                    View less
+                                <a *ngIf="publicationInfo.publishedIn.get(key)['url'].length == 1"
+                                    href="{{publicationInfo.publishedIn.get(key)['url']}}">
+                                    {{key}}
                                 </a>
-                            </dd>
-                            <dd *ngIf="!showAllPublishedIn && publicationInfo.publishedIn.length > 5" class="uk-text-right">
-                                <a class="uk-text-muted" (click)="showAllPublishedIn = !showAllPublishedIn;">
-                                    View more
-                                </a>
-                            </dd>
-                        </dl>
-                    </li>
+                            </div>
+                        </dd>
+                        <dd *ngIf="showAllPublishedIn" class="uk-text-right">
+                            <a class="uk-text-muted" (click)="showAllPublishedIn = !showAllPublishedIn;">
+                                View less
+                            </a>
+                        </dd>
+                        <dd *ngIf="!showAllPublishedIn && publicationInfo.publishedIn.length > 5" class="uk-text-right">
+                            <a class="uk-text-muted" (click)="showAllPublishedIn = !showAllPublishedIn;">
+                                View more
+                            </a>
+                        </dd>
+                    </dl>
+                </li>
 
-                    <li>
-                        <dl class="uk-description-list-line functionsSection" *ngIf="publicationInfo.fundedByProjects != undefined">
-                            <dt class="title">Funded By</dt>
-                            <dd *ngIf="showAllFundedBy" class="uk-text-right">
-                                <a class="uk-text-muted" (click)="showAllFundedBy = !showAllFundedBy;">
-                                    View less
-                                </a>
-                            </dd>
-                            <dd
-                                data-uk-tooltip="{pos:'right'}" title="{{item['title']}}
-                                |   Project Code: {{item['code']}}
-                                |   Funder: {{item['funderName']}} ({{item['funderShortname']}})
-                                |   Funding: {{item['funding']}}"
-                                class="line" *ngFor="let item of publicationInfo.fundedByProjects let i=index">
-                                    <div *ngIf="i<5 || showAllFundedBy">
-                                        <a *ngIf="!item['inline']" href="{{item['url']}}">
+                <li>
+                    <dl class="uk-description-list-line functionsSection" *ngIf="publicationInfo.fundedByProjects != undefined">
+                        <dt class="title">Funded By</dt>
+                        <dd *ngIf="showAllFundedBy" class="uk-text-right">
+                            <a class="uk-text-muted" (click)="showAllFundedBy = !showAllFundedBy;">
+                                View less
+                            </a>
+                        </dd>
+                        <dd
+                            data-uk-tooltip="{pos:'right'}" title="{{item['title']}}
+                            |   Project Code: {{item['code']}}
+                            |   Funder: {{item['funderName']}} ({{item['funderShortname']}})
+                            |   Funding: {{item['funding']}}"
+                            class="line" *ngFor="let item of publicationInfo.fundedByProjects let i=index">
+                                <div *ngIf="i<5 || showAllFundedBy">
+                                    <a *ngIf="!item['inline']" href="{{item['url']}}">
+                                        {{item['funderShortname']?item['funderShortname']:item['funderName']}}
+                                        | {{ item['acronym']?item['acronym']:item['title']}}
+                                    </a>
+
+                                    <a *ngIf="item['inline']" href="{{item['url']}}">
+                                        <mark>
                                             {{item['funderShortname']?item['funderShortname']:item['funderName']}}
                                             | {{ item['acronym']?item['acronym']:item['title']}}
-                                        </a>
+                                        </mark>
+                                    </a>
+                                </div>
+                        </dd>
+                        <dd *ngIf="showAllFundedBy" class="uk-text-right">
+                            <a class="uk-text-muted" (click)="showAllFundedBy = !showAllFundedBy;">
+                                View less
+                            </a>
+                        </dd>
+                        <dd *ngIf="!showAllFundedBy && publicationInfo.fundedByProjects.length > 5" class="uk-text-right">
+                            <a class="uk-text-muted" (click)="showAllFundedBy = !showAllFundedBy;">
+                                View more
+                            </a>
+                        </dd>
+                    </dl>
 
-                                        <a *ngIf="item['inline']" href="{{item['url']}}">
-                                            <mark>
-                                                {{item['funderShortname']?item['funderShortname']:item['funderName']}}
-                                                | {{ item['acronym']?item['acronym']:item['title']}}
-                                            </mark>
-                                        </a>
-                                    </div>
-                            </dd>
-                            <dd *ngIf="showAllFundedBy" class="uk-text-right">
-                                <a class="uk-text-muted" (click)="showAllFundedBy = !showAllFundedBy;">
-                                    View less
-                                </a>
-                            </dd>
-                            <dd *ngIf="!showAllFundedBy && publicationInfo.fundedByProjects.length > 5" class="uk-text-right">
-                                <a class="uk-text-muted" (click)="showAllFundedBy = !showAllFundedBy;">
-                                    View more
-                                </a>
-                            </dd>
-                        </dl>
+                    <button (click)="toggleClaimProject()"  class = "uk-button uk-button-primary uk-button-mini" >Add Projects</button>
+                    <inline-claim-project *ngIf="result "  inlineType ="publication" [inlineEntity]="result"  (projectAdded)="projectAdded($event)" ></inline-claim-project>
+                </li>
+                <li>
+                    <dl class="uk-description-list-line functionsSection" *ngIf="publicationInfo.contexts != undefined">
+                        <dt class="title">Related to</dt>
+                        <dd class="line" *ngFor="let item of publicationInfo.contexts">
+                          <span *ngIf = "!item['inline']" >
+                            <span>{{item['labelContext']}}</span>
+                            <span *ngIf="item['labelCategory'] != null">-> {{item['labelCategory']}}</span>
+                            <span *ngIf="item['labelConcept'] != null">: {{item['labelConcept']}}</span>
+                          </span>
+                          <mark *ngIf = "item['inline']" >
+                            <span>{{item['labelContext']}}</span>
+                            <span *ngIf="item['labelCategory'] != null">-> {{item['labelCategory']}}</span>
+                            <span *ngIf="item['labelConcept'] != null">: {{item['labelConcept']}}</span>
+                          </mark>
+                        </dd>
+                    </dl>
+                    <dl class="functionsSection" *ngIf="publicationInfo.contexts == undefined">
+                        <dt class="title">Related to </dt>
 
-                        <button (click)="toggleClaimProject()"  class = "uk-button uk-button-primary uk-button-mini" >Add Projects</button>
-                        <inline-claim-project *ngIf="result "  inlineType ="publication" [inlineEntity]="result"  (projectAdded)="projectAdded($event)" ></inline-claim-project>
-                    </li>
-                    <li>
-                        <dl class="uk-description-list-line functionsSection" *ngIf="publicationInfo.contexts != undefined">
-                            <dt class="title">Related to</dt>
-                            <dd class="line" *ngFor="let item of publicationInfo.contexts">
-                              <span *ngIf = "!item['inline']" >
-                                <span>{{item['labelContext']}}</span>
-                                <span *ngIf="item['labelCategory'] != null">-> {{item['labelCategory']}}</span>
-                                <span *ngIf="item['labelConcept'] != null">: {{item['labelConcept']}}</span>
-                              </span>
-                              <mark *ngIf = "item['inline']" >
-                                <span>{{item['labelContext']}}</span>
-                                <span *ngIf="item['labelCategory'] != null">-> {{item['labelCategory']}}</span>
-                                <span *ngIf="item['labelConcept'] != null">: {{item['labelConcept']}}</span>
-                              </mark>
-                            </dd>
-                        </dl>
-                        <dl class="functionsSection" *ngIf="publicationInfo.contexts == undefined">
-                            <dt class="title">Related to </dt>
-
-                        </dl>
-                        <button (click)=" toggleClaimContext()" class = "uk-button uk-button-primary uk-button-mini" >Add Concepts</button>
-                        <inline-claim-context   inlineType ="publication" [inlineEntity]="result" (contextAdded)="contextAdded($event)" ></inline-claim-context>
-                    </li>
-                </ul>
-            </div>
+                    </dl>
+                    <button (click)=" toggleClaimContext()" class = "uk-button uk-button-primary uk-button-mini" >Add Concepts</button>
+                    <inline-claim-context   inlineType ="publication" [inlineEntity]="result" (contextAdded)="contextAdded($event)" ></inline-claim-context>
+                </li>
+            </ul>
         </div>
     </div>
+</div>
 
     <!--script>
     $("#tabs").on('change.uk.tab', function(event, area, previous){
Index: modules/uoa-services-portal/trunk/portal-2/src/app/services/project.service.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/services/project.service.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/services/project.service.ts	(revision 45390)
@@ -36,22 +36,6 @@
 
     }
 
-    getMetrics (id: string):any {
-        console.info("getProjectsMetrics in service");
-        //let url = OpenaireProperties. getSearchAPIURLLast() + 'publications/' +id+"?format=json";
-        let url = OpenaireProperties.getMetricsAPIURL()+"projects/"+id+"/clicks";
-        let key = url;
-        if (this._cache.has(key)) {
-          return Observable.of(this._cache.get(key));
-        }
-        return this.http.get(url)
-                    .map(res => <any> res.json())
-                    .map(res => res['views'])
-                    .do(res => {
-                      this._cache.set(key, res);
-                    });
-    }
-
     /*
     get project strtDate and endDate
     */
Index: modules/uoa-services-portal/trunk/portal-2/src/app/services/metrics.service.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/services/metrics.service.ts	(nonexistent)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/services/metrics.service.ts	(revision 45390)
@@ -0,0 +1,77 @@
+import {Injectable} from '@angular/core';
+import {Http, Response} from '@angular/http';
+import {Observable}     from 'rxjs/Observable';
+import {Metrics} from '../utils/entities/metrics';
+import {OpenaireProperties} from '../utils/properties/openaireProperties';
+import 'rxjs/add/operator/do';
+import { CacheService  } from '../shared/cache.service';
+@Injectable()
+export class MetricsService {
+    metrics: Metrics;
+
+    constructor(private http: Http, public _cache: CacheService) {}
+
+    getMetrics (id: string, entity: string):any {
+        console.info("getPublicationViews in service");
+        //let url = OpenaireProperties. getSearchAPIURLLast() + 'publications/' +id+"?format=json";
+        let url = OpenaireProperties.getMetricsAPIURL()+entity+"/"+id+"/clicks";
+        let key = url;
+        if (this._cache.has(key)) {
+          return Observable.of(this._cache.get(key));
+        }
+        return this.http.get(url)
+                    .map(res => <any> res.json())
+                    .map(res => this.parseMetrics(res["downloads"], res["views"], res["total_downloads"], res["total_views"]))
+                    .do(res => {
+                      this._cache.set(key, res);
+                    });
+    }
+
+
+    parseMetrics(downloads: string, views: string, totalDownloads: any, totalViews: any): any {
+
+        this.metrics = new Metrics();
+
+        this.metrics.totalDownloads = totalDownloads;
+        this.metrics.totalViews = totalViews;
+
+        this.metrics.infos = new Map<string, {"name": string, "url": string, "numOfDownloads": string, "numOfViews": string}>();
+
+        for(let i=0; i<downloads.length; i++) {
+            let id: string = downloads[i]['datasource_id'];
+            if(this.metrics.infos.has(id)) {
+                this.metrics.infos.get(id).numOfDownloads = downloads[i]['value'];
+            } else {
+                let info;//: {"url": string, "numOfDownloads": string, "numOfViews": string};
+                info = {};
+
+                info.name = downloads[i]['datasource_name'];
+                info.url = OpenaireProperties.getsearchLinkToDataProvider()+id;
+                info.numOfDownloads = downloads[i]['value'];
+                info.numOfViews = "0";
+
+                this.metrics.infos.set(id, info);
+            }
+        }
+
+        for(let i=0; i<views.length; i++) {
+            let id: string = views[i]['datasource_id'];
+            if(this.metrics.infos.has(id)) {
+                this.metrics.infos.get(id).numOfViews = views[i]['value'];
+            } else {
+                let info;//: {"url": string, "numOfDownloads": string, "numOfViews": string};
+                info = {};
+
+                info.name = views[i]['datasource_name'];
+                info.url = OpenaireProperties.getsearchLinkToDataProvider()+id;
+                info.numOfDownloads = "0";
+                info.numOfViews = views[i]['value'];
+
+                this.metrics.infos.set(id, info);
+            }
+        }
+        console.info(this.metrics.infos.size);
+
+        return this.metrics;
+    }
+}
Index: modules/uoa-services-portal/trunk/portal-2/src/app/services/services.module.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/services/services.module.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/services/services.module.ts	(revision 45390)
@@ -12,6 +12,7 @@
 import { PersonService} from './person.service';
 import { ProjectService} from './project.service';
 import { PublicationService} from './publication.service';
+import { MetricsService } from './metrics.service';
 import { SearchCrossrefService } from './searchCrossref.service';
 import { SearchDataciteService } from './searchDatacite.service';
 import { SearchOrcidService } from './searchOrcid.service';
@@ -38,11 +39,11 @@
   ],
   providers:[
     ContextsService, DatasetService, OpenaireProjectsService,OrganizationService,
-    PersonService, ProjectService, PublicationService, SearchCrossrefService,
-    SearchCrossrefService, SearchDataciteService, SearchOrcidService,
-    SearchPublicationsService, SearchDataprovidersService, DataProviderService,
-    SearchProjectsService, SearchDatasetsService, SearchOrganizationsService,
-    SearchPeopleService, ISVocabulariesService,
+    PersonService, ProjectService, PublicationService, MetricsService,
+    SearchCrossrefService, SearchCrossrefService, SearchDataciteService,
+    SearchOrcidService, SearchPublicationsService, SearchDataprovidersService,
+    DataProviderService, SearchProjectsService, SearchDatasetsService,
+    SearchOrganizationsService, SearchPeopleService, ISVocabulariesService,
     RefineFieldResultsService,
     EntitiesSearchService,
     LoginService
Index: modules/uoa-services-portal/trunk/portal-2/src/app/services/publication.service.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/services/publication.service.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/services/publication.service.ts	(revision 45390)
@@ -2,7 +2,6 @@
 import {Http, Response} from '@angular/http';
 import {Observable}     from 'rxjs/Observable';
 import {PublicationInfo} from '../utils/entities/publicationInfo';
-import {Metrics} from '../utils/entities/metrics';
 import {OpenaireProperties} from '../utils/properties/openaireProperties';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/do';
@@ -14,7 +13,6 @@
     constructor(private http: Http, public _cache: CacheService) {}
 
     publicationInfo: PublicationInfo;
-    metrics: Metrics;
 
     getPublicationInfo (id: string):any {
         console.info("getPublicationInfo in service");
@@ -45,22 +43,6 @@
                     .map(res => this.parsePublicationInfo(res));
     }
 
-    getMetrics (id: string):any {
-        console.info("getPublicationViews in service");
-        //let url = OpenaireProperties. getSearchAPIURLLast() + 'publications/' +id+"?format=json";
-        let url = OpenaireProperties.getMetricsAPIURL()+"results/"+id+"/clicks";
-        let key = url;
-        if (this._cache.has(key)) {
-          return Observable.of(this._cache.get(key));
-        }
-        return this.http.get(url)
-                    .map(res => <any> res.json())
-                    .map(res => this.parseMetrics(res["downloads"], res["views"], res["total_downloads"], res["total_views"]))
-                    .do(res => {
-                      this._cache.set(key, res);
-                    });
-    }
-
     private handleError (error: Response) {
     // in a real world app, we may send the error to some remote logging infrastructure
     // instead of just logging it to the console
@@ -68,50 +50,6 @@
         return Observable.throw(error  || 'Server error');
     }
 
-    parseMetrics(downloads: string, views: string, totalDownloads: any, totalViews: any): any {
-
-        this.metrics = new Metrics();
-
-        this.metrics.totalDownloads = totalDownloads;
-        this.metrics.totalViews = totalViews;
-
-        this.metrics.infos = new Map<string, {"url": string, "numOfDownloads": string, "numOfViews": string}>();
-
-        for(let i=0; i<downloads.length; i++) {
-            let id: string = downloads[i]['datasource_id'];
-            if(this.metrics.infos.has(id)) {
-                this.metrics.infos.get(id).numOfDownloads = downloads[i]['value'];
-            } else {
-                let info;//: {"url": string, "numOfDownloads": string, "numOfViews": string};
-                info = {};
-
-                info.url = OpenaireProperties.getsearchLinkToDataProvider()+id;
-                info.numOfDownloads = downloads[i]['value'];
-                info.numOfViews = "0";
-
-                this.metrics.infos.set(id, info);
-            }
-        }
-
-        for(let i=0; i<views.length; i++) {
-            let id: string = views[i]['datasource_id'];
-            if(this.metrics.infos.has(id)) {
-                this.metrics.infos.get(id).numOfViews = views[i]['value'];
-            } else {
-                let info;//: {"url": string, "numOfDownloads": string, "numOfViews": string};
-                info = {};
-
-                info.url = OpenaireProperties.getsearchLinkToDataProvider()+id;
-                info.numOfDownloads = "0";
-                info.numOfViews = views[i]['value'];
-
-                this.metrics.infos.set(id, info);
-            }
-        }
-
-        return this.metrics;
-    }
-
     parsePublicationInfo (data: any):any {
         this.publicationInfo = new PublicationInfo();
 
@@ -336,26 +274,28 @@
                                     } else {
                                         key = data[0]['source'];
                                     }
-                                    if(!this.publicationInfo.publishedIn.has(key)) {
-                                        this.publicationInfo.publishedIn.set(key, {"url": null, "accessMode": null});
-                                    }
+                                    if(key != "") {
+                                        if(!this.publicationInfo.publishedIn.has(key)) {
+                                            this.publicationInfo.publishedIn.set(key, {"url": null, "accessMode": null});
+                                        }
 
-                                    if(this.publicationInfo.publishedIn.get(key)['url'] == null) {
-                                        this.publicationInfo.publishedIn.get(key)['url'] = new Array<string>();
-                                    }
+                                        if(this.publicationInfo.publishedIn.get(key)['url'] == null) {
+                                            this.publicationInfo.publishedIn.get(key)['url'] = new Array<string>();
+                                        }
 
-                                    this.publicationInfo.publishedIn.get(key)['url'].push(url);
+                                        this.publicationInfo.publishedIn.get(key)['url'].push(url);
 
-                                    if(this.publicationInfo.publishedIn.get(key)['accessMode'] == null) {
-                                        this.publicationInfo.publishedIn.get(key)['accessMode'] = new Array<string>();
-                                    }
+                                        if(this.publicationInfo.publishedIn.get(key)['accessMode'] == null) {
+                                            this.publicationInfo.publishedIn.get(key)['accessMode'] = new Array<string>();
+                                        }
 
-                                    if(instance.hasOwnProperty("licence")) {
-                                        this.publicationInfo.publishedIn.get(key)['accessMode'].push(instance['licence'].classid);
-                                    } else {
-                                        this.publicationInfo.publishedIn.get(key)['accessMode'].push("");
+                                        if(instance.hasOwnProperty("licence")) {
+                                            this.publicationInfo.publishedIn.get(key)['accessMode'].push(instance['licence'].classid);
+                                        } else {
+                                            this.publicationInfo.publishedIn.get(key)['accessMode'].push("");
+                                        }
+                                        counter1++;
                                     }
-                                    counter1++;
                                 }
                             }
                             if(this.publicationInfo.title != undefined) {
Index: modules/uoa-services-portal/trunk/portal-2/src/app/services/dataProvider.service.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/services/dataProvider.service.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/services/dataProvider.service.ts	(revision 45390)
@@ -37,22 +37,6 @@
 
     }
 
-    getMetrics (id: string):any {
-        console.info("getDataproviderMetrics in service");
-        //let url = OpenaireProperties. getSearchAPIURLLast() + 'publications/' +id+"?format=json";
-        let url = OpenaireProperties.getMetricsAPIURL()+"datasources/"+id+"/clicks";
-        let key = url;
-        if (this._cache.has(key)) {
-          return Observable.of(this._cache.get(key));
-        }
-        return this.http.get(url)
-                    .map(res => <any> res.json())
-                    .map(res => res['views'])
-                    .do(res => {
-                      this._cache.set(key, res);
-                    });
-    }
-
     private handleError (error: Response) {
     // in a real world app, we may send the error to some remote logging infrastructure
     // instead of just logging it to the console
Index: modules/uoa-services-portal/trunk/portal-2/src/app/services/dataset.service.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/services/dataset.service.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/services/dataset.service.ts	(revision 45390)
@@ -2,7 +2,6 @@
 import {Http, Response} from '@angular/http';
 import {Observable}     from 'rxjs/Observable';
 import {DatasetInfo} from '../utils/entities/datasetInfo';
-import {Metrics} from '../utils/entities/metrics';
 import {OpenaireProperties} from '../utils/properties/openaireProperties';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/do';
@@ -15,7 +14,6 @@
     constructor(private http: Http, public _cache: CacheService) {}
 
     datasetInfo: DatasetInfo;
-    metrics: Metrics;
 
     getDatasetInfo (id: string):any {
         console.info("getDatasetInfo in service");
@@ -45,23 +43,7 @@
                     })
                     .map(res => this.parseDatasetInfo(res));
 
-    }
 
-    getMetrics (id: string):any {
-        console.info("getDatasetViews in service");
-        //let url = OpenaireProperties. getSearchAPIURLLast() + 'publications/' +id+"?format=json";
-        let url = OpenaireProperties.getMetricsAPIURL()+"results/"+id+"/clicks";
-        let key = url;
-        if (this._cache.has(key)) {
-          return Observable.of(this._cache.get(key)).map(res => this.parseMetrics(res["downloads"], res["views"], res["total_downloads"], res["total_views"]));
-        }
-        return this.http.get(url)
-                    .map(res => <any> res.json())
-                    .do(res => {
-                      this._cache.set(key, res);
-                    })
-                    .map(res => this.parseMetrics(res["downloads"], res["views"], res["total_downloads"], res["total_views"]));
-    }
 
     private handleError (error: Response) {
     // in a real world app, we may send the error to some remote logging infrastructure
@@ -70,50 +52,6 @@
         return Observable.throw(error  || 'Server error');
     }
 
-    parseMetrics(downloads: string, views: string, totalDownloads: any, totalViews: any): any {
-
-        this.metrics = new Metrics();
-
-        this.metrics.totalDownloads = totalDownloads;
-        this.metrics.totalViews = totalViews;
-
-        this.metrics.infos = new Map<string, {"url": string, "numOfDownloads": string, "numOfViews": string}>();
-
-        for(let i=0; i<downloads.length; i++) {
-            let id: string = downloads[i]['datasource_id'];
-            if(this.metrics.infos.has(id)) {
-                this.metrics.infos.get(id).numOfDownloads = downloads[i]['value'];
-            } else {
-                let info;//: {"url": string, "numOfDownloads": string, "numOfViews": string};
-                info = {};
-
-                info.url = OpenaireProperties.getsearchLinkToDataProvider()+id;
-                info.numOfDownloads = downloads[i]['value'];
-                info.numOfViews = "0";
-
-                this.metrics.infos.set(id, info);
-            }
-        }
-
-        for(let i=0; i<views.length; i++) {
-            let id: string = views[i]['datasource_id'];
-            if(this.metrics.infos.has(id)) {
-                this.metrics.infos.get(id).numOfViews = views[i]['value'];
-            } else {
-                let info;//: {"url": string, "numOfDownloads": string, "numOfViews": string};
-                info = {};
-
-                info.url = OpenaireProperties.getsearchLinkToDataProvider()+id;
-                info.numOfDownloads = "0";
-                info.numOfViews = views[i]['value'];
-
-                this.metrics.infos.set(id, info);
-            }
-        }
-
-        return this.metrics;
-    }
-
     parseDatasetInfo (data: any):any {
         this.datasetInfo = new DatasetInfo();
 
Index: modules/uoa-services-portal/trunk/portal-2/src/app/claimPages/linking/selected/selectedDatasets.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/claimPages/linking/selected/selectedDatasets.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/claimPages/linking/selected/selectedDatasets.component.ts	(revision 45390)
@@ -10,7 +10,7 @@
 
             <div  [ngClass]="showAccessRights?'col-md-8':'col-md-12'">
               <span *ngIf="showAccessRights" (click)="removeDataset(dataset)" aria-hidden="true" class="btn  "><i class="uk-icon-remove"></i></span>
-              <a *ngIf="dataset.url" target="_blank" href="{{dataset.url}}" >{{dataset.title}}</a>
+              <a *ngIf="dataset.url" target="_blank" class="uk-icon-external-link" href="{{dataset.url}}" >{{dataset.title}}</a>
               <span *ngIf="!dataset.url" >{{dataset.title}}</span>
               <span *ngIf="dataset.date" >({{dataset.date.substring(0,4)}})</span>
               <span *ngIf="!showAccessRights" (click)="removeDataset(dataset)" aria-hidden="true" class="btn "><i class="uk-icon-remove"></i></span>
Index: modules/uoa-services-portal/trunk/portal-2/src/app/searchPages/searchUtils/searchResult.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/searchPages/searchUtils/searchResult.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/searchPages/searchUtils/searchResult.component.ts	(revision 45390)
@@ -92,7 +92,7 @@
             <div *ngIf="result['websiteURL'] != undefined && result['websiteURL'] != ''">
                 <span>Website URL: </span>
                 <span>
-                    <a class="custom-external" href="{{result['websiteURL']}}" target="_blank">
+                    <a href="{{result['websiteURL']}}" target="_blank" class="uk-icon-external-link">
                         {{result['websiteURL']}}
                     </a>
                 </span>
@@ -100,7 +100,7 @@
             <div *ngIf="result['OAIPMHURL'] != undefined && result['OAIPMHURL'] != ''">
                 <span>OAI-PMH URL: </span>
                 <span>
-                    <a class="custom-external" href="{{result['OAIPMHURL']}}" target="_blank">
+                    <a href="{{result['OAIPMHURL']}}" target="_blank" class="uk-icon-external-link">
                         {{result['OAIPMHURL']}}
                     </a>
                 </span>
Index: modules/uoa-services-portal/trunk/portal-2/src/app/searchPages/search.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/searchPages/search.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/searchPages/search.component.ts	(revision 45390)
@@ -8,7 +8,7 @@
     template: `
       <h1>Search Demo</h1>
       <p><i>Fetches from crossref </i></p>
-      <form>
+      <form class="uk-form">
         <input #term   [(ngModel)]="keyword" name="keyword" />
         <button (click)="search(term.value,10,1)"  type="submit" class="uk-button">Search</button>
       </form>
Index: modules/uoa-services-portal/trunk/portal-2/src/app/app.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/app.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/app.component.ts	(revision 45390)
@@ -32,18 +32,18 @@
           <div id="tm-main" class="tm-middle" uk-height-viewport="mode: expand">
              <div class="uk-container uk-container-center">
                 <div class="uk-grid" uk-grid>
-                   <div class="tm-main uk-width-medium-3-4  uk-row-first">
-
+                   <!--div class="tm-main uk-width-medium-3-4  uk-row-first"-->
+                   <div class="tm-main uk-width-medium  uk-row-first">
                      <main>
                        <router-outlet></router-outlet>
                      </main>
                    </div>
                    <!-- Sidebar -->
-                   <div id="tm-sidebar" class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">
-                      <div class="uk-child-width-1-1" uk-grid>
-                              something in sidebar
+                   <!--div id="tm-sidebar" class="tm-sidebar uk-width-medium-1-4 uk-hidden-small"-->
+                   <div id="tm-sidebar" class="tm-sidebar uk-width-medium uk-hidden-small">
+                      <!--div class="uk-child-width-1-1" uk-grid>
                              <login></login>
-                      </div>
+                      </div-->
                    </div>
                    <!-- end of sidebar -->
 
Index: modules/uoa-services-portal/trunk/portal-2/src/app/app.module.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/app.module.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/app.module.ts	(revision 45390)
@@ -1,3 +1,4 @@
+//import {MaterialModule} from '@angular/material';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
@@ -20,11 +21,10 @@
 
 import {ServicesModule} from './services/services.module';
 
-
-
 @NgModule({
   declarations: [ AppComponent, XLargeDirective ],
   imports: [
+    //MaterialModule.forRoot(),
     SharedModule,
     HomeModule,
 
@@ -38,7 +38,7 @@
     TestModule,
     HomeModule,
     AppRoutingModule,
-    ErrorModule,
+    ErrorModule
   ], exports:[]
 })
 export class AppModule {
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/tabPaging.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/tabPaging.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/tabPaging.component.ts	(revision 45390)
@@ -3,12 +3,10 @@
 @Component({
     selector: 'tabPaging',
     template: `
-        <div class="panel panel-default" *ngIf="!showAll && length > 10">
-            <div class="panel-heading">
-                <a (click)="changeShowAll.emit({value: true});">
-                    <div class="uk-float-right">view all {{length}}</div>
-                </a>
-            </div>
+        <div class="uk-panel" *ngIf="!showAll && length > 10">
+            <a (click)="changeShowAll.emit({value: true});">
+                <div class="uk-float-right">view all {{length}}</div>
+            </a>
         </div>
     `
     })
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/tabs.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/tabs.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/tabs.component.ts	(revision 45390)
@@ -13,45 +13,45 @@
 @Component({
     selector: 'tabs',
     template: `
-        <ul *ngIf="tabs != undefined" class="nav nav-tabs">
-            <li *ngIf="tabs.length>0" class="active">
-                <a data-toggle="tab" href="#{{tabs[0].content}}">
+        <ul *ngIf="tabs != undefined" class="uk-tab" data-uk-switcher="{connect:'#tab-content'}">
+            <li *ngIf="tabs.length>0" class="uk-active">
+                <a href="#{{tabs[0].content}}">
                     {{tabs[0].name}}
-                    <span class="badge" *ngIf="tabs[0].content=='publicationsTab'">
+                    <span class="uk-badge uk-badge-notification" *ngIf="tabs[0].content=='publicationsTab'">
                         {{searchPublicationsComponent.searchUtils.totalResults}}
                     </span>
-                    <span class="badge" *ngIf="tabs[0].content=='datasetsTab'">
+                    <span class="uk-badge uk-badge-notification" *ngIf="tabs[0].content=='datasetsTab'">
                         {{searchDatasetsComponent.searchUtils.totalResults}}
                     </span>
-                    <span class="badge" *ngIf="tabs[0].content=='projectsTab'">
+                    <span class="uk-badge uk-badge-notification" *ngIf="tabs[0].content=='projectsTab'">
                         {{searchProjectsComponent.searchUtils.totalResults}}
                     </span>
-                    <span class="badge" *ngIf="tabs[0].content=='datasourcesTab'">
+                    <span class="uk-badge uk-badge-notification" *ngIf="tabs[0].content=='datasourcesTab'">
                         {{searchDataprovidersComponent.searchUtils.totalResults}}
                     </span>
-                    <span class="badge" *ngIf="tabs[0].content=='organizationsTab'">
+                    <span class="uk-badge uk-badge-notification" *ngIf="tabs[0].content=='organizationsTab'">
                         {{organizations.length}}
                     </span>
                 </a>
             </li>
 
-            <li *ngFor="let tab of tabs; let i=index" role="presentation">
+            <li *ngFor="let tab of tabs; let i=index">
                 <a *ngIf="i>0"
-                    (click)="search(tab.content, 1, 10)" data-toggle="tab" href="#{{tab.content}}">
+                    (click)="search(tab.content, 1, 10)" href="#{{tab.content}}">
                         {{tab.name}}
-                        <span class="badge" *ngIf="tab.content=='publicationsTab'">
+                        <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='publicationsTab'">
                             {{searchPublicationsComponent.searchUtils.totalResults}}
                         </span>
-                        <span class="badge" *ngIf="tab.content=='datasetsTab'">
+                        <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='datasetsTab'">
                             {{searchDatasetsComponent.searchUtils.totalResults}}
                         </span>
-                        <span class="badge" *ngIf="tab.content=='projectsTab'">
+                        <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='projectsTab'">
                             {{searchProjectsComponent.searchUtils.totalResults}}
                         </span>
-                        <span class="badge" *ngIf="tab.content=='datasourcesTab'">
+                        <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='datasourcesTab'">
                             {{searchDataprovidersComponent.searchUtils.totalResults}}
                         </span>
-                        <span class="badge" *ngIf="tab.content=='organizationsTab'">
+                        <span class="uk-badge uk-badge-notification" *ngIf="tab.content=='organizationsTab'">
                             {{organizations.length}}
                         </span>
                 </a>
@@ -58,8 +58,8 @@
             </li>
         </ul>
 
-        <div *ngIf="tabs != undefined" class="tab-content">
-            <div *ngIf="tabs.length>0" id="{{tabs[0].content}}" class="tab-pane fade in active panel-body">
+        <ul *ngIf="tabs != undefined" id="tab-content" class="uk-switcher uk-margin">
+            <li *ngIf="tabs.length>0" id="{{tabs[0].content}}">
                 <publicationsTab *ngIf="tabs[0].content=='publicationsTab'"
                                  [paramsForSearchLink]="paramsForSearchLink"
                                  [searchPublicationsComponent]="searchPublicationsComponent">
@@ -85,12 +85,20 @@
                 <relatedDatasourcesTab *ngIf="tabs[0].content=='relatedDatasourcesTab'"
                     [searchPublicationsComponent]="searchPublicationsComponentAggregators">
                 </relatedDatasourcesTab>
-                <div *ngIf="tabs[0].content=='metricsTab'" class="well">
+                <!--div *ngIf="tabs[0].content=='metricsTab' && metrics == undefined" class = "uk-alert uk-alert-warning">
+                    Metrics are currently unavailable
+                </div>
+                <div *ngIf="tabs[0].content=='metricsTab' && metrics != undefined" class="uk-panel uk-panel-box">
                         <b>Views: </b>{{metrics}}
-                </div>
-            </div>
+                </div-->
+                <metrics *ngIf="tabs[0].content=='metricsTab' && metricsClicked"
+                    [id]="id" [type]="'datasources'" [name]="name">
+                </metrics>
 
-            <div *ngFor="let tab of tabs; let i=index" id="{{tab.content}}" class="tab-pane fade panel-body">
+
+            </li>
+
+            <li *ngFor="let tab of tabs; let i=index" id="{{tab.content}}">
                 <publicationsTab *ngIf="i>0 && tab.content=='publicationsTab'"
                                  [paramsForSearchLink]="paramsForSearchLink"
                                  [searchPublicationsComponent] = "searchPublicationsComponent">
@@ -115,11 +123,11 @@
                     [dataproviderId]="id"
                     [searchPublicationsComponent]="searchPublicationsComponentAggregators">
                 </relatedDatasourcesTab>
-                <div *ngIf="i>0 && tab.content=='metricsTab'" class="well">
-                    <b>Views: </b>{{metrics}}
-                </div>
-            </div>
-        </div>
+                <metrics *ngIf="i>0 && tab.content=='metricsTab' && metricsClicked"
+                    [id]="id" [type]="'datasources'" [name]="name">
+                </metrics>
+            </li>
+        </ul>
     `
 })
 
@@ -126,6 +134,7 @@
 export class TabsComponent {
 
     @Input() id: string;
+    @Input() name: string;
     @Input() resultsBy: string;
     @Input() tabs: {"name": string, "content": string}[];
     //@Input() publications;
@@ -137,8 +146,6 @@
 
     @Input() _dataproviderService;
 
-    public metrics: string;
-
     public paramsForSearchLink: string = "";
 
     public reloadPublications: boolean = true;
@@ -146,6 +153,7 @@
     public reloadProjects: boolean = true;
     public reloadDataproviders: boolean = true;
 	public reloadRelatedDatasources: boolean = true;
+    public metricsClicked: boolean;
 
     public searchPublicationsComponent : SearchPublicationsComponent;
     public searchDatasetsComponent: SearchDatasetsComponent;
@@ -169,6 +177,8 @@
         if(this.tabs != undefined && this.tabs.length > 0) {
             this.search(this.tabs[0].content, 1, 10);
             this.count(1, 0);
+
+            this.metricsClicked = false;
         }
 
         if(this.resultsBy == "collectedFrom") {
@@ -209,23 +219,10 @@
         } else if(content=='relatedDatasourcesTab') {
             this.searchRelatedDatasources(1, 0);
         } else if(content=='metricsTab') {
-            this.getMetrics();
+            this.metricsClicked = true;
         }
     }
 
-    private getMetrics() {
-        console.info("getDatasourceMetrics: component");
-        this._dataproviderService.getMetrics(this.id).subscribe(
-         data => {
-             this.metrics = data;
-         },
-         err => {
-           console.log(err);
-           console.info("error");
-         }
-        );
-    }
-
     private searchPublications(page: number, size: number) {
         if(this.reloadPublications) {
             this.searchPublicationsComponent.getResultsForDataproviders(this.id, this.resultsBy, page, size);
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/organizationsTab.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/organizationsTab.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/organizationsTab.component.ts	(revision 45390)
@@ -3,7 +3,7 @@
 @Component({
     selector: 'organizationsTab',
     template: `
-        <div *ngIf="organizations.length == 0" class = "alert alert-info " >
+        <div *ngIf="organizations.length == 0" class = "uk-alert">
             There are no organizations
         </div>
 
@@ -15,7 +15,7 @@
 
             <div *ngFor="let item of organizations">
                 <p *ngIf=" item != undefined && item['url'] != undefined">
-                    <a href="{{item['url']}}" target="_blank">
+                    <a href="{{item['url']}}">
                         {{item['name']}}
                     </a>
                 </p>
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/datasetsTab.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/datasetsTab.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/datasetsTab.component.ts	(revision 45390)
@@ -8,7 +8,7 @@
 @Component({
     selector: 'datasetsTab',
     template: `
-        <div *ngIf="searchDatasetsComponent.searchUtils.totalResults == 0" class = "alert alert-info " >
+        <div *ngIf="searchDatasetsComponent.searchUtils.totalResults == 0" class = "uk-alert">
             There are no datasets
         </div>
 
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/projectsTab.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/projectsTab.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/projectsTab.component.ts	(revision 45390)
@@ -8,7 +8,7 @@
 @Component({
     selector: 'projectsTab',
     template: `
-        <div *ngIf="searchProjectsComponent.searchUtils.totalResults == 0" class = "alert alert-info " >
+        <div *ngIf="searchProjectsComponent.searchUtils.totalResults == 0" class = "uk-alert">
             There are no projects
         </div>
 
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/statisticsTab.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/statisticsTab.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/statisticsTab.component.ts	(revision 45390)
@@ -3,7 +3,7 @@
 @Component({
     selector: 'statisticsTab',
     template: `
-        <div *ngIf="statistics == undefined" class = "alert alert-info " >
+        <div *ngIf="statistics == undefined" class = "uk-alert">
             There are no statistics
         </div>
 
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/dataProvider.component.html
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/dataProvider.component.html	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/dataProvider.component.html	(revision 45390)
@@ -1,56 +1,55 @@
-<div>
-    <div class="container person">
-        <div class="container-header" >
-            <div *ngIf="dataProviderInfo != null">
-                <h3 *ngIf="dataProviderInfo.title != null">
-                    <a *ngIf="dataProviderInfo.title['url'] != undefined && dataProviderInfo.title['url'] != null"
-                        href="{{dataProviderInfo.title['url']}}" target="_blank">
-                        {{dataProviderInfo.title['name']}}
-                    </a>
-                    <p *ngIf="dataProviderInfo.title['url'] == undefined || dataProviderInfo.title['url'] == null">
-                        {{dataProviderInfo.title['name']}}
-                    </p>
-                </h3>
-            </div>
-            <div *ngIf="warningMessage.length > 0" class="alert alert-warning" role="alert">{{warningMessage}}</div>
-            <div *ngIf="errorMessage.length > 0" class="alert alert-danger" role="alert">{{errorMessage}}</div>
-        </div>
+<div class="uk-container person">
+    <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" role="alert">{{warningMessage}}</div>
+    <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
 
-        <div class="row row-offcanvas row-offcanvas-right" >
+    <div *ngIf="dataProviderInfo != null" class="uk-grid">
 
-            <div class="col-xs-6 col-sm-9 sidebar-offcanvas" *ngIf="dataProviderInfo != null">
-                <dl class="dl-horizontal">
-                    <dt *ngIf="dataProviderInfo.type != undefined && dataProviderInfo.type != ''">Type: </dt>
-                    <dd *ngIf="dataProviderInfo.type != undefined && dataProviderInfo.type != ''">{{dataProviderInfo.type}}</dd>
-                    <dt *ngIf="dataProviderInfo.compatibility != undefined && dataProviderInfo.compatibility != ''">Compatibility: </dt>
-                    <dd *ngIf="dataProviderInfo.compatibility != undefined && dataProviderInfo.compatibility != ''">{{dataProviderInfo.compatibility}}</dd>
-                    <dt *ngIf="dataProviderInfo.oaiPmhURL != undefined && dataProviderInfo.oaiPmhURL != ''">OAI-PMH: </dt>
-                    <dd *ngIf="dataProviderInfo.oaiPmhURL != undefined && dataProviderInfo.oaiPmhURL != ''">
+        <div class="uk-width-7-10">
+            <!--h3 *ngIf="dataProviderInfo.title != null">
+                <a *ngIf="dataProviderInfo.title['url'] != undefined && dataProviderInfo.title['url'] != null"
+                    href="{{dataProviderInfo.title['url']}}" target="_blank" class="uk-icon-external-link">
+                    {{dataProviderInfo.title['name']}}
+                </a>
+                <p *ngIf="dataProviderInfo.title['url'] == undefined || dataProviderInfo.title['url'] == null">
+                    {{dataProviderInfo.title['name']}}
+                </p>
+            </h3-->
+            <showTitle [title]="dataProviderInfo.title"></showTitle>
+
+            <dl class="uk-description-list-horizontal">
+                <dt *ngIf="dataProviderInfo.type != undefined && dataProviderInfo.type != ''">Type: </dt>
+                <dd *ngIf="dataProviderInfo.type != undefined && dataProviderInfo.type != ''">{{dataProviderInfo.type}}</dd>
+                <dt *ngIf="dataProviderInfo.compatibility != undefined && dataProviderInfo.compatibility != ''">Compatibility: </dt>
+                <dd *ngIf="dataProviderInfo.compatibility != undefined && dataProviderInfo.compatibility != ''">{{dataProviderInfo.compatibility}}</dd>
+                <dt *ngIf="dataProviderInfo.oaiPmhURL != undefined && dataProviderInfo.oaiPmhURL != ''">OAI-PMH: </dt>
+                <dd *ngIf="dataProviderInfo.oaiPmhURL != undefined && dataProviderInfo.oaiPmhURL != ''">
+                    <span class="uk-icon-external-link">
                         <a href="{{dataProviderInfo.oaiPmhURL}}" target="_blank">
                             {{dataProviderInfo.oaiPmhURL}}
                         </a>
-                    </dd>
-                    <dt *ngIf="dataProviderInfo.countries != undefined && dataProviderInfo.countries.length > 0">Countries: </dt>
-                    <dd *ngIf="dataProviderInfo.countries != undefined">{{dataProviderInfo.countries}}</dd>
-                </dl>
+                    </span>
+                </dd>
+                <dt *ngIf="dataProviderInfo.countries != undefined && dataProviderInfo.countries.length > 0">Countries: </dt>
+                <dd *ngIf="dataProviderInfo.countries != undefined">{{dataProviderInfo.countries}}</dd>
+            </dl>
 
-                <tabs [id] = "datasourceId"
-                      [resultsBy] = "dataProviderInfo.resultsBy"
-                      [tabs]="dataProviderInfo.tabs"
-                      [statistics]="dataProviderInfo.statistics"
-                      [organizations]="dataProviderInfo.organizations"
-                      [_dataproviderService]="_dataproviderService">
-                </tabs>
+            <tabs [id] = "datasourceId"
+                  [name] = "dataProviderInfo.title['name']"
+                  [resultsBy] = "dataProviderInfo.resultsBy"
+                  [tabs]="dataProviderInfo.tabs"
+                  [statistics]="dataProviderInfo.statistics"
+                  [organizations]="dataProviderInfo.organizations"
+                  [_dataproviderService]="_dataproviderService">
+            </tabs>
 
-            </div>
+        </div>
 
-            <div class="col-xs-12 col-sm-3" *ngIf="dataProviderInfo != null">
-                <ul class="uk-list">
-                    <li class="list-group-item">
-                        Share - Bookmark
-                    </li>
-                </ul>
-            </div>
+        <div class="uk-width-3-10">
+            <ul class="uk-list uk-list-striped">
+                <li>
+                    Share - Bookmark
+                </li>
+            </ul>
         </div>
     </div>
 </div>
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/publicationsTab.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/publicationsTab.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/publicationsTab.component.ts	(revision 45390)
@@ -8,7 +8,7 @@
 @Component({
     selector: 'publicationsTab',
     template: `
-        <div *ngIf="searchPublicationsComponent.searchUtils.totalResults == 0" class = "alert alert-info " >
+        <div *ngIf="searchPublicationsComponent.searchUtils.totalResults == 0" class = "uk-alert">
             There are no publications
         </div>
 
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/datasourcesTab.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/datasourcesTab.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/datasourcesTab.component.ts	(revision 45390)
@@ -7,7 +7,7 @@
 @Component({
     selector: 'datasourcesTab',
     template: `
-        <div *ngIf="searchDataprovidersComponent.searchUtils.totalResults == 0" class = "alert alert-info " >
+        <div *ngIf="searchDataprovidersComponent.searchUtils.totalResults == 0" class = "uk-alert">
             There are no datasources
         </div>
 
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/relatedDatasourcesTab.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/relatedDatasourcesTab.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataProvider/relatedDatasourcesTab.component.ts	(revision 45390)
@@ -9,7 +9,7 @@
     selector: 'relatedDatasourcesTab',
     template: `
 
-        <div *ngIf="searchPublicationsComponent.results.length == 0" class = "alert alert-info " >
+        <div *ngIf="searchPublicationsComponent.results.length == 0" class = "uk-alert">
             There are no related dataproviders
         </div>
 
@@ -22,19 +22,20 @@
             <table class="uk-table uk-table-striped">
                 <thead>
                     <tr>
-                        <th class="text-center">Data Provider Name</th>
-                        <th class="text-center">Number of publications/ datasets</th>
+                        <th class="uk-text-center">Data Provider Name</th>
+                        <th class="uk-text-center">Number of publications/ datasets</th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr *ngFor="let item of searchPublicationsComponent.results">
-                        <td class="text-center">
-                            <a href="{{item.url}}" target="_blank">
+                        <td class="uk-text-center">
+                            <a href="{{item.url}}" target="_blank" class="uk-icon-external-link">
                                 {{item.name}}
                             </a>
                         </td>
-                        <td class="text-center">
-                            <a href="{{linkToSearchPublications}}{{item.id}}&ho=and&collectedFrom={{dataproviderId}}&co=and" target="_blank">
+                        <td class="uk-text-center">
+                            <a href="{{linkToSearchPublications}}{{item.id}}&ho=and&collectedFrom={{dataproviderId}}&co=and"
+                                target="_blank" class="uk-icon-external-link">
                                 {{item.count}}
                             </a>
                         </td>
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataset/dataset.component.html
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataset/dataset.component.html	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/dataset/dataset.component.html	(revision 45390)
@@ -1,15 +1,18 @@
-<div class="container dataset">
-    <div class="container-header" >
-        <div *ngIf="datasetInfo != null" >
+<div class="uk-container dataset">
+    <!--div class="container-header" -->
+
+    <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" role="alert">{{warningMessage}}</div>
+    <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
+
+    <div *ngIf="datasetInfo != null" class="uk-grid">
+        <div class="uk-width-7-10">
             <showTitle [title]="datasetInfo.title"></showTitle>
+        <!--/div>
         </div>
-        <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" role="alert">{{warningMessage}}</div>
-        <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
-    </div>
 
-    <div class="uk-grid" >
+    <div class="uk-grid">
 
-        <div class="uk-width-2-3" *ngIf="datasetInfo != null">
+        <div class="uk-width-2-3" *ngIf="datasetInfo != null"-->
             <div>
                 <showAuthors [authors]="datasetInfo.authors"></showAuthors>
                 <span *ngIf="datasetInfo.date != ''">({{datasetInfo.date}})</span>
@@ -39,7 +42,7 @@
             </div>
             <inline-claim-result inlineType ="dataset" [inlineEntity]="result"  (datasetAdded)="resultsAdded($event,false)"  (publicationAdded)="resultsAdded($event,true)"   ></inline-claim-result>
 
-            <ul class="uk-tab" data-uk-tab="{connect:'#tab-content'}">
+            <ul class="uk-tab" data-uk-switcher="{connect:'#tab-content'}">
                 <li class="uk-active">
                      <a href="#relatedTab">
                          Related Research Results
@@ -60,7 +63,7 @@
                     </a>
                 </li>
 
-                <li (click)="getMetrics()">
+                <li (click)="metricsClicked=true">
                     <a href="#metricsTab">
                         Metrics
                     </a>
@@ -95,46 +98,12 @@
                     </div>
                 </li>
                 <li id="metricsTab">
-                    <div *ngIf="metrics == undefined" class = "uk-alert uk-alert-warning">
-                        Metrics are currently unavailable
-                    </div>
-                    <dl *ngIf="metrics != undefined" class="uk-description-list-horizontal uk-block">
-                        <dt>TotalDownloads: </dt>
-                        <dd>{{metrics.totalDownloads}}</dd>
-                        <dt>TotalViews: </dt>
-                        <dd>{{metrics.totalViews}}</dd>
-                    </dl>
-
-                    <table *ngIf="metrics != undefined && metrics.infos.size > 0"
-                            class="uk-table uk-table-striped">
-                        <thead>
-                            <tr>
-                                <th class="uk-text-center">ID</th>
-                                <th class="uk-text-center">Number Of Downloads</th>
-                                <th class="uk-text-center">Number Of Views</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr *ngFor="let key of metrics.infos.keys()">
-                                <td class="uk-text-center">
-                                    <a href="{{metrics.infos.get(key).url}}" target="_blank">
-                                        {{key}}
-                                    </a>
-                                </td>
-                                <td class="uk-text-center">
-                                    {{metrics.infos.get(key).numOfDownloads}}
-                                </td>
-                                <td class="uk-text-center">
-                                    {{metrics.infos.get(key).numOfViews}}
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
+                    <metrics *ngIf="metricsClicked" [id]="datasetId" [type]="'results'"></metrics>
                 </li>
             </ul>
         </div>
 
-        <div class="uk-width-1-3" *ngIf="datasetInfo != null">
+        <div class="uk-width-3-10" *ngIf="datasetInfo != null">
             <ul class="uk-list uk-list-striped mainFunctionsBlock">
                 <li>
                     <dl class="uk-description-list-line functionsSection">
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/metrics.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/metrics.component.ts	(nonexistent)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/metrics.component.ts	(revision 45390)
@@ -0,0 +1,108 @@
+import {Component, Input} from '@angular/core';
+import {Metrics} from '../utils/entities/metrics';
+import {MetricsService } from '../services/metrics.service';
+
+@Component({
+    selector: 'metrics',
+    template: `
+    <div *ngIf="metrics == undefined" class = "uk-alert uk-alert-warning">
+        Metrics are currently unavailable
+    </div>
+    <!--div *ngIf="i>0 && tab.content=='metricsTab' && metrics != undefined" class="uk-panel uk-panel-box"-->
+    <!--/div-->
+
+    <!--dl *ngIf="metrics != undefined"
+        class="uk-description-list-horizontal uk-panel uk-panel-box">
+        <dt *ngIf="type=='results'">Total Downloads: </dt>
+        <dt *ngIf="type!='results'" class="uk-text-break">
+            Total <span [innerHTML]="name"></span> Publication Downloads:
+        </dt>
+        <dd>{{metrics.totalDownloads}}</dd>
+        <dt>Total Views: </dt>
+        <dd>{{metrics.totalViews}}</dd>
+    </dl-->
+    <table *ngIf="metrics != undefined"
+            class="uk-table uk-panel-box">
+        <thead>
+            <tr>
+                <th *ngIf="type=='results'" class="uk-text-center">Total Downloads</th>
+                <th *ngIf="type!='results'" class="uk-text-center">
+                    Total <span [innerHTML]="name"></span> Publication Downloads
+                </th>
+                <th *ngIf="type=='results'" class="uk-text-center">Total Views</th>
+                <th *ngIf="type!='results'" class="uk-text-center">
+                    Total <span [innerHTML]="name"></span> Publication Views
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td class="uk-text-center">
+                    {{metrics.totalDownloads}}
+                </td>
+                <td class="uk-text-center">
+                    {{metrics.totalViews}}
+                </td>
+            </tr>
+        </tbody>
+    </table>
+
+    <table *ngIf="metrics != undefined && metrics.infos.size > 0"
+            class="uk-table uk-table-striped">
+        <thead>
+            <tr>
+                <th class="uk-text-center">From</th>
+                <th class="uk-text-center">Number Of Downloads</th>
+                <th class="uk-text-center">Number Of Views</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let key of metrics.infos.keys()">
+                <td class="uk-text-center">
+                    <a href="{{metrics.infos.get(key).url}}">
+                        {{metrics.infos.get(key).name}}
+                    </a>
+                </td>
+                <td class="uk-text-center">
+                    {{metrics.infos.get(key).numOfDownloads}}
+                </td>
+                <td class="uk-text-center">
+                    {{metrics.infos.get(key).numOfViews}}
+                </td>
+            </tr>
+        </tbody>
+    </table>
+    `
+    })
+
+export class MetricsComponent {
+    @Input() id: string;
+    @Input() type: string;
+    @Input() name: string = "";
+    metrics: Metrics;
+
+    constructor (private _metricsService: MetricsService) {}
+
+    ngOnInit() {
+        this.getMetrics();
+    }
+
+
+    getMetrics() {
+        //if(this.id == undefined || this.id == "") {
+        //    console.log("supplied id in metrics is not acceptable");
+        //}
+        //if(this.type == undefined || this.type == "") {
+        //    console.log("supplied id in metrics is not acceptable");
+        //}
+
+        this._metricsService.getMetrics(this.id, this.type).subscribe(
+         data => {
+             this.metrics = data;
+         },
+         err => {
+           console.log(err);
+         }
+       );
+    }
+}
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/tabTable.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/tabTable.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/tabTable.component.ts	(revision 45390)
@@ -17,7 +17,7 @@
                         <span *ngIf="item['class'] == 'dataset'" class="glyphicon glyphicon-star" aria-hidden="true">
 
                         </span>
-                        <a *ngIf="item['url'] != '' && item['name'] != ''" class="custom-external" href="{{item['url']}}" target="_blank">
+                        <a *ngIf="item['url'] != '' && item['name'] != ''" href="{{item['url']}}">
                             {{item['name']}}
                         </a>
                         <p *ngIf="item['url'] == '' && item['name'] != ''">{{item['name']}}</p>
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/organization/organization.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/organization/organization.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/organization/organization.component.ts	(revision 45390)
@@ -21,7 +21,7 @@
 export class OrganizationComponent {
 
     organizationInfo: OrganizationInfo;
-    private metrics: string;
+    //private metrics: string;
     private organizationId: string;
     private projectsNum: number = 0;
     private fundersSet: Set<string>;
@@ -110,7 +110,7 @@
                 }
             );
         }
-
+/*
         private getMetrics() {
             console.info("getOrganizationMetrics: component");
             this._organizationService.getMetrics(this.organizationId).subscribe(
@@ -122,7 +122,7 @@
              }
            );
         }
-
+*/
         private handleClick(funder: string) {
              if(this.emptyFundersSet) {
                  this.fundersSet.clear();
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/person/person.component.html
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/person/person.component.html	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/person/person.component.html	(revision 45390)
@@ -1,87 +1,81 @@
-<div>
-    <div class="container person">
-        <div class="container-header" >
-            <div *ngIf="personInfo != null">
-                <h3>{{personInfo.fullname}}</h3>
-            </div>
-            <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" role="alert">{{warningMessage}}</div>
-            <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
-        </div>
+<div class="uk-container person">
+    <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" role="alert">{{warningMessage}}</div>
+    <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
 
-        <div class="uk-grid">
+    <div *ngIf="personInfo != null" class="uk-grid">
+        <div class="uk-width-7-10">
+            <h2>{{personInfo.fullname}}</h2>
 
-            <div class="uk-width-2-3" *ngIf="personInfo != null">
-                <dl class="uk-description-list-horizontal">
-                    <dt *ngIf="personInfo.secondnames != undefined && personInfo.secondnames != ''">Last name: </dt>
-                    <dd *ngIf="personInfo.secondnames != undefined && personInfo.secondnames != ''">{{personInfo.secondnames}}</dd>
-                    <dt *ngIf="personInfo.firstname != undefined && personInfo.firstname != ''">First name: </dt>
-                    <dd *ngIf="personInfo.firstname != undefined && personInfo.firstname != ''">{{personInfo.firstname}}</dd>
-                    <dt *ngIf="personInfo.country != undefined && personInfo.country != ''">Country: </dt>
-                    <dd *ngIf="personInfo.country != undefined && personInfo.country != ''">{{personInfo.country}}</dd>
-                </dl>
+            <dl class="uk-description-list-horizontal">
+                <dt *ngIf="personInfo.secondnames != undefined && personInfo.secondnames != ''">Last name: </dt>
+                <dd *ngIf="personInfo.secondnames != undefined && personInfo.secondnames != ''">{{personInfo.secondnames}}</dd>
+                <dt *ngIf="personInfo.firstname != undefined && personInfo.firstname != ''">First name: </dt>
+                <dd *ngIf="personInfo.firstname != undefined && personInfo.firstname != ''">{{personInfo.firstname}}</dd>
+                <dt *ngIf="personInfo.country != undefined && personInfo.country != ''">Country: </dt>
+                <dd *ngIf="personInfo.country != undefined && personInfo.country != ''">{{personInfo.country}}</dd>
+            </dl>
 
-                <ul class="uk-tab" data-uk-tab="{connect:'#tab-content'}">
-                    <li class="uk-active">
-                        <a href="#publicationsTab">
-                            Publications
-                            <span class="uk-badge uk-badge-notification">
-                                {{searchPublicationsComponent.searchUtils.totalResults}}
-                            </span>
-                        </a>
-                    </li>
-                    <li (click)="searchDatasetsInit()">
-                        <a href="#researchDataTab">
-                            Research Data
-                            <span class="uk-badge uk-badge-notification">
-                                {{searchDatasetsComponent.searchUtils.totalResults}}
-                            </span>
-                        </a>
-                    </li>
-                </ul>
+            <ul class="uk-tab" data-uk-switcher="{connect:'#tab-content'}">
+                <li class="uk-active">
+                    <a href="#publicationsTab">
+                        Publications
+                        <span class="uk-badge uk-badge-notification">
+                            {{searchPublicationsComponent.searchUtils.totalResults}}
+                        </span>
+                    </a>
+                </li>
+                <li (click)="searchDatasetsInit()">
+                    <a href="#researchDataTab">
+                        Research Data
+                        <span class="uk-badge uk-badge-notification">
+                            {{searchDatasetsComponent.searchUtils.totalResults}}
+                        </span>
+                    </a>
+                </li>
+            </ul>
 
-                <ul id="tab-content" class="uk-switcher uk-margin">
-                    <li id="publicationsTab">
+            <ul id="tab-content" class="uk-switcher uk-margin">
+                <li id="publicationsTab">
 
-                        <div *ngIf="searchPublicationsComponent.searchUtils.totalResults == 0" class = "uk-alert">
-                            There are no publications
-                        </div>
+                    <div *ngIf="searchPublicationsComponent.searchUtils.totalResults == 0" class = "uk-alert">
+                        There are no publications
+                    </div>
 
-                        <div *ngIf="searchPublicationsComponent.searchUtils.totalResults > 0">
-                            <p>
-                                The results below are discovered through our pilot algorithms.
-                                <a href="mailto:">Let us know how we are doing!</a>
-                            </p>
+                    <div *ngIf="searchPublicationsComponent.searchUtils.totalResults > 0">
+                        <p>
+                            The results below are discovered through our pilot algorithms.
+                            <a href="mailto:">Let us know how we are doing!</a>
+                        </p>
 
-                            <div class = "uk-text-right" *ngIf = "searchPublicationsComponent.searchUtils.totalResults > 10" ><a [href] = "linkToSearchPublications" >View all {{searchPublicationsComponent.searchUtils.totalResults}} results</a></div>
-                            <search-result [(results)]="searchPublicationsComponent.results" [(status)]= "searchPublicationsComponent.status"></search-result>
-                        </div>
-                    </li>
+                        <div class = "uk-text-right" *ngIf = "searchPublicationsComponent.searchUtils.totalResults > 10" ><a [href] = "linkToSearchPublications" >View all {{searchPublicationsComponent.searchUtils.totalResults}} results</a></div>
+                        <search-result [(results)]="searchPublicationsComponent.results" [(status)]= "searchPublicationsComponent.status"></search-result>
+                    </div>
+                </li>
 
-                    <li id="researchDataTab">
-                        <div *ngIf="searchDatasetsComponent.searchUtils.totalResults == 0" class = "uk-alert">
-                            There are no research data
-                        </div>
+                <li id="researchDataTab">
+                    <div *ngIf="searchDatasetsComponent.searchUtils.totalResults == 0" class = "uk-alert">
+                        There are no research data
+                    </div>
 
-                        <div *ngIf="searchDatasetsComponent.searchUtils.totalResults > 0">
-                            <p>
-                                The results below are discovered through our pilot algorithms.
-                                <a href="mailto:">Let us know how we are doing!</a>
-                            </p>
+                    <div *ngIf="searchDatasetsComponent.searchUtils.totalResults > 0">
+                        <p>
+                            The results below are discovered through our pilot algorithms.
+                            <a href="mailto:">Let us know how we are doing!</a>
+                        </p>
 
-                            <div class = "uk-text-right" *ngIf = "searchDatasetsComponent.searchUtils.totalResults > 10" ><a [href] = "linkToSearchDatasets" >View all {{searchDatasetsComponent.searchUtils.totalResults}} results</a></div>
-                            <search-result [(results)]="searchDatasetsComponent.results" [(status)]= "searchDatasetsComponent.status"></search-result>
-                        </div>
-                    </li>
-                </ul>
-            </div>
+                        <div class = "uk-text-right" *ngIf = "searchDatasetsComponent.searchUtils.totalResults > 10" ><a [href] = "linkToSearchDatasets" >View all {{searchDatasetsComponent.searchUtils.totalResults}} results</a></div>
+                        <search-result [(results)]="searchDatasetsComponent.results" [(status)]= "searchDatasetsComponent.status"></search-result>
+                    </div>
+                </li>
+            </ul>
+        </div>
 
-            <div class="uk-width-1-3" *ngIf="personInfo != null">
-                <ul class="uk-list uk-list-striped">
-                    <li>
-                        Share - Bookmark
-                    </li>
-                </ul>
-            </div>
+        <div class="uk-width-3-10">
+            <ul class="uk-list uk-list-striped">
+                <li>
+                    Share - Bookmark
+                </li>
+            </ul>
         </div>
     </div>
 </div>
Index: modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/publication/publication.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/publication/publication.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/landingPages/publication/publication.component.ts	(revision 45390)
@@ -2,7 +2,6 @@
 import {Observable} from 'rxjs/Observable';
 import {PublicationService} from '../../services/publication.service';
 import {PublicationInfo} from '../../utils/entities/publicationInfo';
-import {Metrics} from '../../utils/entities/metrics';
 import {ActivatedRoute} from '@angular/router';
 import {OpenaireProperties} from '../../utils/properties/openaireProperties';
 import {InlineClaimContextComponent} from '../../claimPages/inlineClaims/inlineClaimContext.component';
@@ -21,11 +20,10 @@
   public showAllFundedBy: boolean = false;
   public showAllPublishedIn: boolean = false;
 
-   constructor (private _publicationService: PublicationService, private route: ActivatedRoute) {
+   constructor (private _publicationService: PublicationService,
+                private route: ActivatedRoute) {
    }
   ngOnInit() {
-      this.metricsClicked = false;
-
     this.sub =  this.route.queryParams.subscribe(data => {
       this.articleId = data['articleId'];
       console.info("Article id is :"+this.articleId);
@@ -34,15 +32,14 @@
       }else{
         console.info("Article id not found");
       }
+    });
 
-  });
+    this.metricsClicked = false;
+    //this.viewsFrameUrl = 'http://vaggelas.athenarc.gr/stats/merge.php?com=query&data=[{"table":"result_stats_monthly","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":0,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Number of views for '+this.publicationInfo.title.name+'","yaxisheaders":["sum of views"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"result_stats_monthly(id)-(id)result-id","values":["'+this.articleId+'"],"to":"-1"}]}]&info_types=["spline"]&stacking=&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(124, 181, 236, 1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true';
+    this.openaireViewsFrameUrl = 'http://vaggelas.athenarc.gr/stats/merge.php?com=query&data=[{"table":"result_stats_monthly_charts","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":-30,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"OpenAIRE","yaxisheaders":[""],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"result_stats_monthly_charts(id)-(id)result-id","values":["'+this.articleId+'"],"to":"-1"}]},{"table":"repo_view_stats_monthly_charts","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":"repo_view_stats_monthly_charts(source)-(piwik_id)datasource_piwik(openaire_id)-(id)datasource-name","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":0,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Repository","yaxisheaders":[""],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"repo_view_stats_monthly_charts(id)-(orid)result_oids(id)-(id)result-id","values":["'+this.articleId+'"],"to":"-1"}]}]&info_types=["column","column"]&stacking=normal&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(124, 181, 236, 1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true';
+
 }
 
-ngAfterContentInit() {
-
- }
-
-
   ngOnDestroy() {
     this.sub.unsubscribe();
   }
@@ -49,7 +46,6 @@
   sub: any;getPublicationView
   articleId: string;
   public publicationInfo: PublicationInfo;
-  private metrics: Metrics;
   private metricsClicked: boolean;
   private viewsFrameUrl: string;
   private openaireViewsFrameUrl: string;
@@ -71,19 +67,6 @@
   public warningMessage = "";
   public errorMessage = "";
 
-  public activeTab: string = '';
-
-  public myfunct() {
-     //this.activeTab = tab;
-    /*UIkit.ul($('[data-uk-tab]').on('show.uk.tab', function(event, area){
-          console.info("Switcher switched to ", area);
-    }));*/
-
-    //var elem = document.activeElement;
-    //console.info("id="+elem.id);
-    console.info("hi");
-}
-
   getPublicationInfo(id:string) {
     this.warningMessage = '';
     this.errorMessage=""
@@ -117,23 +100,6 @@
     }
    }
 
-   getMetrics(id: any) {
-       console.info(id);
-       this.metricsClicked = true;
-       //this.viewsFrameUrl = 'http://vaggelas.athenarc.gr/stats/merge.php?com=query&data=[{"table":"result_stats_monthly","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":0,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Number of views for '+this.publicationInfo.title.name+'","yaxisheaders":["sum of views"],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"result_stats_monthly(id)-(id)result-id","values":["'+this.articleId+'"],"to":"-1"}]}]&info_types=["spline"]&stacking=&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(124, 181, 236, 1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true';
-       this.openaireViewsFrameUrl = 'http://vaggelas.athenarc.gr/stats/merge.php?com=query&data=[{"table":"result_stats_monthly_charts","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":"","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":-30,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"OpenAIRE","yaxisheaders":[""],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"result_stats_monthly_charts(id)-(id)result-id","values":["'+this.articleId+'"],"to":"-1"}]},{"table":"repo_view_stats_monthly_charts","fields":[{"fld":"sum","agg":"sum","type":"column","yaxis":1,"c":false}],"xaxis":{"name":"month","agg":"sum"},"group":"repo_view_stats_monthly_charts(source)-(piwik_id)datasource_piwik(openaire_id)-(id)datasource-name","color":"","type":"chart","size":30,"sort":"xaxis","xStyle":{"r":0,"s":"0","l":"-","ft":"-","wt":"-"},"title":"","subtitle":"","xaxistitle":"Repository","yaxisheaders":[""],"generalxaxis":"","theme":0,"in":[],"filters":[{"name":"repo_view_stats_monthly_charts(id)-(orid)result_oids(id)-(id)result-id","values":["'+this.articleId+'"],"to":"-1"}]}]&info_types=["column","column"]&stacking=normal&steps=false&fontFamily=Courier&spacing=[5,0,0,0]&style=[{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"rgba(0, 0, 0, 1)","size":"18"},{"color":"000000","size":""},{"color":"000000","size":""}]&backgroundColor=rgba(255,255,255,1)&colors[]=rgba(124, 181, 236, 1)&colors[]=rgba(67, 67, 72, 1)&colors[]=rgba(144, 237, 125, 1)&colors[]=rgba(247, 163, 92, 1)&colors[]=rgba(128, 133, 233, 1)&colors[]=rgba(241, 92, 128, 1)&colors[]=rgba(228, 211, 84, 1)&colors[]=rgba(43, 144, 143, 1)&colors[]=rgba(244, 91, 91, 1)&colors[]=rgba(145, 232, 225, 1)&xlinew=0&ylinew=1&legends=true&tooltips=true';
-
-       console.info("getPublicationMetrics: component");
-       this._publicationService.getMetrics(this.articleId).subscribe(
-        data => {
-            this.metrics = data;
-        },
-        err => {
-          console.log(err);
-        }
-      );
-   }
-
    /*
    ********* Methods for Inline Claim  of project / publication *****
      */
Index: modules/uoa-services-portal/trunk/portal-2/src/index.html
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/index.html	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/index.html	(revision 45390)
@@ -5,8 +5,8 @@
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1">
-      <link rel="shortcut icon" href="http://scoobydoo.di.uoa.gr:8083/joomlaNew/templates/yootheme/vendor/yootheme/theme/platforms/joomla/assets/images/favicon.png">
-      <link rel="apple-touch-icon-precomposed" href="http://scoobydoo.di.uoa.gr:8083/joomlaNew/templates/yootheme/vendor/yootheme/theme/platforms/joomla/assets/images/apple-touch-icon.png">
+      <!--link rel="shortcut icon" href="http://scoobydoo.di.uoa.gr:8083/joomlaNew/templates/yootheme/vendor/yootheme/theme/platforms/joomla/assets/images/favicon.png">
+      <link rel="apple-touch-icon-precomposed" href="http://scoobydoo.di.uoa.gr:8083/joomlaNew/templates/yootheme/vendor/yootheme/theme/platforms/joomla/assets/images/apple-touch-icon.png"-->
       <base href="/" />
       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
       <meta name="author" content="Super User" />
@@ -44,13 +44,20 @@
       <script src="assets/uikit-2.27.2/js/core/tab.min.js" type="text/javascript"></script>
       <script src="assets/uikit-2.27.2/js/core/switcher.min.js" type="text/javascript"></script>
       <!--script src="assets/uikit-2.27.2/js/core/dropdown.min.js" type="text/javascript"></script-->
+      <!-- Progress Bar -->
       <link href="assets/uikit-2.27.2/css/components/progress.css" rel="stylesheet" type="text/css" />
 
+      <!-- Tooltip -->
       <link href="assets/uikit-2.27.2/css/components/tooltip.css" rel="stylesheet" type="text/css" />
       <script src="assets/uikit-2.27.2/js/components/tooltip.min.js" type="text/javascript"></script>
+      <!-- Button -->
       <script src="assets/uikit-2.27.2/js/core/button.min.js" type="text/javascript"></script>
+      <!-- Alert -->
       <script src="assets/uikit-2.27.2/js/core/alert.min.js" type="text/javascript"></script>
+      <!-- Grid -->
       <script src="assets/uikit-2.27.2/js/components/grid.min.js" type="text/javascript"></script>
+      <!-- Modal -->
+      <script src="assets/uikit-2.27.2/js/core/modal.min.js" type="text/javascript"></script>
 
       <!--script src="http://scoobydoo.di.uoa.gr:8083/joomlaNew/templates/yootheme/vendor/assets/uikit/src/js/core/dropdown.js" type="text/javascript"></script-->
 
@@ -113,6 +120,7 @@
       .OPEN {
           background: rgba(0, 0, 0, 0) url("/assets/openAccess.png") no-repeat scroll right center;
           padding-right: 18px;
+          min-height: 18px;
       }
 
       .EMBARGO, .CLOSED, .RESTRICTED {
@@ -119,6 +127,7 @@
           background: rgba(0, 0, 0, 0) url("/assets/closedAccess.png") no-repeat scroll right center;
           padding-right: 18px;
       }
+
     </style>
 
    </head>
Index: modules/uoa-services-portal/trunk/portal-2/src/app/sharedComponents/login.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/sharedComponents/login.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/sharedComponents/login.component.ts	(revision 45390)
@@ -8,7 +8,8 @@
     template: `
 
 
-    <form *ngIf="!loggedIn" class="uk-form uk-width-medium-1-3">
+    <!--form *ngIf="!loggedIn" class="uk-form uk-width-medium-1-3"-->
+    <form *ngIf="!loggedIn" class="uk-form uk-flex uk-flex-center">
        <fieldset>
           <legend>Login Form</legend>
           <div class="uk-form-row">
Index: modules/uoa-services-portal/trunk/portal-2/src/browser.module.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/browser.module.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/browser.module.ts	(revision 45390)
@@ -1,3 +1,4 @@
+//import {MaterialModule} from '@angular/material';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
@@ -35,7 +36,7 @@
 @NgModule({
   bootstrap: [ AppComponent ],
   imports: [
-    // MaterialModule.forRoot() should be included first
+    //MaterialModule.forRoot(),// should be included first
     UniversalModule, // BrowserModule, HttpModule, and JsonpModule are included
 
     FormsModule,
@@ -56,7 +57,7 @@
 
     CacheService,
 
-    Meta,
+    //Meta,
 
     // { provide: AUTO_PREBOOT, useValue: false } // turn off auto preboot complete
   ]
Index: modules/uoa-services-portal/trunk/portal-2/src/app/sharedComponents/navigationBar.component.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/app/sharedComponents/navigationBar.component.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/app/sharedComponents/navigationBar.component.ts	(revision 45390)
@@ -90,7 +90,23 @@
 
                                       </li>
                                   </ul>
+                                  <div class="uk-navbar-flip">
+                                      <ul class="uk-navbar-nav uk-hidden-small">
+                                          <li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false">
+                                          <!-- This is a button toggling the modal -->
+                                            <a href="#login" data-uk-modal="center: true">Sign In</a>
 
+                                            <!-- This is the modal -->
+                                            <div id="login" class="uk-modal">
+                                                <div class="uk-modal-dialog">
+                                                    <a class="uk-modal-close uk-close"></a>
+                                                    <login></login>
+                                                </div>
+                                            </div>
+                                          </li>
+                                      </ul>
+                                  </div>
+
                                   <a href="#offcanvas-mainmenu" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas=""></a>
 
 
Index: modules/uoa-services-portal/trunk/portal-2/src/node.module.ts
===================================================================
--- modules/uoa-services-portal/trunk/portal-2/src/node.module.ts	(revision 45389)
+++ modules/uoa-services-portal/trunk/portal-2/src/node.module.ts	(revision 45390)
@@ -1,3 +1,4 @@
+//import {MaterialModule} from '@angular/material';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
@@ -27,7 +28,7 @@
 @NgModule({
   bootstrap: [ AppComponent ],
   imports: [
-    // MaterialModule.forRoot() should be included first
+    //MaterialModule.forRoot(),// should be included first
     UniversalModule, // BrowserModule, HttpModule, and JsonpModule are included
 
     FormsModule,
