From aa6d6d8b490f9253b35bdee156eb86829b63c6a5 Mon Sep 17 00:00:00 2001
From: "argiro.kokogiannaki"
 <argiro.kokogiannaki@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Mon, 11 Jun 2018 08:20:32 +0000
Subject: [PATCH] Layout Changes in claims

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@52426 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../claimContextSearchForm.component.ts       |  2 +-
 .../claimProjectSearchForm.component.ts       |  7 +++--
 .../claimResultSearchForm.component.html      |  2 +-
 .../linking/bulkClaim/bulkClaim.component.ts  |  6 ++--
 claims/linking/linkingGeneric.component.html  | 30 +++++++++++--------
 .../selected/selectedContexts.component.ts    |  2 +-
 .../selected/selectedProjects.component.ts    |  2 +-
 .../selected/selectedResults.component.ts     |  2 +-
 .../datasets/depositBySubject.component.ts    |  6 ++--
 login/userMini.component.ts                   |  6 ++--
 10 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/claims/claim-utils/claimContextSearchForm.component.ts b/claims/claim-utils/claimContextSearchForm.component.ts
index 49ae33e1..a6e77952 100644
--- a/claims/claim-utils/claimContextSearchForm.component.ts
+++ b/claims/claim-utils/claimContextSearchForm.component.ts
@@ -14,7 +14,7 @@ import{EnvProperties} from '../../utils/properties/env-properties';
     selector: 'claim-contexts-search-form',
     template: `
 
-          <div class=" uk-animation uk-card uk-card-default uk-padding uk-padding-large uk-padding-remove-left uk-margin-left" >
+          <div class=" uk-animation uk-card uk-card-default uk-padding uk-padding-medium " >
           <div class="uk-grid">
             <div class="uk-width-expand">
 
diff --git a/claims/claim-utils/claimProjectSearchForm.component.ts b/claims/claim-utils/claimProjectSearchForm.component.ts
index 3ce9bc43..188cc523 100644
--- a/claims/claim-utils/claimProjectSearchForm.component.ts
+++ b/claims/claim-utils/claimProjectSearchForm.component.ts
@@ -12,8 +12,11 @@ import{EnvProperties} from '../../utils/properties/env-properties';
     selector: 'claim-projects-search-form',
 
     template: `
-
-    <form class=" uk-animation uk-card uk-card-default uk-padding uk-padding-large uk-padding-remove-left uk-margin-left" >
+    <!--div class="uk-notification uk-notification-top-center"><div class="uk-notification-message uk-notification-message-primary" style="opacity: 1; margin-top: 0px; margin-bottom: 10px;">
+                        <a href="#" class="uk-notification-close uk-close uk-icon" data-uk-close=""></a>
+                        <div>A new project is selected.</div>
+                    </div></div-->
+    <form class=" uk-animation uk-card uk-card-default uk-padding uk-padding-medium  " >
       <div class="uk-grid">
         <div class="uk-grid uk-width-expand">
           <div class="uk-width-auto@m uk-first-column">
diff --git a/claims/claim-utils/claimResultSearchForm.component.html b/claims/claim-utils/claimResultSearchForm.component.html
index 3f0438d8..c8de448d 100644
--- a/claims/claim-utils/claimResultSearchForm.component.html
+++ b/claims/claim-utils/claimResultSearchForm.component.html
@@ -1,5 +1,5 @@
 
-<form  class="  uk-padding uk-padding-large uk-padding-remove-left uk-margin-left" >
+<form  class="  uk-padding uk-padding-medium uk-padding-remove-left uk-margin-left uk-margin-small-top" >
   <div class="uk-grid">
     <div class="uk-width-expand">
      <select   [(ngModel)]="searchSource" name="select_source" (ngModelChange)="searchSourceChanged(searchSource)"  class="uk-select uk-width-1-4">
diff --git a/claims/linking/bulkClaim/bulkClaim.component.ts b/claims/linking/bulkClaim/bulkClaim.component.ts
index 93307749..ef66ebf9 100644
--- a/claims/linking/bulkClaim/bulkClaim.component.ts
+++ b/claims/linking/bulkClaim/bulkClaim.component.ts
@@ -17,10 +17,10 @@ import{EnvProperties} from '../../../utils/properties/env-properties';
 
       <div class="uk-grid">
         <div class="uk-width-expand">
-          <div for="exampleInputFile">Upload a DOI csv file:</div>
+          <h3 for="exampleInputFile">Upload a DOI csv file:</h3>
           <label for="exampleInputFile">Select a file</label>
-          <input id="exampleInputFile" class="uk-width-1-2" type="file"  (change)="fileChangeEvent($event)" placeholder="Upload file..." />
-          <button class="uk-button uk-button-success" [class.disabled]="!enableUpload" type="button" (click)="upload()">Upload</button>
+          <input id="exampleInputFile" class="uk-width-small" type="file"  (change)="fileChangeEvent($event)" placeholder="Upload file..." />
+          <button class="uk-button uk-button-small" [class.disabled]="!enableUpload" type="button" (click)="upload()">Upload</button>
 
           <div *ngIf="showReport"  uk-alert  class="uk-alert uk-alert-primary" role="alert" >
             <a class="uk-alert-close" uk-close></a>
diff --git a/claims/linking/linkingGeneric.component.html b/claims/linking/linkingGeneric.component.html
index 7b953276..b55ffc57 100644
--- a/claims/linking/linkingGeneric.component.html
+++ b/claims/linking/linkingGeneric.component.html
@@ -4,7 +4,7 @@
 
 <div class="uk-container uk-margin-top">
 <div class="uk-article-title custom-article-title">
-    Link
+    Link your research results
 </div>
 
 <div class="uk-width-1-1">
@@ -14,7 +14,7 @@
   <helper position="left" styleName=" uk-width-1-5 uk-padding-left"></helper>
   <div class="uk-width-expand">
 
-      <ul class="uk-subnav uk-margin-remove-bottom uk-subnav-divider linkingSteps" uk-margin="">
+      <ul class="uk-subnav uk-margin-remove-bottom uk-subnav-pill linkingSteps" uk-margin="">
           <li  [class]="(step==1)?'uk-active':' '" ><a (click)="step=1;"> 1  Select Projects <span  >or  Communities  </span></a></li>
            <li [class]="(step==2)?'uk-active':' '" ><a  (click)="step=2;">2 Select Research Results  </a></li>
           <li [class]="(step==3)?'uk-active':' '" (click)="step=3;"><a [class]="(results.length == 0)?'uk-disabled':''"  (click)="show='claim';" >3 Review metadata</a></li>
@@ -32,9 +32,12 @@
 
             </li>
         </ul>
-      <ul uk-accordion>
+  <div class="uk-section uk-section-default uk-padding-remove-top">
+     <div style="border: 1px solid #eee;" class="uk-container uk-margin-top">
+
+      <ul uk-accordion class="uk-background-muted uk-padding-small uk-margin-remove-bottom basket-accordion">
         <li>
-            <h3 class=" uk-text-right uk-margin-remove-vertical uk-width-small uk-margin-auto-left uk-accordion-title basket-title ">
+            <h3 class=" uk-text-right uk-margin-remove-vertical uk-width-small uk-margin-auto-left uk-accordion-title basket-title uk-text-danger">
 
             <span class="uk-icon"><svg xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="28px" id="my-box" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="28px" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><g>	<path d="M480,320v128H32V320h78.859l64.016,96h162.25l64-96H480 M384,32H128L0,288v192h512V288L384,32L384,32z M35.781,288l112-224 h216.438l112,224H384l-64,96H192l-64.016-96H35.781L35.781,288z" fill="#b5b5b5"></path></g> </svg> </span>
             <span *ngIf="(projects.length + contexts.length + results.length)> 0" class="uk-badge basket-badge ">{{(projects.length + contexts.length + results.length) | number}}</span>
@@ -53,7 +56,7 @@
 
                 <div *ngIf="step==1">
 
-                   <ul class=" uk-tab " uk-tab="connect: #tabs; animation: uk-animation-fade">
+                   <ul class=" uk-tab uk-margin-remove-bottom" uk-tab="connect: #tabs; animation: uk-animation-fade">
                            <li>
                               <a>Projects ({{projects.length | number}})</a>
                           </li>
@@ -61,7 +64,7 @@
                              <a>Communities ({{contexts.length | number}})</a>
                          </li>
                     </ul>
-                    <ul id="tabs" class="uk-switcher uk-margin-left uk-width-1-1">
+                    <ul id="tabs" class="uk-switcher   uk-width-1-1">
                       <li>
 
                                <claim-projects-search-form     [(selectedProjects)]="projects"    [(properties)] = properties> </claim-projects-search-form>
@@ -80,14 +83,14 @@
             <div  class="uk-width-1-1 uk-card uk-card-default uk-padding ">
               <div class=" uk-padding-small uk-padding-remove-bottom   ">
               <span *ngIf="bulkMode"   class=" uk-animation uk-float-right">
-                <span   title= "Bulk mode"><i  class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="upload" ratio="1"><polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 "></polyline><rect x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5" y2="4"></line></svg></i></span>
-                <a   title= "Switch to Search mode"  (click)="bulkMode = !bulkMode;"> <span class="uk-icon">
+                <span   title= "Bulk mode"> Upload  DOIs in bulk mode <i  class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="upload" ratio="1"><polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 "></polyline><rect x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5" y2="4"></line></svg></i></span>
+                <a   title= "Switch to Search mode"  (click)="bulkMode = !bulkMode;"> Search online for research results <span class="uk-icon">
                     <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>
                     </span></a>
               </span>
               <span *ngIf="!bulkMode"   class=" uk-animation uk-float-right">
-                <a   title= "Switch to Bulk mode"   (click)="bulkMode = !bulkMode;"><i  class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="upload" ratio="1"><polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 "></polyline><rect x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5" y2="4"></line></svg></i></a>
-                <span   title= "Search mode"> <span class="uk-icon">
+                <a   title= "Upload  DOIs in bulk mode"   (click)="bulkMode = !bulkMode;">Upload  DOIs in bulk mode <i  class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="upload" ratio="1"><polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 "></polyline><rect x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5" y2="4"></line></svg></i></a>
+                <span   title= "Search mode"> Search online for research results <span class="uk-icon">
                     <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>
                     </span></span>
               </span>
@@ -97,8 +100,8 @@
             </div>
         </div>
         <div *ngIf="step==3" class="uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l">
-          <div class=" uk-grid">
-            <div class="uk-width-expand">
+          <div class=" uk-grid uk-margin-small-top">
+            <div class="uk-width-expand uk-margin-left">
               <claim-selected-results   title= "Selected Research Results" [results]="results"  [bulkMode]="bulkMode" showSearch = false  showAccessRights = true>
               </claim-selected-results>
             </div>
@@ -107,7 +110,8 @@
         </div>
 
 
-
+    </div>
+</div>
         <ul class=" uk-pagination uk-flex-center uk-margin-auto uk-text-center">
             <li  *ngIf="step !=1 " (click)="step=step-1;" class="uk-margin-left"><a><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li>
              <li  *ngIf="step !=3 " (click)="step=step + 1;"  >
diff --git a/claims/linking/selected/selectedContexts.component.ts b/claims/linking/selected/selectedContexts.component.ts
index 66790b05..1ef1e296 100644
--- a/claims/linking/selected/selectedContexts.component.ts
+++ b/claims/linking/selected/selectedContexts.component.ts
@@ -23,7 +23,7 @@ import {ClaimContext} from '../../claim-utils/claimEntities.class';
                     </li>
                   </ul>
                 </div>
-                  <div  *ngIf="contexts.length == 0 "  class="uk-text-center">There are no selected communities</div>
+                  <div  *ngIf="contexts.length == 0 "  class="uk-alert no-selected-message uk-text-center">You have not selected any communities</div>
               </div>
 
 
diff --git a/claims/linking/selected/selectedProjects.component.ts b/claims/linking/selected/selectedProjects.component.ts
index dc346a8d..1da3de1f 100644
--- a/claims/linking/selected/selectedProjects.component.ts
+++ b/claims/linking/selected/selectedProjects.component.ts
@@ -20,7 +20,7 @@ import {RouterHelper} from '../../../utils/routerHelper.class';
                       </li>
                     </ul>
                   </div>
-                <div *ngIf="projects.length == 0 " class="uk-text-center">There are no selected  projects</div>
+                <div *ngIf="projects.length == 0 " class="uk-alert no-selected-message uk-text-center">You have not selected any projects</div>
               </div>
 
 
diff --git a/claims/linking/selected/selectedResults.component.ts b/claims/linking/selected/selectedResults.component.ts
index 46e5de0b..b9b1d690 100644
--- a/claims/linking/selected/selectedResults.component.ts
+++ b/claims/linking/selected/selectedResults.component.ts
@@ -11,7 +11,7 @@ import {Dates} from '../../../utils/string-utils.class';
 
 
          <div class="uk-placeholder uk-margin-top" >
-           <div  *ngIf="results.length == 0 " class="uk-text-center">There are no selected research results</div>
+           <div  *ngIf="results.length == 0 " class="uk-alert no-selected-message uk-text-center">You have not selected any research results</div>
            <div *ngIf="results.length > 0 ">
             <h5 class=" uk-margin uk-h5 uk-text-primary" > {{title}} ({{results.length | number}}) </h5>
             <table class="uk-table uk-table-responsive">
diff --git a/deposit/datasets/depositBySubject.component.ts b/deposit/datasets/depositBySubject.component.ts
index d5e35f1e..c48904de 100644
--- a/deposit/datasets/depositBySubject.component.ts
+++ b/deposit/datasets/depositBySubject.component.ts
@@ -12,14 +12,14 @@ import {PiwikService} from '../../utils/piwik/piwik.service';
 @Component({
     selector: 'deposit-by-subject',
     template: `
-        <div class="uk-margin-top">
+        <div class="uk-margin-large-top">
 
                 <h3>Or search for domain specific repositories</h3>
 
                 <form class= "uk-grid">
                     <input type="text"  [(ngModel)]="subjectKeyword"  class="uk-margin-medium-left uk-padding-remove-left  uk-input" name="subject" placeholder="Type keywords (e.g Biology, Natural sciences, Social Sciences, Engineering Sciences... )"  style="width: 580px;" />
 
-                    <button class=" uk-button uk-button-default"  type="submit" (click)="search()" >
+                    <button class=" uk-button uk-button-danger"  type="submit" (click)="search()" >
                         Search
                     </button>
                 </form>
@@ -49,7 +49,7 @@ export class DepositBySubjectComponent {
            this._meta.updateTag({content:description},"name='description'");
            this._meta.updateTag({content:description},"property='og:description'");
            this._meta.updateTag({content:url},"property='og:url'");
-           
+
            if(this.properties.enablePiwikTrack && (typeof document !== 'undefined')){
              this._piwikService.trackView(this.properties, "Deposit by subjects" , this.piwikSiteId).subscribe();
            }
diff --git a/login/userMini.component.ts b/login/userMini.component.ts
index ae40df91..292cdb4d 100644
--- a/login/userMini.component.ts
+++ b/login/userMini.component.ts
@@ -18,7 +18,7 @@ import{EnvProperties} from '../utils/properties/env-properties';
       <a   *ngIf="loggedIn" >
              <span>{{user.fullname+" "}} <span class="uk-margin-small-right uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg></span></span>
       </a>
-      <a  *ngIf="!loggedIn" class="loginLink" (click)="logIn()" >Sign in | Register <span class="uk-margin-small-right uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg> </span>
+      <a  *ngIf="!loggedIn" class="loginLink" (click)="logIn()" >Sign in  <span class="uk-margin-small-right uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg> </span>
       </a>
 
 
@@ -49,7 +49,7 @@ import{EnvProperties} from '../utils/properties/env-properties';
       <span>{{user.fullname+" "}}<span class="uk-margin-small-right uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg></span></span>
     </span>
     <span  *ngIf="!loggedIn">
-        <a  class="loginLink" (click)="logIn()" >Sign in | Register <span class="uk-margin-small-right uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg></span>
+        <a  class="loginLink" (click)="logIn()" >Sign in <span class="uk-margin-small-right uk-icon" ><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9.9" cy="6.4" r="4.4"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M1.5,19 C2.3,14.5 5.8,11.2 10,11.2 C14.2,11.2 17.7,14.6 18.5,19.2"></path></svg></span>
         </a>
    </span>
 
@@ -139,7 +139,7 @@ export class UserMiniComponent {
     logOut(){
       if(Session.isLoggedIn()){
         Session.removeUser();
-        console.log("Try to Logout!");        
+        console.log("Try to Logout!");
         // console.log("Redirect to "+location.href);
         window.location.href = this.logOutUrl + StringUtils.URIEncode(location.href);