From 475025f4cb65bba9b6ef2605a113021ceaf21205 Mon Sep 17 00:00:00 2001
From: "katerina.iatropoulou"
 <katerina.iatropoulou@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Mon, 20 Jun 2016 11:57:51 +0000
Subject: [PATCH] Tidy up pages

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@42961 d315682c-612b-4755-9ff5-7f18f6832af3
---
 src/app/claims/claims.component.html          | 80 +++++++++++--------
 src/app/home/home.component.html              |  2 +-
 src/app/linking/linkingHome.component.ts      |  4 +-
 .../linking/selected/selected.component.ts    | 29 +++++--
 4 files changed, 74 insertions(+), 41 deletions(-)

diff --git a/src/app/claims/claims.component.html b/src/app/claims/claims.component.html
index 4b8aa7c1..19f9c6ac 100644
--- a/src/app/claims/claims.component.html
+++ b/src/app/claims/claims.component.html
@@ -1,5 +1,9 @@
+<div class="container">
+  <div class="page-header">
+    <h1>Claims Administration</h1>
+  </div>
 
-<h1>Claims</h1>
+<!-- KI
 <h3>Filter claims by type:</h3>
 <form>
   <select  [(ngModel)]="fetchBy">
@@ -8,56 +12,64 @@
   <input type="text" [(ngModel)]="fetchId"  />
   <button   class="btn btn-default" type = "submit" (click)="goTo()">Fetch</button>
 </form>
+-->
  <!--<div class="col-md-4">
   <input type="text" #listFilter (keyup)="0" />
 </div>-->
+<!-- KI
 <div>
   <div *ngIf="selected.length>0">
     <p>You have selected {{selected.length}} claim(s)</p>
   </div>
   <button class="btn btn-default" (click)="selectAll()">Select All</button> <button class="btn btn-default" (click)="deselectAll()">Deselect All</button> <button class="btn btn-default" (click)="confirmOpen()">Delete</button>
 </div>
-<div *ngIf="resultsNum">
-  <paging  [currentPage]="page" [totalResults]="resultsNum"  [navigateTo]="navigateTo" [size]="size" [params]="getParameters()" > </paging>
+-->
+<div class="row row-offcanvas row-offcanvas-right">
+  <div class="col-xs-12 col-sm-3">
+<div class="panel panel-default">
+  <!-- Default panel contents -->
+  <div class="panel-heading">Claims related to</div>
+  <!-- List group -->
+  <div class="panel-body">
+    <p>
+      <label> <input [(ngModel)]="projectCB" type="checkbox" (ngModelChange)="changeType()" /> Project </label>
+    </p>
+    <p>
+      <label> <input [(ngModel)]="publicationCB" type="checkbox"  (ngModelChange)="changeType()" /> Publication </label>
+    </p>
+    <p>
+      <label> <input [(ngModel)]="datasetCB" type="checkbox" (ngModelChange)="changeType()" /> Dataset </label>
+    </p>
+    <p>
+      <label> <input [(ngModel)]="contextCB" type="checkbox" (ngModelChange)="changeType()"  /> Context </label>
+    </p>
+    <p class="align-right">
+      <button  class="btn btn-primary"  (click)="clearFilters()">Clear filters</button>
+    </p>
+  </div>
 </div>
-<p *ngIf="resultsNum == 0" >No entries found.</p>
-<p *ngIf="resultsNum>0" >Showing {{(size*page - size +1)}} to {{(size*page>resultsNum)?resultsNum:(size*page)}} of {{resultsNum}} entries</p>
-<p *ngIf="resultsNum>size*page">Show
+</div>
+
+<div class="col-xs-6 col-sm-9 sidebar-offcanvas" id="sidebar">
+<h4 *ngIf="resultsNum>0" >Showing {{(size*page - size +1)}} to {{(size*page>resultsNum)?resultsNum:(size*page)}} of {{resultsNum}} claims</h4>
+<p class="text-right" *ngIf="resultsNum>size*page">Show
   <select  [(ngModel)]="size"  (ngModelChange)="goTo()">
     <option *ngIf="resultsNum > 10" [ngValue]="10">10</option>
     <option *ngIf="resultsNum > 20" [ngValue]="20">20</option>
     <option *ngIf="resultsNum > 30" [ngValue]="30">30</option>
     <option *ngIf="resultsNum > 50" [ngValue]="50">50</option>
   </select>
+  per page
 </p>
-<div>
-  <div class="col-md-2">Filter Results by:</div>
-  <div class="col-md-4">
-    <form>
-      <input type="text" [(ngModel)]="inputkeyword"  />
-      <button  type = "submit" class="btn btn-primary"  (click)="changekeyword()">Filter</button>
-    </form>
-  </div>
-  <div class="col-md-4" >
-    <label>
-    <input [(ngModel)]="projectCB" type="checkbox" (ngModelChange)="changeType()" />
-    Project
-    </label>
-    <label>
-    <input [(ngModel)]="publicationCB" type="checkbox"  (ngModelChange)="changeType()" />
-    Publication
-    </label>
-    <label>
-    <input [(ngModel)]="datasetCB" type="checkbox" (ngModelChange)="changeType()" />
-    Dataset
-    </label>
-    <label>
-    <input [(ngModel)]="contextCB" type="checkbox" (ngModelChange)="changeType()"  />
-    Context
-    </label>
-    <button  class="btn btn-primary"  (click)="clearFilters()">Clear filters</button>
 
-  </div>
+<div class="text-right" *ngIf="resultsNum">
+  <paging  [currentPage]="page" [totalResults]="resultsNum"  [navigateTo]="navigateTo" [size]="size" [params]="getParameters()" > </paging>
+</div>
+
+<p *ngIf="resultsNum == 0" >No entries found.</p>
+
+<div>
+
 
 </div>
 <div class="">
@@ -89,5 +101,7 @@
   </tbody>
 </table>
 </div>
+</div>
+</div>
 <alert (alertOutput)="confirmClose($event)">
 </alert>
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index cbae1045..6ae03c49 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,6 +1,6 @@
 
 <div class="container">
-  <div class="row ">
+  <div class="row">
     <form>
       <div class="col-lg-6">
         <div class="input-group">
diff --git a/src/app/linking/linkingHome.component.ts b/src/app/linking/linkingHome.component.ts
index ca8aad4a..6ffd41d7 100644
--- a/src/app/linking/linkingHome.component.ts
+++ b/src/app/linking/linkingHome.component.ts
@@ -17,7 +17,7 @@ import {Observable}       from 'rxjs/Observable';
                 <!--<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>-->
               </div>
             </div>
-            <div class="card text-xs-center" style="background-color:pink;">
+            <div class="card card-inverse card-success text-xs-center" >
               <div class="card-block">
                 <h4 class="card-title">Link with Community</h4>
                 <p class="card-text">Link your research result with research communities.</p>
@@ -25,7 +25,7 @@ import {Observable}       from 'rxjs/Observable';
                 <!--<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> -->
               </div>
             </div>
-            <div class="card card-inverse card-success text-xs-center">
+            <div class="card card-inverse text-xs-center" style="background-color:pink;">
               <div class="card-block">
                 <h4 class="card-title">Link with Software</h4>
                 <p class="card-text">....</p>
diff --git a/src/app/linking/selected/selected.component.ts b/src/app/linking/selected/selected.component.ts
index 88220607..c6c8935b 100644
--- a/src/app/linking/selected/selected.component.ts
+++ b/src/app/linking/selected/selected.component.ts
@@ -23,18 +23,37 @@ import {Component, Input,Output} from '@angular/core';
            </i>
         </div>
         <div *ngIf="contexts.length > 0 "  class="concepts" >
-          <h5>Selected Concepts:</h5>
-            <i *ngFor="let context of contexts" >Community: {{context.community}} - Category: {{context.category}}   </i>
+        <ul class="list-group">
+          <li class="list-group-item list-group-item-success">Selected Concepts:</li>
+          <li class="list-group-item" *ngFor="let context of contexts" >{{context.community}} - Category: {{context.category}}   </li>
+        </ul>
         </div>
         <div *ngIf="projects.length > 0 "  class="conprojectscepts" >
-          <h5>Selected projects:</h5>
-            <i *ngFor="let project of projects" >{{project.projectAcronym}} - {{project.projectName}}  </i>
+              <ul class="list-group">
+              <li class="list-group-item list-group-item-info">Selected Projects</li>
+                <li class="list-group-item" *ngFor="let project of projects">
+                  <span class="glyphicons glyphicons-remove"></span>
+                  {{project.projectAcronym}} - {{project.projectName}}
+                </li>
+              </ul>
         </div>
         <div *ngIf="datasets.length > 0 "  class="datasets" >
           <h5>Selected datasets:</h5>
             <i *ngFor="let dataset of datasets" > Datasets:  Source: {{dataset.source}} - Title: <publication-title [title]="dataset.title" [url]="dataset.url" > </publication-title> </i>
         </div>
-          <i>TODO: add more types</i>
+        <div *ngIf="projects.length == 0 "  class="conprojectscepts" >
+          <ul class="list-group">
+            <li class="list-group-item list-group-item-info">Selected Projects:</li>
+            <li class="list-group-item">Please use the form on the left to select a project</li>
+          </ul>
+        </div>
+        <div *ngIf="contexts.length == 0 "  class="concepts" >
+          <ul class="list-group">
+            <li class="list-group-item list-group-item-success">Selected Concepts:</li>
+            <li class="list-group-item">Please use the form on the left to select a concept</li>
+          </ul>
+        </div>
+<!-- KI          <i>TODO: add more types</i> -->
         `,
         directives: [ PublicationTitleFormatter]